verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 89 Releases Wiki Activity

fix: refs #8197 use RightMenu in subsections

This commit is contained in:
Alex Moreno 2025-01-20 10:03:49 +01:00
parent 83fb97ad9b
commit bb3ce4f862
3 changed files with 178 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
src/components/common/VnLog.vue
View File

@ -15,6 +15,7 @@ import FetchData from '../FetchData.vue';
import VnSelect from './VnSelect.vue'; import VnSelect from './VnSelect.vue';
import VnUserLink from '../ui/VnUserLink.vue'; import VnUserLink from '../ui/VnUserLink.vue';
import VnPaginate from '../ui/VnPaginate.vue'; import VnPaginate from '../ui/VnPaginate.vue';
import RightMenu from './RightMenu.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const validationsStore = useValidator(); const validationsStore = useValidator();
@ -677,139 +678,144 @@ watch(
</div> </div>
</template> </template>
</VnPaginate> </VnPaginate>
<Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()"> <RightMenu>
<QList dense> <template #right-panel>
<QSeparator /> <QList dense>
<QItem class="q-mt-sm"> <QSeparator />
<QInput <QItem class="q-mt-sm">
:label="t('globals.search')" <QInput
v-model="searchInput" :label="t('globals.search')"
class="full-width" v-model="searchInput"
clearable class="full-width"
clear-icon="close" clearable
@keyup.enter="() => selectFilter('search')" clear-icon="close"
@focusout="() => selectFilter('search')" @keyup.enter="() => selectFilter('search')"
@clear="() => selectFilter('search')" @focusout="() => selectFilter('search')"
> @clear="() => selectFilter('search')"
<template #append> >
<QIcon name="info" class="cursor-pointer"> <template #append>
<QTooltip>{{ t('tooltips.search') }}</QTooltip> <QIcon name="info" class="cursor-pointer">
</QIcon> <QTooltip>{{ t('tooltips.search') }}</QTooltip>
</template> </QIcon>
</QInput> </template>
</QItem> </QInput>
<QItem> </QItem>
<VnSelect <QItem>
class="full-width"
:label="t('globals.entity')"
v-model="selectedFilters.changedModel"
option-label="locale"
option-value="value"
:options="actions"
@update:model-value="selectFilter('action')"
hide-selected
/>
</QItem>
<QItem class="q-mt-sm">
<QOptionGroup
size="sm"
v-model="userRadio"
:options="userTypes"
color="primary"
@update:model-value="selectFilter('userRadio')"
right-label
>
<template #label="{ label }">
{{ t(`Users.${label}`) }}
</template>
</QOptionGroup>
</QItem>
<QItem class="q-mt-sm">
<QItemSection v-if="userRadio !== null">
<VnSelect <VnSelect
class="full-width" class="full-width"
:label="t('globals.user')" :label="t('globals.entity')"
v-model="userSelect" v-model="selectedFilters.changedModel"
option-label="name" option-label="locale"
option-value="id" option-value="value"
:url="`${model}Logs/${$route.params.id}/editors`" :options="actions"
:fields="['id', 'nickname', 'name', 'image']" @update:model-value="selectFilter('action')"
sort-by="nickname"
@update:model-value="selectFilter('userSelect')"
hide-selected hide-selected
/>
</QItem>
<QItem class="q-mt-sm">
<QOptionGroup
size="sm"
v-model="userRadio"
:options="userTypes"
color="primary"
@update:model-value="selectFilter('userRadio')"
right-label
> >
<template #option="{ opt, itemProps }"> <template #label="{ label }">
<QItem v-bind="itemProps" class="q-pa-xs row items-center"> {{ t(`Users.${label}`) }}
<QItemSection class="col-3 items-center">
<VnAvatar :worker-id="opt.id" />
</QItemSection>
<QItemSection class="col-9 justify-center">
<span>{{ opt.name }}</span>
<span class="text-grey">{{ opt.nickname }}</span>
</QItemSection>
</QItem>
</template> </template>
</VnSelect> </QOptionGroup>
</QItemSection> </QItem>
</QItem> <QItem class="q-mt-sm">
<QItem class="q-mt-sm"> <QItemSection v-if="userRadio !== null">
<QInput <VnSelect
:label="t('globals.changes')" class="full-width"
v-model="changeInput" :label="t('globals.user')"
class="full-width" v-model="userSelect"
clearable option-label="name"
clear-icon="close" option-value="id"
@keyup.enter="selectFilter('change')" :url="`${model}Logs/${$route.params.id}/editors`"
@focusout="selectFilter('change')" :fields="['id', 'nickname', 'name', 'image']"
@clear="selectFilter('change')" sort-by="nickname"
@update:model-value="selectFilter('userSelect')"
hide-selected
>
<template #option="{ opt, itemProps }">
<QItem
v-bind="itemProps"
class="q-pa-xs row items-center"
>
<QItemSection class="col-3 items-center">
<VnAvatar :worker-id="opt.id" />
</QItemSection>
<QItemSection class="col-9 justify-center">
<span>{{ opt.name }}</span>
<span class="text-grey">{{ opt.nickname }}</span>
</QItemSection>
</QItem>
</template>
</VnSelect>
</QItemSection>
</QItem>
<QItem class="q-mt-sm">
<QInput
:label="t('globals.changes')"
v-model="changeInput"
class="full-width"
clearable
clear-icon="close"
@keyup.enter="selectFilter('change')"
@focusout="selectFilter('change')"
@clear="selectFilter('change')"
>
<template #append>
<QIcon name="info" class="cursor-pointer">
<QTooltip max-width="250px">{{
t('tooltips.changes')
}}</QTooltip>
</QIcon>
</template>
</QInput>
</QItem>
<QItem
:class="index == 'create' ? 'q-mt-md' : 'q-mt-xs'"
v-for="(checkboxOption, index) in checkboxOptions"
:key="index"
> >
<template #append> <QCheckbox
<QIcon name="info" class="cursor-pointer"> size="sm"
<QTooltip max-width="250px">{{ v-model="checkboxOption.selected"
t('tooltips.changes') :label="t(`actions.${checkboxOption.label}`)"
}}</QTooltip> @update:model-value="selectFilter"
</QIcon> />
</template> </QItem>
</QInput> <QItem class="q-mt-sm">
</QItem> <QInput
<QItem class="full-width"
:class="index == 'create' ? 'q-mt-md' : 'q-mt-xs'" :label="t('globals.date')"
v-for="(checkboxOption, index) in checkboxOptions" @click="dateFromDialog = true"
:key="index" @focus="(evt) => evt.target.blur()"
> @clear="selectFilter('date', 'to')"
<QCheckbox v-model="dateFrom"
size="sm" clearable
v-model="checkboxOption.selected" clear-icon="close"
:label="t(`actions.${checkboxOption.label}`)" />
@update:model-value="selectFilter" </QItem>
/> <QItem class="q-mt-sm">
</QItem> <QInput
<QItem class="q-mt-sm"> class="full-width"
<QInput :label="t('to')"
class="full-width" @click="dateToDialog = true"
:label="t('globals.date')" @focus="(evt) => evt.target.blur()"
@click="dateFromDialog = true" @clear="selectFilter('date', 'from')"
@focus="(evt) => evt.target.blur()" v-model="dateTo"
@clear="selectFilter('date', 'to')" clearable
v-model="dateFrom" clear-icon="close"
clearable />
clear-icon="close" </QItem>
/> </QList>
</QItem> </template>
<QItem class="q-mt-sm"> </RightMenu>
<QInput
class="full-width"
:label="t('to')"
@click="dateToDialog = true"
@focus="(evt) => evt.target.blur()"
@clear="selectFilter('date', 'from')"
v-model="dateTo"
clearable
clear-icon="close"
/>
</QItem>
</QList>
</Teleport>
<QDialog v-model="dateFromDialog"> <QDialog v-model="dateFromDialog">
<QDate <QDate
:years-in-month-view="false" :years-in-month-view="false"

21
src/pages/Order/Card/OrderCatalog.vue
View File

@ -9,6 +9,7 @@ import CatalogItem from 'src/components/ui/CatalogItem.vue';
import OrderCatalogFilter from 'src/pages/Order/Card/OrderCatalogFilter.vue'; import OrderCatalogFilter from 'src/pages/Order/Card/OrderCatalogFilter.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -89,14 +90,16 @@ watch(
:search-remove-params="false" :search-remove-params="false"
/> />
</Teleport> </Teleport>
<Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()"> <RightMenu>
<OrderCatalogFilter <template #right-panel>
:data-key="dataKey" <OrderCatalogFilter
:tag-value="tagValue" :data-key="dataKey"
:tags="tags" :tag-value="tagValue"
:initial-catalog-params="catalogParams" :tags="tags"
/> :initial-catalog-params="catalogParams"
</Teleport> />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md" data-cy="orderCatalogPage"> <QPage class="column items-center q-pa-md" data-cy="orderCatalogPage">
<div class="full-width"> <div class="full-width">
<VnPaginate :data-key="dataKey"> <VnPaginate :data-key="dataKey">
@ -141,5 +144,5 @@ watch(
<i18n> <i18n>
es: es:
You can search items by name or id: Puedes buscar items por nombre o id You can search items by name or id: Puedes buscar items por nombre o id
Search items: Buscar items Search items: Buscar artículos
</i18n> </i18n>

59
src/pages/Ticket/Card/TicketSale.vue
View File

@ -16,7 +16,6 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import TicketSaleMoreActions from './TicketSaleMoreActions.vue'; import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
import TicketTransfer from './TicketTransfer.vue'; import TicketTransfer from './TicketTransfer.vue';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toPercentage } from 'src/filters'; import { toCurrency, toPercentage } from 'src/filters';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import { useVnConfirm } from 'composables/useVnConfirm'; import { useVnConfirm } from 'composables/useVnConfirm';
@ -25,10 +24,10 @@ import axios from 'axios';
import VnTable from 'src/components/VnTable/VnTable.vue'; import VnTable from 'src/components/VnTable/VnTable.vue';
import VnUsesMana from 'src/components/ui/VnUsesMana.vue'; import VnUsesMana from 'src/components/ui/VnUsesMana.vue';
import VnConfirm from 'src/components/ui/VnConfirm.vue'; import VnConfirm from 'src/components/ui/VnConfirm.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const { notify } = useNotify(); const { notify } = useNotify();
const { openConfirmationModal } = useVnConfirm(); const { openConfirmationModal } = useVnConfirm();
@ -421,7 +420,6 @@ const setTransferParams = async () => {
}; };
onMounted(async () => { onMounted(async () => {
stateStore.rightDrawer = true;
getConfig(); getConfig();
}); });
@ -622,29 +620,38 @@ watch(
</QBtnGroup> </QBtnGroup>
</template> </template>
</VnSubToolbar> </VnSubToolbar>
<Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()"> <RightMenu>
<div <template #right-panel>
class="q-pa-md q-mb-md q-ma-md color-vn-text" <div
style="border: 2px solid black" class="q-pa-md q-mb-md q-ma-md color-vn-text"
> style="border: 2px solid black"
<QCardSection class="justify-end text-subtitle1" horizontal> >
<span class="q-mr-xs color-vn-label" <QCardSection class="justify-end text-subtitle1" horizontal>
>{{ t('ticketSale.subtotal') }}: <span class="q-mr-xs color-vn-label"
</span> >{{ t('ticketSale.subtotal') }}:
<span>{{ toCurrency(store.data?.totalWithoutVat) }}</span> </span>
</QCardSection> <span>{{ toCurrency(store.data?.totalWithoutVat) }}</span>
<QCardSection class="justify-end text-subtitle1" horizontal> </QCardSection>
<span class="q-mr-xs color-vn-label"> {{ t('ticketSale.tax') }}: </span> <QCardSection class="justify-end text-subtitle1" horizontal>
<span>{{ <span class="q-mr-xs color-vn-label">
toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat) {{ t('ticketSale.tax') }}:
}}</span> </span>
</QCardSection> <span>{{
<QCardSection class="justify-end text-weight-bold text-subtitle1" horizontal> toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat)
<span class="q-mr-xs color-vn-label"> {{ t('basicData.total') }}: </span> }}</span>
<span>{{ toCurrency(store.data?.totalWithVat) }}</span> </QCardSection>
</QCardSection> <QCardSection
</div> class="justify-end text-weight-bold text-subtitle1"
</Teleport> horizontal
>
<span class="q-mr-xs color-vn-label">
{{ t('basicData.total') }}:
</span>
<span>{{ toCurrency(store.data?.totalWithVat) }}</span>
</QCardSection>
</div>
</template>
</RightMenu>
<VnTable <VnTable
ref="tableRef" ref="tableRef"
data-key="TicketSales" data-key="TicketSales"