114 lines
3.1 KiB
Vue
114 lines
3.1 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
|
|
import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
|
|
import VoiceCallButton from 'dashboard/components-next/Contacts/VoiceCallButton.vue';
|
|
|
|
const props = defineProps({
|
|
selectedContact: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
isUpdating: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['goToContactsList', 'toggleBlock']);
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
|
|
const contactId = computed(() => route.params.contactId);
|
|
|
|
const selectedContactName = computed(() => {
|
|
return props.selectedContact?.name;
|
|
});
|
|
|
|
const breadcrumbItems = computed(() => {
|
|
const items = [
|
|
{
|
|
label: t('CONTACTS_LAYOUT.HEADER.BREADCRUMB.CONTACTS'),
|
|
link: '#',
|
|
},
|
|
];
|
|
if (props.selectedContact) {
|
|
items.push({
|
|
label: selectedContactName.value,
|
|
});
|
|
}
|
|
return items;
|
|
});
|
|
|
|
const isContactBlocked = computed(() => {
|
|
return props.selectedContact?.blocked;
|
|
});
|
|
|
|
const handleBreadcrumbClick = () => {
|
|
emit('goToContactsList');
|
|
};
|
|
|
|
const toggleBlock = () => {
|
|
emit('toggleBlock', isContactBlocked.value);
|
|
};
|
|
</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">
|
|
<header class="sticky top-0 z-10 px-6 3xl:px-0">
|
|
<div class="w-full mx-auto max-w-5xl">
|
|
<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="handleBreadcrumbClick"
|
|
/>
|
|
<div class="flex items-center gap-2">
|
|
<Button
|
|
:label="
|
|
!isContactBlocked
|
|
? $t('CONTACTS_LAYOUT.HEADER.BLOCK_CONTACT')
|
|
: $t('CONTACTS_LAYOUT.HEADER.UNBLOCK_CONTACT')
|
|
"
|
|
size="sm"
|
|
slate
|
|
:is-loading="isUpdating"
|
|
:disabled="isUpdating"
|
|
@click="toggleBlock"
|
|
/>
|
|
<VoiceCallButton
|
|
:phone="selectedContact?.phoneNumber"
|
|
:contact-id="contactId"
|
|
:label="$t('CONTACT_PANEL.CALL')"
|
|
size="sm"
|
|
/>
|
|
<ComposeConversation :contact-id="contactId">
|
|
<template #trigger>
|
|
<Button
|
|
:label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
|
|
size="sm"
|
|
/>
|
|
</template>
|
|
</ComposeConversation>
|
|
</div>
|
|
</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-5xl">
|
|
<slot name="default" />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</section>
|
|
</template>
|