most model editors present

vue3/src/components/model_editors/AutomationEditor.vue

@@ -0,0 +1,77 @@
+<template>
+    <model-editor-base
+        :loading="loading"
+        :dialog="dialog"
+        @save="saveObject"
+        @delete="deleteObject"
+        @close="emit('close')"
+        :is-update="isUpdate()"
+        :model-class="modelClass"
+        :object-name="editingObjName()">
+        <v-card-text>
+            <v-form :disabled="loading">
+
+                <v-text-field :label="$t('Name')" v-model="editingObj.name"></v-text-field>
+                <v-select :label="$t('Type')" :items="AUTOMATION_TYPES" v-model="editingObj.type"></v-select>
+
+                <v-text-field :label="$t('Parameter') + ' 1'" v-model="editingObj.param1"></v-text-field>
+                <v-text-field :label="$t('Parameter') + ' 2'" v-model="editingObj.param2"></v-text-field>
+                <v-text-field :label="$t('Parameter') + ' 3'" v-model="editingObj.param3"></v-text-field>
+
+                <v-textarea :label="$t('Description')" v-model="editingObj.description"></v-textarea>
+                <v-number-input :label="$t('Order')" :step="10" v-model="editingObj.order" :hint="$t('OrderInformation')" control-variant="stacked"></v-number-input>
+                <v-checkbox :label="$t('Disabled')" v-model="editingObj.disabled"></v-checkbox>
+
+            </v-form>
+        </v-card-text>
+    </model-editor-base>
+
+</template>
+
+<script setup lang="ts">
+
+import {onMounted, PropType} from "vue";
+import {Automation} from "@/openapi";
+import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
+import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
+import {useI18n} from "vue-i18n";
+import {VNumberInput} from "vuetify/labs/VNumberInput";
+
+const {t} = useI18n()
+
+const props = defineProps({
+    item: {type: {} as PropType<Automation>, required: false, default: null},
+    itemId: {type: [Number, String], required: false, default: undefined},
+    dialog: {type: Boolean, default: false}
+})
+
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Automation>('Automation', emit)
+
+// object specific data (for selects/display)
+
+const AUTOMATION_TYPES = [
+  { value: "FOOD_ALIAS", title: t("Food_Alias") },
+  { value: "UNIT_ALIAS", title: t("Unit_Alias") },
+  { value: "KEYWORD_ALIAS", title: t("Keyword_Alias") },
+  { value: "NAME_REPLACE", title: t("Name_Replace") },
+  { value: "DESCRIPTION_REPLACE", title: t("Description_Replace") },
+  { value: "INSTRUCTION_REPLACE", title: t("Instruction_Replace") },
+  { value: "FOOD_REPLACE", title: t("Food_Replace") },
+  { value: "UNIT_REPLACE", title: t("Unit_Replace") },
+  { value: "NEVER_UNIT", title: t("Never_Unit") },
+  { value: "TRANSPOSE_WORDS", title: t("Transpose_Words") }
+]
+
+onMounted(() => {
+    if (!setupState(props.item, props.itemId)) {
+        // functions to populate defaults
+        editingObj.value.order = 0
+    }
+})
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/model_editors/PropertyTypeEditor.vue

@@ -0,0 +1,57 @@
+<template>
+    <model-editor-base
+        :loading="loading"
+        :dialog="dialog"
+        @save="saveObject"
+        @delete="deleteObject"
+        @close="emit('close')"
+        :is-update="isUpdate()"
+        :model-class="modelClass"
+        :object-name="editingObjName()">
+        <v-card-text>
+            <v-form :disabled="loading">
+
+                <v-text-field :label="$t('Name')" v-model="editingObj.name"></v-text-field>
+                <v-textarea :label="$t('Description')" v-model="editingObj.description"></v-textarea>
+                <v-text-field :label="$t('Unit')" v-model="editingObj.unit"></v-text-field>
+                <v-text-field :label="$t('FDC_ID')" :hint="$t('property_type_fdc_hint')" v-model="editingObj.fdcId"></v-text-field>
+                <v-number-input :label="$t('Order')" :step="10" v-model="editingObj.order" :hint="$t('OrderInformation')" control-variant="stacked"></v-number-input>
+                <v-text-field :label="$t('Open_Data_Slug')" :hint="$t('open_data_help_text')" persistent-hint v-model="editingObj.openDataSlug" disabled></v-text-field>
+
+            </v-form>
+        </v-card-text>
+    </model-editor-base>
+
+</template>
+
+<script setup lang="ts">
+
+import {onMounted, PropType} from "vue";
+import {PropertyType} from "@/openapi";
+import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
+import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
+import {VNumberInput} from "vuetify/labs/VNumberInput";
+
+const props = defineProps({
+    item: {type: {} as PropType<PropertyType>, required: false, default: null},
+    itemId: {type: [Number, String], required: false, default: undefined},
+    dialog: {type: Boolean, default: false}
+})
+
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<PropertyType>('PropertyType', emit)
+
+// object specific data (for selects/display)
+
+onMounted(() => {
+    if (!setupState(props.item, props.itemId)) {
+        // functions to populate defaults
+
+    }
+})
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/model_editors/SupermarketEditor.vue

@@ -24,7 +24,54 @@
                     </v-form>
                 </v-tabs-window-item>
 
-                <v-tabs-window-item value="supermarket">
+                <v-tabs-window-item value="categories">
+                    <v-row>
+                        <v-col cols="0" md="6">
+                            <h3>{{ $t('AvailableCategories') }}
+                                <v-btn class="float-right" color="create" prepend-icon="$create">{{ $t('New') }}
+                                    <model-edit-dialog model="SupermarketCategory" @create="args => supermarketCategories.push(args)"></model-edit-dialog>
+                                </v-btn>
+                            </h3>
+
+                            <draggable class="mt-4" tag="VList" v-model="supermarketCategories" handle=".drag-handle" item-key="id" group="categories">
+                                <template #item="{element}">
+                                    <v-list-item border :key="element.id">
+                                        <template #prepend>
+                                            <v-icon class="drag-handle cursor-grab" icon="$dragHandle"></v-icon>
+                                        </template>
+                                        {{ element.name }}
+                                    </v-list-item>
+                                </template>
+                            </draggable>
+
+                        </v-col>
+                        <v-col cols="12" md="6">
+                            <h3> {{ $t('SelectedCategories') }} </h3>
+                            <draggable
+                                tag="VList"
+                                v-model="editingObj.categoryToSupermarket"
+                                handle=".drag-handle" item-key="id" group="categories"
+                                 >
+                                <template #item="{element}">
+                                    <v-list-item border :key="element.id">
+                                        <template #prepend>
+                                            <v-icon class="drag-handle" icon="$dragHandle"></v-icon>
+                                        </template>
+                                        {{ element.category.name }}
+                                        {{ element.order }}
+                                        <template #append>
+                                            <v-btn color="warning">
+                                                <i class="fa-solid fa-link-slash"></i>
+                                            </v-btn>
+                                        </template>
+                                    </v-list-item>
+                                </template>
+                            </draggable>
+                            <v-list class="mt-4">
+
+                            </v-list>
+                        </v-col>
+                    </v-row>
 
 
                 </v-tabs-window-item>
@@ -38,9 +85,11 @@
 <script setup lang="ts">
 
 import {onMounted, PropType, ref} from "vue";
-import {Supermarket} from "@/openapi";
+import {ApiApi, Supermarket, SupermarketCategory} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
+import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
+import draggable from "vuedraggable";
 
 const props = defineProps({
     item: {type: {} as PropType<Supermarket>, required: false, default: null},
@@ -52,13 +101,20 @@ const emit = defineEmits(['create', 'save', 'delete', 'close'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<Supermarket>('Supermarket', emit)
 
 // object specific data (for selects/display)
-const tab = ref("supermarket")
+const tab = ref("categories")
+
+const supermarketCategories = ref([] as SupermarketCategory[])
 
 onMounted(() => {
+    const api = new ApiApi()
+
     if (!setupState(props.item, props.itemId)) {
         // functions to populate defaults
-
     }
+
+    api.apiSupermarketCategoryList({pageSize: 100}).then(r => {
+        supermarketCategories.value = r.results
+    })
 })
 
 </script>