Fixed socket issue

Renamed Job Title to Designation
Fixed SidePanelLayout issues

crm/fcrm/doctype/crm_deal/crm_deal.json

@@ -234,7 +234,7 @@
   {
    "fieldname": "job_title",
    "fieldtype": "Data",
-   "label": "Job Title"
+   "label": "Designation"
   },
   {
    "fieldname": "phone",
@@ -338,7 +338,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-12-11 14:31:41.058895",
+ "modified": "2024-12-22 21:15:56.959871",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Deal",

crm/fcrm/doctype/crm_lead/crm_lead.json

@@ -174,7 +174,7 @@
   {
    "fieldname": "job_title",
    "fieldtype": "Data",
-   "label": "Job Title"
+   "label": "Designation"
   },
   {
    "fieldname": "organization_tab",
@@ -290,7 +290,7 @@
  "image_field": "image",
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-09-17 18:36:57.289897",
+ "modified": "2024-12-22 21:14:59.103082",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Lead",

frontend/src/components/FieldLayout.vue

@@ -88,21 +88,25 @@
                     type="select"
                     class="form-control"
                     :class="[
-                      field.prefix || field.prefixFn ? 'prefix' : ''
+                      field.prefix || field.prefixFn ? 'prefix' : '',
+                      field.name === 'status' ? 'status-select' : ''
                     ]"
                     :options="field.name === 'gender' ? [
                       { label: __('Male'), value: 'Male' },
                       { label: __('Female'), value: 'Female' }
-                    ] : field.options"
+                    ] : field.name === 'status' ? field.options.map(status => ({
+                      label: getTranslatedStatus(field, status.value),
+                      value: status.value
+                    })) : field.options"
                     v-model="data[field.name]"
                     :placeholder="getPlaceholder(field)"
                   >
-                    <template v-if="field.prefix || field.prefixFn" #prefix>
-                      <IndicatorIcon :class="field.prefixFn ? field.prefixFn(data[field.name]) : field.prefix" />
+                    <template v-if="field.prefix || field.prefixFn || field.name === 'status'" #prefix>
+                      <IndicatorIcon :class="field.name === 'status' ? getStatusPrefix(field, data[field.name]) : field.prefixFn ? field.prefixFn(data[field.name]) : field.prefix" />
                     </template>
-                    <template v-if="field.prefixFn" #option="{ option }">
+                    <template v-if="field.prefixFn || field.name === 'status'" #option="{ option }">
                       <div class="flex items-center gap-2">
-                        <IndicatorIcon :class="field.prefixFn(option.value)" />
+                        <IndicatorIcon :class="field.name === 'status' ? getStatusPrefix(field, option.value) : field.prefixFn(option.value)" />
                         {{ option.label }}
                       </div>
                     </template>
@@ -140,6 +144,36 @@
                         :onCreate="field.create"
                       />
                     </template>
+                    <template v-else-if="field.options === 'User'">
+                      <Link
+                        class="form-control flex-1 truncate"
+                        :value="data[field.name] ? getUser(data[field.name]).full_name : ''"
+                        :doctype="field.options"
+                        :filters="field.filters"
+                        @change="(v) => (data[field.name] = v)"
+                        :placeholder="getPlaceholder(field)"
+                        :hideMe="true"
+                      >
+                        <template #prefix>
+                          <UserAvatar
+                            v-if="data[field.name]"
+                            class="mr-2"
+                            :user="data[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 text-ink-gray-8 dark:text-gray-500">
+                              {{ getUser(option.value).full_name }}
+                            </div>
+                          </Tooltip>
+                        </template>
+                      </Link>
+                    </template>
                     <template v-else>
                       <Link
                         class="form-control flex-1 truncate"
@@ -162,35 +196,6 @@
                       </template>
                     </Button>
                   </div>
-
-                  <Link
-                    v-else-if="field.type === 'User'"
-                    class="form-control"
-                    :value="getUser(data[field.name]).full_name"
-                    :doctype="field.options"
-                    :filters="field.filters"
-                    @change="(v) => (data[field.name] = v)"
-                    :placeholder="getPlaceholder(field)"
-                    :hideMe="true"
-                  >
-                    <template #prefix>
-                      <UserAvatar
-                        class="mr-2"
-                        :user="data[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>
                   <input
                     v-else-if="field.type === 'Date'"
                     type="date"
@@ -244,12 +249,16 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import CountryLink from '@/components/Controls/CountryLink.vue'
 import { usersStore } from '@/stores/users'
+import { statusesStore } from '@/stores/statuses'
 import { getFormat } from '@/utils'
+import { translateLeadStatus } from '@/utils/leadStatusTranslations'
+import { translateDealStatus } from '@/utils/dealStatusTranslations'
 import { Tabs, Tooltip, DatePicker, DateTimePicker, Dropdown, Button } from 'frappe-ui'
 import { ref, computed } from 'vue'
 import { FeatherIcon } from 'frappe-ui'
 
 const { getUser } = usersStore()
+const { getLeadStatus, getDealStatus } = statusesStore()
 
 const props = defineProps({
   tabs: Array,
@@ -297,6 +306,32 @@ const getPlaceholder = (field) => {
   }
 }
 
+function getTranslatedStatus(field, status) {
+  if (!status) return ''
+  if (field.name === 'status') {
+    if (field.doctype === 'CRM Lead') {
+      return translateLeadStatus(status)
+    } else if (field.doctype === 'CRM Deal') {
+      return translateDealStatus(status)
+    }
+  }
+  return status
+}
+
+function getStatusPrefix(field, status) {
+  if (!status) return ''
+  if (field.name === 'status') {
+    if (field.doctype === 'CRM Lead') {
+      const statusInfo = getLeadStatus(status)
+      return statusInfo?.iconColorClass[0]
+    } else if (field.doctype === 'CRM Deal') {
+      const statusInfo = getDealStatus(status)
+      return statusInfo?.iconColorClass[0]
+    }
+  }
+  return field.prefixFn ? field.prefixFn(status) : field.prefix
+}
+
 </script>
 
 <style scoped>

frontend/src/components/Modals/DealModal.vue

@@ -113,27 +113,25 @@ const tabs = createResource({
   params: { doctype: 'CRM Deal', type: 'Quick Entry' },
   auto: true,
   transform: (_tabs) => {
-    // First transform the data using the common function
-    const transformedTabs = _tabs.map(tab => ({
-      ...tab,
-      sections: getParsedFields(_tabs, 'CRM Deal', deal, {
-        organization: {
-          create: (value, close) => {
-            _organization.value = { organization_name: value }
-            showOrganizationModal.value = true
-            close()
-          },
-          link: (org) => router.push({
-            name: 'Organization',
-            params: { organizationId: org },
-          })
-        }
-      })
-    }))
+    return _tabs.map(tab => {
+      const newTab = {
+        ...tab,
+        sections: getParsedFields(_tabs, 'CRM Deal', deal, {
+          organization: {
+            create: (value, close) => {
+              _organization.value = { organization_name: value }
+              showOrganizationModal.value = true
+              close()
+            },
+            link: (org) => router.push({
+              name: 'Organization',
+              params: { organizationId: org },
+            })
+          }
+        })
+      }
 
-    // Then apply any modal-specific transformations
-    transformedTabs.forEach((tab) => {
-      tab.sections.forEach((section) => {
+      newTab.sections.forEach((section) => {
         section.fields?.forEach((field) => {
           if (field.name == 'status') {
             field.type = 'Select'
@@ -145,14 +143,16 @@ const tabs = createResource({
               label: translateDealStatus(status.value),
               value: status.value
             }))
+            field.doctype = 'CRM Deal'
           } else if (field.name == 'deal_owner') {
-            field.type = 'User'
+            field.type = 'Link'
+            field.options = 'User'
           }
         })
       })
-    })
 
-    return transformedTabs
+      return newTab
+    })
   },
 })
 

frontend/src/components/Modals/LeadModal.vue

@@ -89,8 +89,10 @@ const tabs = createResource({
               label: translateLeadStatus(status.value),
               value: status.value
             }))
+            field.doctype = 'CRM Lead'
           } else if (field.name == 'lead_owner') {
-            field.type = 'User'
+            field.type = 'Link'
+            field.options = 'User'
           }
         })
       })

frontend/src/components/SidePanelLayout.vue

@@ -106,11 +106,18 @@
             @change.stop="handleChange(field.name, $event.target.value)"
           />
           <FormControl
-            v-else-if="field.type === 'select'"
-            class="form-control cursor-pointer [&_select]:cursor-pointer truncate"
+          v-else-if="field.type === 'Select' || field.name === 'gender'"
             type="select"
+            class="form-control"
+            :class="[
+              field.prefix || field.prefixFn ? 'prefix' : '',
+              field.name === 'status' ? 'status-select' : ''
+            ]"
+            :options="field.name === 'gender' ? [
+              { label: __('Male'), value: 'Male' },
+              { label: __('Female'), value: 'Female' }
+            ] : field.options"
             v-model="data[field.name]"
-            :options="field.options"
             :placeholder="getPlaceholder(field)"
             @change.stop="handleChange(field.name, $event.target.value)"
           >
@@ -136,14 +143,14 @@
             </template>
             <template #item-label="{ option }">
               <Tooltip :text="option.value">
-                <div class="cursor-pointer">
+                <div class="cursor-pointer text-ink-gray-8 dark:text-gray-500">
                   {{ getUser(option.value).full_name }}
                 </div>
               </Tooltip>
             </template>
           </Link>
           <Link
-            v-else-if="field.type === 'link'"
+            v-else-if="field.type === 'Link'"
             class="form-control select-text"
             :value="data[field.name]"
             :doctype="field.doctype"
@@ -154,7 +161,7 @@
           />
           <input
             v-else-if="field.type === 'Date'"
-            type="date"
+            type="Date"
             class="form-input w-full"
             :value="data[field.name]"
             @input="handleChange(field.name, $event.target.value)"
@@ -180,12 +187,12 @@
         </div>
         <div class="ml-1">
           <ArrowUpRightIcon
-            v-if="field.type === 'link' && field.link && data[field.name]"
+            v-if="field.type === 'Link' && field.link && data[field.name]"
             class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
             @click.stop="field.link(data[field.name])"
           />
           <EditIcon
-            v-if="field.type === 'link' && field.edit && data[field.name]"
+            v-if="field.type === 'Link' && field.edit && data[field.name]"
             class="size-3.5 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
             @click.stop="field.edit(data[field.name])"
           />
@@ -288,19 +295,6 @@ const _fields = computed(() => {
   props.fields?.forEach((field) => {
     let df = field?.all_properties
 
-    // Handle special case for gender field
-    if (field.name === 'gender') {
-      all_fields.push({
-        ...field,
-        type: 'select',
-        options: [
-          { label: __('Male'), value: 'Male' },
-          { label: __('Female'), value: 'Female' }
-        ],
-      })
-      return
-    }
-
     if (df?.depends_on) evaluate_depends_on(df.depends_on, field)
     all_fields.push({
       ...field,