Διόρθωση ελέγχων για την εμφάνιση ή όχι πεδίων

DSE-Western-Thessaloniki · Aug 1, 2024 · cf92999 · cf92999
1 parent 2b7db88
commit cf92999
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 56 deletions.
diff --git a/resources/ts/components/FormFieldAdvancedOptions.vue b/resources/ts/components/FormFieldAdvancedOptions.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {
     FieldType,
-    FormFieldOptions,
-    FormFieldOptionsShowCriteria,
+    type FormFieldOptions,
+    type FormFieldOptionsShowCriteria,
 } from "@/fieldtype";
-import { Ref, computed, ref } from "vue";
+import { type Ref, computed, ref } from "vue";
 
 const props = defineProps<{
     id: number;
@@ -26,6 +26,7 @@ const parseAdvancedOptionsCriteria = () => {
                     active_field: criteria.active_field ?? "",
                     operator: criteria.operator ?? "and",
                     value: criteria.value ?? "",
+                    value_is: criteria.value_is ?? "",
                 };
             })
         );
@@ -37,6 +38,7 @@ const parseAdvancedOptionsCriteria = () => {
                 active_field: string;
                 operator: string;
                 value: string;
+                value_is: string;
             }[]
         >([
             {
@@ -45,6 +47,7 @@ const parseAdvancedOptionsCriteria = () => {
                 active_field: "",
                 operator: "",
                 value: "",
+                value_is: "",
             },
         ]);
     }
@@ -57,6 +60,7 @@ const advancedOptionsCriteria: Ref<
         active_field: string;
         operator: string;
         value: string;
+        value_is: string;
     }[]
 > = parseAdvancedOptionsCriteria();
 
@@ -68,6 +72,7 @@ const addAdvancedOptionsCriteria = () => {
         active_field: "",
         operator: "",
         value: "",
+        value_is: "",
     });
 };
 
@@ -375,7 +380,7 @@ const advancedTarget = computed(function () {
                             >
                                 <option
                                     v-for="field in fields"
-                                    :value="`f${field.id}`"
+                                    :value="`${field.id}`"
                                     :key="field.id"
                                 >
                                     {{ field.title }}
@@ -397,9 +402,9 @@ const advancedTarget = computed(function () {
                                         field_id +
                                         '][options][show_when][' +
                                         option.id +
-                                        '][operator]'
+                                        '][value_is]'
                                     "
-                                    v-model="option.operator"
+                                    v-model="option.value_is"
                                 >
                                     <option value="gt">μεγαλύτερη από</option>
                                     <option value="ge">

diff --git a/resources/ts/components/composables/useOptions.ts b/resources/ts/components/composables/useOptions.ts
@@ -1,10 +1,11 @@
-import type {
-    FormFieldOptions,
-    FormFieldOptionsShowCriteria,
+import {
+    FieldType,
+    type FormFieldOptions,
+    type FormFieldOptionsShowCriteria,
 } from "@/fieldtype";
 import { useFormStore } from "@/stores/formStore";
 import type { Store } from "pinia";
-import { type Ref, ref } from "vue";
+import { nextTick, type Ref, ref, watch } from "vue";
 
 function isUppercase(value: string) {
     const result = value.toUpperCase() === value;
@@ -61,18 +62,22 @@ function matchesLength(maxLength: string, value: string) {
     return { result, errorMsg };
 }
 
+function isPositive(value: string) {
+    const result = Number.parseInt(value) >= 0;
+    let errorMsg = "";
+    if (!result) {
+        errorMsg = `Η τιμή του πεδίου πρέπει να είναι θετική`;
+    }
+    return { result, errorMsg };
+}
+
 export class useOptionsObject {
     readonly valueChecks: Array<
         (value: string) => { result: boolean; errorMsg: string }
     > = [];
     readonly showWhenCriteria: Array<FormFieldOptionsShowCriteria> = [];
     readonly fieldVisible: Ref<boolean>;
-    readonly formStore: Store<
-        "formStore",
-        {
-            field: Record<string, string | null>;
-        }
-    >;
+    readonly formStore: ReturnType<typeof useFormStore>;
 
     constructor(
         valueChecks: Array<
@@ -88,13 +93,8 @@ export class useOptionsObject {
 
         if (withWatchers) {
             this.addWatchers();
+            this.fieldVisible.value = this.isVisible();
         }
-
-        // Πρόσθεσε hooks στα events των πεδίων που απαιτείται να παρακολουθούμε
-        // window.addEventListener("load", () => {
-        //     this.addHooks();
-        //     this.fieldVisible.value = this.isVisible();
-        // });
     }
 
     /**
@@ -134,15 +134,23 @@ export class useOptionsObject {
             }
 
             if (criteria.visible === "when_field_is_active") {
-                if (criteria.active_field === undefined) {
+                if (typeof criteria.active_field === "undefined") {
                     console.warn(
                         "Δεν βρέθηκε όνομα για το ενεργό πεδίο. Το πεδίο δεν θα εμφανιστεί."
                     );
                     return false;
                 }
 
-                const active_field_value =
+                let active_field_value =
                     this.formStore.field[criteria.active_field];
+                if (
+                    this.formStore.fieldType[criteria.active_field] ===
+                    FieldType.CheckBoxes
+                ) {
+                    active_field_value = JSON.parse(
+                        active_field_value ?? "[]"
+                    ).length;
+                }
 
                 if (active_field_value === null) {
                     console.warn(
@@ -154,14 +162,14 @@ export class useOptionsObject {
             }
 
             if (criteria.visible === "when_value") {
-                if (criteria.active_field === undefined) {
+                if (typeof criteria.active_field === "undefined") {
                     console.warn(
                         "Δεν βρέθηκε τιμή για το ενεργό πεδίο. Το πεδίο δεν θα εμφανιστεί."
                     );
                     return false;
                 }
 
-                if (criteria.value_is === undefined) {
+                if (typeof criteria.value_is === "undefined") {
                     console.warn(
                         "Δεν βρέθηκε τελεστής για το κριτήριο εμφάνισης. Το πεδίο δεν θα εμφανιστεί."
                     );
@@ -215,13 +223,13 @@ export class useOptionsObject {
             (previous, current, index) => {
                 const criteria = this.showWhenCriteria[index];
 
-                if (criteria.operator === "and") {
+                if (index === 0 || criteria.operator === "and") {
                     return previous && current;
                 } else if (criteria.operator === "or") {
                     return previous || current;
                 } else {
                     console.warn(
-                        "Άκυρος τελεστής για το κριτήριο εμφάνισης. Το πεδίο δεν θα εμφανιστεί."
+                        `Άκυρος τελεστής για το κριτήριο εμφάνισης '${index}' (${criteria.operator}). Το πεδίο δεν θα εμφανιστεί.`
                     );
                     return false;
                 }
@@ -232,36 +240,23 @@ export class useOptionsObject {
         return this.fieldVisible.value;
     }
 
-    private addWatchers(this: useOptionsObject) {}
-
-    /**
-     * Πρόσθεσε hooks στα events των πεδίων που απαιτείται να παρακολουθούμε
-     */
-    private addHooks() {
+    private addWatchers(this: useOptionsObject) {
         this.showWhenCriteria.forEach((criteria) => {
             if (criteria.visible === "always") {
                 return;
             }
 
-            if (criteria.active_field === undefined) {
-                console.warn(
-                    "Δεν βρέθηκε τιμή για το ενεργό πεδίο. Το πεδίο δεν θα εμφανιστεί."
-                );
-                return;
-            }
-
-            const input = document.querySelector(
-                `[name='${criteria.active_field}']`
+            watch(
+                this.formStore.field,
+                () => {
+                    nextTick(() => {
+                        this.isVisible();
+                    });
+                },
+                {
+                    deep: true,
+                }
             );
-
-            if (input === null) {
-                console.warn(
-                    `Δεν βρέθηκε το πεδίο ${criteria.active_field}. Το πεδίο δεν θα εμφανιστεί.`
-                );
-                return;
-            }
-
-            input.addEventListener("change", (event) => this.isVisible());
         });
     }
 }
@@ -297,6 +292,10 @@ export function useOptions(
         valueChecks.push(matchesLength.bind(null, options.field_width));
     }
 
+    if (options?.positive) {
+        valueChecks.push(isPositive);
+    }
+
     if (options?.show_when && options?.show_when.length > 0) {
         showWhenChecks = options.show_when;
     }

diff --git a/resources/ts/components/frontend/form/FieldGroup.vue b/resources/ts/components/frontend/form/FieldGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FieldType, FormFieldOptions } from "@/fieldtype";
+import { FieldType, type FormFieldOptions } from "@/fieldtype";
 import Field from "./Field.vue";
 import { useOptions } from "@/components/composables/useOptions";
 
@@ -13,11 +13,15 @@ const props = defineProps<{
 
 const fieldOptions: FormFieldOptions = JSON.parse(props.field.options);
 
-const options = useOptions(fieldOptions);
+const options = useOptions(fieldOptions, true);
 </script>
 
 <template>
-    <div class="form-group row mb-3" :name="`f${field.id}-group`">
+    <div
+        class="form-group row mb-3"
+        :name="`f${field.id}-group`"
+        v-if="options.fieldVisible.value"
+    >
         <label :for="`f${field.id}`" class="col-md-3 col-form-label">
             {{ field.title }}
             <span v-if="field.required" class="text-danger">*</span>

diff --git a/resources/ts/components/frontend/form/VForm.vue b/resources/ts/components/frontend/form/VForm.vue
@@ -45,6 +45,19 @@ const formStore = useFormStore();
 Object.entries(field_values).forEach(([key, value]) => {
     formStore.field[key] = value;
 });
+
+// Πέρασε και τους τύπους για επιπλέον ελέγχους
+const field_types = props.form.form_fields
+    .map((field) => {
+        return {
+            [field.id]: field.type,
+        };
+    })
+    .reduce((a, b) => ({ ...a, ...b }), {});
+
+Object.entries(field_types).forEach(([key, value]) => {
+    formStore.fieldType[key] = value;
+});
 </script>
 
 <template>

diff --git a/resources/ts/stores/formStore.ts b/resources/ts/stores/formStore.ts
@@ -1,7 +1,11 @@
+import type { FieldType } from "@/fieldtype";
 import { defineStore } from "pinia";
 
 export const useFormStore = defineStore("formStore", {
     state: () => {
-        return { field: {} as Record<string, string | null> };
+        return {
+            field: {} as Record<string, string | null>,
+            fieldType: {} as Record<string, FieldType>,
+        };
     },
 });