Merge branch 'dev' into 6076-2FA

src/components/LeftMenu.vue

@@ -115,7 +115,7 @@ async function togglePinned(item, event) {
 </script>
 
 <template>
-    <QList padding>
+    <QList padding class="column-max-width">
         <template v-if="$props.source === 'main'">
             <QItemLabel header>
                 {{ t('globals.pinnedModules') }}
@@ -207,4 +207,7 @@ async function togglePinned(item, event) {
 .pinned:hover .q-btn {
     visibility: visible;
 }
+.column-max-width {
+    max-width: 256px;
+}
 </style>

src/components/LeftMenuItem.vue

@@ -14,7 +14,7 @@ const props = defineProps({
 const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
 </script>
 <template>
-    <QItem active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
+    <QItem active-class="text-primary" :to="{ name: item.name }" clickable class="q-ml-md" v-ripple>
         <QItemSection avatar v-if="item.icon">
             <QIcon :name="item.icon" />
         </QItemSection>

src/components/ui/VnLv.vue

@@ -1,36 +1,37 @@
 <script setup>
 import { computed } from 'vue';
 const $props = defineProps({
-  label: { type: String, default: null },
-  value: {
-    type: [String, Boolean],
-    default: null,
-  },
-  info: { type: String, default: null },
+    label: { type: String, default: null },
+    value: {
+        type: [String, Boolean],
+        default: null,
+    },
+    info: { type: String, default: null },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
-
 </script>
 <template>
-  <div class="vn-label-value">
-    <div v-if="$props.label || $slots.label" class="label">
-      <div v-if="!$slots.label">{{ $props.label }}</div>
-      <slot name="label"></slot>
+    <div class="vn-label-value">
+        <div v-if="$props.label || $slots.label" class="label">
+            <slot name="label"> {{ $props.label }}</slot>
+        </div>
+        <div v-if="$props.value || $slots.value" class="value">
+            <span v-if="isBooleanValue">
+                <QIcon
+                    :name="$props.value ? `check` : `close`"
+                    :color="$props.value ? `positive` : `negative`"
+                />
+            </span>
+            <span v-else>
+                <slot name="value">{{ $props.value }}</slot>
+            </span>
+        </div>
+        <div class="info" v-if="$props.info">
+            <QIcon name="info">
+                <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
+                    {{ $props.info }}
+                </QTooltip>
+            </QIcon>
+        </div>
     </div>
-    <div v-if="$props.value || $slots.value" class="value">
-      <span v-if="isBooleanValue">
-        <QIcon :name="$props.value ? `check` : `close`" :color="$props.value ? `positive` : `negative`" />
-      </span>
-      <span v-else>
-        <slot name="value"></slot>
-      </span>
-    </div>
-    <div class="info" v-if="$props.info">
-      <QIcon name="info">
-        <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
-          {{ $props.info }}
-        </QTooltip>
-      </QIcon>
-    </div>
-  </div>
 </template>

src/css/app.scss

@@ -29,4 +29,4 @@ body.body--light {
         background-color: white;
         color: #555;
     }
-}
+}

src/css/quasar.variables.scss

@@ -12,7 +12,7 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary: #ff9800;
+$primary: #ec8916;
 $secondary: #26a69a;
 $accent: #9c27b0;
 

src/i18n/en/index.js

@@ -175,6 +175,7 @@ export default {
             summary: 'Summary',
             basicData: 'Basic Data',
             boxing: 'Boxing',
+            sms: 'Sms',
         },
         list: {
             nickname: 'Nickname',

src/i18n/es/index.js

@@ -174,6 +174,7 @@ export default {
             summary: 'Resumen',
             basicData: 'Datos básicos',
             boxing: 'Encajado',
+            sms: 'Sms',
         },
         list: {
             nickname: 'Alias',

src/pages/Ticket/Card/TicketSms.vue

@@ -0,0 +1,118 @@
+<script setup>
+import { date } from 'quasar';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useSession } from 'src/composables/useSession';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const router = useRouter();
+const session = useSession();
+const token = session.getToken();
+
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+
+const filter = {
+    fields: ['ticketFk', 'smsFk'],
+    include: {
+        relation: 'sms',
+        scope: {
+            fields: [
+                'senderFk',
+                'sender',
+                'destination',
+                'message',
+                'statusCode',
+                'status',
+                'created',
+            ],
+            include: {
+                relation: 'sender',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        },
+    },
+    where: {
+        ticketFk: entityId,
+    },
+};
+
+function formatNumer(number) {
+    if (number.length <= 10) return number;
+    return number.slice(0, 4) + ' ' + number.slice(4);
+}
+</script>
+
+<template>
+    <div class="column items-center">
+        <div class="list">
+            <VnPaginate
+                data-key="TicketSms"
+                url="TicketSms"
+                :filter="filter"
+                order="smsFk DESC"
+                :offset="100"
+                :limit="5"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard
+                        flat
+                        bordered
+                        class="card q-pa-md"
+                        v-for="row of rows"
+                        :key="row.smsFk"
+                    >
+                        <QItem>
+                            <QItmSection top avatar>
+                                <QItemLabel class="column items-center">
+                                    <QAvatar>
+                                        <QImg
+                                            :src="`/api/Images/user/160x160/${row.sms.senderFk}/download?access_token=${token}`"
+                                            spinner-color="white"
+                                        />
+                                    </QAvatar>
+                                    <span class="link">
+                                        {{ row.sms.sender.name }}
+                                        <WorkerDescriptorProxy :id="row.sms.senderFk" />
+                                    </span>
+                                </QItemLabel>
+                            </QItmSection>
+                            <QSeparator spaced inset="item" />
+                            <QItemSection>
+                                <QItemLabel caption>{{
+                                    formatNumer(row.sms.destination)
+                                }}</QItemLabel>
+                                <QItemLabel>{{ row.sms.message }}</QItemLabel>
+                            </QItemSection>
+                            <QItemSection side top>
+                                <QItemLabel caption>{{
+                                    date.formatDate(
+                                        row.sms.created,
+                                        'YYYY-MM-DD HH:mm:ss'
+                                    )
+                                }}</QItemLabel>
+                                <QItemLabel>
+                                    <QChip
+                                        :color="
+                                            row.sms.status == 'OK'
+                                                ? 'positive'
+                                                : 'negative'
+                                        "
+                                    >
+                                        {{ row.sms.status }}
+                                    </QChip>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QCard>
+                </template>
+            </VnPaginate>
+        </div>
+    </div>
+</template>

src/router/modules/ticket.js

@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing'],
+        card: ['TicketBoxing', 'TicketSms'],
     },
     children: [
         {
@@ -74,6 +74,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
                 },
+                {
+                    path: 'sms',
+                    name: 'TicketSms',
+                    meta: {
+                        title: 'sms',
+                        icon: 'sms',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
+                },
             ],
         },
     ],