feat: use usePageMeta to set page title

- all main pages (accessible from sidebar)
- ticket (agent portal)

desk/src/pages/desk/AgentRoot.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="flex h-screen w-screen">
     <SideBar />
-    <RouterView :key="route.fullPath" class="z-0 grow overflow-auto" />
+    <RouterView :key="$route.fullPath" class="z-0 grow overflow-auto" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { onBeforeMount } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { useConfigStore } from "@/stores/config";
 import { CUSTOMER_PORTAL_LANDING, ONBOARDING_PAGE } from "@/router";
 import SideBar from "@/components/desk/sidebar/SideBar.vue";
 
-const route = useRoute();
 const router = useRouter();
 const authStore = useAuthStore();
 const configStore = useConfigStore();

desk/src/pages/desk/DeskDashboard.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { createResource, Tooltip } from "frappe-ui";
+import { createResource, usePageMeta, Tooltip } from "frappe-ui";
 import { isEmpty } from "lodash";
 import PageTitle from "@/components/PageTitle.vue";
 import LineChart from "@/components/charts/LineChart.vue";
@@ -63,4 +63,10 @@ const items = createResource({
 
 const dateInfo =
   "📊 The information displayed in these charts are derived from data collected over the past 30 days";
+
+usePageMeta(() => {
+  return {
+    title: "Dashboard",
+  };
+});
 </script>

desk/src/pages/desk/agent/AgentList.vue

@@ -51,7 +51,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import { Avatar, Badge } from "frappe-ui";
+import { usePageMeta, Avatar, Badge } from "frappe-ui";
 import { AGENT_PORTAL_TICKET_LIST } from "@/router";
 import { createListManager } from "@/composables/listManager";
 import { useFilter } from "@/composables/filter";
@@ -101,6 +101,12 @@ const agents = createListManager({
   },
 });
 
+usePageMeta(() => {
+  return {
+    title: "Agents",
+  };
+});
+
 function toTickets(user: string) {
   storage.value.clear();
   storage.value.add({

desk/src/pages/desk/canned_response/CannedResponseList.vue

@@ -30,6 +30,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
+import { usePageMeta } from "frappe-ui";
 import { AGENT_PORTAL_CANNED_RESPONSE_SINGLE } from "@/router";
 import { createListManager } from "@/composables/listManager";
 import PageTitle from "@/components/PageTitle.vue";
@@ -69,4 +70,10 @@ const responses = createListManager({
     return data;
   },
 });
+
+usePageMeta(() => {
+  return {
+    title: "Canned responses",
+  };
+});
 </script>

desk/src/pages/desk/contact/ContactList.vue

@@ -40,7 +40,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import { Avatar } from "frappe-ui";
+import { usePageMeta, Avatar } from "frappe-ui";
 import { createListManager } from "@/composables/listManager";
 import NewContactDialog from "@/components/desk/global/NewContactDialog.vue";
 import PageTitle from "@/components/PageTitle.vue";
@@ -83,6 +83,12 @@ const contacts = createListManager({
   },
 });
 
+usePageMeta(() => {
+  return {
+    title: "Contacts",
+  };
+});
+
 function openContact(id: string) {
   selectedContact.value = id;
   isContactDialogVisible.value = true;

desk/src/pages/desk/customer/CustomerList.vue

@@ -43,7 +43,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import { Avatar } from "frappe-ui";
+import { usePageMeta, Avatar } from "frappe-ui";
 import { createListManager } from "@/composables/listManager";
 import NewCustomerDialog from "@/components/desk/global/NewCustomerDialog.vue";
 import PageTitle from "@/components/PageTitle.vue";
@@ -81,6 +81,12 @@ const customers = createListManager({
   },
 });
 
+usePageMeta(() => {
+  return {
+    title: "Customers",
+  };
+});
+
 function openCustomer(id: string) {
   selectedCustomer.value = id;
   isCustomerDialogVisible.value = true;

desk/src/pages/desk/email/EmailList.vue

@@ -50,7 +50,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Badge, FormControl } from "frappe-ui";
+import { usePageMeta, Badge, FormControl } from "frappe-ui";
 import { AGENT_PORTAL_EMAIL_NEW, AGENT_PORTAL_EMAIL_SINGLE } from "@/router";
 import { createListManager } from "@/composables/listManager";
 import PageTitle from "@/components/PageTitle.vue";
@@ -111,4 +111,10 @@ const accounts = createListManager({
     return data;
   },
 });
+
+usePageMeta(() => {
+  return {
+    title: "Email accounts",
+  };
+});
 </script>

desk/src/pages/desk/escalation/EscalationRuleList.vue

@@ -43,7 +43,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import { Badge } from "frappe-ui";
+import { usePageMeta, Badge } from "frappe-ui";
 import { socket } from "@/socket";
 import { createListManager } from "@/composables/listManager";
 import { ListView } from "@/components";
@@ -84,6 +84,12 @@ const rules = createListManager({
   auto: true,
 });
 
+usePageMeta(() => {
+  return {
+    title: "Escalation rules",
+  };
+});
+
 function openDialog(rule: string | null) {
   selectedRule.value = rule;
   showDialog.value = true;

desk/src/pages/desk/sla/SlaList.vue

@@ -33,7 +33,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Badge } from "frappe-ui";
+import { usePageMeta, Badge } from "frappe-ui";
 import { AGENT_PORTAL_SLA_NEW, AGENT_PORTAL_SLA_SINGLE } from "@/router";
 import { createListManager } from "@/composables/listManager";
 import PageTitle from "@/components/PageTitle.vue";
@@ -76,4 +76,10 @@ const policies = createListManager({
     return data;
   },
 });
+
+usePageMeta(() => {
+  return {
+    title: "Support policies",
+  };
+});
 </script>

desk/src/pages/desk/team/TeamList.vue

@@ -51,7 +51,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useRouter } from "vue-router";
-import { createResource, Dialog, FormControl } from "frappe-ui";
+import { createResource, usePageMeta, Dialog, FormControl } from "frappe-ui";
 import { isEmpty } from "lodash";
 import { AGENT_PORTAL_TEAM_SINGLE } from "@/router";
 import { createListManager } from "@/composables/listManager";
@@ -119,4 +119,10 @@ const newTeam = createResource({
   },
   onError: useError({ title: "Error creating team" }),
 });
+
+usePageMeta(() => {
+  return {
+    title: "Teams",
+  };
+});
 </script>

desk/src/pages/desk/ticket-list/TicketList.vue

@@ -50,7 +50,13 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { createResource, Button, Dialog, Dropdown } from "frappe-ui";
+import {
+  createResource,
+  usePageMeta,
+  Button,
+  Dialog,
+  Dropdown,
+} from "frappe-ui";
 import { Icon } from "@iconify/vue";
 import { AGENT_PORTAL_TICKET } from "@/router";
 import { socket } from "@/socket";
@@ -198,4 +204,10 @@ const columns = [
     width: "w-36",
   },
 ];
+
+usePageMeta(() => {
+  return {
+    title: "Tickets",
+  };
+});
 </script>

desk/src/pages/desk/ticket/TicketSingle.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, toRef } from "vue";
-import { createResource } from "frappe-ui";
+import { createResource, usePageMeta } from "frappe-ui";
 import { emitter } from "@/emitter";
 import { socket } from "@/socket";
 import ConversationBox from "./ConversationBox.vue";
@@ -68,4 +68,10 @@ onBeforeUnmount(() => {
   events.forEach((e) => socket.off(e));
   ticket.value = null;
 });
+
+usePageMeta(() => {
+  return {
+    title: ticket.value.data.subject,
+  };
+});
 </script>

desk/src/pages/desk/ticket_type/TicketTypeList.vue

@@ -22,6 +22,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { usePageMeta } from "frappe-ui";
 import {
   AGENT_PORTAL_TICKET_TYPE_NEW,
   AGENT_PORTAL_TICKET_TYPE_SINGLE,
@@ -62,4 +63,10 @@ const ticketTypes = createListManager({
     return data;
   },
 });
+
+usePageMeta(() => {
+  return {
+    title: "Ticket types",
+  };
+});
 </script>

desk/src/pages/knowledge-base/KnowledgeBase.vue

@@ -3,7 +3,7 @@
     <PageTitle title="Knowledge base" />
     <div class="flex grow border-t">
       <KnowledgeBaseSidebar />
-      <RouterView :key="route.fullPath" v-slot="{ Component }">
+      <RouterView :key="$route.fullPath" v-slot="{ Component }">
         <component :is="Component" v-if="Component" />
         <EmptyMessage v-else message="Select a category" />
       </RouterView>
@@ -12,10 +12,14 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from "vue-router";
+import { usePageMeta } from "frappe-ui";
 import PageTitle from "@/components/PageTitle.vue";
 import EmptyMessage from "@/components/EmptyMessage.vue";
 import KnowledgeBaseSidebar from "./KnowledgeBaseSidebar.vue";
 
-const route = useRoute();
+usePageMeta(() => {
+  return {
+    title: "Knowledge base",
+  };
+});
 </script>