fix: added organization page
This commit is contained in:
Shariq Ansari
parent
1d42093810
commit
5f92c5d3d7
@ -30,4 +30,18 @@ def get_contacts():
|
||||
distinct=True,
|
||||
).run(as_dict=1)
|
||||
|
||||
return contacts
|
||||
return contacts
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_organizations():
|
||||
if frappe.session.user == "Guest":
|
||||
frappe.throw("Authentication failed", exc=frappe.AuthenticationError)
|
||||
|
||||
organizations = frappe.qb.get_query(
|
||||
"CRM Organization",
|
||||
fields=['name', 'organization_logo', 'website'],
|
||||
order_by="name asc",
|
||||
distinct=True,
|
||||
).run(as_dict=1)
|
||||
|
||||
return organizations
|
||||
|
||||
@ -37,6 +37,7 @@ import UserDropdown from '@/components/UserDropdown.vue'
|
||||
import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
|
||||
import DealsIcon from '@/components/Icons/DealsIcon.vue'
|
||||
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
|
||||
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
|
||||
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
||||
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||
import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
|
||||
@ -59,6 +60,11 @@ const links = [
|
||||
icon: ContactsIcon,
|
||||
to: 'Contacts',
|
||||
},
|
||||
{
|
||||
label: 'Organizations',
|
||||
icon: OrganizationsIcon,
|
||||
to: 'Organizations',
|
||||
},
|
||||
{
|
||||
label: 'Notes',
|
||||
icon: NoteIcon,
|
||||
|
||||
208
frontend/src/pages/Organization.vue
Normal file
208
frontend/src/pages/Organization.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex gap-6 p-5">
|
||||
<FileUploader
|
||||
@success="changeOrganizationImage"
|
||||
:validateFile="validateFile"
|
||||
>
|
||||
<template #default="{ openFileSelector, error }">
|
||||
<div class="group relative h-24 w-24">
|
||||
<Avatar
|
||||
size="3xl"
|
||||
:image="organization.organization_logo"
|
||||
:label="organization.name"
|
||||
class="!h-24 !w-24"
|
||||
/>
|
||||
<component
|
||||
:is="organization.organization_logo ? Dropdown : 'div'"
|
||||
v-bind="
|
||||
organization.organization_logo
|
||||
? {
|
||||
options: [
|
||||
{
|
||||
icon: 'upload',
|
||||
label: organization.organization_logo
|
||||
? 'Change image'
|
||||
: 'Upload image',
|
||||
onClick: openFileSelector,
|
||||
},
|
||||
{
|
||||
icon: 'trash-2',
|
||||
label: 'Remove image',
|
||||
onClick: () => changeOrganizationImage(''),
|
||||
},
|
||||
],
|
||||
}
|
||||
: { onClick: openFileSelector }
|
||||
"
|
||||
class="!absolute bottom-0 left-0 right-0"
|
||||
>
|
||||
<div
|
||||
class="z-1 absolute bottom-0 left-0 right-0 flex h-13 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="h-6 w-6 cursor-pointer text-white" />
|
||||
</div>
|
||||
</component>
|
||||
<ErrorMessage class="mt-2" :message="error" />
|
||||
</div>
|
||||
</template>
|
||||
</FileUploader>
|
||||
<div class="flex flex-col justify-center gap-2">
|
||||
<div class="text-3xl font-semibold text-gray-900">
|
||||
{{ organization.name }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-base text-gray-700">
|
||||
<div v-if="organization.website" class="flex items-center gap-1.5">
|
||||
<WebsiteIcon class="h-4 w-4" />
|
||||
<span class="">{{ website(organization.website) }}</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="organization.email_id"
|
||||
class="text-3xl leading-[0] text-gray-600"
|
||||
>·</span
|
||||
>
|
||||
<div v-if="organization.email_id" class="flex items-center gap-1.5">
|
||||
<EmailIcon class="h-4 w-4" />
|
||||
<span class="">{{ organization.email_id }}</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="
|
||||
(organization.name || organization.email_id) &&
|
||||
organization.mobile_no
|
||||
"
|
||||
class="text-3xl leading-[0] text-gray-600"
|
||||
>·</span
|
||||
>
|
||||
<div v-if="organization.mobile_no" class="flex items-center gap-1.5">
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
<span class="">{{ organization.mobile_no }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1 flex gap-2">
|
||||
<Button label="Edit" size="sm" @click="showOrganizationModal = true">
|
||||
<template #prefix>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button
|
||||
label="Delete"
|
||||
theme="red"
|
||||
size="sm"
|
||||
@click="deleteOrganization"
|
||||
>
|
||||
<template #prefix>
|
||||
<FeatherIcon name="trash-2" class="h-4 w-4" />
|
||||
</template>
|
||||
</Button>
|
||||
<!-- <Button label="Add lead" size="sm">
|
||||
<template #prefix>
|
||||
<FeatherIcon name="plus" class="h-4 w-4" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button label="Add deal" size="sm">
|
||||
<template #prefix>
|
||||
<FeatherIcon name="plus" class="h-4 w-4" />
|
||||
</template>
|
||||
</Button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
|
||||
{{ tab.label }}
|
||||
</Tabs>
|
||||
<!-- <OrganizationModal
|
||||
v-model="showOrganizationModal"
|
||||
v-model:reloadOrganizations="organizations"
|
||||
:organization="organization"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
FeatherIcon,
|
||||
Avatar,
|
||||
FileUploader,
|
||||
ErrorMessage,
|
||||
Dropdown,
|
||||
call,
|
||||
Tabs,
|
||||
} from 'frappe-ui'
|
||||
// import OrganizationModal from '@/components/OrganizationModal.vue'
|
||||
import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
|
||||
import EmailIcon from '@/components/Icons/EmailIcon.vue'
|
||||
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||
import CameraIcon from '@/components/Icons/CameraIcon.vue'
|
||||
import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
|
||||
import DealsIcon from '@/components/Icons/DealsIcon.vue'
|
||||
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
|
||||
import { organizationsStore } from '@/stores/organizations.js'
|
||||
import { h, ref } from 'vue'
|
||||
const props = defineProps({
|
||||
organization: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const { organizations } = organizationsStore()
|
||||
const showOrganizationModal = ref(false)
|
||||
function validateFile(file) {
|
||||
let extn = file.name.split('.').pop().toLowerCase()
|
||||
if (!['png', 'jpg', 'jpeg'].includes(extn)) {
|
||||
return 'Only PNG and JPG images are allowed'
|
||||
}
|
||||
}
|
||||
async function changeOrganizationImage(file) {
|
||||
await call('frappe.client.set_value', {
|
||||
doctype: 'Organization',
|
||||
name: props.organization.name,
|
||||
fieldname: 'image',
|
||||
value: file?.file_url || '',
|
||||
})
|
||||
organizations.reload()
|
||||
}
|
||||
async function deleteOrganization() {
|
||||
$dialog({
|
||||
title: 'Delete organization',
|
||||
message: 'Are you sure you want to delete this organization?',
|
||||
actions: [
|
||||
{
|
||||
label: 'Delete',
|
||||
theme: 'red',
|
||||
variant: 'solid',
|
||||
async onClick({ close }) {
|
||||
await call('frappe.client.delete', {
|
||||
doctype: 'Organization',
|
||||
name: props.organization.name,
|
||||
})
|
||||
organizations.reload()
|
||||
close()
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
function website(url) {
|
||||
return url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
|
||||
}
|
||||
const tabIndex = ref(0)
|
||||
const tabs = [
|
||||
{
|
||||
label: 'Leads',
|
||||
icon: h(LeadsIcon, { class: 'h-4 w-4' }),
|
||||
},
|
||||
{
|
||||
label: 'Deals',
|
||||
icon: h(DealsIcon, { class: 'h-4 w-4' }),
|
||||
},
|
||||
{
|
||||
label: 'Contacts',
|
||||
icon: h(ContactsIcon, { class: 'h-4 w-4' }),
|
||||
},
|
||||
]
|
||||
</script>
|
||||
109
frontend/src/pages/Organizations.vue
Normal file
109
frontend/src/pages/Organizations.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<LayoutHeader>
|
||||
<template #left-header>
|
||||
<Breadcrumbs :items="breadcrumbs" />
|
||||
</template>
|
||||
<template #right-header>
|
||||
<Button
|
||||
variant="solid"
|
||||
label="Create"
|
||||
@click="showOrganizationModal = true"
|
||||
>
|
||||
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||
Create organization
|
||||
</Button>
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<div class="flex h-full overflow-hidden">
|
||||
<div class="flex flex-col overflow-y-auto border-r">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'Organization',
|
||||
params: { organizationId: organization.name },
|
||||
}"
|
||||
v-for="(organization, i) in organizations.data"
|
||||
:key="i"
|
||||
:class="[
|
||||
currentOrganization?.name === organization.name
|
||||
? 'bg-gray-50 hover:bg-gray-100'
|
||||
: 'hover:bg-gray-50',
|
||||
]"
|
||||
>
|
||||
<div class="flex w-[352px] items-center gap-3 border-b px-5 py-4">
|
||||
<Avatar
|
||||
:image="organization.organization_logo"
|
||||
:label="organization.name"
|
||||
size="xl"
|
||||
/>
|
||||
<div class="flex flex-col items-start gap-1">
|
||||
<span class="text-base font-medium text-gray-900">
|
||||
{{ organization.name }}
|
||||
</span>
|
||||
<span class="text-sm text-gray-700">{{
|
||||
website(organization.website)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<router-view
|
||||
v-if="currentOrganization"
|
||||
:organization="currentOrganization"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="grid h-full place-items-center text-xl font-medium text-gray-500"
|
||||
>
|
||||
<div class="flex flex-col items-center justify-center space-y-2">
|
||||
<OrganizationsIcon class="h-10 w-10" />
|
||||
<div>No organization selected</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <OrganizationModal
|
||||
v-model="showOrganizationModal"
|
||||
v-model:reloadOrganizations="organizations"
|
||||
:organization="{}"
|
||||
/> -->
|
||||
</template>
|
||||
<script setup>
|
||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||
// import OrganizationModal from '@/components/OrganizationModal.vue'
|
||||
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
|
||||
import { FeatherIcon, Breadcrumbs, Avatar } from 'frappe-ui'
|
||||
import { organizationsStore } from '@/stores/organizations.js'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
const { organizations } = organizationsStore()
|
||||
const route = useRoute()
|
||||
const showOrganizationModal = ref(false)
|
||||
const currentOrganization = computed(() => {
|
||||
return organizations.data.find(
|
||||
(organization) => organization.name === route.params.organizationId
|
||||
)
|
||||
})
|
||||
const breadcrumbs = computed(() => {
|
||||
let items = [{ label: 'Organizations', route: { name: 'Organizations' } }]
|
||||
if (!currentOrganization.value) return items
|
||||
items.push({
|
||||
label: currentOrganization.value.name,
|
||||
route: {
|
||||
name: 'Organization',
|
||||
params: { organizationId: currentOrganization.value.name },
|
||||
},
|
||||
})
|
||||
return items
|
||||
})
|
||||
onMounted(() => {
|
||||
const el = document.querySelector('.router-link-active')
|
||||
if (el)
|
||||
setTimeout(() => {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
})
|
||||
})
|
||||
function website(url) {
|
||||
return url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
|
||||
}
|
||||
</script>
|
||||
@ -39,6 +39,19 @@ const routes = [
|
||||
name: 'Contacts',
|
||||
component: () => import('@/pages/Contacts.vue'),
|
||||
},
|
||||
{
|
||||
path: '/organizations',
|
||||
name: 'Organizations',
|
||||
component: () => import('@/pages/Organizations.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/organizations/:organizationId?',
|
||||
name: 'Organization',
|
||||
component: () => import('@/pages/Organization.vue'),
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/call-logs',
|
||||
name: 'Call Logs',
|
||||
|
||||
34
frontend/src/stores/organizations.js
Normal file
34
frontend/src/stores/organizations.js
Normal file
@ -0,0 +1,34 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { createResource } from 'frappe-ui'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
export const organizationsStore = defineStore('crm-organizations', () => {
|
||||
let organizationsByName = reactive({})
|
||||
|
||||
const organizations = createResource({
|
||||
url: 'crm.api.session.get_organizations',
|
||||
cache: 'organizations',
|
||||
initialData: [],
|
||||
transform(organizations) {
|
||||
for (let organization of organizations) {
|
||||
organizationsByName[organization.name] = organization
|
||||
}
|
||||
return organizations
|
||||
},
|
||||
onError(error) {
|
||||
if (error && error.exc_type === 'AuthenticationError') {
|
||||
router.push('/login')
|
||||
}
|
||||
},
|
||||
})
|
||||
organizations.fetch()
|
||||
|
||||
function getOrganization(name) {
|
||||
return organizationsByName[name]
|
||||
}
|
||||
|
||||
return {
|
||||
organizations,
|
||||
getOrganization,
|
||||
}
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user