feat(companies): add company detail page (#14054)
This commit is contained in:
salmonumbrella
+22
-30
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
@@ -12,9 +12,8 @@ const props = defineProps({
|
||||
name: { type: String, default: '' },
|
||||
domain: { type: String, default: '' },
|
||||
contactsCount: { type: Number, default: 0 },
|
||||
description: { type: String, default: '' },
|
||||
avatarUrl: { type: String, default: '' },
|
||||
updatedAt: { type: [String, Number], default: null },
|
||||
lastActivityAt: { type: [String, Number], default: null },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['showCompany']);
|
||||
@@ -27,15 +26,21 @@ const displayName = computed(() => props.name || t('COMPANIES.UNNAMED'));
|
||||
|
||||
const avatarSource = computed(() => props.avatarUrl || null);
|
||||
|
||||
const formattedUpdatedAt = computed(() => {
|
||||
if (!props.updatedAt) return '';
|
||||
return formatDistanceToNow(new Date(props.updatedAt), { addSuffix: true });
|
||||
const hasContacts = computed(() => Number(props.contactsCount || 0) > 0);
|
||||
|
||||
const contactsCountLabel = computed(() =>
|
||||
t('COMPANIES.CONTACTS_COUNT', { n: Number(props.contactsCount || 0) })
|
||||
);
|
||||
|
||||
const formattedLastActivityAt = computed(() => {
|
||||
if (!props.lastActivityAt) return '';
|
||||
return dynamicTime(props.lastActivityAt);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardLayout layout="row" @click="onClickViewDetails">
|
||||
<div class="flex items-center justify-start flex-1 gap-4">
|
||||
<div class="flex items-center justify-start flex-1 gap-4 cursor-pointer">
|
||||
<Avatar
|
||||
:username="displayName"
|
||||
:src="avatarSource"
|
||||
@@ -51,42 +56,29 @@ const formattedUpdatedAt = computed(() => {
|
||||
{{ displayName }}
|
||||
</span>
|
||||
<span
|
||||
v-if="domain && description"
|
||||
v-if="hasContacts"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
|
||||
>
|
||||
<Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
|
||||
<span class="truncate">{{ domain }}</span>
|
||||
<Icon icon="i-lucide-contact" size="size-3.5 text-n-slate-11" />
|
||||
{{ contactsCountLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 min-w-0">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex items-center min-w-0">
|
||||
<span
|
||||
v-if="domain && !description"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
|
||||
v-if="domain"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate cursor-text"
|
||||
@click.stop
|
||||
>
|
||||
<Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
|
||||
<span class="truncate">{{ domain }}</span>
|
||||
</span>
|
||||
<span v-if="description" class="text-sm text-n-slate-11 truncate">
|
||||
{{ description }}
|
||||
</span>
|
||||
<div
|
||||
v-if="(description || domain) && contactsCount"
|
||||
class="w-px h-3 bg-n-slate-6"
|
||||
/>
|
||||
<span
|
||||
v-if="contactsCount"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
|
||||
>
|
||||
<Icon icon="i-lucide-contact" size="size-3.5 text-n-slate-11" />
|
||||
{{ t('COMPANIES.CONTACTS_COUNT', { n: contactsCount }) }}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="updatedAt"
|
||||
v-if="lastActivityAt"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 flex-shrink-0"
|
||||
>
|
||||
{{ formattedUpdatedAt }}
|
||||
{{ formattedLastActivityAt }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup>
|
||||
import { ref, useSlots } from 'vue';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
|
||||
import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
defineProps({
|
||||
breadcrumbItems: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['back']);
|
||||
|
||||
const slots = useSlots();
|
||||
const isSidebarOpen = ref(false);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
isSidebarOpen.value = !isSidebarOpen.value;
|
||||
};
|
||||
|
||||
const closeMobileSidebar = () => {
|
||||
if (!isSidebarOpen.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isSidebarOpen.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
class="flex w-full h-full overflow-hidden justify-evenly bg-n-surface-1"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
|
||||
>
|
||||
<header class="sticky top-0 z-10 px-6 3xl:px-0">
|
||||
<div class="w-full mx-auto max-w-[40.625rem]">
|
||||
<div
|
||||
class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
|
||||
>
|
||||
<Breadcrumb :items="breadcrumbItems" @click="emit('back')" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-1 px-6 overflow-y-auto 3xl:px-px">
|
||||
<div class="w-full py-4 mx-auto max-w-[40.625rem]">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="slots.sidebar"
|
||||
class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
|
||||
>
|
||||
<slot name="sidebar" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="slots.sidebar"
|
||||
class="lg:hidden fixed top-0 ltr:right-0 rtl:left-0 h-full z-50 flex justify-end transition-all duration-200 ease-in-out"
|
||||
:class="isSidebarOpen ? 'w-full' : 'w-16'"
|
||||
>
|
||||
<div
|
||||
v-on-click-outside="[
|
||||
closeMobileSidebar,
|
||||
{ ignore: ['#details-sidebar-content'] },
|
||||
]"
|
||||
class="flex items-start p-1 w-fit h-fit relative order-1 xs:top-24 top-28 transition-all bg-n-solid-2 border border-n-weak duration-500 ease-in-out"
|
||||
:class="[
|
||||
isSidebarOpen
|
||||
? 'justify-end ltr:rounded-l-full rtl:rounded-r-full ltr:rounded-r-none rtl:rounded-l-none'
|
||||
: 'justify-center rounded-full ltr:mr-6 rtl:ml-6',
|
||||
]"
|
||||
>
|
||||
<Button
|
||||
ghost
|
||||
slate
|
||||
sm
|
||||
class="!rounded-full rtl:rotate-180"
|
||||
:class="{ 'bg-n-alpha-2': isSidebarOpen }"
|
||||
:icon="
|
||||
isSidebarOpen
|
||||
? 'i-lucide-panel-right-close'
|
||||
: 'i-lucide-panel-right-open'
|
||||
"
|
||||
data-details-sidebar-toggle
|
||||
@click="toggleSidebar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
enter-active-class="transition-transform duration-200 ease-in-out"
|
||||
leave-active-class="transition-transform duration-200 ease-in-out"
|
||||
enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
|
||||
enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
|
||||
leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
|
||||
leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
|
||||
>
|
||||
<div
|
||||
v-if="isSidebarOpen"
|
||||
id="details-sidebar-content"
|
||||
class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
|
||||
>
|
||||
<slot name="sidebar" />
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
+10
-10
@@ -19,22 +19,15 @@ const emit = defineEmits(['search', 'update:sort']);
|
||||
<div
|
||||
class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
|
||||
>
|
||||
<span class="text-heading-1 truncate text-n-slate-12">
|
||||
<span class="text-xl font-medium truncate text-n-slate-12">
|
||||
{{ headerTitle }}
|
||||
</span>
|
||||
<div class="flex items-center flex-row flex-shrink-0 gap-2">
|
||||
<div class="flex items-center">
|
||||
<CompanySortMenu
|
||||
:active-sort="activeSort"
|
||||
:active-ordering="activeOrdering"
|
||||
@update:sort="emit('update:sort', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
|
||||
<div v-if="showSearch" class="flex items-center gap-2 w-full">
|
||||
<Input
|
||||
:model-value="searchValue"
|
||||
type="search"
|
||||
:placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
|
||||
:placeholder="$t('COMPANIES.SEARCH_PLACEHOLDER')"
|
||||
:custom-input-class="[
|
||||
'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
|
||||
]"
|
||||
@@ -49,6 +42,13 @@ const emit = defineEmits(['search', 'update:sort']);
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
<div class="flex items-center flex-shrink-0 gap-2">
|
||||
<CompanySortMenu
|
||||
:active-sort="activeSort"
|
||||
:active-ordering="activeOrdering"
|
||||
@update:sort="emit('update:sort', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
+6
@@ -35,6 +35,10 @@ const sortMenus = [
|
||||
label: t('COMPANIES.SORT_BY.OPTIONS.CREATED_AT'),
|
||||
value: 'created_at',
|
||||
},
|
||||
{
|
||||
label: t('COMPANIES.SORT_BY.OPTIONS.LAST_ACTIVITY_AT'),
|
||||
value: 'last_activity_at',
|
||||
},
|
||||
{
|
||||
label: t('COMPANIES.SORT_BY.OPTIONS.CONTACTS_COUNT'),
|
||||
value: 'contacts_count',
|
||||
@@ -101,6 +105,7 @@ const handleOrderChange = value => {
|
||||
:model-value="activeSort"
|
||||
:options="sortMenus"
|
||||
:label="activeSortLabel"
|
||||
sub-menu-position="left"
|
||||
@update:model-value="handleSortChange"
|
||||
/>
|
||||
</div>
|
||||
@@ -112,6 +117,7 @@ const handleOrderChange = value => {
|
||||
:model-value="activeOrdering"
|
||||
:options="orderingMenus"
|
||||
:label="activeOrderingLabel"
|
||||
sub-menu-position="left"
|
||||
@update:model-value="handleOrderChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
+354
@@ -0,0 +1,354 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
|
||||
import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
|
||||
|
||||
const props = defineProps({
|
||||
company: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
contacts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
meta: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isBusy: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
searchResults: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isSearching: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
selectedContact: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'cancelContactSelection',
|
||||
'confirmContactSelection',
|
||||
'removeContact',
|
||||
'search',
|
||||
'selectContact',
|
||||
'update:currentPage',
|
||||
]);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const selectedContactId = ref(null);
|
||||
const searchQuery = ref('');
|
||||
|
||||
const hasContacts = computed(() => props.contacts.length > 0);
|
||||
const currentPage = computed(() => Number(props.meta?.page || 1));
|
||||
const totalContacts = computed(() => Number(props.meta?.totalCount || 0));
|
||||
const linkedContactIds = computed(
|
||||
() => new Set(props.contacts.map(contact => Number(contact.id)))
|
||||
);
|
||||
const showPaginationFooter = computed(
|
||||
() => hasContacts.value && totalContacts.value > props.contacts.length
|
||||
);
|
||||
|
||||
const openContact = contactId => {
|
||||
router.push({
|
||||
name: 'contacts_edit',
|
||||
params: {
|
||||
accountId: route.params.accountId,
|
||||
contactId,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const contactMeta = contact =>
|
||||
[contact.email, contact.phoneNumber].filter(Boolean).join(' • ');
|
||||
|
||||
const contactName = contact =>
|
||||
contact.name || t('COMPANIES.DETAIL.CONTACTS.UNNAMED_CONTACT');
|
||||
|
||||
const contactOptions = computed(() =>
|
||||
props.searchResults
|
||||
.filter(
|
||||
contact =>
|
||||
!contact.linkedToCurrentCompany &&
|
||||
!linkedContactIds.value.has(Number(contact.id))
|
||||
)
|
||||
.map(contact => ({
|
||||
value: contact.id,
|
||||
label: [contactName(contact), contact.email, contact.phoneNumber]
|
||||
.filter(Boolean)
|
||||
.join(' · '),
|
||||
}))
|
||||
);
|
||||
|
||||
const emptyState = computed(() => {
|
||||
if (props.isSearching) {
|
||||
return t('COMPANIES.DETAIL.CONTACTS.LOADING');
|
||||
}
|
||||
|
||||
return searchQuery.value.trim()
|
||||
? t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.EMPTY')
|
||||
: t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.INITIAL');
|
||||
});
|
||||
|
||||
const selectedContactName = computed(() =>
|
||||
props.selectedContact ? contactName(props.selectedContact) : ''
|
||||
);
|
||||
|
||||
const selectedContactMeta = computed(() =>
|
||||
props.selectedContact ? contactMeta(props.selectedContact) : ''
|
||||
);
|
||||
|
||||
const selectedContactCompanyName = computed(
|
||||
() => props.selectedContact?.company?.name || ''
|
||||
);
|
||||
|
||||
const summaryRows = computed(() => [
|
||||
{
|
||||
key: 'company',
|
||||
label: t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.COMPANY_LABEL'),
|
||||
avatarName: props.company.name || t('COMPANIES.UNNAMED'),
|
||||
avatarSrc: props.company.avatarUrl,
|
||||
primary: props.company.name || t('COMPANIES.UNNAMED'),
|
||||
secondary: props.company.domain,
|
||||
},
|
||||
{
|
||||
key: 'contact',
|
||||
label: t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONTACT_LABEL'),
|
||||
badge: selectedContactCompanyName.value
|
||||
? t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CURRENT_COMPANY', {
|
||||
companyName: selectedContactCompanyName.value,
|
||||
})
|
||||
: '',
|
||||
avatarName: selectedContactName.value,
|
||||
avatarSrc: props.selectedContact?.thumbnail,
|
||||
primary: selectedContactName.value,
|
||||
secondary: selectedContactMeta.value,
|
||||
},
|
||||
]);
|
||||
|
||||
const debouncedSearch = debounce(query => {
|
||||
emit('search', query);
|
||||
}, 300);
|
||||
|
||||
const handleSearch = query => {
|
||||
searchQuery.value = query;
|
||||
debouncedSearch(query.trim());
|
||||
};
|
||||
|
||||
const handleContactSelect = contactId => {
|
||||
const selectedContact = props.searchResults.find(
|
||||
contact => contact.id === Number(contactId)
|
||||
);
|
||||
|
||||
selectedContactId.value = null;
|
||||
if (selectedContact) {
|
||||
emit('selectContact', selectedContact);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-6 px-6 pb-6 pt-1">
|
||||
<div v-if="!selectedContact" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-base text-n-slate-12">
|
||||
{{ t('COMPANIES.DETAIL.CONTACTS.ACTIONS.ADD') }}
|
||||
</label>
|
||||
<span class="text-sm text-n-slate-11">
|
||||
{{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.DESCRIPTION') }}
|
||||
</span>
|
||||
</div>
|
||||
<ComboBox
|
||||
use-api-results
|
||||
:model-value="selectedContactId"
|
||||
:options="contactOptions"
|
||||
:disabled="isBusy"
|
||||
:empty-state="emptyState"
|
||||
:search-placeholder="
|
||||
t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.SEARCH_PLACEHOLDER')
|
||||
"
|
||||
:placeholder="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.ADD')"
|
||||
class="[&>div>button]:bg-n-alpha-black2"
|
||||
@search="handleSearch"
|
||||
@update:model-value="handleContactSelect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-base text-n-slate-12">
|
||||
{{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONFIRM_TITLE') }}
|
||||
</label>
|
||||
<span class="text-sm text-n-slate-11">
|
||||
{{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONFIRM_DESCRIPTION') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
v-for="row in summaryRows"
|
||||
:key="row.key"
|
||||
class="flex flex-col gap-2"
|
||||
>
|
||||
<div class="flex items-center justify-between h-5 gap-2">
|
||||
<label class="text-sm text-n-slate-12">
|
||||
{{ row.label }}
|
||||
</label>
|
||||
<span
|
||||
v-if="row.badge"
|
||||
class="px-2 py-0.5 text-xs rounded-md text-n-amber-11 bg-n-alpha-2"
|
||||
>
|
||||
{{ row.badge }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
|
||||
>
|
||||
<Avatar
|
||||
:name="row.avatarName"
|
||||
:src="row.avatarSrc"
|
||||
:size="32"
|
||||
rounded-full
|
||||
hide-offline-status
|
||||
/>
|
||||
<div class="flex flex-col w-full min-w-0 gap-1">
|
||||
<span
|
||||
class="text-sm leading-4 font-medium truncate text-n-slate-12"
|
||||
>
|
||||
{{ row.primary }}
|
||||
</span>
|
||||
<span
|
||||
v-if="row.secondary"
|
||||
class="text-sm leading-4 truncate text-n-slate-11"
|
||||
>
|
||||
{{ row.secondary }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between gap-3 mt-2">
|
||||
<Button
|
||||
variant="faded"
|
||||
color="slate"
|
||||
:label="t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CANCEL')"
|
||||
class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
|
||||
:disabled="isBusy"
|
||||
@click="emit('cancelContactSelection')"
|
||||
/>
|
||||
<Button
|
||||
:label="t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.ADD')"
|
||||
class="w-full"
|
||||
:is-loading="isBusy"
|
||||
:disabled="isBusy"
|
||||
@click="emit('confirmContactSelection')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h4 class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('COMPANIES.DETAIL.SIDEBAR.TABS.CONTACTS') }}
|
||||
</h4>
|
||||
<span v-if="hasContacts" class="text-xs tabular-nums text-n-slate-11">
|
||||
{{ t('COMPANIES.CONTACTS_COUNT', { n: totalContacts }) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isLoading && !hasContacts"
|
||||
class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
|
||||
>
|
||||
{{ t('COMPANIES.DETAIL.CONTACTS.LOADING') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="!hasContacts"
|
||||
class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
|
||||
>
|
||||
{{ t('COMPANIES.DETAIL.CONTACTS.EMPTY') }}
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-col divide-y divide-n-weak">
|
||||
<div
|
||||
v-for="contact in contacts"
|
||||
:key="contact.id"
|
||||
class="flex items-center gap-2 py-3 group/contact"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center flex-1 min-w-0 !p-0 gap-3 text-start rounded-lg transition-colors text-n-slate-12 hover:text-n-blue-11 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-n-brand focus-visible:ring-offset-2 focus-visible:ring-offset-n-background"
|
||||
@click="openContact(contact.id)"
|
||||
>
|
||||
<Avatar
|
||||
:name="contactName(contact)"
|
||||
:src="contact.thumbnail"
|
||||
:size="32"
|
||||
rounded-full
|
||||
hide-offline-status
|
||||
/>
|
||||
<div class="min-w-0 space-y-0.5">
|
||||
<span
|
||||
class="text-sm font-medium leading-5 truncate text-n-slate-12"
|
||||
>
|
||||
{{ contactName(contact) }}
|
||||
</span>
|
||||
<p
|
||||
v-if="contactMeta(contact)"
|
||||
class="text-sm leading-5 truncate text-n-slate-11"
|
||||
>
|
||||
{{ contactMeta(contact) }}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Button
|
||||
icon="i-lucide-unlink"
|
||||
color="slate"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
class="shrink-0 opacity-70 transition-opacity sm:opacity-0 sm:group-hover/contact:opacity-100 sm:focus-visible:opacity-100"
|
||||
:disabled="isBusy"
|
||||
:title="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.REMOVE')"
|
||||
:aria-label="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.REMOVE')"
|
||||
@click.stop="emit('removeContact', contact.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PaginationFooter
|
||||
v-if="showPaginationFooter"
|
||||
current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
|
||||
:current-page="currentPage"
|
||||
:total-items="totalContacts"
|
||||
:items-per-page="15"
|
||||
class="px-0 before:hidden"
|
||||
@update:current-page="emit('update:currentPage', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useCompaniesStore } from 'dashboard/stores/companies';
|
||||
|
||||
import ListAttribute from 'dashboard/components-next/CustomAttributes/ListAttribute.vue';
|
||||
import CheckboxAttribute from 'dashboard/components-next/CustomAttributes/CheckboxAttribute.vue';
|
||||
import DateAttribute from 'dashboard/components-next/CustomAttributes/DateAttribute.vue';
|
||||
import OtherAttribute from 'dashboard/components-next/CustomAttributes/OtherAttribute.vue';
|
||||
|
||||
const props = defineProps({
|
||||
companyId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
attribute: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
isEditingView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const companiesStore = useCompaniesStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await companiesStore.deleteCustomAttributes({
|
||||
id: props.companyId,
|
||||
customAttributes: [props.attribute.attributeKey],
|
||||
});
|
||||
useAlert(t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.DELETE_SUCCESS'));
|
||||
} catch (error) {
|
||||
useAlert(
|
||||
error?.response?.message ||
|
||||
t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.DELETE_ERROR')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async value => {
|
||||
try {
|
||||
await companiesStore.update({
|
||||
id: props.companyId,
|
||||
customAttributes: {
|
||||
[props.attribute.attributeKey]: value,
|
||||
},
|
||||
});
|
||||
useAlert(t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.UPDATE_SUCCESS'));
|
||||
} catch (error) {
|
||||
useAlert(
|
||||
error?.response?.message ||
|
||||
t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.UPDATE_ERROR')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const componentMap = {
|
||||
list: ListAttribute,
|
||||
checkbox: CheckboxAttribute,
|
||||
date: DateAttribute,
|
||||
default: OtherAttribute,
|
||||
};
|
||||
|
||||
const CurrentAttributeComponent = computed(
|
||||
() =>
|
||||
componentMap[props.attribute.attributeDisplayType] || componentMap.default
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-2"
|
||||
:class="isEditingView ? 'min-h-10' : 'min-h-11'"
|
||||
>
|
||||
<div class="flex items-center justify-between truncate">
|
||||
<span class="text-sm font-medium truncate text-n-slate-12">
|
||||
{{ attribute.attributeDisplayName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<component
|
||||
:is="CurrentAttributeComponent"
|
||||
:attribute="attribute"
|
||||
:is-editing-view="isEditingView"
|
||||
@update="handleUpdate"
|
||||
@delete="handleDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMapGetter, useStore } from 'dashboard/composables/store';
|
||||
|
||||
import CompanyCustomAttributeItem from 'dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue';
|
||||
|
||||
const props = defineProps({
|
||||
company: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
|
||||
const searchQuery = ref('');
|
||||
const companyAttributes = useMapGetter('attributes/getCompanyAttributes');
|
||||
|
||||
const customAttributes = computed(() => props.company?.customAttributes || {});
|
||||
const hasCompanyAttributes = computed(
|
||||
() => companyAttributes.value?.length > 0
|
||||
);
|
||||
|
||||
const processCompanyAttributes = (
|
||||
attributes,
|
||||
attributeValues,
|
||||
filterCondition
|
||||
) => {
|
||||
if (!attributes.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return attributes.reduce((result, attribute) => {
|
||||
const { attributeKey } = attribute;
|
||||
|
||||
if (filterCondition(attributeKey, attributeValues)) {
|
||||
result.push({
|
||||
...attribute,
|
||||
value: attributeValues[attributeKey] ?? '',
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}, []);
|
||||
};
|
||||
|
||||
const usedAttributes = computed(() =>
|
||||
processCompanyAttributes(
|
||||
companyAttributes.value,
|
||||
customAttributes.value,
|
||||
(key, values) => key in values
|
||||
)
|
||||
);
|
||||
|
||||
const unusedAttributes = computed(() =>
|
||||
processCompanyAttributes(
|
||||
companyAttributes.value,
|
||||
customAttributes.value,
|
||||
(key, values) => !(key in values)
|
||||
)
|
||||
);
|
||||
|
||||
const filteredUnusedAttributes = computed(() =>
|
||||
unusedAttributes.value.filter(attribute =>
|
||||
attribute.attributeDisplayName
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
const unusedAttributesCount = computed(() => unusedAttributes.value.length);
|
||||
const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
|
||||
const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
|
||||
|
||||
onMounted(() => {
|
||||
store.dispatch('attributes/get');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasCompanyAttributes" class="flex flex-col gap-6 px-6 py-6">
|
||||
<div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
|
||||
<CompanyCustomAttributeItem
|
||||
v-for="attribute in usedAttributes"
|
||||
:key="`${company.id}-${attribute.id}`"
|
||||
is-editing-view
|
||||
:company-id="company.id"
|
||||
:attribute="attribute"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="!hasNoUnusedAttributes" class="flex items-center gap-3">
|
||||
<div class="flex-1 h-px bg-n-slate-5" />
|
||||
<span class="text-sm font-medium text-n-slate-10">
|
||||
{{
|
||||
t('COMPANIES.DETAIL.ATTRIBUTES.UNUSED_ATTRIBUTES', {
|
||||
count: unusedAttributesCount,
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<div class="flex-1 h-px bg-n-slate-5" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<div v-if="!hasNoUnusedAttributes" class="relative">
|
||||
<span
|
||||
class="absolute i-lucide-search size-3.5 top-2 ltr:left-3 rtl:right-3"
|
||||
/>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
:placeholder="t('COMPANIES.DETAIL.ATTRIBUTES.SEARCH_PLACEHOLDER')"
|
||||
class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="filteredUnusedAttributes.length === 0 && !hasNoUnusedAttributes"
|
||||
class="flex items-center justify-start h-11"
|
||||
>
|
||||
<p class="text-sm text-n-slate-11">
|
||||
{{ t('COMPANIES.DETAIL.ATTRIBUTES.NO_ATTRIBUTES') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="!hasNoUnusedAttributes" class="flex flex-col gap-2">
|
||||
<CompanyCustomAttributeItem
|
||||
v-for="attribute in filteredUnusedAttributes"
|
||||
:key="`${company.id}-${attribute.id}`"
|
||||
:company-id="company.id"
|
||||
:attribute="attribute"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
|
||||
{{ t('COMPANIES.DETAIL.ATTRIBUTES.EMPTY_STATE') }}
|
||||
</p>
|
||||
</template>
|
||||
+203
@@ -0,0 +1,203 @@
|
||||
<script setup>
|
||||
import { computed, reactive, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
|
||||
import { useCompaniesStore } from 'dashboard/stores/companies';
|
||||
|
||||
const props = defineProps({
|
||||
company: { type: Object, default: () => ({}) },
|
||||
isLoading: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const companiesStore = useCompaniesStore();
|
||||
|
||||
const form = reactive({ name: '', domain: '', description: '' });
|
||||
const avatarPreviewUrl = ref('');
|
||||
const isUploadingAvatar = ref(false);
|
||||
|
||||
const uiFlags = computed(() => companiesStore.getUIFlags);
|
||||
const isUpdating = computed(() => uiFlags.value.updatingItem);
|
||||
const isAvatarBusy = computed(
|
||||
() =>
|
||||
isUploadingAvatar.value || uiFlags.value.deletingAvatar || isUpdating.value
|
||||
);
|
||||
|
||||
const displayName = computed(
|
||||
() => props.company?.name || t('COMPANIES.UNNAMED')
|
||||
);
|
||||
const avatarSource = computed(
|
||||
() => avatarPreviewUrl.value || props.company?.avatarUrl || ''
|
||||
);
|
||||
const isFormInvalid = computed(() => !form.name.trim());
|
||||
const hasChanges = computed(
|
||||
() =>
|
||||
form.name.trim() !== (props.company?.name || '').trim() ||
|
||||
form.domain.trim() !== (props.company?.domain || '').trim() ||
|
||||
form.description.trim() !== (props.company?.description || '').trim()
|
||||
);
|
||||
|
||||
const summary = computed(() => {
|
||||
const { createdAt, lastActivityAt } = props.company || {};
|
||||
return [
|
||||
createdAt &&
|
||||
t('COMPANIES.DETAIL.PROFILE.CREATED_AT', {
|
||||
date: dynamicTime(createdAt),
|
||||
}),
|
||||
lastActivityAt &&
|
||||
t('COMPANIES.DETAIL.PROFILE.LAST_ACTIVE', {
|
||||
date: dynamicTime(lastActivityAt),
|
||||
}),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' • ');
|
||||
});
|
||||
|
||||
const syncForm = company => {
|
||||
form.name = company?.name || '';
|
||||
form.domain = company?.domain || '';
|
||||
form.description = company?.description || '';
|
||||
};
|
||||
|
||||
const isCurrentCompany = companyId => Number(props.company?.id) === companyId;
|
||||
|
||||
watch(
|
||||
() => [
|
||||
props.company?.id,
|
||||
props.company?.name,
|
||||
props.company?.domain,
|
||||
props.company?.description,
|
||||
props.company?.avatarUrl,
|
||||
],
|
||||
() => {
|
||||
avatarPreviewUrl.value = '';
|
||||
syncForm(props.company);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const handleAvatarUpload = async ({ file, url }) => {
|
||||
avatarPreviewUrl.value = url;
|
||||
isUploadingAvatar.value = true;
|
||||
try {
|
||||
await companiesStore.update({ id: props.company.id, avatar: file });
|
||||
useAlert(t('COMPANIES.DETAIL.AVATAR.UPLOAD_SUCCESS'));
|
||||
} catch {
|
||||
avatarPreviewUrl.value = '';
|
||||
useAlert(t('COMPANIES.DETAIL.AVATAR.UPLOAD_ERROR'));
|
||||
} finally {
|
||||
isUploadingAvatar.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleAvatarDelete = async () => {
|
||||
try {
|
||||
await companiesStore.deleteCompanyAvatar(props.company.id);
|
||||
avatarPreviewUrl.value = '';
|
||||
useAlert(t('COMPANIES.DETAIL.AVATAR.DELETE_SUCCESS'));
|
||||
} catch {
|
||||
useAlert(t('COMPANIES.DETAIL.AVATAR.DELETE_ERROR'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateCompany = async () => {
|
||||
const companyId = Number(props.company.id);
|
||||
|
||||
try {
|
||||
const updated = await companiesStore.update({
|
||||
id: companyId,
|
||||
name: form.name.trim(),
|
||||
domain: form.domain.trim() || null,
|
||||
description: form.description.trim() || null,
|
||||
});
|
||||
if (!isCurrentCompany(companyId)) return;
|
||||
|
||||
syncForm(updated);
|
||||
useAlert(t('COMPANIES.DETAIL.PROFILE.MESSAGES.UPDATE_SUCCESS'));
|
||||
} catch {
|
||||
if (!isCurrentCompany(companyId)) return;
|
||||
|
||||
syncForm(props.company);
|
||||
useAlert(t('COMPANIES.DETAIL.PROFILE.MESSAGES.UPDATE_ERROR'));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isLoading && !company?.id" class="text-sm text-n-slate-11">
|
||||
{{ t('COMPANIES.DETAIL.LOADING') }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="company?.id" class="flex flex-col items-start gap-8 pb-6">
|
||||
<div class="flex flex-col items-start gap-3">
|
||||
<Avatar
|
||||
:name="displayName"
|
||||
:src="avatarSource"
|
||||
:size="72"
|
||||
:allow-upload="!isAvatarBusy"
|
||||
rounded-full
|
||||
hide-offline-status
|
||||
@upload="handleAvatarUpload"
|
||||
@delete="handleAvatarDelete"
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<h3 class="text-base font-medium text-n-slate-12">
|
||||
{{ displayName }}
|
||||
</h3>
|
||||
<span class="text-sm leading-6 text-n-slate-11">{{ summary }}</span>
|
||||
<p
|
||||
v-if="isUploadingAvatar || uiFlags.deletingAvatar"
|
||||
class="text-sm text-n-slate-11"
|
||||
>
|
||||
{{ t('COMPANIES.DETAIL.AVATAR.UPDATING') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-start w-full gap-6">
|
||||
<span class="py-1 text-sm font-medium text-n-slate-12">
|
||||
{{ t('COMPANIES.DETAIL.PROFILE.TITLE') }}
|
||||
</span>
|
||||
|
||||
<div class="grid w-full gap-4 sm:grid-cols-2">
|
||||
<Input
|
||||
v-model="form.name"
|
||||
:placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.NAME')"
|
||||
:disabled="isUpdating"
|
||||
custom-input-class="h-8 !pt-1 !pb-1"
|
||||
/>
|
||||
<Input
|
||||
v-model="form.domain"
|
||||
:placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.DOMAIN')"
|
||||
:disabled="isUpdating"
|
||||
custom-input-class="h-8 !pt-1 !pb-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextArea
|
||||
v-model="form.description"
|
||||
:placeholder="t('COMPANIES.DETAIL.PROFILE.DESCRIPTION_PLACEHOLDER')"
|
||||
:disabled="isUpdating"
|
||||
:max-length="280"
|
||||
class="w-full"
|
||||
show-character-count
|
||||
auto-height
|
||||
/>
|
||||
|
||||
<Button
|
||||
:label="t('COMPANIES.DETAIL.PROFILE.ACTIONS.SAVE')"
|
||||
size="sm"
|
||||
:is-loading="isUpdating"
|
||||
:disabled="isUpdating || isFormInvalid || !hasChanges"
|
||||
@click="handleUpdateCompany"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
|
||||
const props = defineProps({
|
||||
company: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['confirm']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const dialogRef = ref(null);
|
||||
|
||||
const description = computed(() =>
|
||||
props.company?.name
|
||||
? t('COMPANIES.DETAIL.DELETE.DESCRIPTION_WITH_NAME', {
|
||||
companyName: props.company.name,
|
||||
})
|
||||
: t('COMPANIES.DETAIL.DELETE.DESCRIPTION')
|
||||
);
|
||||
|
||||
defineExpose({ dialogRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="dialogRef"
|
||||
type="alert"
|
||||
:title="t('COMPANIES.DETAIL.DELETE.TITLE')"
|
||||
:description="description"
|
||||
:confirm-button-label="t('COMPANIES.DETAIL.DELETE.CONFIRM')"
|
||||
:is-loading="isLoading"
|
||||
@confirm="emit('confirm')"
|
||||
/>
|
||||
</template>
|
||||
@@ -134,7 +134,7 @@ const handleInputUpdate = async () => {
|
||||
:message-type="hasError ? 'error' : 'info'"
|
||||
autofocus
|
||||
custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
|
||||
@keyup.enter="handleInputUpdate"
|
||||
@enter="handleInputUpdate"
|
||||
/>
|
||||
<Button
|
||||
icon="i-lucide-check"
|
||||
|
||||
@@ -191,7 +191,7 @@ const handleInputUpdate = async () => {
|
||||
:message="attributeErrorMessage"
|
||||
:message-type="hasError ? 'error' : 'info'"
|
||||
custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
|
||||
@keyup.enter="handleInputUpdate"
|
||||
@enter="handleInputUpdate"
|
||||
/>
|
||||
<Button
|
||||
icon="i-lucide-check"
|
||||
|
||||
@@ -457,7 +457,7 @@ const menuItems = computed(() => {
|
||||
{},
|
||||
{ page: 1, search: undefined }
|
||||
),
|
||||
activeOn: ['companies_dashboard_index'],
|
||||
activeOn: ['companies_dashboard_index', 'companies_dashboard_show'],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user