feat: generic DocField filter

desk/src/components/FieldFilter.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    v-for="f in storage"
+    :key="f.field.fieldname"
+    class="flex items-center text-base"
+  >
+    <div class="rounded-l border-y border-l px-2 py-1.5 text-gray-800">
+      {{ f.field.label }}
+    </div>
+    <Dropdown :options="getOperators(f)">
+      <div class="cursor-pointer border-y px-2 py-1.5 text-gray-700">
+        {{ f.operator }}
+      </div>
+    </Dropdown>
+    <component :is="getValSelect(f)" class="border" />
+    <div
+      class="cursor-pointer rounded-r border-y border-r p-1.5 text-gray-800"
+      @click="
+        () => {
+          storage.delete(f);
+          if (!storage.size) setQuery();
+        }
+      "
+    >
+      <Icon icon="lucide:x" class="h-4 w-4" />
+    </div>
+  </div>
+  <Dropdown :options="optionsField">
+    <template #default>
+      <Button
+        :label="storage.size ? 'Add more' : 'Add filter'"
+        theme="gray"
+        variant="outline"
+      >
+        <template #prefix>
+          <Icon
+            :icon="storage.size ? 'lucide:plus' : 'lucide:list-filter'"
+            class="h-4 w-4"
+          />
+        </template>
+      </Button>
+    </template>
+  </Dropdown>
+  <Button
+    v-if="storage.size"
+    label="Apply"
+    theme="gray"
+    variant="outline"
+    @click="setQuery()"
+  >
+    <template #prefix>
+      <Icon icon="lucide:check" class="h-4 w-4" />
+    </template>
+  </Button>
+  <Button
+    v-if="storage.size"
+    label="Clear"
+    theme="gray"
+    variant="outline"
+    @click="
+      () => {
+        storage.clear();
+        setQuery();
+      }
+    "
+  >
+    <template #prefix>
+      <Icon icon="lucide:x" class="h-4 w-4" />
+    </template>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { computed, h } from "vue";
+import { createResource, Button, Dropdown, FormControl } from "frappe-ui";
+import { Icon } from "@iconify/vue";
+import { DocField, Filter, Resource } from "@/types";
+import { useFilter } from "@/composables/filter";
+import SearchComplete from "./SearchComplete.vue";
+
+interface P {
+  doctype: string;
+  appendAssign?: boolean;
+}
+
+const props = withDefaults(defineProps<P>(), {
+  appendAssign: false,
+});
+
+const fields: Resource<Array<DocField>> = createResource({
+  url: "helpdesk.api.doc.get_filterable_fields",
+  makeParams: () => ({
+    doctype: props.doctype,
+    append_assign: props.appendAssign,
+  }),
+  cache: ["DocField", props.doctype],
+  auto: true,
+});
+
+const { setQuery, storage } = useFilter(() => fields.data);
+const typeCheck = ["Check"];
+const typeLink = ["Link"];
+const typeNumber = ["Float", "Int"];
+const typeSelect = ["Select"];
+const typeString = ["Data", "Long Text", "Small Text", "Text Editor", "Text"];
+
+const optionsField = computed(() =>
+  fields.data
+    ?.map((f) => ({
+      label: f.label,
+      onClick: () =>
+        storage.value.add({
+          field: f,
+          fieldname: f.fieldname,
+          operator: "equals",
+          value: getDefaultValue(f),
+        }),
+    }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+);
+
+function getOperators(f: Filter) {
+  const fieldtype = f.field.fieldtype;
+  let ops = [];
+  if (typeString.includes(fieldtype) || typeNumber.includes(fieldtype)) {
+    ops.push(...["equals", "not equals", "Like", "not like"]);
+  }
+  if (typeNumber.includes(fieldtype)) {
+    ops.push(...["<", ">", "<=", ">=", "equals", "not equals"]);
+  }
+  if (typeSelect.includes(fieldtype) || typeLink.includes(fieldtype)) {
+    ops.push(...["is", "is not"]);
+  }
+  return ops.map((o) => ({
+    label: o,
+    onClick: () => (f.operator = o),
+  }));
+}
+
+function getSelectOptions(f: DocField) {
+  return f.options.split("\n");
+}
+
+function getDefaultValue(f: DocField) {
+  if (typeSelect.includes(f.fieldtype)) {
+    return getSelectOptions(f).slice(1).pop();
+  }
+  if (typeCheck.includes(f.fieldtype)) {
+    return "Yes";
+  }
+  return "";
+}
+
+function getValSelect(f: Filter) {
+  const fieldtype = f.field.fieldtype;
+  const options = f.field.options;
+  if (typeString.includes(fieldtype) || typeNumber.includes(fieldtype)) {
+    return h(FormControl, {
+      type: "text",
+      class: "bg-gray-100",
+      placeholder: f.value,
+      onChange: (e) => (f.value = e.target.value),
+    });
+  }
+  if (typeSelect.includes(fieldtype)) {
+    return h(Dropdown, {
+      options: getSelectOptions(f.field).map((o) => ({
+        label: o,
+        onClick: () => (f.value = o),
+      })),
+      button: {
+        label: f.value,
+      },
+      class: "bg-gray-100",
+    });
+  }
+  if (typeLink.includes(fieldtype)) {
+    return h(SearchComplete, {
+      doctype: options,
+      class: "bg-gray-100",
+      value: f.value,
+      onChange: (v) => (f.value = v.value),
+    });
+  }
+  if (typeCheck.includes(fieldtype)) {
+    return h(Dropdown, {
+      options: ["Yes", "No"].map((o) => ({
+        label: o,
+        onClick: () => (f.value = o),
+      })),
+      button: {
+        label: f.value,
+      },
+      class: "bg-gray-100",
+    });
+  }
+}
+</script>

desk/src/composables/filter.ts

@@ -0,0 +1,107 @@
+import { ref, watchEffect, Ref } from "vue";
+import { useRoute, useRouter, RouteLocationNamedRaw } from "vue-router";
+import { toValue } from "@vueuse/core";
+import { DocField, Filter } from "@/types";
+import { useAuthStore } from "@/stores/auth";
+
+const operatorMap = {
+  is: "=",
+  "is not": "!=",
+  equals: "=",
+  "not equals": "!=",
+  yes: true,
+  no: false,
+  like: "LIKE",
+  "not like": "NOT LIKE",
+  ">": ">",
+  "<": "<",
+  ">=": ">=",
+  "<=": "<=",
+};
+
+export function useFilter(fields?: DocField[] | Ref<DocField[]>) {
+  const route = useRoute();
+  const router = useRouter();
+  const { userId } = useAuthStore();
+  const storage = ref(new Set<Filter>());
+
+  watchEffect(() => {
+    const f__ = toValue(fields);
+    if (fields && !f__) return;
+    storage.value = new Set();
+    const q = (route.query.q as string) || "";
+    q.split(" ")
+      .map((f) => {
+        const [fieldname, operator, value] = f
+          .split(":")
+          .map(decodeURIComponent);
+        const field = (f__ || []).find((f) => f.fieldname === fieldname);
+        return {
+          field,
+          fieldname,
+          operator,
+          value,
+        };
+      })
+      .filter((f) => !f__ || (f__ && f.field))
+      .filter((f) => operatorMap[f.operator])
+      .forEach((f) => storage.value.add(f));
+  });
+
+  function getArgs(old?: Record<string, string | string[]>) {
+    old = old || {};
+    const l__ = Array.from(storage.value);
+    const obj = l__.map(transformIn).reduce((p, c) => {
+      p[c.fieldname] = [operatorMap[c.operator.toLowerCase()], c.value];
+      return p;
+    }, {});
+    const merged = { ...old, ...obj };
+    return merged;
+  }
+
+  function setQuery(r?: RouteLocationNamedRaw) {
+    r = r || route;
+    const l__ = Array.from(storage.value);
+    const q = l__
+      .map(transformOut)
+      .map((f) =>
+        [f.fieldname, f.operator.toLowerCase(), f.value]
+          .map(encodeURIComponent)
+          .join(":")
+      )
+      .join(" ");
+    router.push({
+      ...r,
+      query: {
+        ...r.query,
+        q,
+      },
+    });
+  }
+
+  /**
+   * Used to set fields internally. These will not reflect in URL.
+   * Can be used for APIs
+   */
+  function transformIn(f: Filter) {
+    if (f.fieldname === "_assign") {
+      f.operator = f.operator === "is" ? "like" : "not like";
+    }
+    if (f.operator.includes("like")) {
+      f.value = `%${f.value}%`;
+    }
+    return f;
+  }
+
+  /**
+   * Used to set fields in URL query
+   */
+  function transformOut(f: Filter) {
+    if (f.value === "@me") {
+      f.value = userId;
+    }
+    return f;
+  }
+
+  return { getArgs, setQuery, storage };
+}