Merge pull request #2274 from adarshkh2397/feature/new-contact-optional-customer

feat: contact dialogs refactor

Author: RitvikSardana

desk/src/components/desk/global/NewContactDialog.vue

@@ -10,6 +10,12 @@
           >
             <span class="mb-2 block text-sm leading-4 text-gray-700">
               {{ field.label }}
+              <span
+                v-if="field.required"
+                class="place-self-center text-red-500"
+              >
+                *
+              </span>
             </span>
             <Input
               v-if="field.type === 'input'"
@@ -21,7 +27,6 @@
               v-else
               v-model="state[field.value]"
               :options="customerResource.data"
-              :value="state[field.value]"
               @update:model-value="handleCustomerChange"
             />
             <ErrorMessage :message="error[field.error]" />
@@ -76,7 +81,7 @@ const state = ref({
   firstName: "",
   lastName: "",
   phone: "",
-  selectedCustomer: "",
+  selectedCustomer: null,
 });
 
 const error = ref({
@@ -92,6 +97,7 @@ interface FormField {
   value: string;
   error: string;
   type: string;
+  required: boolean;
   action?: () => void;
 }
 
@@ -101,34 +107,38 @@ const formFields: FormField[] = [
     value: "emailID",
     error: "emailValidationError",
     type: "input",
+    required: true,
     action: () => validateEmailInput(state.value.emailID),
   },
   {
     label: "First Name",
     value: "firstName",
     error: "firstNameValidationError",
     type: "input",
+    required: true,
     action: () => validateFirstName(state.value.firstName),
   },
   {
     label: "Last Name",
     value: "lastName",
     error: "lastNameValidationError",
     type: "input",
+    required: false,
   },
   {
     label: "Phone",
     value: "phone",
     error: "phoneValidationError",
     type: "input",
+    required: false,
     action: () => validatePhone(state.value.phone),
   },
   {
     label: "Customer",
     value: "selectedCustomer",
     error: "customerValidationError",
     type: "autocomplete",
-    action: () => validateCustomer(state.value.selectedCustomer),
+    required: false,
   },
 ];
 
@@ -165,7 +175,7 @@ const contactResource = createResource({
       firstName: "",
       lastName: "",
       phone: "",
-      selectedCustomer: "",
+      selectedCustomer: null,
     };
     createToast({
       title: "Contact Created Successfully ",
@@ -184,31 +194,34 @@ function createContact() {
     first_name: state.value.firstName,
     last_name: state.value.lastName,
     email_ids: [{ email_id: state.value.emailID, is_primary: true }],
-    links: [
-      {
-        link_doctype: "HD Customer",
-        link_name: state.value.selectedCustomer,
-      },
-    ],
+    links: [],
     phone_nos: [],
   };
   if (state.value.phone) {
     doc.phone_nos = [{ phone: state.value.phone }];
   }
+  if (state.value.selectedCustomer) {
+    doc.links.push({
+      link_doctype: "HD Customer",
+      link_name: state.value.selectedCustomer,
+    });
+  }
 
   contactResource.submit({ doc });
 }
 
-function handleCustomerChange(item: AutoCompleteItem) {
-  if (!item) return;
-  state.value.selectedCustomer = item.value;
+function handleCustomerChange(item: AutoCompleteItem | null) {
+  if (!item || item.label === "No label") {
+    state.value.selectedCustomer = null;
+  } else {
+    state.value.selectedCustomer = item.value;
+  }
 }
 
 function validateInputs() {
   let error = validateEmailInput(state.value.emailID);
   error += validateFirstName(state.value.firstName);
   error += validatePhone(state.value.phone);
-  error += validateCustomer(state.value.selectedCustomer);
   return error;
 }
 
@@ -243,14 +256,6 @@ function validatePhone(value: string) {
   return error.value.phoneValidationError;
 }
 
-function validateCustomer(value: string) {
-  error.value.customerValidationError = "";
-  if (!value || value.trim() === "") {
-    error.value.customerValidationError = "Customer should not be empty";
-  }
-  return error.value.customerValidationError;
-}
-
 function existingContactEmails(contacts) {
   return contacts.map((contact) => contact.email_id);
 }

desk/src/pages/desk/contact/ContactDialog.vue

@@ -3,11 +3,11 @@
     <template #body-main>
       <div class="flex flex-col items-center gap-4 p-6">
         <div class="text-xl font-medium text-gray-900">
-          {{ contact.doc?.name }}
+          {{ contact.doc?.full_name }}
         </div>
         <Avatar
           size="2xl"
-          :label="contact.doc?.name"
+          :label="contact.doc?.full_name"
           :image="contact.doc?.image"
           class="cursor-pointer hover:opacity-80"
         />
@@ -29,6 +29,12 @@
             label="Remove photo"
             @click="updateImage(null)"
           />
+          <Button
+            v-if="!contact.doc?.user"
+            label="Invite as user"
+            @click="inviteContact"
+            :loading="isLoading"
+          />
         </div>
         <div class="w-full space-y-2 text-sm text-gray-700">
           <div class="space-y-1">
@@ -47,6 +53,14 @@
               :validate="validatePhone"
             />
           </div>
+          <div class="space-y-1">
+            <div class="text-xs">Customer</div>
+            <Autocomplete
+              v-model="selectedCustomer"
+              :options="customerResource.data"
+              @update:model-value="handleCustomerChange"
+            />
+          </div>
         </div>
       </div>
     </template>
@@ -61,10 +75,13 @@ import {
   Avatar,
   Dialog,
   FileUploader,
+  Autocomplete,
+  createListResource,
+  call,
 } from "frappe-ui";
 import zod from "zod";
 import { createToast } from "@/utils";
-import { useError } from "@/composables/error";
+
 import MultiSelect from "@/components/MultiSelect.vue";
 import { File, AutoCompleteItem } from "@/types";
 
@@ -138,10 +155,65 @@ const phones = computed({
   },
 });
 
+const selectedCustomer = computed({
+  get() {
+    const customerLink = contact.doc?.links?.find(
+      (link) => link.link_doctype === "HD Customer"
+    );
+    return customerLink?.link_name || null;
+  },
+  set(value) {
+    const currentCustomer = contact.doc?.links?.find(
+      (link) => link.link_doctype === "HD Customer"
+    )?.link_name;
+
+    if (value !== currentCustomer) {
+      if (value) {
+        const existingCustomerLinkIndex = contact.doc.links?.findIndex(
+          (link) => link.link_doctype === "HD Customer"
+        );
+        if (existingCustomerLinkIndex !== -1) {
+          contact.doc.links[existingCustomerLinkIndex].link_name = value;
+        } else {
+          contact.doc.links.push({
+            link_doctype: "HD Customer",
+            link_name: value,
+          });
+        }
+      } else {
+        contact.doc.links = contact.doc.links?.filter(
+          (link) => link.link_doctype !== "HD Customer"
+        );
+      }
+      isDirty.value = true;
+    }
+  },
+});
+
+const customerResource = createListResource({
+  doctype: "HD Customer",
+  fields: ["name"],
+  cache: "customers",
+  transform: (data) => {
+    return data.map((option) => ({
+      label: option.name,
+      value: option.name,
+    }));
+  },
+  auto: true,
+});
+
+function handleCustomerChange(item: AutoCompleteItem | null) {
+  if (!item || item.label === "No label") {
+    selectedCustomer.value = null;
+  } else {
+    selectedCustomer.value = item.value;
+  }
+}
+
 const contact = createDocumentResource({
   doctype: "Contact",
   name: props.name,
-  cache: [`contact-${props.name}`, props.name],
   auto: true,
   setValue: {
     onSuccess() {
@@ -181,6 +253,7 @@ function update(): void {
       is_primary_phone: phoneNum.value === contact.doc.phone,
       is_primary_mobile: phoneNum.value === contact.doc.phone,
     })),
+    links: contact.doc.links,
   });
 }
 
@@ -217,4 +290,40 @@ function validateFile(file: File): string | void {
     return "Invalid file type, only PNG and JPG images are allowed";
   }
 }
+
+const isLoading = ref(false);
+async function inviteContact(): Promise<void> {
+  try {
+    isLoading.value = true;
+    const user = await call(
+      "frappe.contacts.doctype.contact.contact.invite_user",
+      {
+        contact: contact.doc.name,
+      }
+    );
+    createToast({
+      title: "Contact invited successfully",
+      icon: "user-plus",
+      iconClasses: "text-green-600",
+    });
+    await contact.setValue.submit({
+      user: user,
+    });
+  } catch (error) {
+    isLoading.value = false;
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(
+      error.messages?.[0] || error.message,
+      "text/html"
+    );
+    const errMsg = doc.body.innerText;
+    createToast({
+      title: errMsg,
+      icon: "x",
+      iconClasses: "text-red-600",
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
 </script>