opendesk

1<template>
2  <Dialog v-model:open="showSubjectDialog" title="Rename Subject">
3    <template #default>
4      <div class="flex flex-col flex-1 gap-3">
5        <Textarea
6          ref="subjectInput"
7          v-model="renameSubject"
8          size="sm"
9          variant="subtle"
10          :disabled="false"
11          @keydown.ctrl.enter.capture.stop="handleRename"
12          @keydown.meta.enter.capture.stop="handleRename"
13          maxlength="140"
14        />
15        <Button
16          variant="solid"
17          :loading="isLoading"
18          :label="
19            isMobileView
20              ? __('Rename')
21              : isMac
22              ? __('Rename (⌘ + ⏎)')
23              : __('Rename (Ctrl + ⏎)')
24          "
25          @click="handleRename"
26          :disabled="!isDirty"
27        />
28      </div>
29    </template>
30  </Dialog>
31</template>
32
33<script setup lang="ts">
34import { Textarea } from "frappe-ui";
35import { useDevice } from "@/composables";
36import { useScreenSize } from "@/composables/screen";
37import { TicketSymbol } from "@/types";
38import { computed, inject, nextTick, ref, watch } from "vue";
39
40const ticket = inject(TicketSymbol)!;
41const { isMac } = useDevice();
42const { isMobileView } = useScreenSize();
43const showSubjectDialog = defineModel<boolean>({ default: false });
44const renameSubject = ref(ticket.value?.doc?.subject || "");
45const isLoading = ref(false);
46const subjectInput = ref<any>(null);
47const isDirty = computed(() => {
48  return renameSubject.value !== ticket?.value?.doc?.subject;
49});
50
51watch(
52  () => showSubjectDialog.value,
53  async (val) => {
54    if (val) {
55      renameSubject.value = ticket?.value?.doc?.subject || "";
56      await nextTick();
57      subjectInput.value?.focus();
58    }
59  }
60);
61
62function handleRename() {
63  if (!isDirty.value) return;
64  isLoading.value = true;
65  ticket.value.setValue.submit(
66    {
67      subject: renameSubject.value,
68    },
69    {
70      onSuccess() {
71        isLoading.value = false;
72        showSubjectDialog.value = false;
73      },
74    }
75  );
76}
77</script>
78
79<style scoped></style>
80