Merge pull request #2927 from gradido/fix-decay-duration

fix(frontend): displayed decay duration
This commit is contained in:
Hannes Heine 2023-04-06 17:00:57 +02:00 committed by GitHub
commit 5504160c0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 14 additions and 36 deletions

View File

@ -26,6 +26,7 @@
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"clipboard-polyfill": "^4.0.0-rc1",
"date-fns": "^2.29.3",
"es6-promise": "^4.1.1",
"eslint": "^7.25.0",
"eslint-config-prettier": "^8.1.0",
@ -58,7 +59,6 @@
"vue-i18n": "^8.22.4",
"vue-jest": "^3.0.7",
"vue-loading-overlay": "^3.4.2",
"vue-moment": "^4.1.0",
"vue-router": "^3.0.6",
"vue-timers": "^2.0.4",
"vue2-transitions": "^0.2.3",

View File

@ -5,12 +5,17 @@
<div>{{ $t('decay.past_time') }}</div>
</b-col>
<b-col offset="1" offset-md="0" offset-lg="0" class="text-right mr-5">
<span v-if="duration">{{ durationText }}</span>
<span v-if="duration">{{ duration }}</span>
</b-col>
</b-row>
</div>
</template>
<script>
import { formatDistance } from 'date-fns'
import { en, de, es, fr, nl } from 'date-fns/locale'
const locales = { en, de, es, fr, nl }
export default {
name: 'DurationRow',
props: {
@ -25,19 +30,9 @@ export default {
},
computed: {
duration() {
return this.$moment.duration(new Date(this.decayEnd) - new Date(this.decayStart))._data
},
durationText() {
const order = ['years', 'months', 'days', 'hours', 'minutes', 'seconds']
const result = []
order.forEach((timeSpan) => {
if (this.duration[timeSpan] > 0) {
// eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys
const locale = this.$t(`time.${timeSpan}`)
result.push(`${this.duration[timeSpan]} ${locale}`)
}
return formatDistance(new Date(this.decayEnd), new Date(this.decayStart), {
locale: locales[this.$i18n.locale],
})
return result.join(', ')
},
},
}

View File

@ -98,7 +98,6 @@ const dateTimeFormats = {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long',
hour: 'numeric',
minute: 'numeric',
},
@ -130,7 +129,6 @@ const dateTimeFormats = {
day: 'numeric',
month: 'long',
year: 'numeric',
weekday: 'long',
hour: 'numeric',
minute: 'numeric',
},
@ -162,7 +160,6 @@ const dateTimeFormats = {
day: 'numeric',
month: 'long',
year: 'numeric',
weekday: 'long',
hour: 'numeric',
minute: 'numeric',
},
@ -194,7 +191,6 @@ const dateTimeFormats = {
day: 'numeric',
month: 'long',
year: 'numeric',
weekday: 'long',
hour: 'numeric',
minute: 'numeric',
},

View File

@ -11,8 +11,6 @@ import '@/assets/scss/gradido.scss'
import FlatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import VueMoment from 'vue-moment'
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'
@ -26,7 +24,6 @@ export default {
Vue.use(GlobalDirectives)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(VueMoment)
Vue.use(PortalVue)
Vue.use(FlatPickr)
Vue.use(Loading)

View File

@ -10,8 +10,6 @@ import { messages } from 'vee-validate/dist/locale/en.json'
import RegeneratorRuntime from 'regenerator-runtime'
import VueTimers from 'vue-timers'
import VueMoment from 'vue-moment'
// import clickOutside from '@/directives/click-ouside.js'
import { focus } from 'vue-focus'
@ -47,7 +45,6 @@ global.localVue.use(BootstrapVue)
global.localVue.use(Vuex)
global.localVue.use(IconsPlugin)
global.localVue.use(RegeneratorRuntime)
global.localVue.use(VueMoment)
global.localVue.use(VueTimers)
global.localVue.component('validation-provider', ValidationProvider)
global.localVue.component('validation-observer', ValidationObserver)

View File

@ -5557,6 +5557,11 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"
date-fns@^2.29.3:
version "2.29.3"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
de-indent@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@ -10324,11 +10329,6 @@ mock-apollo-client@^1.2.1:
resolved "https://registry.yarnpkg.com/mock-apollo-client/-/mock-apollo-client-1.2.1.tgz#e3bfdc3ff73b1fea28fa7e91ec82e43ba8cbfa39"
integrity sha512-QYQ6Hxo+t7hard1bcHHbsHxlNQYTQsaMNsm2Psh/NbwLMi2R4tGzplJKt97MUWuARHMq3GHB4PTLj/gxej4Caw==
moment@^2.19.2:
version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
moo-color@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
@ -14386,13 +14386,6 @@ vue-loading-overlay@^3.4.2:
resolved "https://registry.yarnpkg.com/vue-loading-overlay/-/vue-loading-overlay-3.4.2.tgz#34792a83218df1d35dff50121ce9fac2114f1c38"
integrity sha512-xcB+NPjl76eA0uggm707x3ZFgrNosZXpynHipyS3K+rrK1NztOV49R1LY+/4ij5W1KYANp7eRI2EIHrxCpmWAw==
vue-moment@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/vue-moment/-/vue-moment-4.1.0.tgz#092a8ff723a96c6f85a0a8e23ad30f0bf320f3b0"
integrity sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==
dependencies:
moment "^2.19.2"
vue-router@^3.0.6:
version "3.5.1"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"