chore: convert composable to a pinia store

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

@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { useData } from "./data";
+import { useTicketListStore } from "./data";
 
-const { tickets } = useData();
+const { tickets } = useTicketListStore();
 </script>

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

@@ -24,11 +24,11 @@
 <script setup lang="ts">
 import { Popover } from "frappe-ui";
 import { keys } from "lodash";
-import { useData } from "./data";
+import { useTicketListStore } from "./data";
 import MinimalSwitch from "@/components/MinimalSwitch.vue";
 import IconAdd from "~icons/espresso/add";
 
-const { columns } = useData();
+const { columns } = useTicketListStore();
 
 function toggleColumn(column: string) {
  columns[column] = !columns[column];

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

@@ -129,7 +129,7 @@ import { AGENT_PORTAL_TICKET } from "@/router";
 import { useTicketStatusStore } from "@/stores/ticketStatus";
 import { useTicketPriorityStore } from "@/stores/ticketPriority";
 import { createToast } from "@/utils/toasts";
-import { useData } from "./data";
+import { useTicketListStore } from "./data";
 import AssignedInfo from "./AssignedInfo.vue";
 import TicketSummary from "./TicketSummary.vue";
 import ColumnSelector from "./ColumnSelector.vue";
@@ -142,11 +142,11 @@ const { copy } = useClipboard();
 const ticketPriorityStore = useTicketPriorityStore();
 const ticketStatusStore = useTicketStatusStore();
 const { selected, tickets, toggleOne, selectAll, deselectAll, columns } =
- useData();
+ useTicketListStore();
 
 const dateFormat = "D/M/YYYY h:mm A";
 const allSelected = computed(() => {
- return tickets.list?.data?.length === selected.value.size;
+ return tickets.list?.data?.length === selected.size;
 });
 
 function toggleAllSelected(checked: boolean) {

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

@@ -52,14 +52,14 @@ import { computed } from "vue";
 import { createResource, Dropdown, FeatherIcon } from "frappe-ui";
 import { useAgentStore } from "@/stores/agent";
 import { createToast } from "@/utils/toasts";
-import { useData } from "./data";
+import { useTicketListStore } from "./data";
 
 const agentStore = useAgentStore();
-const { selected, selectAll, deselectAll } = useData();
+const { selected, selectAll, deselectAll } = useTicketListStore();
 
 const ticketsSelectedText = computed(() => {
  /** Number of selected items */
- const n = selected.value.size;
+ const n = selected.size;
 
  /** Singular or Plural */
  const s = n > 1 ? "Tickets" : "Ticket";
@@ -90,7 +90,7 @@ const assignOpts = computed(() =>
  label: a.agent_name,
  handler: () =>
  bulkAssignTicketToAgent.submit({
- ticket_ids: Array.from(selected.value),
+ ticket_ids: Array.from(selected),
  agent_id: a.name,
  }),
  }))

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

@@ -16,14 +16,14 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from "vue";
-import { useData } from "./data";
+import { useTicketListStore } from "./data";
 import ListHeader from "./ListHeader.vue";
 import TopSection from "./TopSection.vue";
 import BottomSection from "./BottomSection.vue";
 import SelectionBar from "./SelectionBar.vue";
 import MainTable from "./MainTable.vue";
 
-const { init, deinit, tickets } = useData();
+const { init, deinit, tickets } = useTicketListStore();
 const isEmptyMessage =
  "🎉 Great news! There are currently no tickets to display. Keep up the good work!";
 

desk/src/pages/desk/ticket-list/data.ts

@@ -1,8 +1,9 @@
-import { ref, reactive } from "vue";
+import { ref, reactive, Ref } from "vue";
+import { defineStore } from "pinia";
 import { useKeymapStore } from "@/stores/keymap";
 import { createListManager } from "@/composables/listManager";
 
-export function useData() {
+export const useTicketListStore = defineStore("ticketList", () => {
  const KEYMAPS = [
  {
  button: "R",
@@ -41,7 +42,7 @@ export function useData() {
  KEYMAPS.forEach((o) => keymapStore.remove([KEYMAP_PREFIX, o.button]));
  }
 
- const selected = ref(new Set());
+ const selected: Ref<Set<number>> = ref(new Set([]));
  function toggleOne(value) {
  if (!selected.value.delete(value)) {
  selected.value.add(value);
@@ -77,4 +78,4 @@ export function useData() {
  tickets,
  toggleOne,
  };
-}
+});