From 4e053d98a011fddc3e976ff4fb86b0ea3b80500c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Micha=C5=82owski?= Date: Thu, 11 Jul 2024 21:32:45 +0200 Subject: [PATCH 01/22] frontend - moved to vue 2.7 and vite --- frontend/.eslintrc.js | 6 +- frontend/.postcssrc.js | 8 - frontend/Dockerfile | 6 +- frontend/babel.config.js | 2 +- frontend/index.html | 69 + frontend/package.json | 22 +- frontend/run/server.js | 2 +- .../src/assets/scss/custom/_variables.scss | 2 +- frontend/src/assets/scss/gradido.scss | 68 +- .../GddSend/TransactionConfirmationSend.vue | 4 +- .../components/GddSend/TransactionForm.vue | 4 +- frontend/src/config/index.js | 57 +- frontend/src/i18n.js | 24 +- frontend/src/main.js | 1 + frontend/test/testSetup.js | 2 +- frontend/vite.config.js | 20 + frontend/vue.config.js | 10 +- frontend/yarn.lock | 7023 ++--------------- 18 files changed, 742 insertions(+), 6588 deletions(-) delete mode 100644 frontend/.postcssrc.js create mode 100644 frontend/index.html create mode 100644 frontend/vite.config.js diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 80a0d2d22..c110c856c 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -4,9 +4,7 @@ module.exports = { browser: true, node: true, jest: true, - }, - parserOptions: { - parser: 'babel-eslint', + es2022: true, }, extends: [ 'standard', @@ -29,7 +27,7 @@ module.exports = { // add your custom rules here rules: { 'no-console': ['error'], - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', + 'no-debugger': import.meta.env.NODE_ENV === 'production' ? 'error' : 'off', 'vue/component-name-in-template-casing': ['error', 'kebab-case'], 'vue/no-static-inline-styles': [ 'error', diff --git a/frontend/.postcssrc.js b/frontend/.postcssrc.js deleted file mode 100644 index 373f665cb..000000000 --- a/frontend/.postcssrc.js +++ /dev/null @@ -1,8 +0,0 @@ -// https://github.com/michael-ciniawsky/postcss-load-config - -module.exports = { - plugins: { - // to edit target browsers: use "browserslist" field in package.json - autoprefixer: {} - } -}; diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 4b21fd2ea..37bd1af74 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -98,13 +98,13 @@ COPY --from=build ${DOCKER_WORKDIR}/run ./run CMD /bin/sh -c "yarn run start" - + ## add `/usr/src/app/node_modules/.bin` to $PATH #ENV PATH /usr/src/app/node_modules/.bin:$PATH -# +# ## install and cache app dependencies #COPY package.json /usr/src/app/package.json #RUN npm install #RUN npm install -g @vue/cli ## start app -#CMD ["npm", "run", "serve"] \ No newline at end of file +#CMD ["npm", "run", "serve"] diff --git a/frontend/babel.config.js b/frontend/babel.config.js index fab7b82b8..28cb0d959 100644 --- a/frontend/babel.config.js +++ b/frontend/babel.config.js @@ -11,7 +11,7 @@ module.exports = function (api) { ], ] - if (process.env.NODE_ENV === 'test') { + if (import.meta.env.NODE_ENV === 'test') { plugins.push('transform-require-context') } diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 000000000..d69392f83 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/frontend/package.json b/frontend/package.json index 879171697..516d37fef 100755 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,10 +4,10 @@ "private": true, "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}'", @@ -18,9 +18,11 @@ "@babel/core": "^7.13.13", "@babel/node": "^7.13.13", "@babel/preset-env": "^7.13.12", - "@vue/cli-plugin-unit-jest": "^4.5.12", + "@vitejs/plugin-vue": "^4.6.2", + "@vitejs/plugin-vue2": "^2.3.1", "@vue/test-utils": "^1.1.3", "apollo-boost": "^0.4.9", + "autoprefixer": "^10.4.19", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^27.3.1", "babel-preset-vue": "^2.0.2", @@ -38,7 +40,7 @@ "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-promise": "^4.3.1", - "eslint-plugin-vue": "^7.8.0", + "eslint-plugin-vue": "8.7.1", "express": "^4.17.1", "flatpickr": "^4.5.7", "flush-promises": "^1.0.2", @@ -53,7 +55,9 @@ "regenerator-runtime": "^0.13.7", "uuid": "^9.0.0", "vee-validate": "^3.4.5", - "vue": "2.6.12", + "vite": "3.2.10", + "vite-plugin-commonjs": "^0.10.1", + "vue": "2.7.16", "vue-apollo": "^3.0.7", "vue-avatar": "^2.3.3", "vue-flatpickr-component": "^8.1.2", @@ -70,11 +74,7 @@ "devDependencies": { "@apollo/client": "^3.7.4", "@intlify/eslint-plugin-vue-i18n": "^1.4.0", - "@vue/cli-plugin-babel": "^3.7.0", - "@vue/cli-plugin-eslint": "^3.7.0", - "@vue/cli-service": "^3.7.0", "@vue/eslint-config-prettier": "^4.0.1", - "babel-eslint": "^10.1.0", "babel-plugin-component": "^1.1.0", "babel-plugin-transform-require-context": "^0.1.1", "cross-env": "^7.0.3", @@ -84,12 +84,10 @@ "postcss-html": "^1.3.0", "postcss-scss": "^4.0.3", "sass": "1.32.13", - "sass-loader": "^10", "stats-webpack-plugin": "^0.7.0", "stylelint": "^14.5.3", "stylelint-config-recommended-vue": "^1.3.0", "stylelint-config-standard-scss": "^3.0.0", - "vue-cli-plugin-i18n": "^1.0.1", "vue-html-webpack-plugin": "^3.2.2", "vue-template-compiler": "^2.6.11", "webpack-bundle-analyzer": "^4.5.0" diff --git a/frontend/run/server.js b/frontend/run/server.js index 4a49dcd75..98d11ee7e 100644 --- a/frontend/run/server.js +++ b/frontend/run/server.js @@ -4,7 +4,7 @@ const path = require('path') // Host & Port const hostname = '127.0.0.1' -const port = process.env.PORT || 3000 +const port = import.meta.env.PORT || 3000 // Express Server const app = express() diff --git a/frontend/src/assets/scss/custom/_variables.scss b/frontend/src/assets/scss/custom/_variables.scss index a17320d1d..6182a22f2 100644 --- a/frontend/src/assets/scss/custom/_variables.scss +++ b/frontend/src/assets/scss/custom/_variables.scss @@ -978,4 +978,4 @@ $btn-border-radius-sm: $input-border-radius !default; // Import Bootstrap variable defaults -@import "~bootstrap/scss/variables"; +@import "bootstrap/scss/variables"; diff --git a/frontend/src/assets/scss/gradido.scss b/frontend/src/assets/scss/gradido.scss index 2277cfbc6..d5263ac4b 100644 --- a/frontend/src/assets/scss/gradido.scss +++ b/frontend/src/assets/scss/gradido.scss @@ -1,55 +1,55 @@ // Bootstrap (4.5.3) functions -@import "~bootstrap/scss/functions"; +@import "bootstrap/scss/functions"; @import "custom/variables"; // @import "~bootstrap/scss/variables"; wird am // ende der custom/variables angehangen // Bootstrap (4.5.3) mixins -@import "~bootstrap/scss/mixins"; +@import "bootstrap/scss/mixins"; // Bootstrap (4.5.3) components -@import "~bootstrap/scss/alert"; -@import "~bootstrap/scss/badge"; -@import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/button-group"; -@import "~bootstrap/scss/buttons"; -@import "~bootstrap/scss/card"; -@import "~bootstrap/scss/carousel"; -@import "~bootstrap/scss/close"; -@import "~bootstrap/scss/code"; -@import "~bootstrap/scss/custom-forms"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/badge"; +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/button-group"; +@import "bootstrap/scss/buttons"; +@import "bootstrap/scss/card"; +@import "bootstrap/scss/carousel"; +@import "bootstrap/scss/close"; +@import "bootstrap/scss/code"; +@import "bootstrap/scss/custom-forms"; // @import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/forms"; +@import "bootstrap/scss/forms"; // @import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/grid"; -@import "~bootstrap/scss/input-group"; -@import "~bootstrap/scss/list-group"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/input-group"; +@import "bootstrap/scss/list-group"; // @import "~bootstrap/scss/mixins"; -@import "~bootstrap/scss/modal"; -@import "~bootstrap/scss/nav"; -@import "~bootstrap/scss/navbar"; -@import "~bootstrap/scss/pagination"; -@import "~bootstrap/scss/print"; -@import "~bootstrap/scss/progress"; -@import "~bootstrap/scss/reboot"; -@import "~bootstrap/scss/tables"; -@import "~bootstrap/scss/toasts"; -@import "~bootstrap/scss/tooltip"; -@import "~bootstrap/scss/transitions"; -@import "~bootstrap/scss/type"; -@import "~bootstrap/scss/utilities"; -@import "~bootstrap/scss/variables"; -@import "~bootstrap/scss/bootstrap-grid"; -@import "~bootstrap/scss/bootstrap-reboot"; -@import "~bootstrap/scss/bootstrap"; +@import "bootstrap/scss/modal"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/pagination"; +@import "bootstrap/scss/print"; +@import "bootstrap/scss/progress"; +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/toasts"; +@import "bootstrap/scss/tooltip"; +@import "bootstrap/scss/transitions"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/utilities"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/bootstrap-grid"; +@import "bootstrap/scss/bootstrap-reboot"; +@import "bootstrap/scss/bootstrap"; // Bootstrap-vue (2.21.1) scss -@import "~bootstrap-vue/src/index"; +@import "bootstrap-vue/src/index"; @import "gradido-template"; @import "gradido-template-dark"; diff --git a/frontend/src/components/GddSend/TransactionConfirmationSend.vue b/frontend/src/components/GddSend/TransactionConfirmationSend.vue index caa40d128..6b5105761 100644 --- a/frontend/src/components/GddSend/TransactionConfirmationSend.vue +++ b/frontend/src/components/GddSend/TransactionConfirmationSend.vue @@ -66,7 +66,7 @@ - diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue index e84f9273b..ab61f6a67 100644 --- a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue +++ b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue @@ -9,16 +9,16 @@ :placeholder="$t('form.memo')" rows="3" > - - + + {{ $t('form.cancel') }} - - + + {{ $t('form.reply') }} - - + + diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue index 60f0a0819..1e31ca02b 100644 --- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue +++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue @@ -1,8 +1,8 @@ diff --git a/frontend/src/components/ContributionMessages/ParseMessage.vue b/frontend/src/components/ContributionMessages/ParseMessage.vue index 20aecf842..0d2dbf448 100644 --- a/frontend/src/components/ContributionMessages/ParseMessage.vue +++ b/frontend/src/components/ContributionMessages/ParseMessage.vue @@ -8,7 +8,7 @@
- {{ text | GDD }} + {{ $filters.GDD(text) }} {{ text }} diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue index cc7a4f669..1649c8ffb 100644 --- a/frontend/src/components/Contributions/ContributionForm.vue +++ b/frontend/src/components/Contributions/ContributionForm.vue @@ -52,10 +52,10 @@ diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue index 0afa5546e..abf42dbe0 100644 --- a/frontend/src/components/Contributions/ContributionListItem.vue +++ b/frontend/src/components/Contributions/ContributionListItem.vue @@ -4,8 +4,8 @@ class="contribution-list-item bg-white appBoxShadow gradido-border-radius pt-3 px-3" :class="status === 'IN_PROGRESS' && !allContribution ? 'pulse border border-205' : ''" > - - + + - - - + + +
{{ firstName }} {{ lastName }} @@ -35,31 +35,32 @@ > {{ $t('contribution.alert.answerQuestion') }}
- - + +
{{ $t('creation') }} {{ $t('(') }}{{ amount / 20 }} {{ $t('h') }}{{ $t(')') }}
- + + {{ $t('contribution.alert.denied') }}
{{ $t('contribution.deleted') }}
-
{{ amount | GDD }}
- - +
{{ $filters.GDD(amount) }}
+ +
- - - + + - +
{{ $t('delete') }}
- - + +
- + +
{{ $t('edit') }}
- - + +
- + +
{{ $t('moderatorChat') }}
- - + +
- + - + diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue index 5f49f5474..e1cdbd3ec 100644 --- a/frontend/src/components/Contributions/OpenCreationsAmount.vue +++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue @@ -1,34 +1,34 @@ diff --git a/frontend/src/components/DecayInformations/CollapseLinksList.vue b/frontend/src/components/DecayInformations/CollapseLinksList.vue index c580fa04a..2bc65bbd4 100644 --- a/frontend/src/components/DecayInformations/CollapseLinksList.vue +++ b/frontend/src/components/DecayInformations/CollapseLinksList.vue @@ -11,7 +11,7 @@ @reset-transaction-link-list="resetTransactionLinkList" />
- {{ buttonText }} - +
- + +
@@ -57,9 +58,9 @@ export default { computed: { buttonText() { const i = this.transactionLinkCount - this.transactionLinks.length - if (i === 1) return this.$tc('link-load', 0) - if (i <= this.pageSize) return this.$tc('link-load', 1, { n: i }) - return this.$tc('link-load', 2, { n: this.pageSize }) + if (i === 1) return this.$t('link-load', 0) + if (i <= this.pageSize) return this.$t('link-load', 1, { n: i }) + return this.$t('link-load', 2, { n: this.pageSize }) }, }, } diff --git a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue index ce679fb30..1efff6629 100644 --- a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue +++ b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue @@ -1,26 +1,27 @@ --> + + + diff --git a/frontend/src/components/Auth/AuthNavbar.vue b/frontend/src/components/Auth/AuthNavbar.vue index e65df8d68..1d03dd258 100644 --- a/frontend/src/components/Auth/AuthNavbar.vue +++ b/frontend/src/components/Auth/AuthNavbar.vue @@ -13,9 +13,9 @@ - {{ $t('signup') }} + {{ $t('signup') }} {{ $t('math.pipe') }} - {{ $t('signin') }} + {{ $t('signin') }} @@ -39,18 +39,20 @@ export default { diff --git a/frontend/src/components/ClipboardCopy.vue b/frontend/src/components/ClipboardCopy.vue index b43c84418..99e752fef 100644 --- a/frontend/src/components/ClipboardCopy.vue +++ b/frontend/src/components/ClipboardCopy.vue @@ -5,8 +5,8 @@
{{ link }}
diff --git a/frontend/src/components/CommunitySwitch.vue b/frontend/src/components/CommunitySwitch.vue index 4f8741fd4..b8850ac75 100644 --- a/frontend/src/components/CommunitySwitch.vue +++ b/frontend/src/components/CommunitySwitch.vue @@ -4,10 +4,10 @@ {{ community.name }} diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue index ab61f6a67..152e66265 100644 --- a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue +++ b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue @@ -42,6 +42,11 @@ export default { isSubmitting: false, } }, + computed: { + disabled() { + return this.form.text === '' || this.isSubmitting + }, + }, methods: { onSubmit() { this.isSubmitting = true @@ -69,10 +74,5 @@ export default { this.form.text = '' }, }, - computed: { - disabled() { - return this.form.text === '' || this.isSubmitting - }, - }, } diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesList.vue b/frontend/src/components/ContributionMessages/ContributionMessagesList.vue index 28e37dbb7..3a70245f4 100644 --- a/frontend/src/components/ContributionMessages/ContributionMessagesList.vue +++ b/frontend/src/components/ContributionMessages/ContributionMessagesList.vue @@ -1,15 +1,15 @@