feat(listview): add new customer portal ticket list view

frappe · Sep 29, 2024 · 54266a7 · 54266a7
1 parent 9fa4298
commit 54266a7
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 44 deletions.
diff --git a/desk/src/components/ticket/TicketsAgentList.vue b/desk/src/components/ticket/TicketsAgentList.vue
@@ -99,7 +99,7 @@
         </ListRowItem>
       </ListRow>
     </ListRows>
-    <ListSelectBanner>
+    <ListSelectBanner v-if="!isCustomerPortal">
       <template #actions="{ selections }">
         <Dropdown
           :options="[
@@ -209,13 +209,17 @@ import {
   Dropdown,
 } from "frappe-ui";
 import { MultipleAvatar, StarRating } from "@/components";
+import { useRoute } from "vue-router";
 
 const ticketStatusStore = useTicketStatusStore();
 const showExportDialog = ref(false);
 const export_type = ref("Excel");
 const export_all = ref(false);
 let selectedRows;
 
+const route = useRoute();
+const isCustomerPortal = route.meta.public;
+
 const props = defineProps({
   columns: {
     type: Array, //TODO custom types

diff --git a/desk/src/pages/TicketsAgent.vue b/desk/src/pages/TicketsAgent.vue
@@ -5,7 +5,9 @@
         <Breadcrumbs :items="breadcrumbs" />
       </template>
       <template #right-header>
-        <RouterLink :to="{ name: 'TicketAgentNew' }">
+        <RouterLink
+          :to="{ name: isCustomerPortal ? 'TicketNew' : 'TicketAgentNew' }"
+        >
           <Button label="Create" theme="gray" variant="solid">
             <template #prefix>
               <LucidePlus class="h-4 w-4" />
@@ -53,9 +55,18 @@ import { createResource, Breadcrumbs } from "frappe-ui";
 import { TicketsAgentList } from "@/components/ticket";
 import { ViewControls, LayoutHeader } from "@/components";
 import { useUserStore } from "@/stores/user";
+import { useRoute } from "vue-router";
 const { getUser } = useUserStore();
 
-const breadcrumbs = [{ label: "Tickets", route: { name: "TicketsAgent" } }];
+const route = useRoute();
+const isCustomerPortal = route.meta.public;
+
+const breadcrumbs = [
+  {
+    label: "Tickets",
+    route: { name: isCustomerPortal ? "TicketsCustomer" : "TicketsAgent" },
+  },
+];
 let storage = useStorage("tickets_agent", {
   filtersToApply: {},
   filters: [],
@@ -165,11 +176,16 @@ function updatePageLength(value) {
 }
 
 function processFieldClick(event) {
-  filters.value.push({
-    field: filterableFields.data.find((f) => f.fieldname === event.name),
-    operator: "is",
-    value: event.value,
-  });
+  const isDuplicateFilter = filters.value.find(
+    (filter) => filter.field.fieldname === event.name
+  );
+  if (!isDuplicateFilter) {
+    filters.value.push({
+      field: filterableFields.data.find((f) => f.fieldname === event.name),
+      operator: "is",
+      value: event.value,
+    });
+  }
 
   if (event.name == "_assign") {
     filtersToApply[event.name] = ["LIKE", `%${event.value}%`];
@@ -302,6 +318,7 @@ const filterableFields = createResource({
   params: {
     doctype: "HD Ticket",
     append_assign: true,
+    show_customer_portal_fields: isCustomerPortal ? true : false,
   },
   transform: (data) => {
     return data
@@ -332,6 +349,7 @@ const sortableFields = createResource({
   auto: true,
   params: {
     doctype: "HD Ticket",
+    show_customer_portal_fields: isCustomerPortal ? true : false,
   },
 });
 </script>
diff --git a/desk/src/pages/TicketsCustomer.vue b/desk/src/pages/TicketsCustomer.vue
@@ -1,37 +1,19 @@
 <template>
   <div class="flex flex-col">
-    <PageTitle title="Tickets">
-      <template #right>
-        <div class="flex gap-2">
-          <div
-            class="flex items-center justify-between text-base text-gray-700"
-          >
-            <div class="flex gap-4">
-              <Dropdown :options="dropdownOptions">
-                <template #default="{ open }">
-                  <Button
-                    :label="dropdownTitle"
-                    :icon-right="open ? 'chevron-up' : 'chevron-down'"
-                    theme="gray"
-                    variant="outline"
-                  />
-                </template>
-              </Dropdown>
-            </div>
-          </div>
-          <RouterLink
-            v-if="!configStore.preferKnowledgeBase"
-            :to="{ name: CUSTOMER_PORTAL_NEW_TICKET }"
-          >
-            <Button
-              class="bg-gray-900 text-white hover:bg-gray-800"
-              label="New ticket"
-              icon-right="plus"
-            />
-          </RouterLink>
-        </div>
+    <LayoutHeader>
+      <template #left-header>
+        <Breadcrumbs :items="breadcrumbs" />
       </template>
-    </PageTitle>
+      <template #right-header>
+        <RouterLink :to="{ name: 'TicketNew' }">
+          <Button label="New Ticket" theme="gray" variant="solid">
+            <template #prefix>
+              <LucidePlus class="h-4 w-4" />
+            </template>
+          </Button>
+        </RouterLink>
+      </template>
+    </LayoutHeader>
     <ListView
       :columns="columns"
       :resource="tickets"
@@ -98,20 +80,19 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { Dropdown, Tooltip } from "frappe-ui";
+import { Dropdown, Tooltip, Breadcrumbs } from "frappe-ui";
 import { dayjs } from "@/dayjs";
 import { useConfigStore } from "@/stores/config";
 import { useTicketStatusStore } from "@/stores/ticketStatus";
 import { createListManager } from "@/composables/listManager";
-import { CUSTOMER_PORTAL_TICKET, CUSTOMER_PORTAL_NEW_TICKET } from "@/router";
+import { CUSTOMER_PORTAL_TICKET } from "@/router";
 import { ListView } from "@/components";
-import PageTitle from "@/components/PageTitle.vue";
-
+import { ViewControls, LayoutHeader } from "@/components";
 const configStore = useConfigStore();
 const ticketStatusStore = useTicketStatusStore();
 const columns = [
   {
-    label: "#",
+    label: "ID",
     key: "name",
     width: "w-12",
   },
@@ -174,6 +155,8 @@ const tickets = createListManager({
   },
 });
 
+const breadcrumbs = [{ label: "Tickets", route: { name: "TicketsCustomer" } }];
+
 const ACTIVE_TICKET_TYPES = ["Open", "Replied"];
 const dropdownTitle = ref("All tickets");
 const dropdownOptions = [