Merge pull request #1428 from ssiyad/refactor/custom_fields

refactor: custom fields

desk/src/components/EmptyMessage.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="m-auto rounded bg-gray-100 p-2.5">
-    <div class="text-base font-medium text-gray-700">
+  <div class="m-auto rounded p-2.5">
+    <div class="text-base text-gray-700">
       {{ message }}
     </div>
   </div>

desk/src/components/UniInput.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="space-y-2">
+    <div class="text-xs text-gray-600">
+      {{ field.label }}
+      <span v-if="field.required" class="text-red-500">*</span>
+    </div>
+    <component
+      :is="component"
+      :placeholder="placeholder"
+      :value="value"
+      @change="emitUpdate(field.fieldname, $event.value || $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h } from "vue";
+import { createResource, Autocomplete, Input } from "frappe-ui";
+import { Field } from "@/types";
+import SearchComplete from "./SearchComplete.vue";
+
+type Value = string | number | boolean;
+
+interface P {
+  field: Field;
+  value: Value;
+}
+
+interface R {
+  fieldname: Field["fieldname"];
+  value: Value;
+}
+
+interface E {
+  (event: "change", value: R);
+}
+
+const props = defineProps<P>();
+const emit = defineEmits<E>();
+
+const component = computed(() => {
+  if (props.field.url_method) {
+    return h(Autocomplete, {
+      options: apiOptions.data,
+    });
+  } else if (props.field.fieldtype === "Link" && props.field.options) {
+    return h(SearchComplete, {
+      doctype: props.field.options,
+    });
+  } else if (props.field.fieldtype === "Select") {
+    return h(Autocomplete, {
+      options: props.field.options
+        .split("\n")
+        .map((o) => ({ label: o, value: o })),
+    });
+  } else {
+    return Input;
+  }
+});
+
+const apiOptions = createResource({
+  url: props.field.url_method,
+  auto: !!props.field.url_method,
+  transform: (data) =>
+    data.map((o) => ({
+      label: o,
+      value: o,
+    })),
+});
+
+const placeholder = computed(() => {
+  if (props.field.fieldtype === "Data") {
+    return "Type something";
+  }
+  return "Select an option";
+});
+
+function emitUpdate(fieldname: Field["fieldname"], value: Value) {
+  emit("change", { fieldname, value });
+}
+</script>

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

@@ -20,21 +20,29 @@
     <TopSection class="mx-5 mb-3.5" />
     <MainTable :tickets="tickets.list?.data" class="grow" />
     <ListNavigation v-bind="tickets" class="p-2" />
-    <NewTicketDialog v-model="showNewDialog" @close="showNewDialog = false" />
+    <Dialog v-model="showNewDialog" :options="{ size: '3xl' }">
+      <template #body-main>
+        <TicketNew
+          :hide-back-button="true"
+          :hide-about="true"
+          :show-hidden-fields="true"
+        />
+      </template>
+    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { Button } from "frappe-ui";
+import { Button, Dialog } from "frappe-ui";
 import { Icon } from "@iconify/vue";
 import { useFilter } from "@/composables/filter";
 import { useOrder } from "@/composables/order";
 import { createListManager } from "@/composables/listManager";
 import PageTitle from "@/components/PageTitle.vue";
 import ListNavigation from "@/components/ListNavigation.vue";
+import TicketNew from "@/pages/portal/TicketNew.vue";
 import MainTable from "./MainTable.vue";
-import NewTicketDialog from "./NewTicketDialog.vue";
 import TopSection from "./TopSection.vue";
 import PresetFilters from "./PresetFilters.vue";
 

desk/src/pages/desk/ticket/ContactDetails.vue

@@ -10,7 +10,10 @@
           @click="sidebar.isExpanded = false"
         />
       </div>
-      <div class="flex items-center gap-3 border-b py-6">
+      <div
+        v-if="contact.full_name"
+        class="flex items-center gap-3 border-b py-6"
+      >
         <Avatar :image="contact.image" :label="contact.full_name" size="lg" />
         <div class="flex flex-col">
           <div class="text-lg font-semibold text-gray-800">

desk/src/pages/desk/ticket/CustomFieldList.vue

@@ -1,15 +1,23 @@
 <template>
   <div v-if="!isEmpty(fields)" class="flex flex-col gap-5 border-b py-4">
     <div v-for="field in fields" :key="field.label">
-      <div v-if="field.value" class="flex flex-col gap-2.5">
+      <div v-if="ticket.data[field.fieldname]" class="flex flex-col gap-2.5">
         <div class="text-base text-gray-600">{{ field.label }}</div>
-        <a :href="field.route || null" target="_blank">
+        <a :href="getUrl(ticket.data[field.fieldname])" target="_blank">
           <div class="flex items-center gap-2">
             <div class="flex h-4 w-4 items-center justify-center">
-              <IconLink v-if="field.route" class="h-5 w-5 text-gray-600" />
-              <IconLayer v-else class="h-4 w-4 text-gray-600" />
+              <Icon
+                :icon="
+                  getUrl(ticket.data[field.fieldname])
+                    ? 'lucide:external-link'
+                    : 'lucide:disc'
+                "
+                class="h-4 w-4 text-gray-600"
+              />
+            </div>
+            <div class="text-base text-gray-800">
+              {{ ticket.data[field.fieldname] }}
             </div>
-            <div class="text-base text-gray-800">{{ field.value }}</div>
           </div>
         </a>
       </div>
@@ -18,12 +26,17 @@
 </template>
 
 <script setup lang="ts">
-import { isEmpty } from "lodash";
 import { computed } from "vue";
+import { isEmpty } from "lodash";
+import zod from "zod";
+import { Icon } from "@iconify/vue";
 import { useTicket } from "./data";
-import IconLayer from "~icons/lucide/layers";
-import IconLink from "~icons/lucide/external-link";
 
 const ticket = useTicket();
-const fields = computed(() => ticket.value.data.custom_fields);
+const fields = computed(() => ticket.value.data.template.fields);
+
+function getUrl(url: string) {
+  const isUrl = zod.string().url().safeParse(url).success;
+  return isUrl ? url : null;
+}
 </script>