99 lines
2.9 KiB
Vue
99 lines
2.9 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useMapGetter } from 'dashboard/composables/store';
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
|
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
|
import ConversationRequiredAttributeItem from 'dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue';
|
|
import ConversationRequiredEmpty from 'dashboard/components-next/Conversation/ConversationRequiredEmpty.vue';
|
|
|
|
defineProps({
|
|
title: { type: String, default: '' },
|
|
description: { type: String, default: '' },
|
|
});
|
|
|
|
const emit = defineEmits(['click']);
|
|
|
|
const showDropdown = ref(false);
|
|
const conversationAttributes = useMapGetter(
|
|
'attributes/getConversationAttributes'
|
|
);
|
|
|
|
const handleClick = () => {
|
|
emit('click');
|
|
};
|
|
|
|
const attributeOptions = computed(() =>
|
|
(conversationAttributes.value || []).map(attribute => ({
|
|
...attribute,
|
|
action: 'add',
|
|
value: attribute.attributeKey,
|
|
label: attribute.attributeDisplayName,
|
|
type: attribute.attributeDisplayType,
|
|
}))
|
|
);
|
|
|
|
const conversationRequiredAttributes = computed(() =>
|
|
attributeOptions.value.slice(0, 4)
|
|
);
|
|
|
|
const handleAddAttributesClick = event => {
|
|
event.stopPropagation();
|
|
showDropdown.value = !showDropdown.value;
|
|
};
|
|
|
|
const handleAttributeAction = () => {
|
|
showDropdown.value = false;
|
|
};
|
|
|
|
const closeDropdown = () => {
|
|
showDropdown.value = false;
|
|
};
|
|
|
|
const handleDelete = () => {};
|
|
</script>
|
|
|
|
<template>
|
|
<CardLayout
|
|
class="[&>div]:px-0 [&>div]:py-0 [&>div]:gap-0 [&>div]:divide-y [&>div]:divide-n-weak"
|
|
@click="handleClick"
|
|
>
|
|
<div class="flex flex-col gap-2 items-start px-5 py-4">
|
|
<div class="flex justify-between items-center w-full">
|
|
<h3 class="text-base font-medium text-n-slate-12">{{ title }}</h3>
|
|
<div v-on-clickaway="closeDropdown" class="relative">
|
|
<Button
|
|
icon="i-lucide-circle-plus"
|
|
:label="$t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.ADD.TITLE')"
|
|
@click="handleAddAttributesClick"
|
|
/>
|
|
<DropdownMenu
|
|
v-if="showDropdown"
|
|
:menu-items="attributeOptions"
|
|
show-search
|
|
:search-placeholder="
|
|
$t(
|
|
'CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.ADD.SEARCH_PLACEHOLDER'
|
|
)
|
|
"
|
|
class="top-full mt-1 ltr:right-0 rtl:left-0"
|
|
@action="handleAttributeAction"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p class="mb-0 text-sm text-n-slate-11">{{ description }}</p>
|
|
</div>
|
|
|
|
<ConversationRequiredEmpty
|
|
v-if="conversationRequiredAttributes.length === 0"
|
|
/>
|
|
|
|
<ConversationRequiredAttributeItem
|
|
v-for="attribute in conversationRequiredAttributes"
|
|
:key="attribute.value"
|
|
:attribute="attribute"
|
|
@delete="handleDelete"
|
|
/>
|
|
</CardLayout>
|
|
</template>
|