refactor: added more fields and validation in create lead modal from leads listview

frontend/src/components/Modals/DealModal.vue

@@ -18,10 +18,16 @@
         </div>
       </div>
       <div class="flex flex-col gap-4">
-        <div v-for="section in allFields" :key="section.section">
+        <div
-          <div class="grid grid-cols-3 gap-4 border-t pt-4">
+          v-for="section in allFields"
+          :key="section.section"
+          class="border-t pt-4"
+        >
+          <div class="grid grid-cols-3 gap-4">
             <div v-for="field in section.fields" :key="field.name">
-              <div class="mb-2 text-sm text-gray-600">{{ field.label }}</div>
+              <div class="mb-2 text-sm text-gray-600">
+                {{ __(field.label) }}
+              </div>
               <FormControl
                 v-if="field.type === 'select'"
                 type="select"
@@ -97,7 +103,6 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
-import { createToast } from '@/utils'
 import { Tooltip, Switch, createResource } from 'frappe-ui'
 import { computed, ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
@@ -113,13 +118,17 @@ const deal = reactive({
   organization: '',
   organization_name: '',
   website: '',
-  industry: '',
+  no_of_employees: '',
   territory: '',
+  annual_revenue: '',
+  industry: '',
   contact: '',
+  salutation: '',
   first_name: '',
   last_name: '',
   email: '',
   mobile_no: '',
+  gender: '',
   status: '',
   deal_owner: '',
 })

frontend/src/components/Modals/LeadModal.vue

@@ -0,0 +1,307 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      size: '3xl',
+      title: __('Create Lead'),
+    }"
+  >
+    <template #body-content>
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="section in allFields"
+          :key="section.section"
+          class="border-t pt-4 first:border-t-0"
+        >
+          <div class="grid grid-cols-3 gap-4">
+            <div v-for="field in section.fields" :key="field.name">
+              <div class="mb-2 text-sm text-gray-600">
+                {{ __(field.label) }}
+                <span class="text-red-500" v-if="field.mandatory">*</span>
+              </div>
+              <FormControl
+                v-if="field.type === 'select'"
+                type="select"
+                class="form-control"
+                :options="field.options"
+                v-model="lead[field.name]"
+                :placeholder="__(field.placeholder)"
+              >
+                <template v-if="field.prefix" #prefix>
+                  <IndicatorIcon :class="field.prefix" />
+                </template>
+              </FormControl>
+              <Link
+                v-else-if="field.type === 'link'"
+                class="form-control"
+                :value="lead[field.name]"
+                :doctype="field.doctype"
+                @change="(v) => (lead[field.name] = v)"
+                :placeholder="__(field.placeholder)"
+                :onCreate="field.create"
+              />
+              <Link
+                v-else-if="field.type === 'user'"
+                class="form-control"
+                :value="getUser(lead[field.name]).full_name"
+                :doctype="field.doctype"
+                @change="(v) => (lead[field.name] = v)"
+                :placeholder="__(field.placeholder)"
+                :hideMe="true"
+              >
+                <template #prefix>
+                  <UserAvatar class="mr-2" :user="lead[field.name]" size="sm" />
+                </template>
+                <template #item-prefix="{ option }">
+                  <UserAvatar class="mr-2" :user="option.value" size="sm" />
+                </template>
+                <template #item-label="{ option }">
+                  <Tooltip :text="option.value">
+                    <div class="cursor-pointer">
+                      {{ getUser(option.value).full_name }}
+                    </div>
+                  </Tooltip>
+                </template>
+              </Link>
+              <FormControl
+                v-else
+                type="text"
+                :placeholder="__(field.placeholder)"
+                v-model="lead[field.name]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
+    </template>
+    <template #actions>
+      <div class="flex flex-row-reverse gap-2">
+        <Button variant="solid" :label="__('Save')" @click="createNewLead" />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import Link from '@/components/Controls/Link.vue'
+import { usersStore } from '@/stores/users'
+import { statusesStore } from '@/stores/statuses'
+import { Tooltip, createResource } from 'frappe-ui'
+import { computed, onMounted, ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+
+const { getUser } = usersStore()
+const { getLeadStatus, statusOptions } = statusesStore()
+
+const show = defineModel()
+const router = useRouter()
+const error = ref(null)
+const isLeadCreating = ref(false)
+
+const lead = reactive({
+  salutation: '',
+  first_name: '',
+  last_name: '',
+  email: '',
+  mobile_no: '',
+  gender: '',
+  organization: '',
+  website: '',
+  no_of_employees: '',
+  territory: '',
+  annual_revenue: '',
+  industry: '',
+  status: '',
+  lead_owner: '',
+})
+
+const allFields = computed(() => {
+  return [
+    {
+      section: 'Contact Details',
+      fields: [
+        {
+          label: 'Salutation',
+          name: 'salutation',
+          type: 'link',
+          placeholder: 'Mr',
+          doctype: 'Salutation',
+        },
+        {
+          label: 'First Name',
+          name: 'first_name',
+          mandatory: true,
+          type: 'data',
+          placeholder: 'John',
+        },
+        {
+          label: 'Last Name',
+          name: 'last_name',
+          type: 'data',
+          placeholder: 'Doe',
+        },
+        {
+          label: 'Email',
+          name: 'email',
+          type: 'data',
+          placeholder: 'john@doe.com',
+        },
+        {
+          label: 'Mobile No',
+          name: 'mobile_no',
+          type: 'data',
+          placeholder: '+91 9876543210',
+        },
+        {
+          label: 'Gender',
+          name: 'gender',
+          type: 'link',
+          doctype: 'Gender',
+          placeholder: 'Male',
+        },
+      ],
+    },
+    {
+      section: 'Organization Details',
+      fields: [
+        {
+          label: 'Organization',
+          name: 'organization',
+          type: 'data',
+          placeholder: 'Frappé Technologies',
+        },
+        {
+          label: 'Website',
+          name: 'website',
+          type: 'data',
+          placeholder: 'https://frappe.io',
+        },
+        {
+          label: 'No of Employees',
+          name: 'no_of_employees',
+          type: 'select',
+          options: [
+            { label: __('1-10'), value: '1-10' },
+            { label: __('11-50'), value: '11-50' },
+            { label: __('51-200'), value: '51-200' },
+            { label: __('201-500'), value: '201-500' },
+            { label: __('501-1000'), value: '501-1000' },
+            { label: __('1001-5000'), value: '1001-5000' },
+            { label: __('5001-10000'), value: '5001-10000' },
+            { label: __('10001+'), value: '10001+' },
+          ],
+          placeholder: '1-10',
+        },
+        {
+          label: 'Territory',
+          name: 'territory',
+          type: 'link',
+          doctype: 'CRM Territory',
+          placeholder: 'India',
+        },
+        {
+          label: 'Annual Revenue',
+          name: 'annual_revenue',
+          type: 'data',
+          placeholder: '1000000',
+        },
+        {
+          label: 'Industry',
+          name: 'industry',
+          type: 'link',
+          doctype: 'CRM Industry',
+          placeholder: 'Technology',
+        },
+      ],
+    },
+    {
+      section: 'Other Details',
+      fields: [
+        {
+          label: 'Status',
+          name: 'status',
+          type: 'select',
+          options: statusOptions(
+            'lead',
+            (field, value) => (lead[field] = value)
+          ),
+          prefix: getLeadStatus(lead.status).iconColorClass,
+        },
+        {
+          label: 'Lead Owner',
+          name: 'lead_owner',
+          type: 'user',
+          placeholder: 'Lead Owner',
+          doctype: 'User',
+        },
+      ],
+    },
+  ]
+})
+
+const createLead = createResource({
+  url: 'frappe.client.insert',
+  makeParams(values) {
+    return {
+      doc: {
+        doctype: 'CRM Lead',
+        ...values,
+      },
+    }
+  },
+})
+
+function createNewLead() {
+  createLead.submit(lead, {
+    validate() {
+      error.value = null
+      if (!lead.first_name) {
+        error.value = __('First Name is mandatory')
+        return error.value
+      }
+      if (lead.website && !lead.website.startsWith('http')) {
+        lead.website = 'https://' + lead.website
+      }
+      if (lead.annual_revenue) {
+        lead.annual_revenue = lead.annual_revenue.replace(/,/g, '')
+        if (isNaN(lead.annual_revenue)) {
+          error.value = __('Annual Revenue should be a number')
+          return error.value
+        }
+      }
+      if (lead.mobile_no && isNaN(lead.mobile_no.replace(/[-+() ]/g, ''))) {
+        error.value = __('Mobile No should be a number')
+        return error.value
+      }
+      if (lead.email && !lead.email.includes('@')) {
+        error.value = __('Invalid Email')
+        return error.value
+      }
+      isLeadCreating.value = true
+    },
+    onSuccess(data) {
+      isLeadCreating.value = false
+      show.value = false
+      router.push({ name: 'Lead', params: { leadId: data.name } })
+    },
+  })
+}
+
+onMounted(() => {
+  if (!lead.status) {
+    lead.status = computed(() => getLeadStatus().name)
+  }
+  if (!lead.lead_owner) {
+    lead.lead_owner = getUser().email
+  }
+})
+</script>
+
+<style scoped>
+:deep(.form-control select) {
+  padding-left: 2rem;
+}
+</style>

frontend/src/components/NewLead.vue

@@ -1,171 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <div v-for="section in allFields" :key="section.section">
-      <div class="grid grid-cols-3 gap-4">
-        <div v-for="field in section.fields" :key="field.name">
-          <div class="mb-2 text-sm text-gray-600">{{ field.label }}</div>
-          <FormControl
-            v-if="field.type === 'select'"
-            type="select"
-            class="form-control"
-            :options="field.options"
-            v-model="newLead[field.name]"
-          >
-            <template v-if="field.prefix" #prefix>
-              <IndicatorIcon :class="field.prefix" />
-            </template>
-          </FormControl>
-          <FormControl
-            v-else-if="field.type === 'email'"
-            type="email"
-            v-model="newLead[field.name]"
-          />
-          <Link
-            v-else-if="field.type === 'link'"
-            class="form-control"
-            :value="newLead[field.name]"
-            :doctype="field.doctype"
-            @change="(e) => field.change(e)"
-            :placeholder="field.placeholder"
-            :onCreate="field.create"
-          />
-          <Link
-            v-else-if="field.type === 'user'"
-            class="form-control"
-            :value="getUser(newLead[field.name]).full_name"
-            :doctype="field.doctype"
-            @change="(e) => field.change(e)"
-            :placeholder="field.placeholder"
-            :hideMe="true"
-          >
-            <template #prefix>
-              <UserAvatar class="mr-2" :user="newLead[field.name]" size="sm" />
-            </template>
-            <template #item-prefix="{ option }">
-              <UserAvatar class="mr-2" :user="option.value" size="sm" />
-            </template>
-            <template #item-label="{ option }">
-              <Tooltip :text="option.value">
-                <div class="cursor-pointer">
-                  {{ getUser(option.value).full_name }}
-                </div>
-              </Tooltip>
-            </template>
-          </Link>
-          <FormControl
-            v-else
-            type="text"
-            :placeholder="field.placeholder"
-            v-model="newLead[field.name]"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import UserAvatar from '@/components/UserAvatar.vue'
-import Link from '@/components/Controls/Link.vue'
-import { usersStore } from '@/stores/users'
-import { statusesStore } from '@/stores/statuses'
-import { Tooltip } from 'frappe-ui'
-import { computed, onMounted, ref } from 'vue'
-
-const { getUser } = usersStore()
-const { getLeadStatus, statusOptions } = statusesStore()
-
-const props = defineProps({
-  newLead: {
-    type: Object,
-    required: true,
-  },
-})
-
-const allFields = computed(() => {
-  return [
-    {
-      section: 'Lead Details',
-      fields: [
-        {
-          label: 'Salutation',
-          name: 'salutation',
-          type: 'link',
-          placeholder: 'Mr.',
-          doctype: 'Salutation',
-          change: (data) => (props.newLead.salutation = data),
-        },
-        {
-          label: 'First Name',
-          name: 'first_name',
-          type: 'data',
-          placeholder: 'John',
-        },
-        {
-          label: 'Last Name',
-          name: 'last_name',
-          type: 'data',
-          placeholder: 'Doe',
-        },
-        {
-          label: 'Email',
-          name: 'email',
-          type: 'data',
-          placeholder: 'john@doe.com',
-        },
-        {
-          label: 'Mobile No',
-          name: 'mobile_no',
-          type: 'data',
-          placeholder: '+91 9876543210',
-        },
-      ],
-    },
-    {
-      section: 'Other Details',
-      fields: [
-        {
-          label: 'Organization',
-          name: 'organization',
-          type: 'data',
-          placeholder: 'Frappé Technologies',
-        },
-        {
-          label: 'Status',
-          name: 'status',
-          type: 'select',
-          options: statusOptions(
-            'lead',
-            (field, value) => (props.newLead[field] = value)
-          ),
-          prefix: getLeadStatus(props.newLead.status).iconColorClass,
-        },
-        {
-          label: 'Lead Owner',
-          name: 'lead_owner',
-          type: 'user',
-          placeholder: 'Lead Owner',
-          doctype: 'User',
-          change: (data) => (props.newLead.lead_owner = data),
-        },
-      ],
-    },
-  ]
-})
-
-onMounted(() => {
-  if (!props.newLead.status) {
-    props.newLead.status = getLeadStatus(props.newLead.status).name
-  }
-  if (!props.newLead.lead_owner) {
-    props.newLead.lead_owner = getUser().email
-  }
-})
-</script>
-
-<style scoped>
-:deep(.form-control select) {
-  padding-left: 2rem;
-}
-</style>

frontend/src/pages/Leads.vue

@@ -11,7 +11,7 @@
       <Button
         variant="solid"
         :label="__('Create')"
-        @click="showNewDialog = true"
+        @click="showLeadModal = true"
       >
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
@@ -50,31 +50,12 @@
     >
       <LeadsIcon class="h-10 w-10" />
       <span>{{ __('No Leads Found') }}</span>
-      <Button :label="__('Create')" @click="showNewDialog = true">
+      <Button :label="__('Create')" @click="showLeadModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </div>
   </div>
-  <Dialog
+  <LeadModal v-model="showLeadModal" />
-    v-model="showNewDialog"
-    :options="{
-      size: '3xl',
-      title: __('New Lead'),
-    }"
-  >
-    <template #body-content>
-      <NewLead :newLead="newLead" />
-    </template>
-    <template #actions="{ close }">
-      <div class="flex flex-row-reverse gap-2">
-        <Button
-          variant="solid"
-          :label="__('Save')"
-          @click="createNewLead(close)"
-        />
-      </div>
-    </template>
-  </Dialog>
 </template>
 
 <script setup>
@@ -82,7 +63,7 @@ import CustomActions from '@/components/CustomActions.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import LeadsListView from '@/components/ListViews/LeadsListView.vue'
-import NewLead from '@/components/NewLead.vue'
+import LeadModal from '@/components/Modals/LeadModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
@@ -107,6 +88,7 @@ const { getLeadStatus } = statusesStore()
 const router = useRouter()
 
 const leadsListView = ref(null)
+const showLeadModal = ref(false)
 
 // leads data is loaded in the ViewControls component
 const leads = ref({})
@@ -200,9 +182,6 @@ const rows = computed(() => {
   })
 })
 
-// New Lead
-const showNewDialog = ref(false)
-
 let newLead = reactive({
   salutation: '',
   first_name: '',