chore: extract distance display component and remove numeral filter
This commit is contained in:
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
>
|
||||
<v-flex xs12 sm6>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
<span
|
||||
><strong>{{ distance.origin }}</strong></span
|
||||
>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6>
|
||||
<v-icon>mdi-car</v-icon>
|
||||
<span>{{ numericDistance }} km</span>
|
||||
<v-icon>mdi-clock-outline</v-icon>
|
||||
<span>{{ distance.duration }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { computed, defineComponent, PropType } from 'vue'
|
||||
import { DanceHallDistance } from '~/graphql/generated/operations'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DistanceDisplay',
|
||||
props: {
|
||||
distance: {
|
||||
type: Object as PropType<DanceHallDistance>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const numericDistance = computed(() =>
|
||||
Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
}))
|
||||
return {
|
||||
numericDistance
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -88,25 +88,7 @@
|
||||
</v-flex
|
||||
>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
v-for='distance in event.distances'
|
||||
:key='distance.origin'
|
||||
row
|
||||
wrap
|
||||
>
|
||||
<v-flex xs12 sm6>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
<span
|
||||
><strong>{{ distance.origin }}</strong></span
|
||||
>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6>
|
||||
<v-icon>mdi-car</v-icon>
|
||||
<span>{{ (distance.distance / 1000) | numeral('0,0.00') }} km</span>
|
||||
<v-icon>mdi-clock-outline</v-icon>
|
||||
<span>{{ distance.duration }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<distance-display v-for='distance in event.distances' :key='distance.origin' :distance='distance'/>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -118,9 +100,11 @@ import { format, formatDistanceToNow, parseISO } from 'date-fns'
|
||||
import { enGB, sv } from 'date-fns/locale'
|
||||
import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
|
||||
import { Event } from '~/graphql/generated/operations'
|
||||
import DistanceDisplay from '~/components/pages/events/Event/distance.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EventDetail',
|
||||
components: { DistanceDisplay },
|
||||
props: {
|
||||
event: {
|
||||
type: Object as PropType<Event>,
|
||||
|
||||
+2
-4
@@ -112,13 +112,11 @@ export default defineNuxtConfig({
|
||||
},
|
||||
modules: [
|
||||
'@nuxtjs/i18n',
|
||||
'@nuxtjs/sentry',
|
||||
['@nuxtjs/moment', { locales: ['sv'], defaultLocale: 'sv' }]
|
||||
'@nuxtjs/sentry'
|
||||
],
|
||||
plugins: [
|
||||
'~/plugins/apollo',
|
||||
'~/plugins/i18n',
|
||||
'~/plugins/vue-numeral-filter.js'
|
||||
'~/plugins/i18n'
|
||||
],
|
||||
router: {
|
||||
middleware: ['auth']
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
"@graphql-codegen/typescript-operations": "^2.5.7",
|
||||
"@graphql-codegen/typescript-vue-apollo": "^3.3.6",
|
||||
"@nuxtjs/i18n": "^7.3.0",
|
||||
"@nuxtjs/moment": "^1.1.0",
|
||||
"@nuxtjs/sentry": "^6.0.1",
|
||||
"@nuxtjs/vuetify": "^1.12.3",
|
||||
"@snyk/protect": "^1.1060.0",
|
||||
@@ -37,13 +36,11 @@
|
||||
"date-fns": "^2.29.3",
|
||||
"graphql": "^15.8.0",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"moment": "^2.29.4",
|
||||
"node-sass": "^8.0.0",
|
||||
"nuxt-edge": "latest",
|
||||
"sass-loader": "^10.1.1",
|
||||
"vue": "2.7.14",
|
||||
"vue-demi": "^0.13.11",
|
||||
"vue-numeral-filter": "^2.2.0",
|
||||
"vue-server-renderer": "2.7.14",
|
||||
"vue-template-compiler": "2.7.14",
|
||||
"vuetify": "^2.6.12",
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import vueNumeralFilterInstaller from 'vue-numeral-filter'
|
||||
|
||||
// TODO: Switch to sv-se when PR (https://github.com/adamwdraper/Numeral-js/pull/534) is merged
|
||||
Vue.use(vueNumeralFilterInstaller, { locale: 'no' })
|
||||
@@ -2473,16 +2473,6 @@
|
||||
ufo "^0.8.5"
|
||||
vue-i18n "^8.27.2"
|
||||
|
||||
"@nuxtjs/moment@^1.1.0":
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/@nuxtjs/moment/-/moment-1.6.1.tgz#a4e98a861c9d21e34f983046143f4c9bb92bdb7c"
|
||||
integrity sha512-Mo2/3NQB0XryMQuNCTVnAclrDvt9I9sr6dwVm56KhYCoiWTKgQ78tDV9tmrxw7lahw1IBwyPGhw+3pwkM4phAA==
|
||||
dependencies:
|
||||
moment "^2.25.3"
|
||||
moment-locales-webpack-plugin "^1.2.0"
|
||||
moment-timezone "^0.5.28"
|
||||
moment-timezone-data-webpack-plugin "^1.3.0"
|
||||
|
||||
"@nuxtjs/sentry@^6.0.1":
|
||||
version "6.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@nuxtjs/sentry/-/sentry-6.0.1.tgz#5a1c804696ed61bce91ad68f8003a5f18308c05a"
|
||||
@@ -9861,7 +9851,7 @@ make-dir@^2.0.0:
|
||||
pify "^4.0.1"
|
||||
semver "^5.6.0"
|
||||
|
||||
make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0, make-dir@~3.1.0:
|
||||
make-dir@^3.0.2, make-dir@^3.1.0, make-dir@~3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
|
||||
integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
|
||||
@@ -10286,29 +10276,7 @@ mlly@^0.5.14, mlly@^0.5.16, mlly@^0.5.2:
|
||||
pkg-types "^0.3.5"
|
||||
ufo "^0.8.5"
|
||||
|
||||
moment-locales-webpack-plugin@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz#9af83876a44053706b868ceece5119584d10d7aa"
|
||||
integrity sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==
|
||||
dependencies:
|
||||
lodash.difference "^4.5.0"
|
||||
|
||||
moment-timezone-data-webpack-plugin@^1.3.0:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/moment-timezone-data-webpack-plugin/-/moment-timezone-data-webpack-plugin-1.5.1.tgz#9d35dfd3768db55058e1e809d77a2b64bd6d03a4"
|
||||
integrity sha512-1le6a35GgYdWMVYFzrfpE/F6Pk4bj0M3QKD6Iv6ba9LqWGoVqHQRHyCTLvLis5E1J98Sz40ET6yhZzMVakwpjg==
|
||||
dependencies:
|
||||
find-cache-dir "^3.0.0"
|
||||
make-dir "^3.0.0"
|
||||
|
||||
moment-timezone@^0.5.28:
|
||||
version "0.5.38"
|
||||
resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.38.tgz#9674a5397b8be7c13de820fd387d8afa0f725aad"
|
||||
integrity sha512-nMIrzGah4+oYZPflDvLZUgoVUO4fvAqHstvG3xAUnMolWncuAiLDWNnJZj6EwJGMGfb1ZcuTFE6GI3hNOVWI/Q==
|
||||
dependencies:
|
||||
moment ">= 2.9.0"
|
||||
|
||||
"moment@>= 2.9.0", moment@^2.19.2, moment@^2.20.1, moment@^2.25.3, moment@^2.29.4:
|
||||
moment@^2.19.2, moment@^2.20.1:
|
||||
version "2.29.4"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
|
||||
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
|
||||
@@ -10783,11 +10751,6 @@ number-is-nan@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
|
||||
integrity sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
|
||||
|
||||
numeral@^2.0.6:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
|
||||
integrity sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==
|
||||
|
||||
nuxi@3.0.0-rc.12:
|
||||
version "3.0.0-rc.12"
|
||||
resolved "https://registry.yarnpkg.com/nuxi/-/nuxi-3.0.0-rc.12.tgz#4c0d11f2db31b698dbc7d7943fc22d4de258b0c3"
|
||||
@@ -15068,13 +15031,6 @@ vue-no-ssr@^1.1.1:
|
||||
resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
|
||||
integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
|
||||
|
||||
vue-numeral-filter@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-numeral-filter/-/vue-numeral-filter-2.2.0.tgz#51e2f6af1bee898d0c067db3697f93511c16e286"
|
||||
integrity sha512-w9Wq2ACdJTxDQR1joKyZERbBcW86M3couf39M6FQy1nQFmi0tgNYAeIwLhA6b40jRO8TRZwCkzbs59PYxjpC/A==
|
||||
dependencies:
|
||||
numeral "^2.0.6"
|
||||
|
||||
vue-router@^3.6.4:
|
||||
version "3.6.5"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
|
||||
|
||||
Reference in New Issue
Block a user