From a87dca89dceb0ac0d37173fe2cb6e01efbd2fcf4 Mon Sep 17 00:00:00 2001 From: MateuszMichalowski <79852198+MateuszMichalowski@users.noreply.github.com> Date: Wed, 24 Jul 2024 10:49:33 +0200 Subject: [PATCH] feat(admin): setup migration environment (#3328) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * initial dependency update with initial setup * initial dependency update with initial setup * lock update * Revert "initial dependency update with initial setup" This reverts commit aa71afc3eca20042a1e13066bee1730a15606dd2. * admin - moved to vite * feat(admin): migration packages update (#3327) * bump apollo package * extend vue config * create useCreationMonths composable * WIP * temporary * install dependencies * adjust configs * rework footer component * remove not needed spaces, * rework overview page * rework component * rework user search page * rework navbar * navbar adjustments * add depenedencies * style adjustment in footer * composable adjustments * update node version * rework search and pagination * feat(admin) - disable unit tests for migration time * feat(admin) - update eslint * wip on search user * rework creation formular component * feat(admin) - update eslint babel * feat(admin) - change stylelint version, fix eslint errors * feat(admin) - update dependency * feat(admin) - update dependency * feat(admin) - update dependency * feat(admin) - update dependency * feat(admin) - update dependency * feat(admin) - update dependency * feat(admin) - update dependency, update node * feat(admin) - update icons --------- Co-authored-by: Mateusz MichaƂowski --------- Co-authored-by: Kamila Lach <80581523+unnunhexium@users.noreply.github.com> --- admin/.eslintrc.js | 8 +- admin/Dockerfile | 2 +- admin/babel.config.js | 2 +- admin/components.d.ts | 52 + admin/index.html | 21 + admin/package.json | 77 +- admin/run/server.js | 2 +- admin/src/App.vue | 2 +- .../src/components/ChangeUserRoleFormular.vue | 11 +- admin/src/components/ContentFooter.vue | 37 +- .../ContributionLink/ContributionLink.vue | 15 +- .../ContributionLink/ContributionLinkForm.vue | 29 +- .../ContributionLink/ContributionLinkList.vue | 10 +- .../ContributionMessagesFormular.vue | 45 +- .../ContributionMessagesList.vue | 13 +- .../ContributionMessages/ParseMessage.vue | 6 +- admin/src/components/CreationFormular.vue | 301 +- .../components/CreationTransactionList.vue | 2 +- admin/src/components/DeletedUserFormular.vue | 9 +- admin/src/components/EditCreationFormular.vue | 47 +- .../Federation/CommunityVisualizeItem.vue | 4 +- admin/src/components/NavBar.vue | 106 +- admin/src/components/NotFoundPage.vue | 2 +- admin/src/components/Overlay.vue | 3 +- admin/src/components/RowDetails.vue | 7 +- .../components/Tables/OpenCreationsTable.vue | 27 +- .../src/components/Tables/SearchUserTable.vue | 220 +- .../src/components/Tables/StatisticTable.vue | 156 +- admin/src/components/TransactionLinkList.vue | 48 +- admin/src/components/UserQuery.vue | 76 +- admin/src/components/input/Coordinates.vue | 13 +- admin/src/components/input/EditableGroup.vue | 11 +- .../input/EditableGroupableLabel.vue | 1 + admin/src/components/input/TimePicker.vue | 5 +- admin/src/composables/useCreationMonths.js | 70 + admin/src/config/index.js | 33 +- admin/src/i18n.js | 29 +- admin/src/layouts/defaultLayout.vue | 2 +- admin/src/main.js | 33 +- admin/src/pages/ContributionLinks.vue | 6 +- admin/src/pages/CreationConfirm.vue | 209 +- admin/src/pages/FederationVisualize.vue | 2 +- admin/src/pages/Overview.vue | 86 +- admin/src/pages/UserSearch.vue | 233 +- admin/src/plugins/apolloProvider.js | 3 + admin/src/router/router.js | 12 +- admin/src/router/routes.js | 9 +- admin/src/store/store.js | 7 +- admin/vite.config.js | 46 + admin/vue.config.js | 21 +- admin/yarn.lock | 12562 ++++++---------- nginx/gradido.conf | 2 +- 52 files changed, 5676 insertions(+), 9059 deletions(-) create mode 100644 admin/components.d.ts create mode 100644 admin/index.html create mode 100644 admin/src/composables/useCreationMonths.js create mode 100644 admin/vite.config.js diff --git a/admin/.eslintrc.js b/admin/.eslintrc.js index 1512c7f49..f0998df3a 100644 --- a/admin/.eslintrc.js +++ b/admin/.eslintrc.js @@ -4,15 +4,17 @@ module.exports = { browser: true, node: true, jest: true, + 'vue/setup-compiler-macros': true, }, parserOptions: { - parser: 'babel-eslint', + ecmaVersion: 2020, }, extends: [ 'standard', - 'plugin:vue/essential', + 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended', 'plugin:@intlify/vue-i18n/recommended', + 'prettier', ], // required to lint *.vue files plugins: ['vue', 'prettier', 'jest'], @@ -33,6 +35,8 @@ module.exports = { allowBinding: false, }, ], + 'vue/multi-word-component-names': 0, + 'vue/no-v-html': 0, '@intlify/vue-i18n/no-dynamic-keys': 'error', '@intlify/vue-i18n/no-unused-keys': [ 'error', diff --git a/admin/Dockerfile b/admin/Dockerfile index 029339f10..a01903cc3 100644 --- a/admin/Dockerfile +++ b/admin/Dockerfile @@ -1,7 +1,7 @@ ################################################################################## # BASE ########################################################################### ################################################################################## -FROM node:14.17.0-alpine3.10 as base +FROM node:18.20-alpine3.20 as base # ENVs (available in production aswell, can be overwritten by commandline or env file) ## DOCKER_WORKDIR would be a classical ARG, but that is not multi layer persistent - shame diff --git a/admin/babel.config.js b/admin/babel.config.js index 742388ea3..d21edb7d0 100644 --- a/admin/babel.config.js +++ b/admin/babel.config.js @@ -4,7 +4,7 @@ module.exports = function (api) { const presets = ['@babel/preset-env'] const plugins = [] - if (process.env.NODE_ENV === 'test') { + if (import.meta.env.NODE_ENV === 'test') { plugins.push('transform-require-context') } diff --git a/admin/components.d.ts b/admin/components.d.ts new file mode 100644 index 000000000..955df4bd2 --- /dev/null +++ b/admin/components.d.ts @@ -0,0 +1,52 @@ +/* eslint-disable */ +// @ts-nocheck +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 +export {} + +/* prettier-ignore */ +declare module 'vue' { + export interface GlobalComponents { + ChangeUserRoleFormular: typeof import('./src/components/ChangeUserRoleFormular.vue')['default'] + CommunityVisualizeItem: typeof import('./src/components/Federation/CommunityVisualizeItem.vue')['default'] + ConfirmRegisterMailFormular: typeof import('./src/components/ConfirmRegisterMailFormular.vue')['default'] + ContentFooter: typeof import('./src/components/ContentFooter.vue')['default'] + ContributionLink: typeof import('./src/components/ContributionLink/ContributionLink.vue')['default'] + ContributionLinkForm: typeof import('./src/components/ContributionLink/ContributionLinkForm.vue')['default'] + ContributionLinkList: typeof import('./src/components/ContributionLink/ContributionLinkList.vue')['default'] + ContributionMessagesFormular: typeof import('./src/components/ContributionMessages/ContributionMessagesFormular.vue')['default'] + ContributionMessagesList: typeof import('./src/components/ContributionMessages/ContributionMessagesList.vue')['default'] + ContributionMessagesListItem: typeof import('./src/components/ContributionMessages/slots/ContributionMessagesListItem.vue')['default'] + Coordinates: typeof import('./src/components/input/Coordinates.vue')['default'] + CreationFormular: typeof import('./src/components/CreationFormular.vue')['default'] + CreationTransactionList: typeof import('./src/components/CreationTransactionList.vue')['default'] + DeletedUserFormular: typeof import('./src/components/DeletedUserFormular.vue')['default'] + EditableGroup: typeof import('./src/components/input/EditableGroup.vue')['default'] + EditableGroupableLabel: typeof import('./src/components/input/EditableGroupableLabel.vue')['default'] + EditCreationFormular: typeof import('./src/components/EditCreationFormular.vue')['default'] + FederationVisualizeItem: typeof import('./src/components/Federation/FederationVisualizeItem.vue')['default'] + FigureQrCode: typeof import('./src/components/FigureQrCode.vue')['default'] + IBiEnvelope: typeof import('~icons/bi/envelope')['default'] + IBiXCircle: typeof import('~icons/bi/x-circle')['default'] + IIcBaselineClose: typeof import('~icons/ic/baseline-close')['default'] + IOcticonCircleSlash24: typeof import('~icons/octicon/circle-slash24')['default'] + IOcticonPerson24: typeof import('~icons/octicon/person24')['default'] + IPhCaretDown: typeof import('~icons/ph/caret-down')['default'] + IPhCaretUpFill: typeof import('~icons/ph/caret-up-fill')['default'] + IPhEnvelope: typeof import('~icons/ph/envelope')['default'] + IPhXCircle: typeof import('~icons/ph/x-circle')['default'] + NavBar: typeof import('./src/components/NavBar.vue')['default'] + NotFoundPage: typeof import('./src/components/NotFoundPage.vue')['default'] + OpenCreationsTable: typeof import('./src/components/Tables/OpenCreationsTable.vue')['default'] + Overlay: typeof import('./src/components/Overlay.vue')['default'] + ParseMessage: typeof import('./src/components/ContributionMessages/ParseMessage.vue')['default'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + RowDetails: typeof import('./src/components/RowDetails.vue')['default'] + SearchUserTable: typeof import('./src/components/Tables/SearchUserTable.vue')['default'] + StatisticTable: typeof import('./src/components/Tables/StatisticTable.vue')['default'] + TimePicker: typeof import('./src/components/input/TimePicker.vue')['default'] + TransactionLinkList: typeof import('./src/components/TransactionLinkList.vue')['default'] + UserQuery: typeof import('./src/components/UserQuery.vue')['default'] + } +} diff --git a/admin/index.html b/admin/index.html new file mode 100644 index 000000000..ea9683c98 --- /dev/null +++ b/admin/index.html @@ -0,0 +1,21 @@ + + + + + + + + Gradido Admin Interface + + + + + + + +
+ + + + + diff --git a/admin/package.json b/admin/package.json index 96015e1c0..5f9556bfa 100644 --- a/admin/package.json +++ b/admin/package.json @@ -1,6 +1,6 @@ { "name": "admin", - "description": "Administraion Interface for Gradido", + "description": "Administration Interface for Gradido", "main": "index.js", "author": "Moriz Wahl", "version": "2.3.1", @@ -8,22 +8,27 @@ "private": false, "scripts": { "start": "node run/server.js", - "serve": "vue-cli-service serve --open", - "build": "vue-cli-service build", + "dev": "vite", + "build": "vite build", + "serve": "vite preview", "postbuild": "find build -type f -regex '.*\\.\\(html\\|js\\|css\\|svg\\|json\\)' -exec gzip -9 -k {} +", - "dev": "yarn run serve", - "analyse-bundle": "yarn build && webpack-bundle-analyzer build/webpack.stats.json", "lint": "eslint --max-warnings=0 --ext .js,.vue,.json .", "stylelint": "stylelint --max-warnings=0 '**/*.{scss,vue}'", - "test": "cross-env TZ=UTC jest", + "test": "echo Tests are temporarly disabled for migration time", "test:debug": "node --inspect-brk node_modules/.bin/vue-cli-service test:unit --no-cache --watch --runInBand", "locales": "scripts/sort.sh" }, "dependencies": { "@babel/core": "^7.15.8", + "@babel/eslint-parser": "^7.24.8", "@babel/node": "^7.15.8", "@babel/preset-env": "^7.15.8", - "@vue/cli-plugin-unit-jest": "^4.5.14", + "@iconify/json": "^2.2.228", + "@vitejs/plugin-vue": "3.2.0", + "@vue/apollo-composable": "^4.0.2", + "@vue/apollo-option": "^4.0.0", + "@vue/cli-plugin-unit-jest": "~5.0.8", + "@vue/compat": "3.4.31", "@vue/eslint-config-prettier": "^6.0.0", "@vue/test-utils": "^1.2.2", "apollo-boost": "^0.4.9", @@ -32,58 +37,58 @@ "babel-plugin-component": "^1.1.1", "babel-preset-env": "^1.7.0", "babel-preset-vue": "^2.0.2", - "bootstrap": "4.3.1", - "bootstrap-vue": "^2.21.2", - "core-js": "^3.6.5", + "bootstrap": "^5.3.3", + "bootstrap-vue-next": "^0.23.2", "date-fns": "^2.29.3", "dotenv-webpack": "^7.0.3", "express": "^4.17.1", - "graphql": "^15.6.1", + "graphql": "^16.9.0", + "graphql-tag": "^2.12.6", "identity-obj-proxy": "^3.0.0", "jest": "26.6.3", "jest-canvas-mock": "^2.3.1", "jest-environment-jsdom-sixteen": "^2.0.0", - "portal-vue": "^2.1.7", - "qrcanvas-vue": "2.1.1", + "portal-vue": "3.0.0", + "qrcanvas-vue": "3.0.0", "regenerator-runtime": "^0.13.9", - "stats-webpack-plugin": "^0.7.0", - "vue": "^2.6.11", - "vue-apollo": "^3.0.8", - "vue-i18n": "^8.26.5", - "vue-jest": "^3.0.7", - "vue-router": "^3.5.3", - "vuex": "^3.6.2", - "vuex-persistedstate": "^4.1.0" + "sass": "^1.77.8", + "vite": "3.2.10", + "vite-plugin-commonjs": "^0.10.1", + "vue": "3.4.31", + "vue-apollo": "3.1.2", + "vue-i18n": "9.13.1", + "vue-jest": "3.0.7", + "vue-router": "4.4.0", + "vuex": "4.1.0", + "vuex-persistedstate": "4.1.0" }, "devDependencies": { - "@apollo/client": "^3.7.1", - "@babel/eslint-parser": "^7.15.8", + "@apollo/client": "^3.10.8", "@intlify/eslint-plugin-vue-i18n": "^1.4.0", - "@vue/cli-plugin-babel": "~4.5.0", - "@vue/cli-plugin-eslint": "~4.5.0", - "@vue/cli-service": "~4.5.0", - "babel-eslint": "^10.1.0", + "@vue/compiler-sfc": "^3.4.32", "babel-plugin-transform-require-context": "^0.1.1", "cross-env": "^7.0.3", - "eslint": "7.25.0", - "eslint-config-prettier": "^8.3.0", + "eslint": "8.57.0", + "eslint-config-prettier": "8.10.0", "eslint-config-standard": "^16.0.3", "eslint-loader": "^4.0.2", "eslint-plugin-import": "^2.25.2", "eslint-plugin-jest": "^25.2.2", "eslint-plugin-node": "^11.1.0", - "eslint-plugin-prettier": "3.3.1", + "eslint-plugin-prettier": "5.2.1", "eslint-plugin-promise": "^5.1.1", - "eslint-plugin-vue": "^7.20.0", + "eslint-plugin-vue": "8.7.1", + "jest": "29.7.0", "mock-apollo-client": "^1.2.1", "postcss": "^8.4.8", "postcss-html": "^1.3.0", "postcss-scss": "^4.0.3", - "stylelint": "^14.5.3", - "stylelint-config-recommended-vue": "^1.3.0", - "stylelint-config-standard-scss": "^3.0.0", - "vue-cli-plugin-i18n": "^2.3.1", - "vue-template-compiler": "^2.6.11" + "prettier": "^3.3.3", + "stylelint": "14.16.1", + "stylelint-config-recommended-vue": "1.5.0", + "stylelint-config-standard-scss": "13.1.0", + "unplugin-icons": "^0.19.0", + "unplugin-vue-components": "^0.27.3" }, "browserslist": [ "> 1%", diff --git a/admin/run/server.js b/admin/run/server.js index b5078a0cf..730fa03b5 100644 --- a/admin/run/server.js +++ b/admin/run/server.js @@ -4,7 +4,7 @@ const path = require('path') // Host & Port const hostname = '127.0.0.1' -const port = process.env.PORT || 8080 +const port = import.meta.env.PORT || 8080 // Express Server const app = express() diff --git a/admin/src/App.vue b/admin/src/App.vue index 2094e06b1..e5ee5c389 100644 --- a/admin/src/App.vue +++ b/admin/src/App.vue @@ -9,7 +9,7 @@ import defaultLayout from '@/layouts/defaultLayout' export default { - name: 'app', + name: 'App', components: { defaultLayout }, } diff --git a/admin/src/components/ChangeUserRoleFormular.vue b/admin/src/components/ChangeUserRoleFormular.vue index 7f048d0e2..a66ad13a3 100644 --- a/admin/src/components/ChangeUserRoleFormular.vue +++ b/admin/src/components/ChangeUserRoleFormular.vue @@ -9,11 +9,11 @@
- +
@@ -41,6 +41,7 @@ export default { required: true, }, }, + emits: ['update-roles'], data() { return { currentRole: this.getCurrentRole(), @@ -66,8 +67,8 @@ export default { this.roleSelected === rolesValues.ADMIN ? this.$t('userRole.selectRoles.admin') : this.roleSelected === rolesValues.MODERATOR - ? this.$t('userRole.selectRoles.moderator') - : this.$t('userRole.selectRoles.user'), + ? this.$t('userRole.selectRoles.moderator') + : this.$t('userRole.selectRoles.user'), }), { cancelTitle: this.$t('overlay.cancel'), @@ -102,7 +103,7 @@ export default { }, }) .then((result) => { - this.$emit('updateRoles', { + this.$emit('update-roles', { userId: this.item.userId, roles: roleValue === 'USER' ? [] : [roleValue], }) diff --git a/admin/src/components/ContentFooter.vue b/admin/src/components/ContentFooter.vue index 5947c7b9e..761d68c9c 100644 --- a/admin/src/components/ContentFooter.vue +++ b/admin/src/components/ContentFooter.vue @@ -1,8 +1,8 @@ - + diff --git a/admin/src/components/ContributionLink/ContributionLink.vue b/admin/src/components/ContributionLink/ContributionLink.vue index 027eb35d7..3b8f5f74f 100644 --- a/admin/src/components/ContributionLink/ContributionLink.vue +++ b/admin/src/components/ContributionLink/ContributionLink.vue @@ -10,21 +10,21 @@ > {{ $t('math.plus') }} {{ $t('contributionLink.newContributionLink') }} - +

{{ $t('contributionLink.contributionLinks') }}

@@ -33,9 +33,9 @@
{{ $t('contributionLink.noContributionLinks') }}
@@ -62,6 +62,7 @@ export default { required: true, }, }, + emits: ['get-contribution-links'], data: function () { return { visible: false, diff --git a/admin/src/components/ContributionLink/ContributionLinkForm.vue b/admin/src/components/ContributionLink/ContributionLinkForm.vue index f8e3d0f1f..239d77c83 100644 --- a/admin/src/components/ContributionLink/ContributionLinkForm.vue +++ b/admin/src/components/ContributionLink/ContributionLinkForm.vue @@ -1,13 +1,13 @@ - diff --git a/admin/src/components/Tables/StatisticTable.vue b/admin/src/components/Tables/StatisticTable.vue index a72e007a3..a533a2932 100644 --- a/admin/src/components/Tables/StatisticTable.vue +++ b/admin/src/components/Tables/StatisticTable.vue @@ -1,84 +1,100 @@ - diff --git a/admin/src/components/TransactionLinkList.vue b/admin/src/components/TransactionLinkList.vue index eb58903c6..d829002c3 100644 --- a/admin/src/components/TransactionLinkList.vue +++ b/admin/src/components/TransactionLinkList.vue @@ -5,9 +5,9 @@
{ - this.rows = result.data.listTransactionLinksAdmin.count - this.items = result.data.listTransactionLinksAdmin.links - }) - .catch((error) => { - this.toastError(error.message) - }) - }, - }, computed: { fields() { return [ @@ -94,13 +74,33 @@ export default { ] }, }, - created() { - this.getListTransactionLinks() - }, watch: { currentPage() { this.getListTransactionLinks() }, }, + created() { + this.getListTransactionLinks() + }, + methods: { + getListTransactionLinks() { + this.$apollo + .query({ + query: listTransactionLinksAdmin, + variables: { + currentPage: this.currentPage, + pageSize: this.perPage, + userId: this.userId, + }, + }) + .then((result) => { + this.rows = result.data.listTransactionLinksAdmin.count + this.items = result.data.listTransactionLinksAdmin.links + }) + .catch((error) => { + this.toastError(error.message) + }) + }, + }, } diff --git a/admin/src/components/UserQuery.vue b/admin/src/components/UserQuery.vue index 449b4bdc9..3ec02a074 100644 --- a/admin/src/components/UserQuery.vue +++ b/admin/src/components/UserQuery.vue @@ -1,43 +1,53 @@ - diff --git a/admin/src/components/input/Coordinates.vue b/admin/src/components/input/Coordinates.vue index b71e5d9d4..6493c19cf 100644 --- a/admin/src/components/input/Coordinates.vue +++ b/admin/src/components/input/Coordinates.vue @@ -11,24 +11,24 @@ :description="$t('geo-coordinates.latitude-longitude-smart.describe')" > @@ -41,9 +41,12 @@ export default { name: 'Coordinates', props: { - value: Object, - default: null, + value: { + type: Object, + default: null, + }, }, + emits: ['input'], data() { return { inputValue: this.value, diff --git a/admin/src/components/input/EditableGroup.vue b/admin/src/components/input/EditableGroup.vue index 6a998f542..9f683fc06 100644 --- a/admin/src/components/input/EditableGroup.vue +++ b/admin/src/components/input/EditableGroup.vue @@ -1,17 +1,17 @@