Zone tree abstraction

src/pages/Zone/Card/ZoneLocations.vue

@@ -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>

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -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
+                <slot name="checkbox" :node="node" />
-                    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',
-                    ]"
-                />
             </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>