78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import ZoneLocationsTree from './ZoneLocationsTree.vue';
|
|
|
|
import axios from 'axios';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
|
|
const onSelected = async (val, node) => {
|
|
if (val === null) val = undefined;
|
|
const params = { geoId: node.id, isIncluded: val };
|
|
await axios.post(`Zones/${route.params.id}/toggleIsIncluded`, params);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<QPage class="column items-center q-pa-md">
|
|
<QCard class="full-width q-pa-md" style="max-width: 800px">
|
|
<ZoneLocationsTree :root-label="t('zoneLocations.locations')">
|
|
<template #content="{ node }">
|
|
<span v-if="!node.id">{{ node.name }}</span>
|
|
<QCheckbox
|
|
v-if="node.id"
|
|
v-model="node.selected"
|
|
:label="node.name"
|
|
@update:model-value="($event) => onSelected($event, node)"
|
|
toggle-indeterminate
|
|
color="transparent"
|
|
:class="[
|
|
'checkbox',
|
|
node.selected
|
|
? '--checked'
|
|
: node.selected == false
|
|
? '--unchecked'
|
|
: '--indeterminate',
|
|
]"
|
|
/>
|
|
</template>
|
|
</ZoneLocationsTree>
|
|
</QCard>
|
|
</QPage>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.checkbox {
|
|
&.--checked {
|
|
.q-checkbox__bg {
|
|
border: 1px solid $info !important;
|
|
}
|
|
.q-checkbox__svg {
|
|
color: white !important;
|
|
background-color: $info !important;
|
|
}
|
|
}
|
|
|
|
&.--unchecked {
|
|
.q-checkbox__bg {
|
|
border: 1px solid $negative !important;
|
|
}
|
|
.q-checkbox__svg {
|
|
background-color: $negative !important;
|
|
}
|
|
}
|
|
|
|
&.--indeterminate {
|
|
.q-checkbox__bg {
|
|
border: 1px solid $white !important;
|
|
}
|
|
.q-checkbox__svg {
|
|
color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|