Skip to content

Commit

Permalink
feat(fw): vue3 upgrade (V4-1249)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukashroch
lukashroch committed Oct 11, 2024
1 parent bba98c5 commit 1ad00ce
Show file tree
Hide file tree
Showing 585 changed files with 14,002 additions and 14,570 deletions.
13 changes: 1 addition & 12 deletions .github/renovate.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,7 @@
"formdata-node", // ESM-only since 5.x.x
"nanoid", // ESM-only since 4.x.x
"p-limit", // ESM-only since 4.x.x
"p-queue", // ESM-only since 7.x.x

// Bump after Vue.js v3 upgrade
"@tinymce/tinymce-vue",
"@vue/compiler-sfc",
"vue",
"vue-dompurify-html",
"vue-gtag",
"vue-i18n",
"vue-router",
"vue-recaptcha",
"vuetify"
"p-queue" // ESM-only since 7.x.x
],
"matchUpdateTypes": ["major"],
"enabled": false
Expand Down
6 changes: 3 additions & 3 deletions .github/workflows/ci.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,9 +366,9 @@ jobs:
- name: Install dependencies
run: pnpm install

- name: Survey client - type check
working-directory: apps/survey
run: pnpm type-check
# - name: Survey client - type check
# working-directory: apps/survey
# run: pnpm type-check

- name: Survey client - build
working-directory: apps/survey
Expand Down
1 change: 1 addition & 0 deletions apps/admin/.env-template
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ DISABLE_PWA=false

# Vue.js dev server vars
DEV_HTTPS=false
VUE_DEV_TOOLS=false

# Vite public vars
VITE_APP_NAME=Intake24 Admin
Expand Down
4 changes: 4 additions & 0 deletions apps/admin/env.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/// <reference types="@simplewebauthn/types" />
/// <reference types="vite/client" />
/// <reference types="vite-plugin-pwa/client" />
/// <reference types="vuetify" />
36 changes: 21 additions & 15 deletions apps/admin/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
"build-only": "vite build",
"generate-pwa-assets": "pwa-assets-generator",
"start": "node server/index.js",
"type-check": "vue-tsc --noEmit"
"type-check": "vue-tsc --noEmit -p tsconfig.tc.json"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.6.0",
"@simplewebauthn/browser": "^10.0.0",
"@tinymce/tinymce-vue": "^3.2.8",
"@tinymce/tinymce-vue": "^6.0.1",
"@vueuse/core": "^11.1.0",
"axios": "^1.7.7",
"axios-retry": "^4.5.0",
Expand All @@ -38,35 +38,41 @@
"lodash": "^4.17.21",
"nanoid": "^3.3.7",
"pinia": "^2.2.4",
"pinia-plugin-persistedstate": "^4.0.2",
"pinia-plugin-persistedstate": "^4.1.1",
"pluralize": "^8.0.0",
"tinymce": "^7.3.0",
"vue": "^2.7.16",
"vue-dompurify-html": "^4.1.4",
"vue-gtag": "^1.16.1",
"vue-i18n": "^8.28.2",
"vue-router": "^3.6.5",
"vuedraggable": "^2.24.3",
"vuetify": "^2.7.2"
"tinymce": "^7.4.1",
"vue": "^3.5.12",
"vue-dompurify-html": "^5.1.0",
"vue-draggable-plus": "^0.5.3",
"vue-gtag": "^2.0.1",
"vue-i18n": "^10.0.4",
"vue-router": "^4.4.5",
"vuetify": "^3.7.2"
},
"devDependencies": {
"@intlify/unplugin-vue-i18n": "^5.2.0",
"@simplewebauthn/types": "^10.0.0",
"@tsconfig/node20": "^20.1.4",
"@types/jsdom": "^21.1.7",
"@types/lodash": "^4.17.9",
"@types/lodash": "^4.17.10",
"@types/node": "^22.7.4",
"@types/pluralize": "^0.0.33",
"@vite-pwa/assets-generator": "^0.2.6",
"@vitejs/plugin-vue2": "^2.3.1",
"@vitejs/plugin-vue": "^5.1.4",
"@vue/tsconfig": "^0.5.1",
"cross-env": "^7.0.3",
"jsdom": "^25.0.1",
"sass": "~1.32.13",
"sass": "^1.79.4",
"typescript": "^5.6.2",
"unplugin-vue-components": "^0.27.4",
"vite": "^5.4.8",
"vite-plugin-html": "^3.2.2",
"vite-plugin-mkcert": "^1.17.6",
"vite-plugin-pwa": "^0.20.5",
"vite-plugin-vue-devtools": "^7.4.6",
"vite-plugin-vuetify": "^2.0.4",
"vite-plugin-webfont-dl": "^3.9.5",
"vitest": "^2.1.1",
"vitest": "^2.1.2",
"vue-tsc": "^2.1.6",
"workbox-window": "^7.1.0",
"zod": "^3.23.8"
Expand Down
130 changes: 58 additions & 72 deletions apps/admin/src/app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,37 @@
<template>
<v-app>
<loader :show="isAppLoading" />
<v-navigation-drawer v-if="loggedIn && isVerified" v-model="sidebar" app color="secondary" dark>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="my-1">
{{ $t('common._') }}
<v-navigation-drawer v-if="loggedIn && isVerified" v-model="sidebar" color="secondary">
<v-list>
<v-list-item link to="/">
<template #prepend>
<v-avatar :image="logo" rounded="0" />
</template>
<v-list-item-title class="my-1 text-h6">
{{ app.name }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item>
</v-list>
<v-divider />
<v-list dense nav>
<v-list-group color="grey lighten-1" prepend-icon="fas fa-fw fa-user" value="true">
<template #activator>
<v-list-item-title>{{ $t('user._') }}</v-list-item-title>
</template>
<v-list-item-group>
<v-list-item link :to="{ name: 'dashboard' }">
<v-list-item-action>
<v-icon>fas fa-fw fa-tachometer-alt</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t('dashboard._') }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link :to="{ name: 'user' }">
<v-list-item-action>
<v-icon>fas fa-circle-user</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t('user.profile') }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link :to="{ name: 'user.personal-access-tokens' }">
<v-list-item-action>
<v-icon>fas fa-key</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t('user.personalAccessTokens.title') }}</v-list-item-title>
</v-list-item-content>
<v-list density="compact" nav>
<v-list-group color="grey-lighten-1" prepend-icon="fas fa-fw fa-user" :value="true">
<template #activator="{ props }">
<v-list-item v-bind="props">
<v-list-item-title>{{ $t('user._') }}</v-list-item-title>
</v-list-item>
<v-list-item link :to="{ name: 'user.jobs' }">
<v-list-item-action>
<v-icon>$jobs</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t('user.jobs.title') }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</template>
<v-list-item link prepend-icon="fas fa-fw fa-tachometer-alt" :to="{ name: 'dashboard' }">
<v-list-item-title>{{ $t('dashboard._') }}</v-list-item-title>
</v-list-item>
<v-list-item link prepend-icon="fas fa-circle-user" :to="{ name: 'user' }">
<v-list-item-title>{{ $t('user.profile') }}</v-list-item-title>
</v-list-item>
<v-list-item link prepend-icon="fas fa-key" :to="{ name: 'user.personal-access-tokens' }">
<v-list-item-title>{{ $t('user.personalAccessTokens.title') }}</v-list-item-title>
</v-list-item>
<v-list-item link prepend-icon="$jobs" :to="{ name: 'user.jobs' }">
<v-list-item-title>{{ $t('user.jobs.title') }}</v-list-item-title>
</v-list-item>
</v-list-group>
</v-list>
<menu-tree
Expand Down Expand Up @@ -99,27 +82,27 @@
/>
</v-navigation-drawer>

<v-app-bar v-if="loggedIn" app color="primary" dark fixed>
<v-app-bar v-if="loggedIn" color="primary">
<v-app-bar-nav-icon :disabled="!isVerified" @click.stop="toggleSidebar" />
<v-spacer />
<v-btn :href="app.docs" target="_blank" text :title="$t('common.docs')">
<v-icon :left="!isMobile">
<v-btn :href="app.docs" target="_blank" :title="$t('common.docs')" variant="text">
<v-icon :start="!$vuetify.display.mobile">
$docs
</v-icon>
<span class="d-none d-sm-block">{{ $t('common.docs') }}</span>
</v-btn>
<v-btn v-if="isVerified" text :to="{ name: 'user' }">
<v-icon :left="!isMobile">
<v-btn v-if="isVerified" :to="{ name: 'user' }" variant="text">
<v-icon :start="!$vuetify.display.mobile">
$user
</v-icon>
<span class="d-none d-sm-block">{{ $t('user.profile') }}</span>
</v-btn>
<v-divider class="mx-2" vertical />
<confirm-dialog :label="$t('common.logout._').toString()" @confirm="logout">
<template #activator="{ attrs, on }">
<v-btn text v-bind="attrs" v-on="on">
<confirm-dialog :label="$t('common.logout._')" @confirm="logout">
<template #activator="{ props }">
<v-btn variant="text" v-bind="props">
<span class="d-none d-sm-block">{{ $t('common.logout._') }}</span>
<v-icon :right="!isMobile">
<v-icon :end="!$vuetify.display.mobile">
$logout
</v-icon>
</v-btn>
Expand All @@ -129,8 +112,8 @@
</v-app-bar>

<v-main>
<v-container :class="{ 'pa-0': isMobile }" fluid>
<v-breadcrumbs v-if="breadcrumbs.length" class="px-1 py-2" :items="breadcrumbs" large>
<v-container :class="{ 'pa-0': $vuetify.display.mobile }" fluid>
<v-breadcrumbs v-if="breadcrumbs.length" class="px-1 py-2" :items="breadcrumbs">
<template #divider>
<v-icon>fas fa-caret-right</v-icon>
</template>
Expand All @@ -145,29 +128,30 @@
</template>

<script lang="ts">
import type { Location } from 'vue-router';
import type { RouteLocationRaw } from 'vue-router';
import groupBy from 'lodash/groupBy';
import { mapState } from 'pinia';
import pluralize from 'pluralize';
import { defineComponent } from 'vue';
import { useDisplay, useLocale } from 'vuetify';
import type { Dictionary } from '@intake24/common/types';
import type { Dictionary } from '@intake24/common';
import MenuTree from '@intake24/admin/components/sidebar/menu-tree.vue';
import webPush from '@intake24/admin/components/web-push/web-push';
import resources from '@intake24/admin/router/resources';
import { useApp, useAuth, useEntry, useUser } from '@intake24/admin/stores';
import { iconWhite } from '@intake24/common/theme/assets';
import { ConfirmDialog, Loader, MessageBox, ServiceWorker, useLanguage } from '@intake24/ui';
import { vuetify } from './plugins';
import { useHttp } from './services';
type Breadcrumbs = {
disabled?: boolean;
exact?: boolean;
href?: string;
link?: boolean;
text: string | number;
to?: string | Location;
title: string;
to?: string | RouteLocationRaw;
};
export default defineComponent({
Expand All @@ -179,13 +163,15 @@ export default defineComponent({
setup() {
const http = useHttp();
useLanguage('admin', http, vuetify.framework);
},
const vI18n = useLocale();
const display = useDisplay();
useLanguage('admin', http, vI18n);
data() {
return {
resources: groupBy(resources, 'group'),
sidebar: this.$vuetify.breakpoint.lgAndUp,
sidebar: display.lgAndUp,
logo: iconWhite,
};
},
Expand All @@ -207,16 +193,16 @@ export default defineComponent({
title(): string {
const { meta: { title } = {} } = this.$route;
if (title)
return this.$t(title).toString();
return this.$t(title);
const { module } = this;
if (!module)
return this.$t('common._').toString();
return this.$t('common._');
const { id, name, englishName, description } = this.entry;
// TODO: we should resole breadcrumb name in better way based on entry field
return name ?? englishName ?? description ?? id ?? this.$t(`${module}.title`).toString();
return name ?? englishName ?? description ?? id ?? this.$t(`${module}.title`);
},
},
Expand Down Expand Up @@ -284,15 +270,15 @@ export default defineComponent({
if (parent)
params.id = id;
items.push({ ...defaults, text: this.$t(`${title}.title`).toString(), to: { name } });
items.push({ ...defaults, title: this.$t(`${title}.title`), to: { name } });
if (!currentId)
return items;
if (currentId === 'create') {
items.push({
...defaults,
text: this.$t(`${title}.${action}`).toString(),
title: this.$t(`${title}.${action}`),
to: { name: `${name}-${action}`, params },
});
return items;
Expand All @@ -304,14 +290,14 @@ export default defineComponent({
items.push({
...defaults,
text: parent ? this.$t(`${title}.${action}`) : text,
title: parent ? this.$t(`${title}.${action}`) : text,
to: { name: `${name}-${action === 'edit' ? 'read' : action}`, params },
});
if (['edit'].includes(action)) {
items.push({
...defaults,
text: this.$t(`${title}.${action}`).toString(),
title: this.$t(`${title}.${action}`),
to: { name: `${name}-${action}`, params },
});
}
Expand Down
17 changes: 0 additions & 17 deletions apps/admin/src/bootstrap.ts
View file

This file was deleted.

Loading

0 comments on commit 1ad00ce

Please sign in to comment.