Skip to content

Commit 2f1d0f8

Browse files
JanisVJanisV
committed
Improve coin info code
1 parent 16fbcf7 commit 2f1d0f8

2 files changed

Lines changed: 127 additions & 174 deletions

File tree

‎frontend/src/components/CoinView.vue‎

Lines changed: 103 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import i18n from '../i18n'
77
import StatusItem from "./StatusItem.vue"
88
import {convertFraction, formatYear} from "@/utils/formatter.js";
99
import {useService} from "@/composables/useService.js";
10+
import InfoRow from "@/components/InfoRow.vue";
1011
1112
const router = useRouter()
1213
const route = useRoute()
@@ -52,189 +53,117 @@ onUnmounted(async () => {
5253
<v-row density="compact">
5354
<v-col cols="12" md="6">
5455
<v-row density="compact">
55-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
56-
{{ settings.fields['status'] }}
57-
</v-col>
58-
<v-col tag="dd" cols="12" sm="9">
56+
<InfoRow :title="settings.fields['status']">
5957
<StatusItem :status="coinData[service.infoFieldIndex('status')]" :statuses="settings.statuses" statusPresentation="icon_text" class="font-weight-bold" />
60-
</v-col>
61-
<template v-if="coinData[service.infoFieldIndex('region')]">
62-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
63-
{{ settings.fields['region'] }}
64-
</v-col>
65-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
66-
{{ coinData[service.infoFieldIndex('region')] }}
67-
</v-col>
68-
</template>
69-
<template v-if="coinData[service.infoFieldIndex('country')]">
70-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
71-
{{ settings.fields['country'] }}
72-
</v-col>
73-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
74-
{{ coinData[service.infoFieldIndex('country')] }}
75-
</v-col>
76-
</template>
77-
<template v-if="coinData[service.infoFieldIndex('period')]">
78-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
79-
{{ settings.fields['period'] }}
80-
</v-col>
81-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
82-
{{ coinData[service.infoFieldIndex('period')] }}
83-
</v-col>
84-
</template>
85-
<template v-if="coinData[service.infoFieldIndex('ruler')]">
86-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
87-
{{ settings.fields['ruler'] }}
88-
</v-col>
89-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
90-
{{ coinData[service.infoFieldIndex('ruler')] }}
91-
</v-col>
92-
</template>
93-
<template v-if="coinData[service.infoFieldIndex('value')] || coinData[service.infoFieldIndex('unit')]">
94-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
95-
{{ i18n.global.t('Denomination') }}
96-
</v-col>
97-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
98-
{{ convertFraction(props.settings.convert_fraction, coinData[service.infoFieldIndex('value')]) }}
99-
{{ coinData[service.infoFieldIndex('unit')] }}
100-
</v-col>
101-
</template>
102-
<template v-if="coinData[service.infoFieldIndex('type')]">
103-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
104-
{{ settings.fields['type'] }}
105-
</v-col>
106-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
107-
{{ coinData[service.infoFieldIndex('type')] }}
108-
</v-col>
109-
</template>
110-
<template v-if="coinData[service.infoFieldIndex('series')]">
111-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
112-
{{ settings.fields['series'] }}
113-
</v-col>
114-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
115-
{{ coinData[service.infoFieldIndex('series')] }}
116-
</v-col>
117-
</template>
118-
<template v-if="coinData[service.infoFieldIndex('subjectshort')]">
119-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
120-
{{ settings.fields['subjectshort'] }}
121-
</v-col>
122-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
123-
{{ coinData[service.infoFieldIndex('subjectshort')] }}
124-
</v-col>
125-
</template>
58+
</InfoRow>
59+
<InfoRow
60+
:title="settings.fields['region']"
61+
:value="coinData[service.infoFieldIndex('region')]"
62+
/>
63+
<InfoRow
64+
:title="settings.fields['country']"
65+
:value="coinData[service.infoFieldIndex('country')]"
66+
/>
67+
<InfoRow
68+
:title="settings.fields['period']"
69+
:value="coinData[service.infoFieldIndex('period')]"
70+
/>
71+
<InfoRow
72+
:title="settings.fields['ruler']"
73+
:value="coinData[service.infoFieldIndex('ruler')]"
74+
/>
75+
<InfoRow
76+
v-if="coinData[service.infoFieldIndex('value')] || coinData[service.infoFieldIndex('unit')]"
77+
:title="i18n.global.t('Denomination')"
78+
>
79+
{{ convertFraction(props.settings.convert_fraction, coinData[service.infoFieldIndex('value')]) }}
80+
{{ coinData[service.infoFieldIndex('unit')] }}
81+
</InfoRow>
82+
<InfoRow
83+
:title="settings.fields['type']"
84+
:value="coinData[service.infoFieldIndex('type')]"
85+
/>
86+
<InfoRow
87+
:title="settings.fields['series']"
88+
:value="coinData[service.infoFieldIndex('series')]"
89+
/>
90+
<InfoRow
91+
:title="settings.fields['subjectshort']"
92+
:value="coinData[service.infoFieldIndex('subjectshort')]"
93+
/>
12694

127-
<template v-if="coinData[service.infoFieldIndex('issuedate')]">
128-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
129-
{{ settings.fields['issuedate'] }}
130-
</v-col>
131-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
132-
{{ coinData[service.infoFieldIndex('issuedate')] }}
133-
</v-col>
134-
</template>
135-
<template v-else-if="coinData[service.infoFieldIndex('year')]">
136-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
137-
{{ settings.fields['year'] }}
138-
</v-col>
139-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
140-
{{ formatYear(props.settings.enable_bc, coinData[service.infoFieldIndex('year')]) }}
141-
</v-col>
142-
</template>
95+
<InfoRow
96+
v-if="coinData[service.infoFieldIndex('issuedate')]"
97+
:title="i18n.global.t('Issuedate')"
98+
>
99+
{{ i18n.global.d(coinData[service.infoFieldIndex('issuedate')]) }}
100+
</InfoRow>
101+
<InfoRow
102+
v-else-if="coinData[service.infoFieldIndex('year')]"
103+
:title="i18n.global.t('year')"
104+
>
105+
{{ formatYear(props.settings.enable_bc, coinData[service.infoFieldIndex('year')]) }}
106+
</InfoRow>
143107

144-
<template v-if="coinData[service.infoFieldIndex('mintage')]">
145-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
146-
{{ settings.fields['mintage'] }}
147-
</v-col>
148-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
149-
{{ coinData[service.infoFieldIndex('mintage')] }}
150-
</v-col>
151-
</template>
152-
<template v-if="coinData[service.infoFieldIndex('material')]">
153-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
154-
{{ settings.fields['material'] }}
155-
</v-col>
156-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
157-
{{ coinData[service.infoFieldIndex('material')] }}
158-
</v-col>
159-
</template>
108+
<InfoRow
109+
v-if="coinData[service.infoFieldIndex('mintage')]"
110+
:title="settings.fields['mintage']"
111+
:value="i18n.global.n(coinData[service.infoFieldIndex('mintage')])"
112+
/>
113+
<InfoRow
114+
:title="settings.fields['material']"
115+
:value="coinData[service.infoFieldIndex('material')]"
116+
/>
160117

161-
<template v-if="coinData[service.infoFieldIndex('mint')] && coinData[service.infoFieldIndex('mintmark')]">
162-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
163-
{{ settings.fields['mint'] }}
164-
</v-col>
165-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
166-
{{ coinData[service.infoFieldIndex('mint')] }} ({{ coinData[service.infoFieldIndex('mintmark')] }})
167-
</v-col>
168-
</template>
169-
<template v-else-if="coinData[service.infoFieldIndex('mint')]">
170-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
171-
{{ settings.fields['mint'] }}
172-
</v-col>
173-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
174-
{{ coinData[service.infoFieldIndex('mint')] }}
175-
</v-col>
176-
</template>
177-
<template v-else-if="coinData[service.infoFieldIndex('mintmark')]">
178-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
179-
{{ settings.fields['mintmark'] }}
180-
</v-col>
181-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
182-
{{ coinData[service.infoFieldIndex('mintmark')] }}
183-
</v-col>
184-
</template>
118+
<InfoRow
119+
v-if="coinData[service.infoFieldIndex('mint')] && coinData[service.infoFieldIndex('mintmark')]"
120+
:title="settings.fields['mint']"
121+
>
122+
{{ coinData[service.infoFieldIndex('mint')] }} ({{ coinData[service.infoFieldIndex('mintmark')] }})
123+
</InfoRow>
124+
<InfoRow
125+
v-else-if="coinData[service.infoFieldIndex('mint')]"
126+
:title="settings.fields['mint']"
127+
>
128+
{{ coinData[service.infoFieldIndex('mint')] }}
129+
</InfoRow>
130+
<InfoRow
131+
v-else-if="coinData[service.infoFieldIndex('mintmark')]"
132+
:title="settings.fields['mintmark']"
133+
>
134+
{{ coinData[service.infoFieldIndex('mintmark')] }}
135+
</InfoRow>
185136
</v-row>
186137
</v-col>
187138

188139
<v-col cols="12" md="6">
189140
<v-row density="compact">
190-
<template v-if="coinData[service.infoFieldIndex('grade')]">
191-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
192-
{{ settings.fields['grade'] }}
193-
</v-col>
194-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
195-
{{ coinData[service.infoFieldIndex('grade')] }}
196-
</v-col>
197-
</template>
198-
<template v-if="coinData[service.infoFieldIndex('paydate')]">
199-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
200-
{{ settings.fields['paydate'] }}
201-
</v-col>
202-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
203-
{{ coinData[service.infoFieldIndex('paydate')] }}
204-
</v-col>
205-
</template>
206-
<template v-if="coinData[service.infoFieldIndex('payprice')]">
207-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
208-
{{ settings.fields['payprice'] }}
209-
</v-col>
210-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
211-
{{ coinData[service.infoFieldIndex('payprice')] }}
212-
</v-col>
213-
</template>
214-
<template v-if="coinData[service.infoFieldIndex('storage')]">
215-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
216-
{{ settings.fields['storage'] }}
217-
</v-col>
218-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
219-
{{ coinData[service.infoFieldIndex('storage')] }}
220-
</v-col>
221-
</template>
222-
<template v-if="coinData[service.infoFieldIndex('condition')]">
223-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
224-
{{ settings.fields['condition'] }}
225-
</v-col>
226-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
227-
{{ coinData[service.infoFieldIndex('condition')] }}
228-
</v-col>
229-
</template>
230-
<template v-if="coinData[service.infoFieldIndex('quantity')]">
231-
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
232-
{{ settings.fields['quantity'] }}
233-
</v-col>
234-
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
235-
{{ coinData[service.infoFieldIndex('quantity')] }}
236-
</v-col>
237-
</template>
141+
<InfoRow
142+
:title="settings.fields['grade']"
143+
:value="coinData[service.infoFieldIndex('grade')]"
144+
/>
145+
<InfoRow
146+
v-if="coinData[service.infoFieldIndex('paydate')]"
147+
:title="settings.fields['paydate']"
148+
:value="i18n.global.d()"
149+
/>
150+
<InfoRow
151+
v-if="coinData[service.infoFieldIndex('payprice')]"
152+
:title="settings.fields['payprice']"
153+
:value="i18n.global.n(coinData[service.infoFieldIndex('payprice')])"
154+
/>
155+
<InfoRow
156+
:title="settings.fields['storage']"
157+
:value="coinData[service.infoFieldIndex('storage')]"
158+
/>
159+
<InfoRow
160+
:title="settings.fields['condition']"
161+
:value="coinData[service.infoFieldIndex('condition')]"
162+
/>
163+
<InfoRow
164+
:title="settings.fields['quantity']"
165+
:value="coinData[service.infoFieldIndex('quantity')]"
166+
/>
238167
</v-row>
239168
</v-col>
240169
</v-row>

‎frontend/src/components/InfoRow.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<template v-if="value || $slots.default">
3+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
4+
{{ title }}
5+
</v-col>
6+
7+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
8+
<slot>{{ value }}</slot>
9+
</v-col>
10+
</template>
11+
</template>
12+
13+
<script setup>
14+
defineProps({
15+
title: {
16+
type: String,
17+
required: true
18+
},
19+
value: {
20+
type: [String, Number],
21+
default: null
22+
}
23+
})
24+
</script>

0 commit comments

Comments
 (0)