Skip to content

Commit

Permalink
fix: added tabs for connected lead/deal/contact
Browse files Browse the repository at this point in the history
  • Loading branch information
@shariquerik
shariquerik committed Nov 2, 2023
1 parent 54a46e1 commit fbc1286
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 86 deletions.
16 changes: 16 additions & 0 deletions frontend/src/components/Icons/WebsiteIcon.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.02062 7.49896C2.49506 7.49716 2.97742 7.4933 3.47006 7.48935C3.94277 7.48556 4.42495 7.48169 4.9187 7.47951C4.97589 6.3862 5.14998 5.23014 5.51484 4.17085C5.76241 3.45208 6.1023 2.76557 6.56226 2.17336C4.09972 2.77895 2.23508 4.90491 2.02062 7.49896ZM8 2.1204C7.29452 2.69277 6.79592 3.52219 6.46032 4.49652C6.13931 5.4285 5.97681 6.46734 5.92025 7.4779C6.5896 7.47899 7.28127 7.485 8 7.49989C8.7546 7.48425 9.43077 7.47841 10.0797 7.47777C10.0232 6.46725 9.86068 5.42846 9.53968 4.49651C9.20408 3.52219 8.70548 2.69277 8 2.1204ZM10.0822 8.47771C10.0279 9.50221 9.8654 10.5578 9.53968 11.5035C9.20409 12.4778 8.70548 13.3072 8.00001 13.8796C7.29453 13.3072 6.79592 12.4778 6.46032 11.5035C6.13462 10.5579 5.9721 9.5023 5.91784 8.47784C6.58355 8.47892 7.27164 8.48494 7.98959 8.49989C7.99653 8.50004 8.00347 8.50004 8.01042 8.49989C8.76493 8.48417 9.43715 8.47833 10.0822 8.47771ZM4.91661 8.47951C4.43411 8.48168 3.962 8.48548 3.49714 8.48922C2.99784 8.49323 2.50691 8.49718 2.02045 8.49899C2.2341 11.094 4.09907 13.2209 6.56227 13.8266C6.1023 13.2344 5.76241 12.5479 5.51484 11.8291C5.14541 10.7566 4.97157 9.58487 4.91661 8.47951ZM9.43774 13.8266C9.89771 13.2344 10.2376 12.5479 10.4852 11.8291C10.8545 10.7569 11.0283 9.58549 11.0834 8.48039C11.4269 8.48234 11.771 8.48511 12.1244 8.48796C12.7045 8.49264 13.3098 8.49752 13.9795 8.4993C13.7658 11.0941 11.9008 13.2209 9.43774 13.8266ZM13.9794 7.49928C13.3241 7.49751 12.7264 7.49271 12.1508 7.48809C11.7885 7.48518 11.435 7.48234 11.0814 7.48037C11.0242 6.38681 10.8501 5.23042 10.4852 4.17085C10.2376 3.45208 9.89771 2.76557 9.43774 2.17336C11.9004 2.77897 13.7651 4.90509 13.9794 7.49928ZM1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8Z"
fill="currentColor"
/>
</svg>
</template>
215 changes: 129 additions & 86 deletions frontend/src/pages/Organization.vue
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,104 @@
<template>
<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);
<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"
>
<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.name" class="flex items-center gap-1.5">
<Avatar :label="organization.name" size="xs" />
<span class="">{{ organization.name }}</span>
</div>
<span
v-if="organization.email_id"
class="text-3xl leading-[0] text-gray-600"
>&middot;</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
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>
<span
v-if="(organization.name || organization.email_id) && organization.mobile_no"
class="text-3xl leading-[0] text-gray-600"
>&middot;</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 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"
>&middot;</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"
>&middot;</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>
<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">
<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>
Expand All @@ -94,12 +108,16 @@
<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"
v-model="showOrganizationModal"
v-model:reloadOrganizations="organizations"
:organization="organization"
/> -->
</div>
</template>
Expand All @@ -112,14 +130,19 @@ import {
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 { ref } from 'vue'
import { h, ref } from 'vue'
const props = defineProps({
organization: {
Expand Down Expand Up @@ -170,4 +193,24 @@ async function deleteOrganization() {
],
})
}
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>
1 change: 1 addition & 0 deletions frontend/src/pages/Organizations.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@click="showOrganizationModal = true"
>
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
Create organization
</Button>
</template>
</LayoutHeader>
Expand Down

0 comments on commit fbc1286

Please sign in to comment.