verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 62 Releases Wiki Activity

Zone tree abstraction

This commit is contained in:
William Buezas 2024-05-27 08:29:24 -03:00
parent d9e6baf7e3
commit c304c68c9e
2 changed files with 71 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/Zone/Card/ZoneLocations.vue
View File

@ -1,11 +1,80 @@
<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) => {
try {
if (val === null) val = undefined;
const params = { geoId: node.id, isIncluded: val };
await axios.post(`Zones/${route.params.id}/toggleIsIncluded`, params);
} catch (err) {
console.error('Error updating included', err);
}
};
</script>
<template>
<QPage class="column items-center q-pa-md">
<QCard class="full-width q-pa-md" style="max-width: 800px">
<ZoneLocationsTree />
<ZoneLocationsTree :root-label="t('zoneLocations.locations')">
<template #checkbox="{ node }">
<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>

49
src/pages/Zone/Card/ZoneLocationsTree.vue
View File

@ -159,55 +159,8 @@ onMounted(async () => {
class="qtr row justify-between full-width q-pr-md cursor-pointer"
>
<span v-if="!node.id">{{ node.name }}</span>
<QCheckbox
v-else
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',
]"
/>
<slot name="checkbox" :node="node" />
</div>
</template>
</QTree>
</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>