From 4bb60e589b5974e9a1c547ac54b88eaebd5178c2 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Mon, 23 Dec 2024 13:51:19 +0530
Subject: [PATCH] fix: remove shitty list view

---
 desk/src/components/index.ts                  |   1 -
 desk/src/components/list-view/LV.vue          | 108 ----------------
 desk/src/components/list-view/LVEmpty.vue     |  17 ---
 desk/src/components/list-view/LVHeader.vue    |  40 ------
 desk/src/components/list-view/LVLoading.vue   |  31 -----
 .../src/components/list-view/LVNavigation.vue |  36 ------
 desk/src/components/list-view/LVRow.vue       | 115 ------------------
 .../components/list-view/LVSelectionBar.vue   |  48 --------
 desk/src/components/list-view/selection.ts    |  16 ---
 desk/src/components/list-view/symbols.ts      |  16 ---
 desk/src/components/list-view/types.ts        |   6 -
 11 files changed, 434 deletions(-)
 delete mode 100644 desk/src/components/list-view/LV.vue
 delete mode 100644 desk/src/components/list-view/LVEmpty.vue
 delete mode 100644 desk/src/components/list-view/LVHeader.vue
 delete mode 100644 desk/src/components/list-view/LVLoading.vue
 delete mode 100644 desk/src/components/list-view/LVNavigation.vue
 delete mode 100644 desk/src/components/list-view/LVRow.vue
 delete mode 100644 desk/src/components/list-view/LVSelectionBar.vue
 delete mode 100644 desk/src/components/list-view/selection.ts
 delete mode 100644 desk/src/components/list-view/symbols.ts
 delete mode 100644 desk/src/components/list-view/types.ts

diff --git a/desk/src/components/index.ts b/desk/src/components/index.ts
index edc4b21a5..339ab9153 100644
--- a/desk/src/components/index.ts
+++ b/desk/src/components/index.ts
@@ -1,7 +1,6 @@
 export { default as AttachmentItem } from "./AttachmentItem.vue";
 export { default as CommandPalette } from "./command-palette/CP.vue";
 export { default as HCard } from "./HCard.vue";
-export { default as ListView } from "./list-view/LV.vue";
 export { default as NestedPopover } from "./NestedPopover.vue";
 export { default as Notifications } from "./notifications/Notifications.vue";
 export { default as PageTitle } from "./PageTitle.vue";
diff --git a/desk/src/components/list-view/LV.vue b/desk/src/components/list-view/LV.vue
deleted file mode 100644
index fba5e59b2..000000000
--- a/desk/src/components/list-view/LV.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div class="mt-2 flex w-full grow flex-col overflow-hidden overflow-x-auto">
-    <div
-      class="flex h-full w-max min-w-full flex-col overflow-y-hidden text-gray-900"
-    >
-      <LVEmpty v-if="!resource.data?.length" :message="emptyMsg" />
-      <LVHeader v-else />
-      <div
-        ref="body"
-        class="grow divide-y overflow-y-auto"
-        @scroll="() => handleScroll()"
-      >
-        <LVLoading v-if="resource.loading" />
-        <LVRow
-          v-for="row in resource.data"
-          v-else
-          :id="id"
-          :key="row.name"
-          :checkbox="checkbox"
-          :columns="columns"
-          :data="row"
-          :doctype="doctype"
-          :filter="filter"
-          :to="row.onClick"
-        >
-          <template v-for="(_, n) in $slots" #[n]="d">
-            <slot :name="n" v-bind="d" />
-          </template>
-        </LVRow>
-      </div>
-    </div>
-    <LVSelectionBar :data="resource.data || []">
-      <template #actions="d">
-        <slot name="actions" v-bind="d" />
-      </template>
-    </LVSelectionBar>
-  </div>
-  <LVNavigation :resource="resource" />
-</template>
-
-<script setup lang="ts">
-import { computed, provide, ref } from "vue";
-import { useRoute } from "vue-router";
-import { useDebounceFn } from "@vueuse/core";
-import { plural as pluralize } from "pluralize";
-import { Column, Resource } from "@/types";
-import {
-  CheckboxKey,
-  ColumnsKey,
-  DocTypeKey,
-  FilterKey,
-  IdKey,
-  PluralKey,
-  ResourceKey,
-  SingluarKey,
-} from "./symbols";
-import LVEmpty from "./LVEmpty.vue";
-import LVHeader from "./LVHeader.vue";
-import LVLoading from "./LVLoading.vue";
-import LVNavigation from "./LVNavigation.vue";
-import LVRow from "./LVRow.vue";
-import LVSelectionBar from "./LVSelectionBar.vue";
-
-interface P {
-  columns: Column[];
-  doctype: string;
-  resource: Resource<Array<Record<string, unknown>>>;
-  checkbox?: boolean;
-  filter?: boolean;
-}
-
-const props = withDefaults(defineProps<P>(), {
-  checkbox: false,
-  filter: false,
-});
-
-const route = useRoute();
-const body = ref<HTMLElement | null>(null);
-const singular = computed(() => {
-  return props.doctype.replace("HD ", "").toLowerCase().trim();
-});
-const plural = computed(() => {
-  return pluralize(singular.value);
-});
-const emptyMsg = computed(() => {
-  return `No ${plural.value} found`;
-});
-const id = computed(() => {
-  return route.path + "_" + props.doctype;
-});
-const handleScroll = useDebounceFn(() => {
-  if (!props.resource.hasNextPage) return;
-  const bodyHeight = body.value.scrollHeight;
-  const bodyTop = body.value.scrollTop;
-  const containerHeight = body.value.clientHeight;
-  const scrollPercentage = (bodyTop / (bodyHeight - containerHeight)) * 100;
-  if (scrollPercentage >= 90) props.resource.next();
-}, 500);
-
-provide(CheckboxKey, props.checkbox);
-provide(ColumnsKey, props.columns);
-provide(DocTypeKey, props.doctype);
-provide(FilterKey, props.filter);
-provide(IdKey, id.value);
-provide(PluralKey, plural);
-provide(ResourceKey, props.resource);
-provide(SingluarKey, singular);
-</script>
diff --git a/desk/src/components/list-view/LVEmpty.vue b/desk/src/components/list-view/LVEmpty.vue
deleted file mode 100644
index 82ec350ed..000000000
--- a/desk/src/components/list-view/LVEmpty.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div
-    class="flex h-full w-full items-center justify-center text-base text-gray-700"
-  >
-    <EmptyMessage :message="message" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import EmptyMessage from "../EmptyMessage.vue";
-
-interface P {
-  message: string;
-}
-
-defineProps<P>();
-</script>
diff --git a/desk/src/components/list-view/LVHeader.vue b/desk/src/components/list-view/LVHeader.vue
deleted file mode 100644
index 00ad57645..000000000
--- a/desk/src/components/list-view/LVHeader.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="mx-5 rounded bg-gray-100 px-2.5 py-2 text-sm text-gray-600">
-    <div class="flex w-full items-center gap-2">
-      <FormControl
-        v-if="checkbox"
-        type="checkbox"
-        :model-value="resource.data?.length === selection.storage.size"
-        @update:model-value="toggle()"
-      />
-      <div v-for="c in columns" :key="c.key">
-        <div v-if="!hiddenColumns.has(c.key)" :class="[c.width]">
-          <span :class="[c.align]">
-            {{ c.label }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { useColumns } from "@/composables/columns";
-import { selection } from "./selection";
-import { CheckboxKey, ColumnsKey, DocTypeKey, ResourceKey } from "./symbols";
-
-const checkbox = inject(CheckboxKey);
-const columns = inject(ColumnsKey);
-const doctype = inject(DocTypeKey);
-const resource = inject(ResourceKey);
-const { storage: hiddenColumns } = useColumns(doctype);
-
-function toggle() {
-  if (selection.storage.size === resource.data.length) {
-    selection.storage.clear();
-    return;
-  }
-  resource.data.forEach((d) => selection.storage.add(d.name));
-}
-</script>
diff --git a/desk/src/components/list-view/LVLoading.vue b/desk/src/components/list-view/LVLoading.vue
deleted file mode 100644
index eb8c23fea..000000000
--- a/desk/src/components/list-view/LVLoading.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="animate-pulse divide-y overflow-y-auto px-2.5">
-    <div
-      v-for="i in 20"
-      :key="i"
-      class="flex h-10 w-full items-center space-x-2 px-5"
-    >
-      <div v-if="checkbox" class="h-3.5 w-3.5 rounded-sm bg-gray-200" />
-      <div
-        v-for="c in columns"
-        :key="c.key"
-        class="flex items-center space-x-2"
-      >
-        <div v-if="!hiddenColumns.has(c.key)" :class="[c.width]">
-          <div class="h-4 rounded-sm bg-gray-200" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { useColumns } from "@/composables/columns";
-import { CheckboxKey, ColumnsKey, IdKey } from "./symbols";
-
-const checkbox = inject(CheckboxKey);
-const columns = inject(ColumnsKey);
-const id = inject(IdKey);
-const { storage: hiddenColumns } = useColumns(id);
-</script>
diff --git a/desk/src/components/list-view/LVNavigation.vue b/desk/src/components/list-view/LVNavigation.vue
deleted file mode 100644
index 9ef6ed398..000000000
--- a/desk/src/components/list-view/LVNavigation.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="flex items-center justify-between border-t px-5 py-2">
-    <TabButtons
-      :buttons="pageLengthOptions.map((o) => ({ label: o }))"
-      :model-value="resource.pageLength"
-      @update:model-value="
-        (val) => {
-          resource.update({
-            pageLength: val,
-          });
-          resource.reload();
-        }
-      "
-    />
-    <span class="flex items-center">
-      <LucideLoader2
-        v-if="resource.list.loading"
-        class="mr-2 inline h-4 w-4 animate-spin"
-      />
-      <span v-if="resource.data?.length" class="space-x-1 text-base">
-        <span class="text-gray-900">{{ resource.data?.length }}</span>
-        <span class="text-gray-700">of</span>
-        <span class="text-gray-900">{{ resource.totalCount }}</span>
-      </span>
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { TabButtons } from "frappe-ui";
-import { ResourceKey } from "./symbols";
-
-const pageLengthOptions = [20, 50, 500] as const;
-const resource = inject(ResourceKey);
-</script>
diff --git a/desk/src/components/list-view/LVRow.vue b/desk/src/components/list-view/LVRow.vue
deleted file mode 100644
index d0217c44c..000000000
--- a/desk/src/components/list-view/LVRow.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <div
-    class="group mx-5 flex h-10 items-center gap-2 whitespace-nowrap px-2.5 text-base"
-    :class="{
-      'bg-blue-100': selection.storage.has(data.name),
-      'hover:bg-blue-200': selection.storage.has(data.name),
-      'hover:bg-gray-100': !selection.storage.has(data.name),
-      'cursor-pointer': !!data.onClick,
-      ...data.class,
-    }"
-  >
-    <FormControl
-      v-if="checkbox"
-      type="checkbox"
-      :model-value="selection.storage.has(data.name)"
-      @update:model-value="selection.toggle(data.name)"
-    />
-    <component
-      :is="isFunction(data.onClick) ? 'span' : RouterLink"
-      as="template"
-      :to="data.onClick"
-      class="flex w-full items-center gap-2"
-      @click="
-        (event) => {
-          if (isFunction(data.onClick)) {
-            event.preventDefault();
-            data.onClick();
-          }
-        }
-      "
-    >
-      <div
-        v-for="c in columns"
-        :key="c.key"
-        :class="{
-          'text-gray-800': data[c.key],
-          'text-gray-300': !data[c.key],
-        }"
-      >
-        <div v-if="!hiddenColumns.has(c.key)" :class="[c.width]">
-          <div
-            class="w-max max-w-full truncate"
-            :class="[c.align, c.text]"
-            @click="(event) => filterFunc(event, c)"
-          >
-            <slot :name="c.key" :data="data">
-              {{ data[c.key] || "⸺" }}
-            </slot>
-          </div>
-        </div>
-      </div>
-    </component>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { RouterLink } from "vue-router";
-import { FormControl } from "frappe-ui";
-import { isFunction } from "lodash";
-import { Column } from "@/types";
-import { getAssign } from "@/utils";
-import { useFieldsStore } from "@/stores/fields";
-import { useColumns } from "@/composables/columns";
-import { useFilter } from "@/composables/filter";
-import { selection } from "./selection";
-import { CheckboxKey, ColumnsKey, DocTypeKey } from "./symbols";
-
-interface I {
-  name: string;
-  class?: Record<string, string>;
-  onClick?: () => void;
-  [key: string]: unknown;
-}
-
-interface P {
-  data: I;
-}
-
-const checkbox = inject(CheckboxKey);
-const columns = inject(ColumnsKey);
-const doctype = inject(DocTypeKey);
-const props = defineProps<P>();
-const { storage: hiddenColumns } = useColumns(doctype);
-const fieldsStore = useFieldsStore();
-const filter = useFilter(doctype);
-
-async function filterFunc(event: InputEvent, c: Column) {
-  if (!doctype) return;
-  await fieldsStore.fetch(doctype);
-  fieldsStore
-    .get(doctype)
-    .filter((field) => ["Link", "Select"].includes(field.fieldtype))
-    .filter((field) => field.fieldname === c.key)
-    .map((field) => {
-      let val = props.data[c.key] as string;
-      if (field.fieldname === "_assign") {
-        val = getAssign(val);
-      }
-      return {
-        fieldname: field.fieldname,
-        label: field.label,
-        operator: "is",
-        value: val,
-      };
-    })
-    .filter((field) => field.value)
-    .forEach((field) => {
-      event.preventDefault();
-      event.stopPropagation();
-      filter.add(field);
-      filter.apply();
-    });
-}
-</script>
diff --git a/desk/src/components/list-view/LVSelectionBar.vue b/desk/src/components/list-view/LVSelectionBar.vue
deleted file mode 100644
index 6145c14c0..000000000
--- a/desk/src/components/list-view/LVSelectionBar.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <transition
-    enter-active-class="duration-300 ease-out"
-    enter-from-class="transform opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-200 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="transform opacity-0"
-  >
-    <div
-      v-if="selection.storage.size"
-      class="fixed inset-x-0 bottom-6 mx-auto flex w-max items-center gap-1 rounded bg-white p-1 text-base shadow"
-    >
-      <div class="inline-block w-64 pl-2 align-middle text-gray-900">
-        {{ selection.storage.size }}
-        {{ selection.storage.size < 2 ? singular : plural }} selected
-      </div>
-      <span class="space-x-2">
-        <slot name="actions" :selection="selection.storage" />
-      </span>
-      <div class="text-gray-300">&#x007C;</div>
-      <Button
-        :disabled="resource.data?.length === selection.storage.size"
-        label="Select all"
-        variant="ghost"
-        @click="toggle()"
-      />
-    </div>
-  </transition>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { PluralKey, ResourceKey, SingluarKey } from "./symbols";
-import { selection } from "./selection";
-
-const resource = inject(ResourceKey);
-const singular = inject(SingluarKey);
-const plural = inject(PluralKey);
-
-function toggle() {
-  if (selection.storage.size === resource.data?.length) {
-    selection.storage.clear();
-    return;
-  }
-  resource.data.forEach((d) => selection.storage.add(d.name));
-}
-</script>
diff --git a/desk/src/components/list-view/selection.ts b/desk/src/components/list-view/selection.ts
deleted file mode 100644
index fc77c7e5c..000000000
--- a/desk/src/components/list-view/selection.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { reactive } from "vue";
-import { Action, Key } from "./types";
-
-export const selection = reactive({
-  storage: new Set<Key>(),
-  actions: new Set<Action>(),
-  toggle: (key: Key) => {
-    if (!selection.storage.delete(key)) {
-      selection.storage.add(key);
-    }
-  },
-  reset: () => {
-    selection.storage.clear();
-    selection.actions.clear();
-  },
-});
diff --git a/desk/src/components/list-view/symbols.ts b/desk/src/components/list-view/symbols.ts
deleted file mode 100644
index b3f6d269e..000000000
--- a/desk/src/components/list-view/symbols.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { InjectionKey, Ref } from "vue";
-import { Resource, Column } from "@/types";
-
-type I = {
-  name: string;
-  [key: string]: unknown;
-};
-type R = Resource<Array<I>>;
-export const CheckboxKey: InjectionKey<boolean> = Symbol("Checkbox");
-export const ColumnsKey: InjectionKey<Array<Column>> = Symbol("Columns");
-export const DocTypeKey: InjectionKey<string> = Symbol("DocType");
-export const FilterKey: InjectionKey<boolean> = Symbol("Filter");
-export const IdKey: InjectionKey<string> = Symbol("Id");
-export const PluralKey: InjectionKey<Ref<string>> = Symbol("Plural");
-export const ResourceKey: InjectionKey<R> = Symbol("Resource");
-export const SingluarKey: InjectionKey<Ref<string>> = Symbol("Singular");
diff --git a/desk/src/components/list-view/types.ts b/desk/src/components/list-view/types.ts
deleted file mode 100644
index 4f67ee37f..000000000
--- a/desk/src/components/list-view/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type Selection = Set<string>;
-export type Key = string;
-export type Action = {
-  label: string;
-  onClick: (key: Key[]) => void;
-};