0
0
Fork 0

Se hace corrección en el desplegable

This commit is contained in:
carlosfonseca 2023-11-23 12:28:51 -05:00
parent a3e80ffc36
commit 8a47fa0d0b
3 changed files with 48 additions and 42 deletions

View File

@ -83,6 +83,7 @@ const options = [
</QTooltip>
</QBtn>
</RouterLink>
<RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
<QBtn
class="link"
@ -93,31 +94,21 @@ const options = [
round
size="md"
>
<QMenu auto-close>
<QList dense v-for="option in options" :key="option">
<QItem v-ripple clickable>
{{ option }}
</QItem>
</QList>
</QMenu>
<QTooltip>
{{ t('components.cardDescriptor.summary') }}
</QTooltip>
</QBtn>
</RouterLink>
<QBtn
color="white"
dense
flat
icon="more_vert"
round
size="md"
v-if="slots.menu"
>
<QBtn color="white" dense flat icon="more_vert" round size="md">
<QTooltip>
{{ t('components.cardDescriptor.moreOptions') }}
</QTooltip>
<QMenu>
<QList>
<slot name="menu" :entity="entity" />
<QList dense v-for="option in options" :key="option">
<QItem v-ripple clickable>
{{ option }}
</QItem>
</QList>
</QMenu>
</QBtn>

View File

@ -1,21 +1,35 @@
<script setup>
import { ref, watch } from 'vue';
const $props = defineProps({
id: { type: Number, default: null },
isSelected: { type: Boolean, default: false },
title: { type: String, default: null },
});
const checkSelect = ref(false);
watch(
() => $props.isSelected,
(value, prevValue) => {
checkSelect.value = value;
}
);
</script>
<template>
<QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
<div>
<slot name="title">
<div class="flex justify-between">
<div class="flex">
<div class="title text-primary text-weight-bold text-h5">
{{ $props.title ?? `#${$props.id}` }}
{{ $props.title }}
</div>
<div class="q_chip">
<QChip outline color="grey" size="sm">ID: 12345</QChip>
<QChip outline color="grey" size="sm">
ID: {{ $props.id }}
</QChip>
</div>
<QCheckbox v-model="checkSelect" />
</div>
</slot>
<div class="card-list-body">
@ -36,12 +50,6 @@ const $props = defineProps({
margin-right: 25px;
}
.q_chip {
display: flex;
flex-direction: column;
justify-content: center;
}
.card-list-body {
display: flex;
justify-content: space-between;

View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, onUnmounted } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
@ -12,10 +12,11 @@ import InvoiceOutFilter from './InvoiceOutFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList2 from 'src/components/ui/CardList2.vue';
const stateStore = useStateStore();
const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
const manageCheckboxes = ref(false);
const quasar = useQuasar();
const router = useRouter();
const stateStore = useStateStore();
onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));
@ -38,19 +39,19 @@ function viewSummary(id) {
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="InvoiceOutList"
:label="t('Search invoice')"
:info="t('You can search by invoice reference')"
:label="t('Search invoice')"
data-key="InvoiceOutList"
/>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
flat
icon="menu"
round
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
@ -67,17 +68,23 @@ function viewSummary(id) {
<QPage class="column items-center q-pa-md">
<div class="card-list">
<VnPaginate
data-key="InvoiceOutList"
url="InvoiceOuts/filter"
order="issued DESC, id DESC"
auto-load
data-key="InvoiceOutList"
order="issued DESC, id DESC"
url="InvoiceOuts/filter"
>
<template #body="{ rows }">
<div class="flex justify-around q-mb-md">
<QCheckbox label="Marcar todo" v-model="manageCheckboxes" />
<QBtn label="Descargar" color="primary" type="submit" />
</div>
<CardList2
v-for="row of rows"
:id="row.id"
:isSelected="manageCheckboxes"
:key="row.id"
:title="row.ref"
@click="navigate(row.id)"
v-for="row of rows"
>
<template #list-items>
<VnLv label="ID" :value="row.id" />