From a75b33a8243aee3e2dfa206429ce4065b7d8b60a Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 2 May 2024 15:01:54 +0200
Subject: [PATCH] feat: refs #6825 qchip color

---
 src/components/common/VnTable.vue             | 122 +++++++++++-------
 src/components/ui/VnPaginate.vue              |   6 -
 .../ExtendedList/CustomerExtendedList.vue     |   3 +-
 3 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 278c3d207..cdce05d3a 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -17,8 +17,8 @@ const $props = defineProps({
         default: () => [],
     },
     defaultMode: {
-        type: String, // 'table', 'list', 'card 2/3'
-        default: 'list',
+        type: String,
+        default: 'list', // 'table', 'list', 'card'
     },
     reponsive: {
         type: Boolean,
@@ -135,62 +135,70 @@ onMounted(() => {
                         />
                     </QTh>
                 </template>
+
                 <template #body-cell="{ row, col }">
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
                         <VnTableColumn :column="col" :row />
                     </QTd>
                 </template>
-                <template #item="{ row, cols, colsMap }">
-                    <QCard bordered flat>
-                        <QCardSection horizontal>
-                            <span
-                                v-for="(prop, index) of Object.entries(row)"
-                                :key="index"
-                            >
-                                <QChip
-                                    color="primary-light"
-                                    square
-                                    v-if="cols[index]?.isId"
-                                    :title="t(cols[index].label)"
-                                    class="no-margin"
-                                >
-                                    {{ 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'
+                <template #item="{ row, colsMap }">
+                    <TransitionGroup name="grid" tag="div" class="grid">
+                        <QCard bordered flat>
+                            <QCardSection horizontal>
+                                <span v-for="(col, index) of colsMap" :key="col.field">
+                                    {{ index }}
+                                    <QChip
+                                        :class="
+                                            col.color
+                                                ? col.color(row)
+                                                : col.isId == 1
+                                                ? 'bg-primary-light'
+                                                : 'bg-secondary'
                                         "
+                                        square
+                                        v-if="col.isId"
+                                        :title="t(col.label)"
+                                        class="no-margin"
                                     >
-                                        <VnLv :label="`${col.label}:`">
-                                            <template #value>
-                                                <VnTableColumn :column="col" :row />
-                                            </template>
-                                        </VnLv>
+                                        {{ row[col.field] }}
+                                    </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'
+                                            "
+                                        >
+                                            <VnLv :label="`${col.label}:`">
+                                                <template #value>
+                                                    <VnTableColumn :column="col" :row />
+                                                </template>
+                                            </VnLv>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <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>
+                                <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>
+                    </TransitionGroup>
                 </template>
             </QTable>
         </template>
@@ -204,6 +212,11 @@ onMounted(() => {
     background-color: var(--primary-light);
     color: var(--vn-section-color);
 }
+
+.bg-secondary {
+    background-color: var(--vn-page-color);
+    color: var(--vn-text-colo);
+}
 .text-primary-light {
     color: var(--primary-light);
 }
@@ -260,6 +273,17 @@ onMounted(() => {
     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 {
     height: 1px;
     background-color: var(--vn-section-color);
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 4dae312ce..6bbf44684 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -192,12 +192,6 @@ defineExpose({ fetch, addFilter });
             <QSpinner color="orange" size="md" />
         </div>
     </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>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 444726ad2..83eb91b9a 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -271,13 +271,14 @@ const columns = computed(() => [
         field: 'id',
         label: t('customer.extendedList.tableVisibleColumns.id'),
         name: 'id',
-        isId: true,
+        isId: 1,
     },
     {
         align: 'left',
         field: 'name',
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
+        isId: 2,
     },
     {
         align: 'left',