From 01f4798e7a54bdb96dfefb13f78540d0cab0f202 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 21 Dec 2021 21:02:58 +0100 Subject: [PATCH] Refactor date filters to be only methods and replace moment with dayjs --- client/build/webpack.dev.conf.js | 6 +++--- client/package.json | 4 ++-- client/src/components/portfolio/ProjectEntry.vue | 14 ++++++++++++-- client/src/components/rooms/Comment.vue | 8 +++++++- client/src/filters/date-filter.js | 11 +++++++---- client/src/main.js | 4 ---- 6 files changed, 31 insertions(+), 16 deletions(-) diff --git a/client/build/webpack.dev.conf.js b/client/build/webpack.dev.conf.js index b6c0813e..356536e0 100755 --- a/client/build/webpack.dev.conf.js +++ b/client/build/webpack.dev.conf.js @@ -43,7 +43,7 @@ const devWebpackConfig = merge(baseWebpackConfig, { plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env'), - // bundler feature flags https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags + // bundler feature flags https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags __VUE_OPTIONS_API__: true, // default, but explicit __VUE_PROD_DEVTOOLS__: false, // default, but explicit }), @@ -67,8 +67,8 @@ const devWebpackConfig = merge(baseWebpackConfig, { ], }), new BundleAnalyzerPlugin({ - generateStatsFile: true - }), + analyzerMode: 'disabled' // do nothing by default, but be able to generate stats with --profile + }) ], }); diff --git a/client/package.json b/client/package.json index c86558c2..fdccbfb7 100644 --- a/client/package.json +++ b/client/package.json @@ -6,6 +6,7 @@ "private": true, "scripts": { "dev": "webpack serve --progress --config build/webpack.dev.conf.js", + "analyze": "webpack --profile --json --config build/webpack.dev.conf.js > dist/stats.json && webpack-bundle-analyzer dist/stats.json", "start": ". ../server/.env && npm run dev", "lint": "eslint --ext .js,.vue src", "fix-lint": "eslint --ext .js,.vue --fix src", @@ -48,7 +49,7 @@ "copy-webpack-plugin": "^10.1.0", "css-loader": "^0.28.0", "cy2": "^1.2.1", - "dayjs": "^1.10.4", + "dayjs": "^1.10.7", "debounce": "^1.2.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", @@ -67,7 +68,6 @@ "html-webpack-plugin": "^5.5.0", "lodash": "^4.17.10", "mini-css-extract-plugin": "^2.4.5", - "moment": "^2.24.0", "node-notifier": "^5.1.2", "node-sass": "^4.13.1", "optimize-css-assets-webpack-plugin": "^6.0.1", diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue index 669a9b60..4f37672f 100644 --- a/client/src/components/portfolio/ProjectEntry.vue +++ b/client/src/components/portfolio/ProjectEntry.vue @@ -20,7 +20,7 @@

{{ created | datetime }}

+ data-cy="project-entry-date">{{ createdDateTime }}

@@ -32,7 +32,7 @@

- {{ created | date }} + {{ createdDate }}
@@ -43,6 +43,7 @@ import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql'; import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql'; + import {dateFilter, dateTimeFilter} from '@/filters/date-filter'; export default { props: ['description', 'documentUrl', 'created', 'id', 'readOnly'], @@ -51,6 +52,15 @@ MoreOptionsWidget, }, + computed: { + createdDate() { + return dateFilter(this.created); + }, + createdDateTime() { + return dateTimeFilter(this.created); + }, + }, + methods: { editProjectEntry() { this.$store.dispatch('editProjectEntry', this.id); diff --git a/client/src/components/rooms/Comment.vue b/client/src/components/rooms/Comment.vue index 1c670d24..8fcaade2 100644 --- a/client/src/components/rooms/Comment.vue +++ b/client/src/components/rooms/Comment.vue @@ -7,7 +7,7 @@ {{ comment.owner.firstName }} {{ comment.owner.lastName }}
- {{ comment.created | datetime }} + {{ createdDate }}
{{ comment.text }} @@ -17,6 +17,7 @@ diff --git a/client/src/filters/date-filter.js b/client/src/filters/date-filter.js index 1b597f3a..b69ff14e 100644 --- a/client/src/filters/date-filter.js +++ b/client/src/filters/date-filter.js @@ -1,15 +1,18 @@ -import moment from 'moment'; +import dayjs from 'dayjs'; +require('dayjs/locale/de'); -moment.locale('de'); +dayjs.locale('de'); +// todo: test export const dateFilter = value => { if (value) { - return moment(String(value)).format('DD. MMMM YYYY'); + return dayjs(String(value)).format('DD. MMMM YYYY'); } }; +// todo: test export const dateTimeFilter = value => { if (value) { - return moment(String(value)).format('DD. MMMM YYYY, HH:mm'); + return dayjs(String(value)).format('DD. MMMM YYYY, HH:mm'); } }; diff --git a/client/src/main.js b/client/src/main.js index a8b04891..8075aad7 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -7,7 +7,6 @@ import App from './App'; import {postLoginRedirectUrlKey, router} from './router'; import store from '@/store/index'; import VueScrollTo from 'vue-scrollto'; -import {dateFilter, dateTimeFilter} from './filters/date-filter'; import autoGrow from '@/directives/auto-grow'; import clickOutside from '@/directives/click-outside'; import ME_QUERY from '@/graphql/gql/queries/meQuery.gql'; @@ -59,9 +58,6 @@ const apolloProvider = new VueApollo({ defaultClient: privateApolloClient, }); -Vue.filter('date', dateFilter); -Vue.filter('datetime', dateTimeFilter); - /* guards */ function getCookieValue(cookieName) {