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

feat: refs #6825 qchip color

This commit is contained in:
Alex Moreno 2024-05-02 15:01:54 +02:00
parent ed3c9db919
commit a75b33a824
3 changed files with 75 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,8 +17,8 @@ const $props = defineProps({
default: () => [], default: () => [],
}, },
defaultMode: { defaultMode: {
type: String, // 'table', 'list', 'card 2/3' type: String,
default: 'list', default: 'list', // 'table', 'list', 'card'
}, },
reponsive: { reponsive: {
type: Boolean, type: Boolean,
@ -135,62 +135,70 @@ onMounted(() => {
/> />
</QTh> </QTh>
</template> </template>
<template #body-cell="{ row, col }"> <template #body-cell="{ row, col }">
<QTd auto-width :class="`text-${col.align ?? 'left'}`"> <QTd auto-width :class="`text-${col.align ?? 'left'}`">
<VnTableColumn :column="col" :row /> <VnTableColumn :column="col" :row />
</QTd> </QTd>
</template> </template>
<template #item="{ row, cols, colsMap }"> <template #item="{ row, colsMap }">
<QCard bordered flat> <TransitionGroup name="grid" tag="div" class="grid">
<QCardSection horizontal> <QCard bordered flat>
<span <QCardSection horizontal>
v-for="(prop, index) of Object.entries(row)" <span v-for="(col, index) of colsMap" :key="col.field">
:key="index" {{ index }}
> <QChip
<QChip :class="
color="primary-light" col.color
square ? col.color(row)
v-if="cols[index]?.isId" : col.isId == 1
:title="t(cols[index].label)" ? 'bg-primary-light'
class="no-margin" : 'bg-secondary'
>
{{ prop[1] }}
</QChip>
</span>
</QCardSection>
<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'
" "
square
v-if="col.isId"
:title="t(col.label)"
class="no-margin"
> >
<VnLv :label="`${col.label}:`"> {{ row[col.field] }}
<template #value> </QChip>
<VnTableColumn :column="col" :row /> </span>
</template> </QCardSection>
</VnLv> <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'
"
>
<VnLv :label="`${col.label}:`">
<template #value>
<VnTableColumn :column="col" :row />
</template>
</VnLv>
</div>
</div> </div>
</div> </div>
</div> <div v-if="colsMap.tableActions" class="column">
<div v-if="colsMap.tableActions" class="column"> <QBtn
<QBtn v-for="(btn, index) of colsMap.tableActions
v-for="(btn, index) of colsMap.tableActions.actions" .actions"
:key="index" :key="index"
:title="btn.title" :title="btn.title"
:icon="btn.icon" :icon="btn.icon"
:outline="!btn.isPrimary" :outline="!btn.isPrimary"
size="sm" size="sm"
class="q-pa-sm q-mb-sm" class="q-pa-sm q-mb-sm"
:class="{ 'bg-primary-light': btn.isPrimary }" :class="{ 'bg-primary-light': btn.isPrimary }"
@click.stop="btn.action(row)" @click.stop="btn.action(row)"
/> />
</div> </div>
</QCardSection> </QCardSection>
</QCard> </QCard>
</TransitionGroup>
</template> </template>
</QTable> </QTable>
</template> </template>
@ -204,6 +212,11 @@ onMounted(() => {
background-color: var(--primary-light); background-color: var(--primary-light);
color: var(--vn-section-color); color: var(--vn-section-color);
} }
.bg-secondary {
background-color: var(--vn-page-color);
color: var(--vn-text-colo);
}
.text-primary-light { .text-primary-light {
color: var(--primary-light); color: var(--primary-light);
} }
@ -260,6 +273,17 @@ onMounted(() => {
grid-gap: 10px; grid-gap: 10px;
} }
// WIP TRANSITIONS
// .grid-item {
// background-color: red;
// transition: all 500ms ease;
// }
// .grid-move {
// background-color: #6b7280 !important;
// transform: scale(0.9);
// }
.divisor-line { .divisor-line {
height: 1px; height: 1px;
background-color: var(--vn-section-color); background-color: var(--vn-section-color);

6
src/components/ui/VnPaginate.vue
View File

@ -192,12 +192,6 @@ defineExpose({ fetch, addFilter });
<QSpinner color="orange" size="md" /> <QSpinner color="orange" size="md" />
</div> </div>
</QInfiniteScroll> </QInfiniteScroll>
<div
v-if="!isLoading && store.hasMoreData"
class="w-full flex justify-center q-mt-md"
>
<QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -271,13 +271,14 @@ const columns = computed(() => [
field: 'id', field: 'id',
label: t('customer.extendedList.tableVisibleColumns.id'), label: t('customer.extendedList.tableVisibleColumns.id'),
name: 'id', name: 'id',
isId: true, isId: 1,
}, },
{ {
align: 'left', align: 'left',
field: 'name', field: 'name',
label: t('customer.extendedList.tableVisibleColumns.name'), label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'name', name: 'name',
isId: 2,
}, },
{ {
align: 'left', align: 'left',