ref #6104 recreate vnlog

package.json

@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chromium",
+        "test:e2e:ci": "cypress run --browser chrome",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"

src/components/FetchData.vue

@@ -46,7 +46,7 @@ async function fetch() {
         if ($props.limit) filter.limit = $props.limit;
 
         const { data } = await axios.get($props.url, {
-            params: { filter },
+            params: { filter: JSON.stringify(filter) },
         });
 
         emit('onFetch', data);

src/components/common/VnJsonValue.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { watch } from 'vue';
+import { toDateString } from 'src/filters';
+
+const props = defineProps({
+    value: { type: [String, Number, Boolean, Object], default: undefined },
+});
+
+const maxStrLen = 512;
+let t = '';
+let cssClass = '';
+let type;
+const updateValue = () => {
+    type = typeof props.value;
+
+    if (props.value == null) {
+        t = '∅';
+        cssClass = 'json-null';
+    } else {
+        cssClass = `json-${type}`;
+        switch (type) {
+            case 'number':
+                if (Number.isInteger(props.value)) {
+                    t = props.value.toString();
+                } else {
+                    t = (
+                        Math.round((props.value + Number.EPSILON) * 1000) / 1000
+                    ).toString();
+                }
+                break;
+            case 'boolean':
+                t = props.value ? '✓' : '✗';
+                cssClass = `json-${props.value ? 'true' : 'false'}`;
+                break;
+            case 'string':
+                t =
+                    props.value.length <= maxStrLen
+                        ? props.value
+                        : props.value.substring(0, maxStrLen) + '...';
+                break;
+            case 'object':
+                if (props.value instanceof Date) {
+                    t = toDateString(props.value);
+                } else {
+                    t = props.value.toString();
+                }
+                break;
+            default:
+                t = props.value.toString();
+        }
+    }
+};
+
+watch(() => props.value, updateValue);
+
+updateValue();
+</script>
+
+<template>
+    <span
+        :title="type === 'string' && props.value.length > maxStrLen ? props.value : ''"
+        :class="{ [cssClass]: t !== '' }"
+    >
+        {{ t }}
+    </span>
+</template>
+
+<style scoped>
+.json-string {
+    color: #d172cc;
+}
+.json-object {
+    color: #d1a572;
+}
+.json-number {
+    color: #85d0ff;
+}
+.json-true {
+    color: #7dc489;
+}
+.json-false {
+    color: #c74949;
+}
+.json-null {
+    color: #cd7c7c;
+    font-style: italic;
+}
+</style>

src/composables/useColor.js

@@ -0,0 +1,35 @@
+export function djb2a(string) {
+    let hash = 5381;
+    for (let i = 0; i < string.length; i++)
+        hash = ((hash << 5) + hash) ^ string.charCodeAt(i);
+    return hash >>> 0;
+}
+
+export function useColor(value) {
+    return '#' + colors[djb2a(value || '') % colors.length];
+}
+
+const colors = [
+    'b5b941', // Yellow
+    'ae9681', // Peach
+    'd78767', // Salmon
+    'cc7000', // Orange bright
+    'e2553d', // Coral
+    '8B0000', // Red dark
+    'de4362', // Red crimson
+    'FF1493', // Ping intense
+    'be39a2', // Pink light
+    'b754cf', // Purple middle
+    'a87ba8', // Pink
+    '8a69cd', // Blue lavender
+    'ab20ab', // Purple dark
+    '00b5b8', // Turquoise
+    '1fa8a1', // Green ocean
+    '5681cf', // Blue steel
+    '3399fe', // Blue sky
+    '6d9c3e', // Green chartreuse
+    '51bb51', // Green lime
+    '518b8b', // Gray board
+    '7e7e7e', // Gray
+    '5d5d5d', // Gray dark
+];

src/composables/useFirstUpper.js

@@ -0,0 +1,3 @@
+export function useFirstUpper(str) {
+    return str && str.charAt(0).toUpperCase() + str.substr(1);
+}

src/composables/useIso8601.js

@@ -0,0 +1,18 @@
+export function useIso8601(dateString) {
+    // Crear un objeto Date a partir de la cadena de texto
+    const date = new Date(dateString);
+
+    // Obtener los componentes de fecha y hora
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const day = String(date.getUTCDate()).padStart(2, '0');
+    const hours = String(date.getUTCHours()).padStart(2, '0');
+    const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+    const seconds = String(date.getUTCSeconds()).padStart(2, '0');
+    const milliseconds = String(date.getUTCMilliseconds()).padStart(3, '0');
+
+    // Formatear la cadena en el formato ISO 8601
+    const formattedDate = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}Z`;
+
+    return formattedDate;
+}

src/css/app.scss

@@ -14,6 +14,10 @@ a {
     color: $orange-4;
 }
 
+.rounded--full {
+    border-radius: 50%;
+}
+
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
@@ -32,10 +36,12 @@ body.body--light {
     --vn-text: #000000;
     --vn-gray: #f5f5f5;
     --vn-label: #5f5f5f;
+    --vn-header: #e9e9e9;
 }
 
 body.body--dark {
     --vn-text: #ffffff;
     --vn-gray: #313131;
     --vn-label: #a8a8a8;
+    --vn-header: #212121;
 }

src/filters/index.js

@@ -2,6 +2,7 @@ import toLowerCase from './toLowerCase';
 import toDate from './toDate';
 import toDateString from './toDateString';
 import toDateHour from './toDateHour';
+import toRelativeDate from './toRelativeDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
 import toLowerCamel from './toLowerCamel';
@@ -13,6 +14,7 @@ export {
     toDate,
     toDateString,
     toDateHour,
+    toRelativeDate,
     toCurrency,
     toPercentage,
     dashIfEmpty,

src/filters/toRelativeDate.js

@@ -0,0 +1,32 @@
+import { useI18n } from 'vue-i18n';
+
+export default function formatDate(dateVal) {
+    const { t } = useI18n();
+    const today = new Date();
+    if (dateVal == null) return '';
+
+    const date = new Date(dateVal);
+    const dateZeroTime = new Date(dateVal);
+    dateZeroTime.setHours(0, 0, 0, 0);
+    const diff = Math.trunc(
+        (today.getTime() - dateZeroTime.getTime()) / (1000 * 3600 * 24)
+    );
+    let format;
+    if (diff === 0) format = t('globals.today');
+    else if (diff === 1) format = t('globals.yesterday');
+    else if (diff > 1 && diff < 7) {
+        const options = { weekday: 'short' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    } else if (today.getFullYear() === date.getFullYear()) {
+        const options = { day: 'numeric', month: 'short' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    } else {
+        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
+        format = date.toLocaleDateString(t('globals.dateFormat'), options);
+    }
+
+    // Formatear la hora en HH:mm
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${format} ${hours}:${minutes}`;
+}

src/i18n/en/index.js

@@ -5,6 +5,9 @@ export default {
             en: 'English',
         },
         language: 'Language',
+        entity: 'Entity',
+        user: 'User',
+        details: 'Details',
         collapseMenu: 'Collapse left menu',
         backToDashboard: 'Return to dashboard',
         notifications: 'Notifications',
@@ -13,8 +16,11 @@ export default {
         pinnedModules: 'Pinned modules',
         darkMode: 'Dark mode',
         logOut: 'Log out',
+        date: 'Date',
         dataSaved: 'Data saved',
         dataDeleted: 'Data deleted',
+        search: 'Search',
+        changes: 'Changes',
         add: 'Add',
         create: 'Create',
         save: 'Save',
@@ -36,6 +42,9 @@ export default {
         summary: {
             basicData: 'Basic data',
         },
+        today: 'Today',
+        yesterday: 'Yesterday',
+        dateFormat: 'en-GB',
     },
     errors: {
         statusUnauthorized: 'Access denied',

src/i18n/es/index.js

@@ -5,6 +5,9 @@ export default {
             en: 'Inglés',
         },
         language: 'Idioma',
+        entity: 'Entidad',
+        user: 'Usuario',
+        details: 'Detalles',
         collapseMenu: 'Contraer menú lateral',
         backToDashboard: 'Volver al tablón',
         notifications: 'Notificaciones',
@@ -13,8 +16,11 @@ export default {
         pinnedModules: 'Módulos fijados',
         darkMode: 'Modo oscuro',
         logOut: 'Cerrar sesión',
+        date: 'Fecha',
         dataSaved: 'Datos guardados',
         dataDeleted: 'Datos eliminados',
+        search: 'Buscar',
+        changes: 'Cambios',
         add: 'Añadir',
         create: 'Crear',
         save: 'Guardar',
@@ -36,6 +42,9 @@ export default {
         summary: {
             basicData: 'Datos básicos',
         },
+        today: 'Hoy',
+        yesterday: 'Ayer',
+        dateFormat: 'es-ES',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',

src/stores/useValidationsStore.js

@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { defineStore } from 'pinia';
+
+export const useValidationsStore = defineStore('validationsStore', {
+    state: () => ({
+        validations: null,
+    }),
+    actions: {
+        async fetchModels() {
+            if (this.validations) return;
+            try {
+                const { data } = await axios.get('Schemas/modelinfo');
+                this.validations = data;
+            } catch (error) {
+                console.error('Error al obtener las validaciones:', error);
+            }
+        },
+    },
+});

test/cypress/integration/ClaimNotes.spec.js

@@ -8,6 +8,7 @@ describe('ClaimNotes', () => {
     it('should add a new note', () => {
         const message = 'This is a new message.';
         cy.get('.q-page-sticky button').click();
+        cy.get('.q-page-sticky > div > button').click();
         cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
         cy.get('.q-card__actions button:nth-child(2)').click();
         cy.get('.q-card .q-card__section:nth-child(2)')

test/cypress/integration/vnLog.spec.js

@@ -0,0 +1,31 @@
+/// <reference types="cypress" />
+describe('ClaimNotes', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/claim/${1}/log`);
+    });
+
+    it('should have just one record', () => {
+        cy.get('.model-info .q-btn').eq(1).click();
+        cy.get('.user-log .model-log').its('length').should('eq', 1);
+        cy.get('.q-page-sticky .q-btn').click();
+        cy.get('.user-log .model-log').its('length').should('eq', 4);
+    });
+
+    it('should filter by insert actions', () => {
+        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('.q-checkbox__inner').eq(0).click();
+        cy.get('.q-page > .q-drawer-container > .fullscreen').click();
+        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Document');
+        cy.get('.model-info .q-chip__content').eq(1).should('have.text', 'Beginning');
+    });
+
+    it('should show the point record', () => {
+        cy.get('.pit').eq(0).click();
+        cy.get('.q-menu .q-card .header').should('have.text', 'Observation #1');
+        cy.get('.q-menu .q-card .json-string').should(
+            'have.text',
+            'Waiting for customer'
+        );
+    });
+});

test/cypress/integration/workerList.spec.js

@@ -8,17 +8,17 @@ describe('WorkerList', () => {
     it('should load workers', () => {
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
             .eq(0)
-            .should('have.text', 'victorvd');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(1)
             .should('have.text', 'JessicaJones');
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(2)
+            .eq(1)
             .should('have.text', 'BruceBanner');
+        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
+            .eq(2)
+            .should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
-        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(1).click();
+        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click();
         cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
         cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
         cy.get('.summary .header').eq(1).should('have.text', 'User data');