chore: refactor data management pages (#7107)

frontend/components/global/AutoForm.vue

@@ -1,211 +1,136 @@
 <template>
-  <v-card
-    :color="color"
-    :dark="dark"
-    flat
-    :width="width"
-    class="my-2"
-  >
-    <v-row>
-      <v-col
-        v-for="(inputField, index) in items"
-        :key="index"
-        cols="12"
-        sm="12"
-      >
-        <v-divider
-          v-if="inputField.section"
-          class="my-2"
-        />
-        <v-card-title
-          v-if="inputField.section"
-          class="pl-0"
+  <v-form v-model="isValid" validate-on="input">
+    <v-card
+      :color="color"
+      :dark="dark"
+      flat
+      :width="width"
+      class="my-2"
+    >
+      <v-row>
+        <v-col
+          v-for="(inputField, index) in items"
+          :key="index"
+          cols="12"
+          sm="12"
         >
-          {{ inputField.section }}
-        </v-card-title>
-        <v-card-text
-          v-if="inputField.sectionDetails"
-          class="pl-0 mt-0 pt-0"
-        >
-          {{ inputField.sectionDetails }}
-        </v-card-text>
-
-        <!-- Check Box -->
-        <v-checkbox
-          v-if="inputField.type === fieldTypes.BOOLEAN"
-          v-model="model[inputField.varName]"
-          :name="inputField.varName"
-          :readonly="fieldState[inputField.varName]?.readonly"
-          :disabled="fieldState[inputField.varName]?.disabled"
-          :hint="inputField.hint"
-          :hide-details="!inputField.hint"
-          :persistent-hint="!!inputField.hint"
-          density="comfortable"
-          @change="emitBlur"
-        >
-          <template #label>
-            <span class="ml-4">
-              {{ inputField.label }}
-            </span>
-          </template>
-        </v-checkbox>
-
-        <!-- Text Field -->
-        <v-text-field
-          v-else-if="inputField.type === fieldTypes.TEXT || inputField.type === fieldTypes.PASSWORD"
-          v-model="model[inputField.varName]"
-          :readonly="fieldState[inputField.varName]?.readonly"
-          :disabled="fieldState[inputField.varName]?.disabled"
-          :type="inputField.type === fieldTypes.PASSWORD ? 'password' : 'text'"
-          variant="solo-filled"
-          flat
-          :autofocus="index === 0"
-          density="comfortable"
-          :label="inputField.label"
-          :name="inputField.varName"
-          :hint="inputField.hint || ''"
-          :rules="!(inputField.disableUpdate && updateMode) ? [...rulesByKey(inputField.rules as any), ...defaultRules] : []"
-          lazy-validation
-          @blur="emitBlur"
-        />
-
-        <!-- Text Area -->
-        <v-textarea
-          v-else-if="inputField.type === fieldTypes.TEXT_AREA"
-          v-model="model[inputField.varName]"
-          :readonly="fieldState[inputField.varName]?.readonly"
-          :disabled="fieldState[inputField.varName]?.disabled"
-          variant="solo-filled"
-          flat
-          rows="3"
-          auto-grow
-          density="comfortable"
-          :label="inputField.label"
-          :name="inputField.varName"
-          :hint="inputField.hint || ''"
-          :rules="[...rulesByKey(inputField.rules as any), ...defaultRules]"
-          lazy-validation
-          @blur="emitBlur"
-        />
-
-        <!-- Option Select -->
-        <v-select
-          v-else-if="inputField.type === fieldTypes.SELECT"
-          v-model="model[inputField.varName]"
-          :readonly="fieldState[inputField.varName]?.readonly"
-          :disabled="fieldState[inputField.varName]?.disabled"
-          variant="solo-filled"
-          flat
-          :label="inputField.label"
-          :name="inputField.varName"
-          :items="inputField.options"
-          item-title="text"
-          item-value="text"
-          :return-object="false"
-          :hint="inputField.hint"
-          density="comfortable"
-          persistent-hint
-          lazy-validation
-          @blur="emitBlur"
-        />
-
-        <!-- Color Picker -->
-        <div
-          v-else-if="inputField.type === fieldTypes.COLOR"
-          class="d-flex"
-          style="width: 100%"
-        >
-          <v-menu offset-y>
-            <template #activator="{ props: templateProps }">
-              <v-btn
-                class="my-2 ml-auto"
-                style="min-width: 200px"
-                :color="model[inputField.varName]"
-                dark
-                v-bind="templateProps"
-              >
-                {{ inputField.label }}
-              </v-btn>
-            </template>
-            <v-color-picker
-              v-model="model[inputField.varName]"
-              value="#7417BE"
-              hide-canvas
-              hide-inputs
-              show-swatches
-              class="mx-auto"
-              @input="emitBlur"
-            />
-          </v-menu>
-        </div>
-
-        <!-- Object Type -->
-        <div v-else-if="inputField.type === fieldTypes.OBJECT">
-          <auto-form
-            v-model="model[inputField.varName]"
-            :color="color"
-            :items="(inputField as any).items"
-            @blur="emitBlur"
+          <v-divider
+            v-if="inputField.section"
+            class="my-2"
           />
-        </div>
-
-        <!-- List Type -->
-        <div v-else-if="inputField.type === fieldTypes.LIST">
-          <div
-            v-for="(item, idx) in model[inputField.varName]"
-            :key="idx"
+          <v-card-title
+            v-if="inputField.section"
+            class="pl-0"
           >
-            <p>
-              {{ inputField.label }} {{ idx + 1 }}
-              <span>
-                <BaseButton
-                  class="ml-5"
-                  x-small
-                  delete
-                  @click="removeByIndex(model[inputField.varName], idx)"
-                />
+            {{ inputField.section }}
+          </v-card-title>
+          <v-card-text
+            v-if="inputField.sectionDetails"
+            class="pl-0 mt-0 pt-0"
+          >
+            {{ inputField.sectionDetails }}
+          </v-card-text>
+
+          <!-- Check Box -->
+          <v-checkbox
+            v-if="inputField.type === fieldTypes.BOOLEAN"
+            v-model="model[inputField.varName]"
+            :name="inputField.varName"
+            :readonly="fieldState[inputField.varName]?.readonly"
+            :disabled="fieldState[inputField.varName]?.disabled"
+            :hint="inputField.hint"
+            :hide-details="!inputField.hint"
+            :persistent-hint="!!inputField.hint"
+            density="comfortable"
+            validate-on="input"
+          >
+            <template #label>
+              <span class="ml-4">
+                {{ inputField.label }}
               </span>
-            </p>
-            <v-divider class="mb-5 mx-2" />
-            <auto-form
-              v-model="model[inputField.varName][idx]"
-              :color="color"
-              :items="(inputField as any).items"
-              @blur="emitBlur"
-            />
+            </template>
+          </v-checkbox>
+
+          <!-- Text Field -->
+          <v-text-field
+            v-else-if="inputField.type === fieldTypes.TEXT || inputField.type === fieldTypes.PASSWORD"
+            v-model="model[inputField.varName]"
+            :readonly="fieldState[inputField.varName]?.readonly"
+            :disabled="fieldState[inputField.varName]?.disabled"
+            :type="inputField.type === fieldTypes.PASSWORD ? 'password' : 'text'"
+            variant="solo-filled"
+            flat
+            density="comfortable"
+            :label="inputField.label"
+            :name="inputField.varName"
+            :hint="inputField.hint || ''"
+            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+            validate-on="input"
+          />
+
+          <!-- Text Area -->
+          <v-textarea
+            v-else-if="inputField.type === fieldTypes.TEXT_AREA"
+            v-model="model[inputField.varName]"
+            :readonly="fieldState[inputField.varName]?.readonly"
+            :disabled="fieldState[inputField.varName]?.disabled"
+            variant="solo-filled"
+            flat
+            rows="3"
+            auto-grow
+            density="comfortable"
+            :label="inputField.label"
+            :name="inputField.varName"
+            :hint="inputField.hint || ''"
+            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+            validate-on="input"
+          />
+
+          <!-- Option Select -->
+          <v-select
+            v-else-if="inputField.type === fieldTypes.SELECT"
+            v-model="model[inputField.varName]"
+            :readonly="fieldState[inputField.varName]?.readonly"
+            :disabled="fieldState[inputField.varName]?.disabled"
+            variant="solo-filled"
+            flat
+            :label="inputField.label"
+            :name="inputField.varName"
+            :items="inputField.options"
+            item-title="text"
+            :item-value="inputField.selectReturnValue || 'text'"
+            :return-object="false"
+            :hint="inputField.hint"
+            density="comfortable"
+            persistent-hint
+            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+            validate-on="input"
+          />
+
+          <!-- Color Picker -->
+          <div
+            v-else-if="inputField.type === fieldTypes.COLOR"
+            class="d-flex"
+            style="width: 100%"
+          >
+            <InputColor v-model="model[inputField.varName]" />
           </div>
-          <v-card-actions>
-            <v-spacer />
-            <BaseButton
-              small
-              @click="model[inputField.varName].push(getTemplate((inputField as any).items))"
-            >
-              {{ $t("general.new") }}
-            </BaseButton>
-          </v-card-actions>
-        </div>
-      </v-col>
-    </v-row>
-  </v-card>
+        </v-col>
+      </v-row>
+    </v-card>
+  </v-form>
 </template>
 
 <script lang="ts" setup>
-import { validators } from "@/composables/use-validators";
 import { fieldTypes } from "@/composables/forms";
 import type { AutoFormItems } from "~/types/auto-forms";
 
-const BLUR_EVENT = "blur";
-
-type ValidatorKey = keyof typeof validators;
-
 // Use defineModel for v-model
-const modelValue = defineModel<Record<string, any> | any[]>({
+const model = defineModel<Record<string, any> | any[]>({
   type: [Object, Array],
   required: true,
 });
-
-// alias to avoid template TS complaining about possible undefined
-const model = modelValue as any;
+const isValid = defineModel("isValid", { type: Boolean, default: false });
 
 const props = defineProps({
   updateMode: {
@@ -220,10 +145,6 @@ const props = defineProps({
     type: [Number, String],
     default: "max",
   },
-  globalRules: {
-    default: null,
-    type: Array as () => string[],
-  },
   color: {
     default: null,
     type: String,
@@ -242,31 +163,6 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["blur", "update:modelValue"]);
-
-function rulesByKey(keys?: ValidatorKey[] | null) {
-  if (keys === undefined || keys === null) {
-    return [] as any[];
-  }
-
-  const list: any[] = [];
-  keys.forEach((key) => {
-    const split = key.split(":");
-    const validatorKey = split[0] as ValidatorKey;
-    if (validatorKey in validators) {
-      if (split.length === 1) {
-        list.push((validators as any)[validatorKey]);
-      }
-      else {
-        list.push((validators as any)[validatorKey](split[1] as any));
-      }
-    }
-  });
-  return list;
-}
-
-const defaultRules = computed<any[]>(() => rulesByKey(props.globalRules as any));
-
 // Combined state map for readonly and disabled fields
 const fieldState = computed<Record<string, { readonly: boolean; disabled: boolean }>>(() => {
   const map: Record<string, { readonly: boolean; disabled: boolean }> = {};
@@ -279,25 +175,6 @@ const fieldState = computed<Record<string, { readonly: boolean; disabled: boolea
   });
   return map;
 });
-
-function removeByIndex(list: never[], index: number) {
-  // Removes the item at the index
-  list.splice(index, 1);
-}
-
-function getTemplate(item: AutoFormItems) {
-  const obj = {} as { [key: string]: string };
-
-  item.forEach((field) => {
-    obj[field.varName] = "";
-  });
-
-  return obj;
-}
-
-function emitBlur() {
-  emit(BLUR_EVENT, modelValue.value);
-}
 </script>
 
 <style lang="scss" scoped></style>