From 44e5b136f04286a2676061ae620b83c13e96dc95 Mon Sep 17 00:00:00 2001 From: alexm Date: Sun, 23 Mar 2025 11:58:21 +0100 Subject: [PATCH 01/11] feat: refs #8534 implement navigation and state query guards for improved routing control --- src/router/__tests__/index.spec.js | 30 ++++++++++ src/router/hooks.js | 93 ++++++++++++++++++++++++++++++ src/router/index.js | 92 +++-------------------------- 3 files changed, 131 insertions(+), 84 deletions(-) create mode 100644 src/router/__tests__/index.spec.js create mode 100644 src/router/hooks.js diff --git a/src/router/__tests__/index.spec.js b/src/router/__tests__/index.spec.js new file mode 100644 index 000000000..d0a2a9b0d --- /dev/null +++ b/src/router/__tests__/index.spec.js @@ -0,0 +1,30 @@ +import { describe, it, expect, vi } from 'vitest'; +import { ref, nextTick } from 'vue'; +import { stateQueryGuard } from 'src/router/hooks'; +import { __test as testStateQuery } from 'src/stores/useStateQueryStore'; + +vi.mock('src/stores/useStateQueryStore', () => { + const isLoading = ref(true); + return { + useStateQueryStore: () => ({ + isLoading: () => isLoading, + }), + __test: { + isLoading, + }, + }; +}); + +describe('stateQueryGuard', () => { + it('espera a que isLoading sea false antes de llamar a next()', async () => { + const next = vi.fn(); + + const guardPromise = stateQueryGuard(next); + expect(next).not.toHaveBeenCalled(); + + testStateQuery.isLoading.value = false; + await nextTick(); + await guardPromise; + expect(next).toHaveBeenCalled(); + }); +}); diff --git a/src/router/hooks.js b/src/router/hooks.js new file mode 100644 index 000000000..322af2fb0 --- /dev/null +++ b/src/router/hooks.js @@ -0,0 +1,93 @@ +import { useRole } from 'src/composables/useRole'; +import { useUserConfig } from 'src/composables/useUserConfig'; +import { useTokenConfig } from 'src/composables/useTokenConfig'; +import { useAcl } from 'src/composables/useAcl'; +import { isLoggedIn } from 'src/utils/session'; +import { useSession } from 'src/composables/useSession'; +import { useStateQueryStore } from 'src/stores/useStateQueryStore'; +import { watch } from 'vue'; +import { i18n } from 'src/boot/i18n'; + +let session = null; +const { t, te } = i18n.global; + +export async function navigationGuard(to, from, next, Router, state) { + if (!session) session = useSession(); + const outLayout = Router.options.routes[0].children.map((r) => r.name); + if (!session.isLoggedIn() && !outLayout.includes(to.name)) { + return next({ name: 'Login', query: { redirect: to.fullPath } }); + } + + if (isLoggedIn()) { + const stateRoles = state.getRoles().value; + if (stateRoles.length === 0) { + await useRole().fetch(); + await useAcl().fetch(); + await useUserConfig().fetch(); + await useTokenConfig().fetch(); + } + const matches = to.matched; + const hasRequiredAcls = matches.every((route) => { + const meta = route.meta; + if (!meta?.acls) return true; + return useAcl().hasAny(meta.acls); + }); + if (!hasRequiredAcls) return next({ path: '/' }); + } + + next(); +} + +export async function stateQueryGuard(next) { + const stateQuery = useStateQueryStore(); + await waitUntilFalse(stateQuery.isLoading()); + + next(); +} + +export function setPageTitle(to) { + let title = t(`login.title`); + + const matches = to.matched; + if (matches && matches.length > 1) { + const module = matches[1]; + const moduleTitle = module.meta && module.meta.title; + if (moduleTitle) { + title = t(`globals.pageTitles.${moduleTitle}`); + } + } + + const childPage = to.meta; + const childPageTitle = childPage && childPage.title; + if (childPageTitle && matches.length > 2) { + if (title != '') title += ': '; + + const moduleLocale = `globals.pageTitles.${childPageTitle}`; + const pageTitle = te(moduleLocale) + ? t(moduleLocale) + : t(`globals.pageTitles.${childPageTitle}`); + const idParam = to.params && to.params.id; + const idPageTitle = `${idParam} - ${pageTitle}`; + const builtTitle = idParam ? idPageTitle : pageTitle; + + title += builtTitle; + } + + document.title = title; +} + +function waitUntilFalse(ref) { + return new Promise((resolve) => { + if (!ref.value) return resolve(); + const stop = watch( + ref, + (val) => { + if (!val) { + stop(); + resolve(); + } + }, + { immediate: true }, + ); + }); +} diff --git a/src/router/index.js b/src/router/index.js index 4403901cb..690bbde67 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -6,101 +6,25 @@ import { createWebHashHistory, } from 'vue-router'; import routes from './routes'; -import { i18n } from 'src/boot/i18n'; import { useState } from 'src/composables/useState'; -import { useRole } from 'src/composables/useRole'; -import { useUserConfig } from 'src/composables/useUserConfig'; -import { useTokenConfig } from 'src/composables/useTokenConfig'; -import { useAcl } from 'src/composables/useAcl'; -import { isLoggedIn } from 'src/utils/session'; -import { useSession } from 'src/composables/useSession'; +import { navigationGuard, stateQueryGuard } from './hooks'; -let session = null; -const { t, te } = i18n.global; - -const createHistory = process.env.SERVER - ? createMemoryHistory - : process.env.VUE_ROUTER_MODE === 'history' - ? createWebHistory - : createWebHashHistory; +const webHistory = + process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory; +const createHistory = process.env.SERVER ? createMemoryHistory : webHistory; const Router = createRouter({ scrollBehavior: () => ({ left: 0, top: 0 }), routes, - - // Leave this as is and make changes in quasar.conf.js instead! - // quasar.conf.js -> build -> vueRouterMode - // quasar.conf.js -> build -> publicPath history: createHistory(process.env.VUE_ROUTER_BASE), }); -/* - * If not building with SSR mode, you can - * directly export the Router instantiation; - * - * The function below can be async too; either use - * async/await or return a Promise which resolves - * with the Router instance. - */ export { Router }; -export default defineRouter(function (/* { store, ssrContext } */) { +export default defineRouter(() => { const state = useState(); - Router.beforeEach(async (to, from, next) => { - if (!session) session = useSession(); - const outLayout = Router.options.routes[0].children.map((r) => r.name); - if (!session.isLoggedIn() && !outLayout.includes(to.name)) { - return next({ name: 'Login', query: { redirect: to.fullPath } }); - } - - if (isLoggedIn()) { - const stateRoles = state.getRoles().value; - if (stateRoles.length === 0) { - await useRole().fetch(); - await useAcl().fetch(); - await useUserConfig().fetch(); - await useTokenConfig().fetch(); - } - const matches = to.matched; - const hasRequiredAcls = matches.every((route) => { - const meta = route.meta; - if (!meta?.acls) return true; - return useAcl().hasAny(meta.acls); - }); - if (!hasRequiredAcls) return next({ path: '/' }); - } - - next(); - }); - - Router.afterEach((to) => { - let title = t(`login.title`); - - const matches = to.matched; - if (matches && matches.length > 1) { - const module = matches[1]; - const moduleTitle = module.meta && module.meta.title; - if (moduleTitle) { - title = t(`globals.pageTitles.${moduleTitle}`); - } - } - - const childPage = to.meta; - const childPageTitle = childPage && childPage.title; - if (childPageTitle && matches.length > 2) { - if (title != '') title += ': '; - - const moduleLocale = `globals.pageTitles.${childPageTitle}`; - const pageTitle = te(moduleLocale) - ? t(moduleLocale) - : t(`globals.pageTitles.${childPageTitle}`); - const idParam = to.params && to.params.id; - const idPageTitle = `${idParam} - ${pageTitle}`; - const builtTitle = idParam ? idPageTitle : pageTitle; - - title += builtTitle; - } - document.title = title; - }); + Router.beforeEach((to, from, next) => navigationGuard(to, from, next, Router, state)); + Router.beforeEach((to, from, next) => stateQueryGuard(next)); + Router.afterEach((to) => setPageTitle(to)); Router.onError(({ message }) => { const errorMessages = [ From b5e9c381ad078910156e1d53a190b058bac1a64f Mon Sep 17 00:00:00 2001 From: alexm Date: Sun, 23 Mar 2025 11:59:53 +0100 Subject: [PATCH 02/11] test: refs #8534 add unit tests for stateQueryGuard to ensure proper loading behavior --- .../{index.spec.js => hooks.spec.js} | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) rename src/router/__tests__/{index.spec.js => hooks.spec.js} (50%) diff --git a/src/router/__tests__/index.spec.js b/src/router/__tests__/hooks.spec.js similarity index 50% rename from src/router/__tests__/index.spec.js rename to src/router/__tests__/hooks.spec.js index d0a2a9b0d..7fa416163 100644 --- a/src/router/__tests__/index.spec.js +++ b/src/router/__tests__/hooks.spec.js @@ -15,16 +15,18 @@ vi.mock('src/stores/useStateQueryStore', () => { }; }); -describe('stateQueryGuard', () => { - it('espera a que isLoading sea false antes de llamar a next()', async () => { - const next = vi.fn(); +describe('hooks', () => { + describe('stateQueryGuard', () => { + it('should wait until the state query is not loading and then call next()', async () => { + const next = vi.fn(); - const guardPromise = stateQueryGuard(next); - expect(next).not.toHaveBeenCalled(); + const guardPromise = stateQueryGuard(next); + expect(next).not.toHaveBeenCalled(); - testStateQuery.isLoading.value = false; - await nextTick(); - await guardPromise; - expect(next).toHaveBeenCalled(); + testStateQuery.isLoading.value = false; + await nextTick(); + await guardPromise; + expect(next).toHaveBeenCalled(); + }); }); }); From d17ff84a2964cdeef8872c3778f22ef87b5e4417 Mon Sep 17 00:00:00 2001 From: alexm Date: Sun, 23 Mar 2025 12:47:05 +0100 Subject: [PATCH 03/11] feat: refs #8534 add setPageTitle to router hooks for improved page title management --- src/router/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/router/index.js b/src/router/index.js index 690bbde67..b90f33e74 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,7 +7,7 @@ import { } from 'vue-router'; import routes from './routes'; import { useState } from 'src/composables/useState'; -import { navigationGuard, stateQueryGuard } from './hooks'; +import { navigationGuard, setPageTitle, stateQueryGuard } from './hooks'; const webHistory = process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory; From 3fd6eeda499e2f7dc20376f593b347f04dcda1a8 Mon Sep 17 00:00:00 2001 From: alexm Date: Mon, 24 Mar 2025 08:41:43 +0100 Subject: [PATCH 04/11] refactor: refs #8534 simplify title extraction logic and update Cypress command for warehouse selection --- src/router/hooks.js | 6 +++--- test/cypress/integration/entry/commands.js | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/router/hooks.js b/src/router/hooks.js index 322af2fb0..e5d5288a9 100644 --- a/src/router/hooks.js +++ b/src/router/hooks.js @@ -51,14 +51,14 @@ export function setPageTitle(to) { const matches = to.matched; if (matches && matches.length > 1) { const module = matches[1]; - const moduleTitle = module.meta && module.meta.title; + const moduleTitle = module.meta?.title; if (moduleTitle) { title = t(`globals.pageTitles.${moduleTitle}`); } } const childPage = to.meta; - const childPageTitle = childPage && childPage.title; + const childPageTitle = childPage?.title; if (childPageTitle && matches.length > 2) { if (title != '') title += ': '; @@ -66,7 +66,7 @@ export function setPageTitle(to) { const pageTitle = te(moduleLocale) ? t(moduleLocale) : t(`globals.pageTitles.${childPageTitle}`); - const idParam = to.params && to.params.id; + const idParam = to.params?.id; const idPageTitle = `${idParam} - ${pageTitle}`; const builtTitle = idParam ? idPageTitle : pageTitle; diff --git a/test/cypress/integration/entry/commands.js b/test/cypress/integration/entry/commands.js index 7c96a5440..4d4a8f980 100644 --- a/test/cypress/integration/entry/commands.js +++ b/test/cypress/integration/entry/commands.js @@ -1,6 +1,6 @@ Cypress.Commands.add('selectTravel', (warehouse = '1') => { cy.get('i[data-cy="Travel_icon"]').click(); - cy.get('input[data-cy="Warehouse Out_select"]').type(warehouse); + cy.selectOption('input[data-cy="Warehouse Out_select"]', warehouse); cy.get('div[role="listbox"] > div > div[role="option"]').eq(0).click(); cy.get('button[data-cy="save-filter-travel-form"]').click(); cy.get('tr').eq(1).click(); @@ -9,7 +9,6 @@ Cypress.Commands.add('selectTravel', (warehouse = '1') => { Cypress.Commands.add('deleteEntry', () => { cy.get('[data-cy="descriptor-more-opts"]').should('be.visible').click(); cy.waitForElement('div[data-cy="delete-entry"]').click(); - cy.url().should('include', 'list'); }); Cypress.Commands.add('createEntry', () => { From 97832a7da9cda632235cc29196af84cdd04e6bf0 Mon Sep 17 00:00:00 2001 From: benjaminedc Date: Tue, 25 Mar 2025 09:58:36 +0100 Subject: [PATCH 05/11] refactor: refs #8673 replace VnPopup with inline display of evaNotes in ExtraCommunity.vue --- src/pages/Travel/ExtraCommunity.vue | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index ac46caa44..38858aafe 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -18,7 +18,6 @@ import { usePrintService } from 'composables/usePrintService'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import axios from 'axios'; import RightMenu from 'src/components/common/RightMenu.vue'; -import VnPopup from 'src/components/common/VnPopup.vue'; const stateStore = useStateStore(); const { t } = useI18n(); @@ -637,18 +636,7 @@ watch(route, () => { - - - + {{ entry.evaNotes }} @@ -721,4 +709,12 @@ watch(route, () => { white-space: normal; width: max-content; } + +.q-td { + &:nth-child(15) { + white-space: normal; + text-align: left; + word-break: break-word; + } +} From d63c35192d621ac4f78aee80561e6ab715c539a0 Mon Sep 17 00:00:00 2001 From: alexm Date: Wed, 26 Mar 2025 15:01:23 +0100 Subject: [PATCH 06/11] fix: refs #8534 update stateQueryGuard to check route changes and improve loading state handling --- src/router/hooks.js | 9 ++++++--- src/router/index.js | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/router/hooks.js b/src/router/hooks.js index e5d5288a9..add773e7f 100644 --- a/src/router/hooks.js +++ b/src/router/hooks.js @@ -38,9 +38,11 @@ export async function navigationGuard(to, from, next, Router, state) { next(); } -export async function stateQueryGuard(next) { - const stateQuery = useStateQueryStore(); - await waitUntilFalse(stateQuery.isLoading()); +export async function stateQueryGuard(to, from, next) { + if (to.name !== from.name) { + const stateQuery = useStateQueryStore(); + await waitUntilFalse(stateQuery.isLoading()); + } next(); } @@ -82,6 +84,7 @@ function waitUntilFalse(ref) { const stop = watch( ref, (val) => { + console.log('val: ', val); if (!val) { stop(); resolve(); diff --git a/src/router/index.js b/src/router/index.js index b90f33e74..f8659308a 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -23,7 +23,7 @@ export { Router }; export default defineRouter(() => { const state = useState(); Router.beforeEach((to, from, next) => navigationGuard(to, from, next, Router, state)); - Router.beforeEach((to, from, next) => stateQueryGuard(next)); + Router.beforeEach((to, from, next) => stateQueryGuard(to, from, next)); Router.afterEach((to) => setPageTitle(to)); Router.onError(({ message }) => { From 9d53418e21178e23e011bd5bde5b5cd951f5fc00 Mon Sep 17 00:00:00 2001 From: alexm Date: Thu, 27 Mar 2025 07:53:17 +0100 Subject: [PATCH 07/11] fix: refs #8534 enhance stateQueryGuard to handle identical routes and improve test coverage --- src/router/__tests__/hooks.spec.js | 9 ++++++++- src/router/hooks.js | 1 - .../integration/entry/entryCard/entryDescriptor.spec.js | 4 ---- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/router/__tests__/hooks.spec.js b/src/router/__tests__/hooks.spec.js index 7fa416163..1bc3e2e0b 100644 --- a/src/router/__tests__/hooks.spec.js +++ b/src/router/__tests__/hooks.spec.js @@ -17,10 +17,11 @@ vi.mock('src/stores/useStateQueryStore', () => { describe('hooks', () => { describe('stateQueryGuard', () => { + const foo = { name: 'foo' }; it('should wait until the state query is not loading and then call next()', async () => { const next = vi.fn(); - const guardPromise = stateQueryGuard(next); + const guardPromise = stateQueryGuard(foo, { name: 'bar' }, next); expect(next).not.toHaveBeenCalled(); testStateQuery.isLoading.value = false; @@ -28,5 +29,11 @@ describe('hooks', () => { await guardPromise; expect(next).toHaveBeenCalled(); }); + + it('should ignore if both routes are the same', async () => { + const next = vi.fn(); + stateQueryGuard(foo, foo, next); + expect(next).toHaveBeenCalled(); + }); }); }); diff --git a/src/router/hooks.js b/src/router/hooks.js index add773e7f..bd9e5334f 100644 --- a/src/router/hooks.js +++ b/src/router/hooks.js @@ -84,7 +84,6 @@ function waitUntilFalse(ref) { const stop = watch( ref, (val) => { - console.log('val: ', val); if (!val) { stop(); resolve(); diff --git a/test/cypress/integration/entry/entryCard/entryDescriptor.spec.js b/test/cypress/integration/entry/entryCard/entryDescriptor.spec.js index 554471008..8185866db 100644 --- a/test/cypress/integration/entry/entryCard/entryDescriptor.spec.js +++ b/test/cypress/integration/entry/entryCard/entryDescriptor.spec.js @@ -28,12 +28,8 @@ describe('EntryDescriptor', () => { cy.get('.q-notification__message') .eq(2) .should('have.text', 'Entry prices recalculated'); - - cy.get('[data-cy="descriptor-more-opts"]').click(); cy.deleteEntry(); - cy.log(previousUrl); - cy.visit(previousUrl); cy.waitForElement('[data-cy="entry-buys"]'); From 0d1f2f33e0bfd9bf8d389c1e85f9df4400e6c8b5 Mon Sep 17 00:00:00 2001 From: benjaminedc Date: Thu, 27 Mar 2025 12:27:42 +0100 Subject: [PATCH 08/11] refactor: refs #8673 enhance display of evaNotes in ExtraCommunity.vue with conditional rendering --- src/pages/Travel/ExtraCommunity.vue | 33 +++++++++++++++++------------ 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index dcfbf0d43..bff2ee20b 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -612,12 +612,27 @@ watch(route, () => { {{ entry.volumeKg }} - - - - + + + {{ entry.evaNotes }} + + + + + - {{ entry.evaNotes }} + + @@ -691,12 +706,4 @@ watch(route, () => { white-space: normal; width: max-content; } - -.q-td { - &:nth-child(15) { - white-space: normal; - text-align: left; - word-break: break-word; - } -} From c1536bd76283cd878d08ed09147c250cbc891296 Mon Sep 17 00:00:00 2001 From: benjaminedc Date: Thu, 27 Mar 2025 12:54:52 +0100 Subject: [PATCH 09/11] refactor: refs #8673 simplify evaNotes display logic in ExtraCommunity.vue --- src/pages/Travel/ExtraCommunity.vue | 21 ++------------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index bff2ee20b..28ed334dc 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -612,28 +612,11 @@ watch(route, () => { {{ entry.volumeKg }} - - + + {{ entry.evaNotes }} - - - - - - - From 7648fc674363d69d73364a38d37814a9a684f1e4 Mon Sep 17 00:00:00 2001 From: alexm Date: Fri, 28 Mar 2025 08:06:51 +0100 Subject: [PATCH 10/11] refactor: refs #8534 simplify stateQueryGuard usage and improve test structure --- src/router/__tests__/hooks.spec.js | 13 +++++-------- src/router/index.js | 4 ++-- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/router/__tests__/hooks.spec.js b/src/router/__tests__/hooks.spec.js index 1bc3e2e0b..97f5eacdc 100644 --- a/src/router/__tests__/hooks.spec.js +++ b/src/router/__tests__/hooks.spec.js @@ -1,17 +1,15 @@ import { describe, it, expect, vi } from 'vitest'; import { ref, nextTick } from 'vue'; import { stateQueryGuard } from 'src/router/hooks'; -import { __test as testStateQuery } from 'src/stores/useStateQueryStore'; +import { useStateQueryStore } from 'src/stores/useStateQueryStore'; vi.mock('src/stores/useStateQueryStore', () => { const isLoading = ref(true); return { useStateQueryStore: () => ({ isLoading: () => isLoading, + setLoading: isLoading, }), - __test: { - isLoading, - }, }; }); @@ -21,16 +19,15 @@ describe('hooks', () => { it('should wait until the state query is not loading and then call next()', async () => { const next = vi.fn(); - const guardPromise = stateQueryGuard(foo, { name: 'bar' }, next); + stateQueryGuard(foo, { name: 'bar' }, next); expect(next).not.toHaveBeenCalled(); - testStateQuery.isLoading.value = false; + useStateQueryStore().setLoading.value = false; await nextTick(); - await guardPromise; expect(next).toHaveBeenCalled(); }); - it('should ignore if both routes are the same', async () => { + it('should ignore if both routes are the same', () => { const next = vi.fn(); stateQueryGuard(foo, foo, next); expect(next).toHaveBeenCalled(); diff --git a/src/router/index.js b/src/router/index.js index f8659308a..628a53c8e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -23,8 +23,8 @@ export { Router }; export default defineRouter(() => { const state = useState(); Router.beforeEach((to, from, next) => navigationGuard(to, from, next, Router, state)); - Router.beforeEach((to, from, next) => stateQueryGuard(to, from, next)); - Router.afterEach((to) => setPageTitle(to)); + Router.beforeEach(stateQueryGuard); + Router.afterEach(setPageTitle); Router.onError(({ message }) => { const errorMessages = [ From ec723a884b3ae8f1883eaf84056e0c86f9ebf1cd Mon Sep 17 00:00:00 2001 From: Javier Segarra Date: Fri, 28 Mar 2025 09:52:23 +0100 Subject: [PATCH 11/11] fix: vnMoreOptions label --- src/components/ui/VnMoreOptions.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/VnMoreOptions.vue b/src/components/ui/VnMoreOptions.vue index 984e2b64f..bc81233d5 100644 --- a/src/components/ui/VnMoreOptions.vue +++ b/src/components/ui/VnMoreOptions.vue @@ -9,7 +9,7 @@ data-cy="descriptor-more-opts" > - {{ $t('components.cardDescriptor.moreOptions') }} + {{ $t('components.vnDescriptor.moreOptions') }}