Merge pull request 'Se hace corrección en el desplegable' (#9) from features/ms_19_desplegable_detalle_2 into dev

Reviewed-on: hyervoni/salix-front-mindshore#9

src/components/ui/CardDescriptor.vue

@@ -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>
+                        <QTooltip>
-                            <QList dense v-for="option in options" :key="option">
+                            {{ t('components.cardDescriptor.summary') }}
-                                <QItem v-ripple clickable>
+                        </QTooltip>
-                                    {{ option }}
-                                </QItem>
-                            </QList>
-                        </QMenu>
                     </QBtn>
                 </RouterLink>
 
-                <QBtn
+                <QBtn color="white" dense flat icon="more_vert" round size="md">
-                    color="white"
-                    dense
-                    flat
-                    icon="more_vert"
-                    round
-                    size="md"
-                    v-if="slots.menu"
-                >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}
                     </QTooltip>
                     <QMenu>
-                        <QList>
+                        <QList dense v-for="option in options" :key="option">
-                            <slot name="menu" :entity="entity" />
+                            <QItem v-ripple clickable>
+                                {{ option }}
+                            </QItem>
                         </QList>
                     </QMenu>
                 </QBtn>

src/components/ui/CardList2.vue

@@ -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">
+                <div class="flex justify-between">
-                    <div class="title text-primary text-weight-bold text-h5">
+                    <div class="flex">
-                        {{ $props.title ?? `#${$props.id}` }}
+                        <div class="title text-primary text-weight-bold text-h5">
-                    </div>
+                            {{ $props.title }}
-                    <div class="q_chip">
+                        </div>
-                        <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;

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -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" />