From 1848e474b069d4a9f626b3f7cce6d3238f585902 Mon Sep 17 00:00:00 2001
From: Sumit Bhanushali <sumit.bhanushali63@gmail.com>
Date: Tue, 21 May 2024 09:13:14 +0530
Subject: [PATCH] redesign: canned response

---
 .../canned-response/CannedResponseModal.vue   |  93 +++++++++++
 desk/src/components/canned-response/index.js  |   1 +
 desk/src/pages/CannedResponses.vue            | 147 ++++++++++++++----
 desk/src/utils.ts                             |   9 +-
 .../hd_canned_response.json                   |  12 +-
 .../hd_canned_response/hd_canned_response.py  |  36 ++++-
 6 files changed, 262 insertions(+), 36 deletions(-)
 create mode 100644 desk/src/components/canned-response/CannedResponseModal.vue

diff --git a/desk/src/components/canned-response/CannedResponseModal.vue b/desk/src/components/canned-response/CannedResponseModal.vue
new file mode 100644
index 000000000..3f43ee3e9
--- /dev/null
+++ b/desk/src/components/canned-response/CannedResponseModal.vue
@@ -0,0 +1,93 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      size: 'xl',
+      actions: [
+        {
+          label: !isNew ? 'Update' : 'Create',
+          variant: 'solid',
+          onClick: () => updateItem(),
+        },
+      ],
+    }"
+  >
+    <template #body-title>
+      <div class="flex items-center gap-3">
+        <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+          {{ !isNew ? "Edit Canned Response" : "Create Canned Response" }}
+        </h3>
+      </div>
+    </template>
+    <template #body-content>
+      <div class="flex flex-col gap-4">
+        <div>
+          <div class="mb-1.5 text-sm text-gray-600">{{ "Title" }}</div>
+          <TextInput
+            v-model="title"
+            variant="outline"
+            :placeholder="'Customer Query Resolved'"
+          />
+        </div>
+        <div>
+          <div class="mb-1.5 text-sm text-gray-600">{{ "Message" }}</div>
+          <TextEditor
+            ref="content"
+            variant="outline"
+            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
+            :bubble-menu="true"
+            :content="message"
+            :placeholder="'Your query has been resolved. Thank you for reaching out.'"
+            @change="(val) => (message = val)"
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref, defineModel } from "vue";
+import { TextEditor, call, TextInput } from "frappe-ui";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  isNew: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const show = defineModel();
+const title = defineModel("title");
+const message = defineModel("message");
+const emit = defineEmits(["update"]);
+
+async function updateItem() {
+  if (props.name) {
+    await call("frappe.client.set_value", {
+      doctype: "HD Canned Response",
+      name: props.name,
+      fieldname: {
+        title: title.value,
+        message: message.value,
+      },
+    });
+  } else {
+    await call("frappe.client.insert", {
+      doc: {
+        doctype: "HD Canned Response",
+        title: title.value,
+        message: message.value,
+      },
+    });
+  }
+  emit("update");
+  show.value = false;
+}
+</script>
diff --git a/desk/src/components/canned-response/index.js b/desk/src/components/canned-response/index.js
index af2f285aa..671875525 100644
--- a/desk/src/components/canned-response/index.js
+++ b/desk/src/components/canned-response/index.js
@@ -1,2 +1,3 @@
 export { default as AddNewCannedResponseDialog } from "./AddNewCannedResponseDialog.vue";
 export { default as CannedResponseInfo } from "./CannedResponseInfo.vue";
+export { default as CannedResponseModal } from "./CannedResponseModal.vue";
diff --git a/desk/src/pages/CannedResponses.vue b/desk/src/pages/CannedResponses.vue
index 56f266b53..434ac00cb 100644
--- a/desk/src/pages/CannedResponses.vue
+++ b/desk/src/pages/CannedResponses.vue
@@ -9,7 +9,13 @@
           label="Create"
           theme="gray"
           variant="solid"
-          @click="showNewDialog = true"
+          @click="
+            () => {
+              title = null;
+              message = null;
+              showNewDialog = true;
+            }
+          "
         >
           <template #prefix>
             <LucidePlus class="h-4 w-4" />
@@ -17,44 +23,114 @@
         </Button>
       </template>
     </LayoutHeader>
-    <ListView
-      class="px-5 pt-2"
-      :columns="cannedResponses?.data?.columns"
-      :rows="cannedResponses?.data?.data"
-      :options="{
-        getRowRoute: (row) => ({
-          name: 'CannedResponse',
-          params: { id: row.name },
-        }),
-        emptyState: {
-          title: 'No canned response found',
-          description: 'Create a new canned response to get started',
-          button: {
-            label: 'New Canned Responses',
-            variant: 'solid',
-            onClick: () => (showNewDialog = true),
-          },
-        },
-        selectable: true,
-        showTooltip: false,
-      }"
-    />
-    <AddNewCannedResponseDialog
-      :show="showNewDialog"
-      @close="showNewDialog = false"
+    <div class="flex-1 overflow-y-auto">
+      <div
+        v-if="cannedResponses?.data?.data?.length"
+        class="grid grid-cols-4 gap-4 px-5 pb-3"
+      >
+        <div
+          v-for="cannedResponse in cannedResponses.data.data"
+          :key="cannedResponse.name"
+          class="group flex h-56 cursor-pointer flex-col justify-between gap-2 rounded-lg border px-5 py-4 shadow-sm hover:bg-gray-50"
+          @click="editItem(cannedResponse)"
+        >
+          <div class="flex items-center justify-between">
+            <div class="truncate text-lg font-medium">
+              {{ cannedResponse.title }}
+            </div>
+            <Dropdown
+              :options="[
+                {
+                  label: 'Delete',
+                  icon: 'trash-2',
+                  onClick: () => deleteItem(cannedResponse.name),
+                },
+              ]"
+              @click.stop
+            >
+              <Button
+                icon="more-horizontal"
+                variant="ghosted"
+                class="hover:bg-white"
+              />
+            </Dropdown>
+          </div>
+          <TextEditor
+            v-if="cannedResponse.message"
+            :content="cannedResponse.message"
+            :editable="false"
+            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+            class="flex-1 overflow-hidden"
+          />
+          <div class="mt-2 flex items-center justify-between gap-2">
+            <div class="flex items-center gap-2">
+              <UserAvatar :name="cannedResponse.owner" size="xs" />
+              <div class="text-sm text-gray-800">
+                {{ getUser(cannedResponse.owner).full_name }}
+              </div>
+            </div>
+            <Tooltip
+              :text="dateFormat(cannedResponse.modified, dateTooltipFormat)"
+            >
+              <div class="text-sm text-gray-700">
+                {{ dayjs.tz(cannedResponse.modified).fromNow() }}
+              </div>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+    <CannedResponseModal
+      v-model="showNewDialog"
+      v-model:title="title"
+      v-model:message="message"
+      :name="name"
+      :is-new="name ? false : true"
+      @close="
+        () => {
+          showNewDialog = false;
+          title = null;
+          message = null;
+          name = null;
+        }
+      "
+      @update="
+        () => {
+          cannedResponses.reload();
+          showNewDialog = false;
+          title = null;
+          message = null;
+          name = null;
+        }
+      "
     />
   </div>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import { createResource, Breadcrumbs, ListView } from "frappe-ui";
-import { AddNewCannedResponseDialog } from "@/components/canned-response/";
+import {
+  createResource,
+  Breadcrumbs,
+  Dropdown,
+  TextEditor,
+  Tooltip,
+  call,
+} from "frappe-ui";
+import { CannedResponseModal } from "@/components/canned-response/";
 import { LayoutHeader } from "@/components";
+import { useUserStore } from "@/stores/user";
+import { dateFormat, dateTooltipFormat } from "@/utils";
+import { dayjs } from "@/dayjs";
+
+const { getUser } = useUserStore();
 
 const breadcrumbs = [
   { label: "Canned Responses", route: { name: "CannedResponses" } },
 ];
 
+const title = ref(null);
+const message = ref(null);
+const name = ref(null);
 const showNewDialog = ref(false);
 
 const cannedResponses = createResource({
@@ -64,4 +140,19 @@ const cannedResponses = createResource({
   },
   auto: true,
 });
+
+function editItem(cannedResponse) {
+  title.value = cannedResponse.title;
+  message.value = cannedResponse.message;
+  name.value = cannedResponse.name;
+  showNewDialog.value = true;
+}
+
+async function deleteItem(name) {
+  await call("frappe.client.delete", {
+    doctype: "HD Canned Response",
+    name,
+  });
+  cannedResponses.reload();
+}
 </script>
diff --git a/desk/src/utils.ts b/desk/src/utils.ts
index 02dc44967..f87f1e027 100644
--- a/desk/src/utils.ts
+++ b/desk/src/utils.ts
@@ -1,4 +1,4 @@
-import { useClipboard } from "@vueuse/core";
+import { useClipboard, useDateFormat } from "@vueuse/core";
 import { toast } from "frappe-ui";
 
 /**
@@ -39,3 +39,10 @@ export function getAssign(s: string): string | undefined {
   const arr = Array.isArray(assignJson) ? assignJson : [];
   return arr.slice(-1).pop();
 }
+
+export function dateFormat(date, format) {
+  const _format = format || "DD-MM-YYYY HH:mm:ss";
+  return useDateFormat(date, _format).value;
+}
+
+export const dateTooltipFormat = "ddd, MMM D, YYYY h:mm A";
diff --git a/helpdesk/helpdesk/doctype/hd_canned_response/hd_canned_response.json b/helpdesk/helpdesk/doctype/hd_canned_response/hd_canned_response.json
index e0752420e..a7ee7b463 100644
--- a/helpdesk/helpdesk/doctype/hd_canned_response/hd_canned_response.json
+++ b/helpdesk/helpdesk/doctype/hd_canned_response/hd_canned_response.json
@@ -1,7 +1,6 @@
 {
  "actions": [],
- "allow_rename": 1,
- "autoname": "field:title",
+ "autoname": "hash",
  "creation": "2022-11-03 17:19:47.135176",
  "doctype": "DocType",
  "editable_grid": 1,
@@ -25,11 +24,11 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-03-12 12:05:42.429658",
+ "modified": "2024-05-21 00:23:20.975019",
  "modified_by": "Administrator",
  "module": "Helpdesk",
  "name": "HD Canned Response",
- "naming_rule": "By fieldname",
+ "naming_rule": "Random",
  "owner": "Administrator",
  "permissions": [
   {
@@ -59,5 +58,6 @@
  ],
  "sort_field": "modified",
  "sort_order": "DESC",
- "states": []
-}
+ "states": [],
+ "title_field": "title"
+}
\ No newline at end of file
diff --git a/helpdesk/helpdesk/doctype/hd_canned_response/hd_canned_response.py b/helpdesk/helpdesk/doctype/hd_canned_response/hd_canned_response.py
index 526f523ab..16f5245ca 100644
--- a/helpdesk/helpdesk/doctype/hd_canned_response/hd_canned_response.py
+++ b/helpdesk/helpdesk/doctype/hd_canned_response/hd_canned_response.py
@@ -6,4 +6,38 @@
 
 
 class HDCannedResponse(Document):
-	pass
+	def default_list_data():
+
+		columns = [
+			{
+				'label': 'Title',
+				'type': 'Data',
+				'key': 'title',
+				'width': '5rem',
+			},
+			{
+				'label': 'Message',
+				'type': 'Text Editor',
+				'key': 'message',
+				'width': '25rem',
+			},
+			{
+				'label': 'Owner',
+				'type': 'Link',
+				'key': 'owner',
+				'width': '5rem',
+			},
+			{
+				'label': 'Modified On',
+				'type': 'Datetime',
+				'key': 'modified',
+				'width': '5rem',
+			}
+		]
+		rows = [
+			"title",
+			"message",
+			"owner",
+			"modified"
+		]
+		return {'columns': columns, 'rows': rows}