test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: show details in tabs in lead/deal page in mobile view

Browse Source
This commit is contained in:
Shariq Ansari 2024-05-27 19:09:25 +05:30
parent 69e2405092
commit 1b11182a2c
3 changed files with 238 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/Icons/DetailsIcon.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-list-collapse"
>
<path d="m3 10 2.5-2.5L3 5" />
<path d="m3 19 2.5-2.5L3 14" />
<path d="M10 6h11" />
<path d="M10 12h11" />
<path d="M10 18h11" />
</svg>
</template>

123
frontend/src/pages/MobileDeal.vue
View File

@ -44,73 +44,14 @@
</div>
</div>
<div v-if="deal.data" class="flex h-full overflow-hidden">
<Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
<Activities
ref="activities"
doctype="CRM Deal"
:title="tab.name"
v-model:reload="reload"
v-model:tabIndex="tabIndex"
v-model="deal"
/>
</Tabs>
<Resizer side="right" class="flex flex-col justify-between border-l">
<div
class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium"
@click="copyToClipboard(deal.data.name)"
<Tabs
v-model="tabIndex"
v-slot="{ tab }"
:tabs="tabs"
tablistClass="!px-3"
class="overflow-auto"
>
{{ __(deal.data.name) }}
</div>
<div class="flex items-center justify-start gap-5 border-b p-5">
<Tooltip :text="__('Organization logo')">
<div class="group relative size-12">
<Avatar
size="3xl"
class="size-12"
:label="organization?.name || __('Untitled')"
:image="organization?.organization_logo"
/>
</div>
</Tooltip>
<div class="flex flex-col gap-2.5 truncate">
<Tooltip :text="organization?.name || __('Set an organization')">
<div class="truncate text-2xl font-medium">
{{ organization?.name || __('Untitled') }}
</div>
</Tooltip>
<div class="flex gap-1.5">
<Tooltip v-if="callEnabled" :text="__('Make a call')">
<Button class="h-7 w-7" @click="triggerCall">
<PhoneIcon class="h-4 w-4" />
</Button>
</Tooltip>
<Tooltip :text="__('Send an email')">
<Button class="h-7 w-7">
<EmailIcon
class="h-4 w-4"
@click="
deal.data.email
? openEmailBox()
: errorMessage(__('No email set'))
"
/>
</Button>
</Tooltip>
<Tooltip :text="__('Go to website')">
<Button class="h-7 w-7">
<LinkIcon
class="h-4 w-4"
@click="
deal.data.website
? openWebsite(deal.data.website)
: errorMessage(__('No website set'))
"
/>
</Button>
</Tooltip>
</div>
</div>
</div>
<div v-if="tab.name == 'Details'">
<SLASection
v-if="deal.data.sla_status"
v-model="deal.data"
@ -124,7 +65,7 @@
<div
v-for="(section, i) in detailSections"
:key="section.label"
class="flex flex-col p-3"
class="flex flex-col px-2 py-3 sm:p-3"
:class="{ 'border-b': i !== detailSections.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
@ -265,7 +206,16 @@
</div>
</div>
</div>
</Resizer>
</div>
<Activities
v-else
doctype="CRM Deal"
:title="tab.name"
v-model:reload="reload"
v-model:tabIndex="tabIndex"
v-model="deal"
/>
</Tabs>
</div>
<OrganizationModal
v-model="showOrganizationModal"
@ -295,7 +245,7 @@
/>
</template>
<script setup>
import Resizer from '@/components/Resizer.vue'
import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
import EmailIcon from '@/components/Icons/EmailIcon.vue'
@ -305,7 +255,6 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue'
import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import LinkIcon from '@/components/Icons/LinkIcon.vue'
import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
import SuccessIcon from '@/components/Icons/SuccessIcon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
@ -320,21 +269,18 @@ import SectionFields from '@/components/SectionFields.vue'
import SLASection from '@/components/SLASection.vue'
import CustomActions from '@/components/CustomActions.vue'
import {
openWebsite,
createToast,
setupAssignees,
setupCustomActions,
errorMessage,
copyToClipboard,
} from '@/utils'
import { globalStore } from '@/stores/global'
import { organizationsStore } from '@/stores/organizations'
import { statusesStore } from '@/stores/statuses'
import { whatsappEnabled, callEnabled } from '@/stores/settings'
import { whatsappEnabled, callEnabled, isMobileView } from '@/stores/settings'
import {
createResource,
Dropdown,
Tooltip,
Avatar,
Tabs,
Breadcrumbs,
@ -448,6 +394,12 @@ const breadcrumbs = computed(() => {
const tabIndex = ref(0)
const tabs = computed(() => {
let tabOptions = [
{
name: 'Details',
label: __('Details'),
icon: DetailsIcon,
condition: () => isMobileView.value,
},
{
name: 'Activity',
label: __('Activity'),
@ -606,23 +558,6 @@ const deal_contacts = createResource({
auto: true,
})
function triggerCall() {
let primaryContact = deal_contacts.data?.find((c) => c.is_primary)
let mobile_no = primaryContact.mobile_no || null
if (!primaryContact) {
errorMessage(__('No primary contact set'))
return
}
if (!mobile_no) {
errorMessage(__('No mobile number set'))
return
}
makeCall(mobile_no)
}
function updateField(name, value, callback) {
updateDeal(name, value, () => {
deal.data[name] = value
@ -637,10 +572,4 @@ async function deleteDeal(name) {
})
router.push({ name: 'Deals' })
}
const activities = ref(null)
function openEmailBox() {
activities.value.emailBox.show = true
}
</script>

173
frontend/src/pages/MobileLead.vue
View File

@ -49,122 +49,14 @@
</div>
</div>
<div v-if="lead?.data" class="flex h-full overflow-hidden">
<Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
<Activities
ref="activities"
doctype="CRM Lead"
:title="tab.name"
<Tabs
v-model="tabIndex"
v-slot="{ tab }"
:tabs="tabs"
v-model:reload="reload"
v-model:tabIndex="tabIndex"
v-model="lead"
/>
</Tabs>
<Resizer class="flex flex-col justify-between border-l" side="right">
<div
class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium"
@click="copyToClipboard(lead.data.name)"
tablistClass="!px-3"
class="overflow-auto"
>
{{ __(lead.data.name) }}
</div>
<FileUploader
@success="(file) => updateField('image', file.file_url)"
:validateFile="validateFile"
>
<template #default="{ openFileSelector, error }">
<div class="flex items-center justify-start gap-5 border-b p-5">
<div class="group relative size-12">
<Avatar
size="3xl"
class="size-12"
:label="lead.data.first_name || __('Untitled')"
:image="lead.data.image"
/>
<component
:is="lead.data.image ? Dropdown : 'div'"
v-bind="
lead.data.image
? {
options: [
{
icon: 'upload',
label: lead.data.image
? __('Change image')
: __('Upload image'),
onClick: openFileSelector,
},
{
icon: 'trash-2',
label: __('Remove image'),
onClick: () => updateField('image', ''),
},
],
}
: { onClick: openFileSelector }
"
class="!absolute bottom-0 left-0 right-0"
>
<div
class="z-1 absolute bottom-0.5 left-0 right-0.5 flex h-9 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-3 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
style="
-webkit-clip-path: inset(12px 0 0 0);
clip-path: inset(12px 0 0 0);
"
>
<CameraIcon class="size-4 cursor-pointer text-white" />
</div>
</component>
</div>
<div class="flex flex-col gap-2.5 truncate">
<Tooltip :text="lead.data.lead_name || __('Set first name')">
<div class="truncate text-2xl font-medium">
{{ lead.data.lead_name || __('Untitled') }}
</div>
</Tooltip>
<div class="flex gap-1.5">
<Tooltip v-if="callEnabled" :text="__('Make a call')">
<Button
class="h-7 w-7"
@click="
() =>
lead.data.mobile_no
? makeCall(lead.data.mobile_no)
: errorMessage(__('No phone number set'))
"
>
<PhoneIcon class="h-4 w-4" />
</Button>
</Tooltip>
<Tooltip :text="__('Send an email')">
<Button class="h-7 w-7">
<EmailIcon
class="h-4 w-4"
@click="
lead.data.email
? openEmailBox()
: errorMessage(__('No email set'))
"
/>
</Button>
</Tooltip>
<Tooltip :text="__('Go to website')">
<Button class="h-7 w-7">
<LinkIcon
class="h-4 w-4"
@click="
lead.data.website
? openWebsite(lead.data.website)
: errorMessage(__('No website set'))
"
/>
</Button>
</Tooltip>
</div>
<ErrorMessage :message="__(error)" />
</div>
</div>
</template>
</FileUploader>
<div v-if="tab.name == 'Details'">
<SLASection
v-if="lead.data.sla_status"
v-model="lead.data"
@ -178,7 +70,7 @@
<div
v-for="(section, i) in detailSections"
:key="section.label"
class="flex flex-col p-3"
class="flex flex-col px-2 py-3 sm:p-3"
:class="{ 'border-b': i !== detailSections.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
@ -191,7 +83,17 @@
</div>
</div>
</div>
</Resizer>
</div>
<Activities
v-else
doctype="CRM Lead"
:title="tab.name"
:tabs="tabs"
v-model:reload="reload"
v-model:tabIndex="tabIndex"
v-model="lead"
/>
</Tabs>
</div>
<AssignmentModal
v-if="lead.data"
@ -268,7 +170,7 @@
</Dialog>
</template>
<script setup>
import Resizer from '@/components/Resizer.vue'
import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
import EmailIcon from '@/components/Icons/EmailIcon.vue'
import CommentIcon from '@/components/Icons/CommentIcon.vue'
@ -277,8 +179,6 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue'
import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import CameraIcon from '@/components/Icons/CameraIcon.vue'
import LinkIcon from '@/components/Icons/LinkIcon.vue'
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
@ -290,25 +190,15 @@ import Section from '@/components/Section.vue'
import SectionFields from '@/components/SectionFields.vue'
import SLASection from '@/components/SLASection.vue'
import CustomActions from '@/components/CustomActions.vue'
import {
openWebsite,
createToast,
setupAssignees,
setupCustomActions,
errorMessage,
copyToClipboard,
} from '@/utils'
import { createToast, setupAssignees, setupCustomActions } from '@/utils'
import { globalStore } from '@/stores/global'
import { contactsStore } from '@/stores/contacts'
import { organizationsStore } from '@/stores/organizations'
import { statusesStore } from '@/stores/statuses'
import { whatsappEnabled, callEnabled } from '@/stores/settings'
import { whatsappEnabled, callEnabled, isMobileView } from '@/stores/settings'
import {
createResource,
FileUploader,
Dropdown,
Tooltip,
Avatar,
Tabs,
Switch,
Breadcrumbs,
@ -317,7 +207,7 @@ import {
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const { $dialog, makeCall } = globalStore()
const { $dialog } = globalStore()
const { getContactByName, contacts } = contactsStore()
const { organizations } = organizationsStore()
const { statusOptions, getLeadStatus } = statusesStore()
@ -419,6 +309,12 @@ const tabIndex = ref(0)
const tabs = computed(() => {
let tabOptions = [
{
name: 'Details',
label: __('Details'),
icon: DetailsIcon,
condition: () => isMobileView.value,
},
{
name: 'Activity',
label: __('Activity'),
@ -471,13 +367,6 @@ watch(tabs, (value) => {
}
})
function validateFile(file) {
let extn = file.name.split('.').pop().toLowerCase()
if (!['png', 'jpg', 'jpeg'].includes(extn)) {
return __('Only PNG and JPG images are allowed')
}
}
const detailSections = computed(() => {
let data = lead.data
if (!data) return []
@ -576,10 +465,4 @@ async function convertToDeal(updated) {
}
}
}
const activities = ref(null)
function openEmailBox() {
activities.value.emailBox.show = true
}
</script>