wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

feat: refs #6825 create vnTableColumn, cardActions

This commit is contained in:
Alex Moreno 2024-04-29 15:12:49 +02:00
parent e0379dd1bc
commit ed3c9db919
3 changed files with 132 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/common/VnTable.vue
View File

@ -1,15 +1,11 @@
<script setup>
import { ref, onMounted, markRaw, computed } from 'vue';
import { QCheckbox, useQuasar } from 'quasar';
import { ref, onMounted, computed } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnBreadcrumbs from 'components/common/VnBreadcrumbs.vue';
/* 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 VnLv from 'src/components/ui/VnLv.vue';
import VnTableColumn from 'src/components/common/VnTableColumn.vue';
import VnLv from 'src/components/ui/VnLv.vue';
const $props = defineProps({
columns: {
@ -64,13 +60,6 @@ const tableModes = computed(() => {
return modes;
});
const basicInputs = {
input: markRaw(VnInput),
number: markRaw(VnInput),
date: markRaw(VnInputDate),
checkbox: markRaw(QCheckbox),
select: markRaw(VnSelect),
};
// {
// isId: Boolean
// align: 'left',
@ -84,7 +73,7 @@ const basicInputs = {
// 'model-value': Boolean(prop.value),
// }),
// },
// vnTableOpitons y hacer bucle
// vnTableOpitons y hacer bucle
onMounted(() => {
mode.value = $props.defaultMode;
});
@ -146,19 +135,12 @@ onMounted(() => {
/>
</QTh>
</template>
<template #body-cell="{ props, row, col }">
<template #body-cell="{ row, col }">
<QTd auto-width :class="`text-${col.align ?? 'left'}`">
<!-- {{ row[col.field] }} -->
<component
v-if="col.component"
:is="basicInputs[col.component] ?? col.component"
v-bind="col.props && col.props(props)"
@click="col.event && col.event(props)"
/>
<span v-else> {{ row[col.field] }}</span>
<VnTableColumn :column="col" :row />
</QTd>
</template>
<template #item="{ row, cols }">
<template #item="{ row, cols, colsMap }">
<QCard bordered flat>
<QCardSection horizontal>
<span
@ -166,57 +148,47 @@ onMounted(() => {
:key="index"
>
<QChip
color="primary"
v-if="cols[index]?.isId"
color="primary-light"
square
v-if="cols[index]?.isId"
:title="t(cols[index].label)"
class="no-margin"
>
{{ prop[1] }}
</QChip>
</span>
</QCardSection>
<QCardSection>
<div
v-for="(prop, index) of Object.entries(row)"
:key="index"
>
<div
v-if="cols[index]?.cardVisible && !cols[index]?.isId"
>
{{ t(cols[index].label) }} :
<component
v-if="cols[index]?.component"
:is="
basicInputs[cols[index]?.component] ??
cols[index]?.component
<QCardSection class="row justify-between q-pa-sm">
<div>
<div v-for="col of colsMap" :key="col.field">
<div
v-if="
col.cardVisible &&
!col.isId &&
col.field != 'tableActions'
"
v-bind="
cols[index]?.props && cols[index]?.props(row)
"
@click="
cols[index]?.event && cols[index]?.event(row)
"
/>
<span v-else>
{{ prop[1] }}
</span>
>
<VnLv :label="`${col.label}:`">
<template #value>
<VnTableColumn :column="col" :row />
</template>
</VnLv>
</div>
</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>
<div v-if="colsMap.tableActions" class="column">
<QBtn
v-for="(btn, index) of colsMap.tableActions.actions"
:key="index"
:title="btn.title"
:icon="btn.icon"
:outline="!btn.isPrimary"
size="sm"
class="q-pa-sm q-mb-sm"
:class="{ 'bg-primary-light': btn.isPrimary }"
@click.stop="btn.action(row)"
/>
</div>
</QCardSection>
</QCard>
</template>
@ -225,12 +197,22 @@ onMounted(() => {
</VnPaginate>
</template>
<style lang="scss">
* {
--primary-light: #f5b351;
}
.bg-primary-light {
background-color: var(--primary-light);
color: var(--vn-section-color);
}
.text-primary-light {
color: var(--primary-light);
}
.q-checkbox {
& .q-checkbox__label {
color: #f5b351; /* use global*/
color: var(--primary-light); /* use global*/
}
& .q-checkbox__inner {
color: #f5b351; /* use global*/
color: var(--primary-light); /* use global*/
}
}
.q-table--dark .q-table__bottom,
@ -248,7 +230,7 @@ onMounted(() => {
/* Works on Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #f5b351 transparent;
scrollbar-color: var(--primary-light) transparent;
}
/* Works on Chrome, Edge, and Safari */
@ -263,7 +245,7 @@ onMounted(() => {
*::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 20px;
border: 3px solid #f5b351;
border: 3px solid var(--primary-light);
}
.grid-one {
@ -297,4 +279,9 @@ onMounted(() => {
top: 0;
}
}
.vn-label-value {
display: flex;
flex-direction: row;
}
</style>

39
src/components/common/VnTableColumn.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<component
v-if="column.component"
:is="components[column.component] ?? column.component"
v-bind="column.props && column.props(row)"
@click="column.event && column.event(row)"
/>
<span v-else>{{ dashIfEmpty(row[column.field]) }}</span>
</template>
<script setup>
import { markRaw } from 'vue';
import { QIcon, QCheckbox } from 'quasar';
import { dashIfEmpty } from 'src/filters';
/* 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';
const components = {
input: markRaw(VnInput),
number: markRaw(VnInput),
date: markRaw(VnInputDate),
checkbox: markRaw(QCheckbox),
select: markRaw(VnSelect),
icon: markRaw(QIcon),
};
defineProps({
column: {
type: Object,
required: true,
},
row: {
type: Object,
required: true,
},
});
</script>

64
src/pages/Customer/ExtendedList/CustomerExtendedList.vue
View File

@ -1,19 +1,15 @@
<script setup>
import { ref, computed, onBeforeMount, onMounted } from 'vue';
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnInput from 'src/components/common/VnInput.vue';
import VnTable from 'components/common/VnTable.vue';
import CustomerSummary from '../Card/CustomerSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { QBtn, QIcon } from 'quasar';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters';
@ -21,17 +17,6 @@ const { t } = useI18n();
const router = useRouter();
const stateStore = useStateStore();
const arrayData = ref(null);
onBeforeMount(async () => {
arrayData.value = useArrayData('CustomerExtendedList', {
url: 'Clients/extendedListFilter',
limit: 0,
});
await arrayData.value.fetch({ append: false });
stateStore.rightDrawer = true;
});
onMounted(() => {
const filteredColumns = columns.value.filter(
(col) => col.name !== 'actions' && col.name !== 'customerStatus'
@ -39,8 +24,6 @@ onMounted(() => {
allColumnNames.value = filteredColumns.map((col) => col.name);
});
const rows = computed(() => arrayData.value.store.data);
const selectedCustomerId = ref(0);
const selectedSalesPersonId = ref(0);
const allColumnNames = ref([]);
@ -264,6 +247,17 @@ const tableColumnComponents = {
event: () => {},
},
};
const { viewSummary } = useSummaryDialog();
const redirectToCreateView = (row) => {
router.push({
name: 'TicketList',
query: {
params: JSON.stringify({
clientFk: row.id,
}),
},
});
};
const columns = computed(() => [
{
@ -284,14 +278,12 @@ const columns = computed(() => [
field: 'name',
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'name',
cardVisible: true,
},
{
align: 'left',
field: 'fi',
label: t('customer.extendedList.tableVisibleColumns.fi'),
name: 'fi',
cardVisible: true,
},
{
align: 'left',
@ -316,12 +308,14 @@ const columns = computed(() => [
field: 'phone',
label: t('customer.extendedList.tableVisibleColumns.phone'),
name: 'phone',
cardVisible: true,
},
{
align: 'left',
field: 'mobile',
label: t('customer.extendedList.tableVisibleColumns.mobile'),
name: 'mobile',
cardVisible: true,
},
{
align: 'left',
@ -358,6 +352,7 @@ const columns = computed(() => [
field: 'email',
label: t('customer.extendedList.tableVisibleColumns.email'),
name: 'email',
cardVisible: true,
},
{
align: 'left',
@ -469,9 +464,22 @@ const columns = computed(() => [
},
{
align: 'right',
field: 'actions',
field: 'tableActions',
label: '',
name: 'actions',
name: 'tableActions',
actions: [
{
title: t('Client ticket list'),
icon: 'vn:ticket',
action: redirectToCreateView,
isPrimary: true,
},
{
title: t('Client ticket list'),
icon: 'preview',
action: (row) => viewSummary(row.id, CustomerSummary),
},
],
},
]);
@ -513,12 +521,10 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
<VnTable
data-key="CustomerExtendedList"
url="Clients/extendedListFilter"
order="id DESC"
:columns="columns"
:rows="rows"
class="full-width q-mt-md"
row-key="id"
:visible-columns="visibleColumns"
@row-click="(evt, row, id) => navigateToTravelId(row.id)"
auto-load
>
<!--
default-mode="table"