78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
class="place"
|
|
>
|
|
<div class="value-section">
|
|
<span class="value-label">Country</span>
|
|
|
|
<select
|
|
v-model="place.country"
|
|
class="select input"
|
|
placeholder="Country"
|
|
:disabled="!editing.has(item.key)"
|
|
>
|
|
<option
|
|
:key="`${item.key}-country-unknown`"
|
|
:value="null"
|
|
/>
|
|
|
|
<option
|
|
v-for="country in sortedCountries"
|
|
:key="`${item.key}-country-${country.alpha2}`"
|
|
:value="country.alpha2"
|
|
>{{ country.alias || country.name }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="value-section">
|
|
<span class="value-label">Place</span>
|
|
|
|
<input
|
|
v-model="place.place"
|
|
class="string input"
|
|
:disabled="!editing.has(item.key)"
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, watch, inject } from 'vue';
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
edits: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
editing: {
|
|
type: Set,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const pageContext = inject('pageContext');
|
|
const countries = pageContext.pageProps.countries;
|
|
|
|
const emit = defineEmits(['place']);
|
|
const place = reactive(props.edits[props.item.key]);
|
|
|
|
watch(place, () => emit('place', place));
|
|
|
|
const topCountries = [
|
|
'AU',
|
|
'BR',
|
|
'CZ',
|
|
'DE',
|
|
'JP',
|
|
'RU',
|
|
'GB',
|
|
'US',
|
|
];
|
|
|
|
const sortedCountries = countries.toSorted((countryA, countryB) => topCountries.indexOf(countryB.alpha2) - topCountries.indexOf(countryA.alpha2));
|
|
</script>
|