Merge pull request '#8041 - unifyClassLink' (!1510) from 8041-unifyClassLink into dev

Reviewed-on: #1510
Reviewed-by: Pablo Natek <pablone@verdnatura.es>

src/components/FilterItemForm.vue

@@ -188,7 +188,7 @@ const selectItem = ({ id }) => {
             >
                 <template #body-cell-id="{ row }">
                     <QTd auto-width @click.stop>
-                        <QBtn flat color="blue">{{ row.id }}</QBtn>
+                        <QBtn flat class="link">{{ row.id }}</QBtn>
                         <ItemDescriptorProxy :id="row.id" />
                     </QTd>
                 </template>

src/components/FilterTravelForm.vue

@@ -196,7 +196,7 @@ const selectTravel = ({ id }) => {
             >
                 <template #body-cell-id="{ row }">
                     <QTd auto-width @click.stop data-cy="travelFk-travel-form">
-                        <QBtn flat color="blue">{{ row.id }}</QBtn>
+                        <QBtn flat class="link">{{ row.id }}</QBtn>
                         <TravelDescriptorProxy :id="row.id" />
                     </QTd>
                 </template>

src/css/app.scss

@@ -15,6 +15,7 @@ body.body--light {
     --vn-empty-tag: #acacac;
     --vn-black-text-color: black;
     --vn-text-color-contrast: white;
+    --vn-link-color: #1e90ff;
 
     background-color: var(--vn-page-color);
 
@@ -38,6 +39,7 @@ body.body--dark {
     --vn-empty-tag: #2d2d2d;
     --vn-black-text-color: black;
     --vn-text-color-contrast: black;
+    --vn-link-color: #66bfff;
 
     background-color: var(--vn-page-color);
 
@@ -49,7 +51,7 @@ a {
 }
 
 .link {
-    color: $color-link;
+    color: var(--vn-link-color);
     cursor: pointer;
 
     &--white {
@@ -58,14 +60,14 @@ a {
 }
 
 .tx-color-link {
-    color: $color-link !important;
+    color: var(--vn-link-color) !important;
 }
 .tx-color-font {
-    color: $color-link !important;
+    color: var(--vn-link-color) !important;
 }
 
 .header-link {
-    color: $color-link !important;
+    color: var(--vn-link-color) !important;
     cursor: pointer;
     border-bottom: solid $primary;
     border-width: 2px;

src/css/quasar.variables.scss

@@ -24,7 +24,6 @@ $alert: $negative;
 $white: #fff;
 $dark: #3d3d3d;
 // custom
-$color-link: #66bfff;
 $color-spacer-light: #a3a3a31f;
 $color-spacer: #7979794d;
 $border-thin-light: 1px solid $color-spacer-light;

src/pages/Account/Alias/Card/AliasSummary.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -27,13 +28,10 @@ const entityId = computed(() => $props.id || route.params.id);
         <template #body="{ entity: alias }">
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <router-link
+                    <VnTitle
-                        :to="{ name: 'AliasBasicData', params: { id: entityId } }"
+                        :url="`#/account/alias/${entityId}/basic-data`"
-                        class="header header-link"
+                        :text="t('globals.summary.basicData')"
-                    >
+                    />
-                        {{ t('globals.summary.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </router-link>
                 </QCardSection>
                 <VnLv :label="t('role.id')" :value="alias.id" />
                 <VnLv :label="t('role.description')" :value="alias.description" />

src/pages/Account/Card/AccountSummary.vue

@@ -5,6 +5,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import filter from './AccountFilter.js';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const $props = defineProps({ id: { type: Number, default: 0 } });
 
@@ -26,13 +27,10 @@ const entityId = computed(() => $props.id || route.params.id);
         <template #body="{ entity }">
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <router-link
+                    <VnTitle
-                        :to="{ name: 'AccountBasicData', params: { id: entityId } }"
+                        :url="`#/account/${entityId}/basic-data`"
-                        class="header header-link"
+                        :text="$t('globals.pageTitles.basicData')"
-                    >
+                    />
-                        {{ $t('globals.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </router-link>
                 </QCardSection>
                 <VnLv :label="$t('account.card.nickname')" :value="entity.name" />
                 <VnLv :label="$t('account.card.role')" :value="entity.role?.name" />

src/pages/Account/Role/Card/RoleSummary.vue

@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -29,13 +30,10 @@ const entityId = computed(() => $props.id || route.params.id);
         <template #body="{ entity }">
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a
+                    <VnTitle
-                        class="header header-link"
+                        :url="`#/account/role/${entityId}/basic-data`"
-                        :href="`#/VnUser/${entityId}/basic-data`"
+                        :text="$t('globals.pageTitles.basicData')"
-                    >
+                    />
-                        {{ t('globals.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
                 </QCardSection>
                 <VnLv :label="t('role.id')" :value="entity.id" />
                 <VnLv :label="t('globals.name')" :value="entity.name" />

src/pages/Claim/Card/ClaimSummary.vue

@@ -271,7 +271,7 @@ function claimUrl(section) {
                 </VnLv>
                 <VnLv v-if="$route.name != 'ClaimSummary'" :label="t('claim.customer')">
                     <template #value>
-                        <span class="link cursor-pointer">
+                        <span class="link">
                             {{ claim.client?.name }}
                             <CustomerDescriptorProxy :id="claim.clientFk" />
                         </span>

src/pages/Customer/Card/CustomerFileManagement.vue

@@ -86,12 +86,12 @@ const tableColumnComponents = {
     },
     file: {
         component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
+        props: () => ({ flat: true }),
         event: ({ row }) => downloadFile(row.dmsFk),
     },
     employee: {
         component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
+        props: () => ({ flat: true }),
         event: () => {},
     },
     created: {
@@ -214,8 +214,17 @@ const toCustomerFileManagementCreate = () => {
                             v-bind="tableColumnComponents[props.col.name].props(props)"
                         >
                             <template v-if="props.col.name !== 'original'">
-                                {{ props.value }}
+                                <span
+                                    :class="{
+                                        link:
+                                            props.col.name === 'employee' ||
+                                            props.col.name === 'file',
+                                    }"
+                                >
+                                    {{ props.value }}
+                                </span>
                             </template>
+
                             <WorkerDescriptorProxy
                                 :id="props.row.dms.workerFk"
                                 v-if="props.col.name === 'employee'"

src/pages/Item/ItemType/Card/ItemTypeSummary.vue

@@ -7,6 +7,7 @@ import filter from './ItemTypeFilter.js';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnToSummary from 'src/components/ui/VnToSummary.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -62,13 +63,10 @@ async function setItemTypeData(data) {
         </template>
         <template #body>
             <QCard class="vn-one">
-                <router-link
+                <VnTitle
-                    :to="{ name: 'ItemTypeBasicData', params: { id: entityId } }"
+                    :url="`#/item/item-type/${entityId}/basic-data`"
-                    class="header header-link"
+                    :text="$t('globals.summary.basicData')"
-                >
+                />
-                    {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" />
-                </router-link>
                 <VnLv :label="t('itemType.summary.id')" :value="itemType.id" />
                 <VnLv :label="t('itemType.shared.code')" :value="itemType.code" />
                 <VnLv :label="t('itemType.shared.name')" :value="itemType.name" />

src/pages/Route/Card/RouteSummary.vue

@@ -168,7 +168,7 @@ const ticketColumns = ref([
                     <VnLv
                         :label="t('route.summary.volume')"
                         :value="`${dashIfEmpty(entity?.route?.m3)} / ${dashIfEmpty(
-                            entity?.route?.vehicle?.m3
+                            entity?.route?.vehicle?.m3,
                         )} m³`"
                     />
                     <VnLv
@@ -221,7 +221,7 @@ const ticketColumns = ref([
                         <template #body-cell-city="{ value, row }">
                             <QTd auto-width>
                                 <span
-                                    class="link cursor-pointer"
+                                    class="link"
                                     @click="openBuscaman(entity?.route?.vehicleFk, [row])"
                                 >
                                     {{ value }}
@@ -230,7 +230,7 @@ const ticketColumns = ref([
                         </template>
                         <template #body-cell-client="{ value, row }">
                             <QTd auto-width>
-                                <span class="link cursor-pointer">
+                                <span class="link">
                                     {{ value }}
                                     <CustomerDescriptorProxy :id="row?.clientFk" />
                                 </span>
@@ -238,7 +238,7 @@ const ticketColumns = ref([
                         </template>
                         <template #body-cell-ticket="{ value, row }">
                             <QTd auto-width class="text-center">
-                                <span class="link cursor-pointer">
+                                <span class="link">
                                     {{ value }}
                                     <TicketDescriptorProxy :id="row?.id" />
                                 </span>

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -6,6 +6,7 @@ import VnLv from 'components/ui/VnLv.vue';
 import VnUserLink from 'components/ui/VnUserLink.vue';
 import filter from './ShelvingFilter.js';
 import ShelvingDescriptorMenu from './ShelvingDescriptorMenu.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const $props = defineProps({
     id: {
@@ -38,13 +39,10 @@ const entityId = computed(() => $props.id || route.params.id);
             </template>
             <template #body="{ entity }">
                 <QCard class="vn-one">
-                    <RouterLink
+                    <VnTitle
-                        class="header header-link"
+                        :url="`#/shelving/${entityId}/basic-data`"
-                        :to="{ name: 'ShelvingBasicData', params: { id: entityId } }"
+                        :text="$t('globals.pageTitles.basicData')"
-                    >
+                    />
-                        {{ $t('globals.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </RouterLink>
                     <VnLv :label="$t('globals.code')" :value="entity.code" />
                     <VnLv
                         :label="$t('shelving.list.parking')"

src/pages/Shelving/Parking/Card/ParkingSummary.vue

@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const $props = defineProps({
     id: {
@@ -28,13 +29,10 @@ const filter = {
             <template #body="{ entity }">
                 <QCard class="vn-one">
                     <QCardSection class="q-pa-none">
-                        <a
+                        <VnTitle
-                            class="header header-link"
+                            :url="`#/shelving/parking/${entityId}/basic-data`"
-                            :href="`#/parking/${entityId}/basic-data`"
+                            :text="$t('globals.pageTitles.basicData')"
-                        >
+                        />
-                            {{ t('globals.pageTitles.basicData') }}
-                            <QIcon name="open_in_new" />
-                        </a>
                     </QCardSection>
                     <VnLv :label="t('globals.code')" :value="entity.code" />
                     <VnLv

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -203,7 +203,7 @@ onMounted(async () => {
             </QTr>
             <QTr v-for="(buy, index) in row.buys" :key="index">
                 <QTd no-hover>
-                    <QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
+                    <QBtn flat class="link" dense no-caps>{{ buy.itemName }}</QBtn>
                     <ItemDescriptorProxy :id="buy.itemFk" />
                 </QTd>
 

src/pages/Ticket/Negative/TicketLackTable.vue

@@ -225,7 +225,7 @@ function onBuysFetched(data) {
                     />
                 </div>
                 <div class="flex column left" style="align-items: flex-start">
-                    <QBtn flat class="link text-blue">
+                    <QBtn flat class="link">
                         {{ item?.longName ?? item.name }}
                         <ItemDescriptorProxy :id="entityId" />
                         <FetchedTags class="q-ml-md" :item="item" :columns="7" />

test/cypress/integration/shelving/parking/parkingList.spec.js

@@ -2,7 +2,7 @@
 describe('ParkingList', () => {
     const searchbar = '#searchbar input';
     const firstCard = ':nth-child(1) > .q-card > .no-margin > .q-py-none';
-    const summaryHeader = '.summaryBody .header';
+    const summaryHeader = '.header-link';
 
     beforeEach(() => {
         cy.viewport(1920, 1080);

test/cypress/integration/shelving/shelvingList.spec.js

@@ -16,8 +16,8 @@ describe('ShelvingList', () => {
     it('should redirect from preview to basic-data', () => {
         cy.typeSearchbar('{enter}');
         cy.dataCy('cardBtn').eq(0).click();
-        cy.get('.q-card > .header').click();
+        cy.get('.summaryHeader > .header > .q-icon').click();
-        cy.url().should('include', '/shelving/1/basic-data');
+        cy.url().should('include', '/shelving/1/summary');
     });
 
     it('should filter and redirect if only one result', () => {