forked from verdnatura/salix-front
feat: refs #6825 fix modes
This commit is contained in:
parent
161922da09
commit
e0379dd1bc
|
|
@ -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 = [
|
||||
{
|
||||
icon: 'view_column',
|
||||
title: t('table view'),
|
||||
class: 'q-mr-lg',
|
||||
value: 'table',
|
||||
},
|
||||
{
|
||||
icon: 'lists',
|
||||
title: t('list view'),
|
||||
value: 'list',
|
||||
},
|
||||
{
|
||||
icon: 'apps',
|
||||
title: t('grid view'),
|
||||
value: 'card',
|
||||
},
|
||||
];
|
||||
const tableModes = computed(() => {
|
||||
const modes = [
|
||||
{
|
||||
icon: 'view_column',
|
||||
title: t('table view'),
|
||||
value: 'table',
|
||||
},
|
||||
{
|
||||
icon: 'lists',
|
||||
title: t('list view'),
|
||||
value: 'list',
|
||||
},
|
||||
];
|
||||
if (!$q.screen.lt.md)
|
||||
modes.push({
|
||||
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"
|
||||
:card-container-class="mode == 'list' ? 'grid-one' : 'grid-three'"
|
||||
style="max-height: 90vh"
|
||||
: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'}`">
|
||||
<span>{{ col.label }}</span>
|
||||
<QTh auto-width>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue