Merge pull request '#6630 fix css vnLog' (!150) from 6630-fixCssVnLog into dev

Reviewed-on: verdnatura/salix-front#150 Reviewed-by: Javi Gallego <jgallego@verdnatura.es> Reviewed-by: Alex Moreno <alexm@verdnatura.es>
2024-01-12 07:28:45 +00:00 · 2024-01-12 07:28:45 +00:00 · 486c477b31
parent 76b3f2295a 14e6854881
commit 486c477b31
7 changed files with 66 additions and 44 deletions
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@ -168,17 +168,17 @@ function getLogTree(data) {
    let originLog = null;
    let userLog = null;
    let modelLog = null;
-    let prevLog;
    let nLogs;

-    data.forEach((log) => {
+    for (let i = 0; i < data.length; i++) {
+        let log = data[i];
+        let prevLog = i > 0 ? data[i - 1] : null;
        const locale = validations[log.changedModel]?.locale || {};

        // Origin
        const originChanged = !prevLog || log.originFk != prevLog.originFk;
        if (originChanged) {
            logs.push((originLog = { originFk: log.originFk, logs: [] }));
-            prevLog = log;
        }
        // User
        const userChanged = originChanged || log.userFk != prevLog.userFk;
@ -197,6 +197,7 @@ function getLogTree(data) {
            log.changedModel != prevLog.changedModel ||
            log.changedModelId != prevLog.changedModelId ||
            nLogs >= 6;
+
        if (modelChanged) {
            userLog.logs.push(
                (modelLog = {
@ -221,7 +222,7 @@ function getLogTree(data) {
        propNames = [...new Set(propNames)];

        log.props = parseProps(propNames, locale, vals, olds);
-    });
+    }
    return logs;
 }

@ -320,7 +321,6 @@ function selectFilter(type, dateType) {
    }
    if (type === 'action' && selectedFilters.value.changedModel === null) {
        selectedFilters.value.changedModel = undefined;
-        reload = false;
    }
    if (type === 'userRadio') {
        selectedFilters.value.userFk = userRadio.value;
@ -415,18 +415,19 @@ setLogTree();
            <div class="line bg-grey"></div>
        </QItem>
        <div
-            class="user-log q-mb-sm row"
+            class="user-log q-mb-sm"
            v-for="(userLog, userIndex) in originLog.logs"
            :key="userIndex"
        >
            <div class="timeline">
                <div class="user-avatar">
-                    <VnUserLink v-if="userLog.user.image" :worker-id="userLog.user.id">
+                    <VnUserLink :worker-id="userLog.user.id">
                        <template #link>
                            <VnAvatar
                                :class="{ 'cursor-pointer': userLog.user.id }"
                                :worker-id="userLog.user.id"
                                :title="userLog.user.nickname"
+                                size="lg"
                            />
                        </template>
                    </VnUserLink>
@ -665,7 +666,6 @@ setLogTree();
                        option-label="locale"
                        :options="actions"
                        @update:model-value="selectFilter('action')"
-                        @clear="() => selectFilter('action')"
                        hide-selected
                    />
                </QItem>
@ -823,14 +823,30 @@ setLogTree();
 .q-item {
    min-height: 0px;
 }
+.q-menu {
+    display: block;

+    & > .loading {
+        display: flex;
+        justify-content: center;
+    }
+    & > .q-card {
+        min-width: 180px;
+        max-width: 400px;
+
+        & > .header {
+            color: $dark;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+}
 .origin-log {
    &:first-child > .origin-info {
        margin-top: 0;
    }
    & > .origin-info {
-        width: 100%;
-        max-width: 42em;
        margin-top: 28px;
        gap: 6px;

@ -847,14 +863,15 @@ setLogTree();
    }
 }
 .user-log {
+    display: flex;
    width: 100%;
    max-width: 40em;
-
    & > .timeline {
        position: relative;
-        padding-right: 5px;
-        width: 50px;
+        padding-right: 1px;
+        width: 38px;
        min-width: 38px;
+        flex-grow: auto;
        & > .arrow {
            height: 8px;
            width: 8px;
@ -874,7 +891,7 @@ setLogTree();
            position: absolute;
            background-color: $primary;
            width: 2px;
-            left: 23px;
+            left: 19px;
            z-index: -1;
            top: 0;
            bottom: -8px;
@ -893,6 +910,7 @@ setLogTree();
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
+        min-height: 22px;
        .model-value {
            font-style: italic;
        }
@ -984,25 +1002,6 @@ setLogTree();
        }
    }
 }
-.q-menu {
-    display: block;
-
-    & > .loading {
-        display: flex;
-        justify-content: center;
-    }
-    & > .q-card {
-        min-width: 180px;
-        max-width: 400px;
-
-        & > .header {
-            color: $dark;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-    }
-}
 </style>
 <i18n>
 en:
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@ -1,8 +1,7 @@
 <script setup>
-import { onMounted, useSlots, ref, watch, computed } from 'vue';
+import { onMounted, useSlots, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';

--- a/src/components/ui/VnAvatar.vue
+++ b/src/components/ui/VnAvatar.vue
@ -1,19 +1,37 @@
 <script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
+import { useColor } from 'src/composables/useColor';

 const $props = defineProps({
    workerId: { type: Number, required: true },
    description: { type: String, default: null },
+    size: { type: String, default: null },
+    title: { type: String, default: null },
 });
 const session = useSession();
 const token = session.getToken();
+const { t } = useI18n();
+
+const title = computed(() => $props.title ?? t('globals.system'));
+const showLetter = ref(false);
 </script>
 <template>
    <div class="avatar-picture column items-center">
-        <QAvatar color="orange">
+        <QAvatar
+            :style="{
+                backgroundColor: useColor(title),
+            }"
+            :size="$props.size"
+            :title="title"
+        >
+            <template v-if="showLetter">{{ title.charAt(0) }}</template>
            <QImg
+                v-else
                :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
                spinner-color="white"
+                @error="showLetter = true"
            />
        </QAvatar>
        <div class="description">
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@ -89,18 +89,20 @@ function viewSummary(id) {
                        <template #list-items>
                            <VnLv :label="t('claim.list.customer')" @click.stop>
                                <template #value>
-                                    <span class="link">
+                                    <span class="link" @click.stop>
                                        {{ row.clientName }}
                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                    </span>
                                </template>
                            </VnLv>
-                            <VnLv :label="t('claim.list.assignedTo')" @click.stop>
+                            <VnLv :label="t('claim.list.assignedTo')">
                                <template #value>
-                                    <VnUserLink
-                                        :name="row.workerName"
-                                        :worker-id="row.workerFk"
-                                    />
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
                                </template>
                            </VnLv>
                            <VnLv
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@ -76,7 +76,6 @@ function viewSummary(id) {
                data-key="InvoiceInList"
                url="InvoiceIns/filter"
                order="issued DESC, id DESC"
-                auto-load
            >
                <template #body="{ rows }">
                    <CardList
--- a/test/cypress/integration/invoiceIn/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInList.spec.js
@ -9,6 +9,7 @@ describe('InvoiceInList', () => {
    beforeEach(() => {
        cy.login('developer');
        cy.visit(`/#/invoice-in`);
+        cy.clickFilterSearchBtn();
    });

    it('should redirect on clicking a invoice', () => {
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@ -178,9 +178,13 @@ Cypress.Commands.add('clearSearchbar', (element) => {
 });

 Cypress.Commands.add('writeSearchbar', (value) => {
-     cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
+    cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
 });
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {
    cy.get(selector).should('have.text', expectedValue);
 });
+
+Cypress.Commands.add('clickFilterSearchBtn', () => {
+    cy.get('.q-item__section > .q-btn > .q-btn__content > .q-icon').click();
+});
 // registerCommands();