@@ -154,10 +161,10 @@
:key="field.name"
class="flex items-center gap-2 px-3 text-base leading-5 last:mb-3"
>
-
+
{{ field.label }}
-
+
-
-
-
+
+ {{ field.value }}
+
+
@@ -283,7 +308,9 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import TaskIcon from '@/components/Icons/TaskIcon.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue'
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import CameraIcon from '@/components/Icons/CameraIcon.vue'
import LinkIcon from '@/components/Icons/LinkIcon.vue'
+import ExternalLinkIcon from '@/components/Icons/ExternalLinkIcon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import Toggler from '@/components/Toggler.vue'
import Activities from '@/components/Activities.vue'
@@ -297,12 +324,12 @@ import {
} from '@/utils'
import { usersStore } from '@/stores/users'
import { contactsStore } from '@/stores/contacts'
+import { organizationsStore } from '@/stores/organizations'
import {
createResource,
FileUploader,
ErrorMessage,
FeatherIcon,
- Autocomplete,
FormControl,
Dropdown,
Tooltip,
@@ -312,10 +339,10 @@ import {
} from 'frappe-ui'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
-import CameraIcon from '../components/Icons/CameraIcon.vue'
-const { getUser, users } = usersStore()
+const { getUser } = usersStore()
const { contacts } = contactsStore()
+const { getOrganization, getOrganizationOptions } = organizationsStore()
const router = useRouter()
const props = defineProps({
@@ -421,13 +448,28 @@ const detailSections = computed(() => {
fields: [
{
label: 'Organization',
- type: 'data',
- name: 'organization_name',
+ type: 'link',
+ name: 'organization',
+ placeholder: 'Select organization',
+ options: getOrganizationOptions(),
+ change: (data) => {
+ lead.data.organization = data.value
+ updateLead('organization', data.value)
+ },
+ link: () => {
+ router.push({
+ name: 'Organization',
+ params: { organizationId: organization.value?.name },
+ })
+ },
},
{
label: 'Website',
- type: 'data',
+ type: 'read_only',
name: 'website',
+ value: organization.value?.website,
+ tooltip:
+ 'It is a read only field, value is fetched from organization',
},
{
label: 'Job title',
@@ -517,6 +559,10 @@ const detailSections = computed(() => {
]
})
+const organization = computed(() => {
+ return getOrganization(lead.data.organization)
+})
+
function convertToDeal() {
lead.data.status = 'Qualified'
lead.data.is_deal = 1
@@ -537,7 +583,18 @@ function updateAssignedAgent(email) {
background: white;
}
+:deep(.form-control button) {
+ gap: 0;
+}
+
+:deep(.form-control button > div) {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
:deep(.form-control button svg) {
color: white;
+ width: 0;
}
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index cc7f6418..b0e26a1d 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -59,6 +59,7 @@ import NewLead from '@/components/NewLead.vue'
import SortBy from '@/components/SortBy.vue'
import Filter from '@/components/Filter.vue'
import { usersStore } from '@/stores/users'
+import { organizationsStore } from '@/stores/organizations'
import { useOrderBy } from '@/composables/orderby'
import { useFilter } from '@/composables/filter'
import { useDebounceFn } from '@vueuse/core'
@@ -78,6 +79,7 @@ import { ref, computed, reactive, watch } from 'vue'
const breadcrumbs = [{ label: 'Leads', route: { name: 'Leads' } }]
const { getUser } = usersStore()
+const { getOrganization } = organizationsStore()
const { get: getOrderBy } = useOrderBy()
const { getArgs, storage } = useFilter()
@@ -105,8 +107,7 @@ const leads = createListResource({
'first_name',
'lead_name',
'image',
- 'organization_name',
- 'organization_logo',
+ 'organization',
'status',
'email',
'mobile_no',
@@ -147,7 +148,7 @@ const columns = [
},
{
label: 'Organization',
- key: 'organization_name',
+ key: 'organization',
width: '10rem',
},
{
@@ -187,9 +188,9 @@ const rows = computed(() => {
image: lead.image,
image_label: lead.first_name,
},
- organization_name: {
- label: lead.organization_name,
- logo: lead.organization_logo,
+ organization: {
+ label: lead.organization,
+ logo: getOrganization(lead.organization)?.organization_logo,
},
status: {
label: lead.status,
@@ -259,7 +260,7 @@ let newLead = reactive({
first_name: '',
last_name: '',
lead_name: '',
- organization_name: '',
+ organization: '',
status: 'Open',
email: '',
mobile_no: '',
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index 3270b20e..3e5a42e0 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -289,8 +289,7 @@ const leads = createListResource({
'first_name',
'lead_name',
'image',
- 'organization_name',
- 'organization_logo',
+ 'organization',
'status',
'email',
'mobile_no',
@@ -298,7 +297,7 @@ const leads = createListResource({
'modified',
],
filters: {
- organization_name: props.organization.name,
+ organization: props.organization.name,
is_deal: 0,
},
orderBy: 'modified desc',
@@ -312,8 +311,7 @@ const deals = createListResource({
cache: ['deals', props.organization.name],
fields: [
'name',
- 'organization_name',
- 'organization_logo',
+ 'organization',
'annual_revenue',
'deal_status',
'email',
@@ -322,7 +320,7 @@ const deals = createListResource({
'modified',
],
filters: {
- organization_name: props.organization.name,
+ organization: props.organization.name,
is_deal: 1,
},
orderBy: 'modified desc',
@@ -334,7 +332,15 @@ const contacts = createListResource({
type: 'list',
doctype: 'Contact',
cache: ['contacts', props.organization.name],
- fields: ['name', 'email_id', 'mobile_no', 'company_name', 'modified'],
+ fields: [
+ 'name',
+ 'full_name',
+ 'image',
+ 'email_id',
+ 'mobile_no',
+ 'company_name',
+ 'modified',
+ ],
filters: {
company_name: props.organization.name,
},
@@ -374,9 +380,9 @@ function getLeadRowObject(lead) {
image: lead.image,
image_label: lead.first_name,
},
- organization_name: {
- label: lead.organization_name,
- logo: lead.organization_logo,
+ organization: {
+ label: lead.organization,
+ logo: props.organization?.organization_logo,
},
status: {
label: lead.status,
@@ -398,9 +404,9 @@ function getLeadRowObject(lead) {
function getDealRowObject(deal) {
return {
name: deal.name,
- organization_name: {
- label: deal.organization_name,
- logo: deal.organization_logo,
+ organization: {
+ label: deal.organization,
+ logo: props.organization?.organization_logo,
},
annual_revenue: formatNumberIntoCurrency(deal.annual_revenue),
deal_status: {
@@ -449,7 +455,7 @@ const leadColumns = [
},
{
label: 'Organization',
- key: 'organization_name',
+ key: 'organization',
width: '10rem',
},
{
@@ -482,7 +488,7 @@ const leadColumns = [
const dealColumns = [
{
label: 'Organization',
- key: 'organization_name',
+ key: 'organization',
width: '11rem',
},
{
@@ -546,8 +552,8 @@ const contactColumns = [
]
function reload(val) {
- leads.filters.organization_name = val
- deals.filters.organization_name = val
+ leads.filters.organization = val
+ deals.filters.organization = val
contacts.filters.company_name = val
leads.reload()
deals.reload()
diff --git a/frontend/src/stores/organizations.js b/frontend/src/stores/organizations.js
index dc8ada9b..302b2c76 100644
--- a/frontend/src/stores/organizations.js
+++ b/frontend/src/stores/organizations.js
@@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { createResource } from 'frappe-ui'
-import { reactive } from 'vue'
+import { reactive, computed } from 'vue'
export const organizationsStore = defineStore('crm-organizations', () => {
let organizationsByName = reactive({})
@@ -27,8 +27,19 @@ export const organizationsStore = defineStore('crm-organizations', () => {
return organizationsByName[name]
}
+ function getOrganizationOptions() {
+ return [
+ { label: '', value: '' },
+ ...organizations.data?.map((org) => ({
+ label: org.name,
+ value: org.name,
+ })),
+ ]
+ }
+
return {
organizations,
+ getOrganizationOptions,
getOrganization,
}
})