feat: refs #6825 fix modes

src/components/common/VnTable.vue

@@ -1,14 +1,14 @@
 <script setup>
-import { ref, onMounted, markRaw } from 'vue';
+import { ref, onMounted, markRaw, computed } from 'vue';
+import { QCheckbox, useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnBreadcrumbs from 'components/common/VnBreadcrumbs.vue';
-import { useI18n } from 'vue-i18n';
 
 /* basic input */
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import { QCheckbox } from 'quasar';
 // import VnLv from 'src/components/ui/VnLv.vue';
 
 const $props = defineProps({
@@ -38,26 +38,32 @@ const $props = defineProps({
     },
 });
 const { t } = useI18n();
+const $q = useQuasar();
 const mode = ref('list');
 const selected = ref([]);
-const tableModes = [
+const tableModes = computed(() => {
-    {
+    const modes = [
-        icon: 'view_column',
+        {
-        title: t('table view'),
+            icon: 'view_column',
-        class: 'q-mr-lg',
+            title: t('table view'),
-        value: 'table',
+            value: 'table',
-    },
+        },
-    {
+        {
-        icon: 'lists',
+            icon: 'lists',
-        title: t('list view'),
+            title: t('list view'),
-        value: 'list',
+            value: 'list',
-    },
+        },
-    {
+    ];
-        icon: 'apps',
+    if (!$q.screen.lt.md)
-        title: t('grid view'),
+        modes.push({
-        value: 'card',
+            icon: 'apps',
-    },
+            title: t('grid view'),
-];
+            value: 'card',
+            disable: () => console.log('called'),
+        });
+
+    return modes;
+});
 const basicInputs = {
     input: markRaw(VnInput),
     number: markRaw(VnInput),
@@ -78,6 +84,7 @@ const basicInputs = {
 //             'model-value': Boolean(prop.value),
 //         }),
 //     },
+//  vnTableOpitons y hacer bucle
 onMounted(() => {
     mode.value = $props.defaultMode;
 });
@@ -85,6 +92,7 @@ onMounted(() => {
 <template>
     <VnPaginate v-bind="$attrs" class="q-px-md">
         <template #body="{ rows }">
+            <!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'"  -->
             <QTable
                 class="vnTable"
                 :columns="columns"
@@ -92,20 +100,28 @@ onMounted(() => {
                 row-key="$index"
                 selection="multiple"
                 v-model:selected="selected"
-                :grid="($q.screen.lt.md && reponsive) || mode != 'table'"
+                :grid="mode != 'table'"
                 table-header-class="bg-grey-8"
-                flat
                 :virtual-scroll-item-size="48"
                 :pagination="pagination"
                 :rows-per-page-options="[0]"
-                style="height: 85vh"
+                style="max-height: 90vh"
-                :card-container-class="mode == 'list' ? 'grid-one' : 'grid-three'"
+                :card-container-class="
+                    mode == 'list' || $q.screen.lt.md ? 'grid-one' : 'grid-three'
+                "
+                flat
             >
                 <template #top-left>
                     <VnBreadcrumbs />
                 </template>
                 <template #top-right>
-                    <QBtn icon="visibility" title="asd" class="bg-dark q-mr-lg" dense />
+                    <QBtn
+                        icon="visibility"
+                        title="asd"
+                        class="bg-dark q-mr-md"
+                        dense
+                        v-if="mode == 'table'"
+                    />
                     <QBtnToggle
                         v-model="mode"
                         toggle-color="primary"
@@ -113,17 +129,20 @@ onMounted(() => {
                         dense
                         :options="tableModes"
                     />
-                    <QBtn icon="filter_alt" title="asd" class="bg-dark q-ml-lg" dense />
+                    <QBtn icon="filter_alt" title="asd" class="bg-dark q-ml-md" dense />
                 </template>
                 <!-- VnTableColumn¿?-->
                 <template #header-cell="{ col }">
-                    <QTh auto-width :class="`text-${col.align ?? 'left'}`">
+                    <QTh auto-width>
-                        <span>{{ col.label }}</span>
+                        <div class="q-pa-sm" :class="`text-${col.align ?? 'left'}`">
+                            {{ col.label }}
+                        </div>
+                        <hr class="q-ma-none divisor-line" />
                         <QInput
                             v-if="columnSearch"
                             dense
-                            outlined
                             :type="col.component == 'number' ? 'number' : 'text'"
+                            class="q-px-md q-pb-xs"
                         />
                     </QTh>
                 </template>
@@ -132,7 +151,6 @@ onMounted(() => {
                         <!-- {{ row[col.field] }} -->
                         <component
                             v-if="col.component"
-                            class="col-content"
                             :is="basicInputs[col.component] ?? col.component"
                             v-bind="col.props && col.props(props)"
                             @click="col.event && col.event(props)"
@@ -143,9 +161,21 @@ onMounted(() => {
                 <template #item="{ row, cols }">
                     <QCard bordered flat>
                         <QCardSection horizontal>
-                            <QChip color="primary">1234123</QChip>
+                            <span
+                                v-for="(prop, index) of Object.entries(row)"
+                                :key="index"
+                            >
+                                <QChip
+                                    color="primary"
+                                    v-if="cols[index]?.isId"
+                                    square
+                                    :title="t(cols[index].label)"
+                                >
+                                    {{ prop[1] }}
+                                </QChip>
+                            </span>
                         </QCardSection>
-                        <QCardSection class="q-pa-md">
+                        <QCardSection>
                             <div
                                 v-for="(prop, index) of Object.entries(row)"
                                 :key="index"
@@ -153,9 +183,9 @@ onMounted(() => {
                                 <div
                                     v-if="cols[index]?.cardVisible && !cols[index]?.isId"
                                 >
+                                    {{ t(cols[index].label) }} :
                                     <component
                                         v-if="cols[index]?.component"
-                                        class="cols[index]-content"
                                         :is="
                                             basicInputs[cols[index]?.component] ??
                                             cols[index]?.component
@@ -167,10 +197,27 @@ onMounted(() => {
                                             cols[index]?.event && cols[index]?.event(row)
                                         "
                                     />
-                                    <span v-else> {{ prop[0] }} : {{ prop[1] }}</span>
+                                    <span v-else>
+                                        {{ prop[1] }}
+                                    </span>
                                 </div>
                             </div>
                         </QCardSection>
+                        <QCardSection>
+                            <span
+                                v-for="(prop, index) of Object.entries(row)"
+                                :key="index"
+                            >
+                                <QChip
+                                    color="primary"
+                                    v-if="cols[index]?.isId"
+                                    square
+                                    :title="t(cols[index].label)"
+                                >
+                                    {{ prop[1] }}
+                                </QChip>
+                            </span>
+                        </QCardSection>
                     </QCard>
                 </template>
             </QTable>
@@ -231,7 +278,17 @@ onMounted(() => {
     grid-gap: 10px;
 }
 
-/*.vnTable {
+.divisor-line {
+    height: 1px;
+    background-color: var(--vn-section-color);
+    border: none;
+}
+
+.q-table th {
+    padding: 0;
+}
+
+.vnTable {
     thead tr th {
         position: sticky;
         z-index: 1;
@@ -239,5 +296,5 @@ onMounted(() => {
     thead tr:first-child th {
         top: 0;
     }
-}*/
+}
 </style>