feat(client and ticket): add moreOptions in summary
This commit is contained in:
parent
01ffb663f1
commit
6f7b83d593
|
@ -6,6 +6,7 @@ import { useArrayData } from 'composables/useArrayData';
|
||||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
import VnMoreOptions from './VnMoreOptions.vue';
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
url: {
|
url: {
|
||||||
|
@ -159,25 +160,11 @@ const toModule = computed(() =>
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
</QBtn>
|
</QBtn>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
<QBtn
|
<VnMoreOptions v-if="$slots.menu">
|
||||||
v-if="$slots.menu"
|
<template #menu>
|
||||||
color="white"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
icon="more_vert"
|
|
||||||
round
|
|
||||||
size="md"
|
|
||||||
data-cy="descriptor-more-opts"
|
|
||||||
>
|
|
||||||
<QTooltip>
|
|
||||||
{{ t('components.cardDescriptor.moreOptions') }}
|
|
||||||
</QTooltip>
|
|
||||||
<QMenu :ref="menuRef">
|
|
||||||
<QList>
|
|
||||||
<slot name="menu" :entity="entity" :menu-ref="menuRef" />
|
<slot name="menu" :entity="entity" :menu-ref="menuRef" />
|
||||||
</QList>
|
</template>
|
||||||
</QMenu>
|
</VnMoreOptions>
|
||||||
</QBtn>
|
|
||||||
</div>
|
</div>
|
||||||
<slot name="before" />
|
<slot name="before" />
|
||||||
<div class="body q-py-sm">
|
<div class="body q-py-sm">
|
||||||
|
|
|
@ -5,6 +5,7 @@ import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
import { useArrayData } from 'src/composables/useArrayData';
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
import { isDialogOpened } from 'src/filters';
|
import { isDialogOpened } from 'src/filters';
|
||||||
|
import VnMoreOptions from './VnMoreOptions.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
url: {
|
url: {
|
||||||
|
@ -83,9 +84,14 @@ async function fetch() {
|
||||||
<slot name="header" :entity="entity" dense>
|
<slot name="header" :entity="entity" dense>
|
||||||
<VnLv :label="`${entity.id} -`" :value="entity.name" />
|
<VnLv :label="`${entity.id} -`" :value="entity.name" />
|
||||||
</slot>
|
</slot>
|
||||||
<slot name="header-right" :entity="entity">
|
<span class="row no-wrap">
|
||||||
<span></span>
|
<slot name="header-right" :entity="entity" />
|
||||||
</slot>
|
<VnMoreOptions v-if="$slots.menu && isDialogOpened()">
|
||||||
|
<template #menu>
|
||||||
|
<slot name="menu" :entity="entity" />
|
||||||
|
</template>
|
||||||
|
</VnMoreOptions>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="summaryBody row q-mb-md">
|
<div class="summaryBody row q-mb-md">
|
||||||
<slot name="body" :entity="entity" />
|
<slot name="body" :entity="entity" />
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<QBtn
|
||||||
|
color="white"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
icon="more_vert"
|
||||||
|
round
|
||||||
|
size="md"
|
||||||
|
data-cy="descriptor-more-opts"
|
||||||
|
>
|
||||||
|
<QTooltip>
|
||||||
|
{{ $t('components.cardDescriptor.moreOptions') }}
|
||||||
|
</QTooltip>
|
||||||
|
<QMenu ref="menuRef">
|
||||||
|
<QList>
|
||||||
|
<slot name="menu" />
|
||||||
|
</QList>
|
||||||
|
</QMenu>
|
||||||
|
</QBtn>
|
||||||
|
</template>
|
|
@ -1,18 +1,18 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, ref, onMounted } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
||||||
|
|
||||||
import { toCurrency, toPercentage, toDate, dashOrCurrency } from 'src/filters';
|
import { toCurrency, toPercentage, toDate, dashOrCurrency } from 'src/filters';
|
||||||
import CardSummary from 'components/ui/CardSummary.vue';
|
import CardSummary from 'components/ui/CardSummary.vue';
|
||||||
import { getUrl } from 'src/composables/getUrl';
|
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
|
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
|
||||||
import VnLinkMail from 'src/components/ui/VnLinkMail.vue';
|
import VnLinkMail from 'src/components/ui/VnLinkMail.vue';
|
||||||
import CustomerSummaryTable from 'src/pages/Customer/components/CustomerSummaryTable.vue';
|
import CustomerSummaryTable from 'src/pages/Customer/components/CustomerSummaryTable.vue';
|
||||||
import VnTitle from 'src/components/common/VnTitle.vue';
|
import VnTitle from 'src/components/common/VnTitle.vue';
|
||||||
import VnRow from 'src/components/ui/VnRow.vue';
|
import VnRow from 'src/components/ui/VnRow.vue';
|
||||||
|
import CustomerDescriptorMenu from './CustomerDescriptorMenu.vue';
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const grafanaUrl = 'https://grafana.verdnatura.es';
|
const grafanaUrl = 'https://grafana.verdnatura.es';
|
||||||
|
@ -71,6 +71,9 @@ const sumRisk = ({ clientRisks }) => {
|
||||||
data-key="CustomerSummary"
|
data-key="CustomerSummary"
|
||||||
module-name="Customer"
|
module-name="Customer"
|
||||||
>
|
>
|
||||||
|
<template #menu="{ entity }">
|
||||||
|
<CustomerDescriptorMenu :customer="entity" />
|
||||||
|
</template>
|
||||||
<template #body="{ entity }">
|
<template #body="{ entity }">
|
||||||
<QCard class="vn-one">
|
<QCard class="vn-one">
|
||||||
<VnTitle
|
<VnTitle
|
||||||
|
@ -320,7 +323,7 @@ const sumRisk = ({ clientRisks }) => {
|
||||||
:value="entity.recommendedCredit"
|
:value="entity.recommendedCredit"
|
||||||
/>
|
/>
|
||||||
</QCard>
|
</QCard>
|
||||||
<QCard class="vn-one">
|
<QCard class="vn-max">
|
||||||
<VnTitle :text="t('Latest tickets')" />
|
<VnTitle :text="t('Latest tickets')" />
|
||||||
<CustomerSummaryTable />
|
<CustomerSummaryTable />
|
||||||
</QCard>
|
</QCard>
|
||||||
|
|
|
@ -113,7 +113,7 @@ function toTicketUrl(section) {
|
||||||
{{ entity.nickname }}
|
{{ entity.nickname }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #header-right="{ entity }">
|
<template #header-right>
|
||||||
<div>
|
<div>
|
||||||
<QBtnDropdown
|
<QBtnDropdown
|
||||||
ref="stateBtnDropdownRef"
|
ref="stateBtnDropdownRef"
|
||||||
|
@ -132,18 +132,11 @@ function toTicketUrl(section) {
|
||||||
@update:model-value="changeState"
|
@update:model-value="changeState"
|
||||||
/>
|
/>
|
||||||
</QBtnDropdown>
|
</QBtnDropdown>
|
||||||
<QBtn color="white" dense flat icon="more_vert" round size="md">
|
|
||||||
<QTooltip>
|
|
||||||
{{ t('components.cardDescriptor.moreOptions') }}
|
|
||||||
</QTooltip>
|
|
||||||
<QMenu>
|
|
||||||
<QList>
|
|
||||||
<TicketDescriptorMenu :ticket="entity" />
|
|
||||||
</QList>
|
|
||||||
</QMenu>
|
|
||||||
</QBtn>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<template #menu="{ entity }">
|
||||||
|
<TicketDescriptorMenu :ticket="entity" />
|
||||||
|
</template>
|
||||||
<template #body="{ entity }">
|
<template #body="{ entity }">
|
||||||
<QCard class="vn-one">
|
<QCard class="vn-one">
|
||||||
<VnTitle
|
<VnTitle
|
||||||
|
|
Loading…
Reference in New Issue