refactor: ticket list (frappe#1189)

* refactor(ui): ticket list

* feat: list manager: add `auto`

* fix: data: convert to composable

* fix: tickets: more button: change color

* fix: dropdown filters: use computed

* fix: ticket summary: cleanup

* chore: remove unused components

* fix: replace `this`

* fix: switch: add transition

* fix(ui): table items: remove vertical padding

* fix: summary: alignment

* chore: convert composable to a pinia store

* chore: re-order columns

desk/src/components/MinimalSwitch.vue

@@ -0,0 +1,30 @@
+<template>
+ <Switch
+ :class="enabled ? 'bg-gray-900' : 'bg-gray-300'"
+ class="relative inline-flex h-[16px] w-[26px] items-center rounded-full transition"
+ >
+ <span
+ :class="enabled ? 'translate-x-3' : 'translate-x-0.5'"
+ class="switch-inner inline-block rounded-full bg-white transition"
+ />
+ </Switch>
+</template>
+
+<script setup lang="ts">
+import { Switch } from "@headlessui/vue";
+
+defineProps({
+ enabled: {
+ type: Boolean,
+ required: true,
+ },
+});
+</script>
+
+<style scoped>
+.switch-inner {
+ height: 12px;
+ width: 12px;
+ box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
+}
+</style>

desk/src/composables/listManager.ts

@@ -14,6 +14,7 @@ type ListOptions = {
  pageLength?: number;
  start?: number;
  cache?: boolean | string | Array<string>;
+ auto?: boolean;
 };
 
 type MetaData = {
@@ -36,6 +37,7 @@ export function createListManager(options: ListOptions) {
  const pageLength = ref(options.pageLength);
  const start = ref(options.start);
  const cache = options.cache;
+ const auto = options.auto;
  const filterManager = useListFilters();
 
  const list = createListResource({
@@ -48,7 +50,6 @@ export function createListManager(options: ListOptions) {
  pageLength: pageLength.value,
  start: start.value,
  cache,
- auto: false,
  onSuccess() {
  meta.submit({
  doctype,
@@ -60,6 +61,13 @@ export function createListManager(options: ListOptions) {
  },
  });
 
+ list.updateArgs = () => {
+ filters.value = filterManager.queryFilters();
+ orderBy.value = filterManager.queryOrderBy();
+
+ list.reload();
+ };
+
  Object.assign(list, {
  totalCount: ref(0),
  totalPages: ref(0),
@@ -83,15 +91,10 @@ export function createListManager(options: ListOptions) {
  },
  });
 
- function updateArgs() {
- filters.value = filterManager.queryFilters();
- orderBy.value = filterManager.queryOrderBy();
-
- list.reload();
+ if (auto) {
+ list.updateArgs();
+ watch(route, list.updateArgs);
  }
 
- onMounted(updateArgs);
- watch(route, updateArgs);
-
  return list;
 }

desk/src/pages/desk/AgentRoot.vue

@@ -2,7 +2,7 @@
  <div v-if="initialized">
  <div class="flex h-screen w-screen">
  <SideBar />
- <router-view class="z-0 grow" />
+ <router-view class="z-0 grow overflow-auto" />
  </div>
  </div>
 </template>