adminforth 1.3.54-next.9 → 1.3.55-next.2

package/dist/spa/src/components/ResourceForm.vue

@@ -6,21 +6,20 @@
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 ">
           <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 block md:table-row-group">
-              <tr>
-                  <th scope="col" class="px-6 py-3 hidden md:table-cell">
-                      Field
-                  </th>
-                  <th scope="col" class="px-6 py-3 w-5/6 hidden md:table-cell">
-                      Value
-                  </th>
-
-                 
-              </tr>
+            <tr>
+              <th scope="col" class="px-6 py-3 hidden md:table-cell">
+                  Field
+              </th>
+              <th scope="col" class="px-6 py-3 w-5/6 hidden md:table-cell">
+                  Value
+              </th>
+            </tr>
           </thead>
           <tbody>
               <tr v-for="column, i in editableColumns" :key="column.name"
                   v-if="currentValues !== null"
-                  class="bg-ligftForm dark:bg-gray-800 border-b dark:border-gray-700 block md:table-row"
+                  class="bg-ligftForm dark:bg-gray-800 dark:border-gray-700 block md:table-row"
+                  :class="{ 'border-b': i !== editableColumns.length - 1 }"
               >
                     <td class="px-6 py-4 sm:pb-0 whitespace-nowrap flex items-center block md:table-cell"> <!--align-top-->
                       {{ column.label }}
@@ -105,6 +104,14 @@
                           @input="setCurrentValue(column.name, $event.target.value)"
                       >
                       </textarea>
+                      <textarea
+                          v-else-if="['json'].includes(column.type)"
+                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                          placeholder="Text"
+                          :value="currentValues[column.name]"
+                          @input="setCurrentValue(column.name, $event.target.value)"
+                      >
+                      </textarea>
                       <input
                           v-else
                           :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
@@ -129,7 +136,6 @@
                       </button>
                     </template>
                     <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
-
                     <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
 
                 </td>
@@ -147,18 +153,16 @@
 
 import CustomDatePicker from "@/components/CustomDatePicker.vue";
 import Dropdown from '@/components/Dropdown.vue';
-import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent } from '@/utils';
+import { applyRegexValidation, callAdminForthApi, getCustomComponent } from '@/utils';
 import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
 import { computedAsync } from '@vueuse/core';
 import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 
 const router = useRouter();
-
+const route = useRoute();
 const props = defineProps({
-  loading: Boolean,
   resource: Object,
   record: Object,
   validating: Boolean,
@@ -167,7 +171,7 @@ const props = defineProps({
 
 const unmasked = ref({});
 
-const mode = computed(() => props.record  && Object.keys(props.record).length ? 'edit' : 'create');
+const mode = computed(() => route.name === 'resource-create' ? 'create' : 'edit');
 
 const emit = defineEmits(['update:record', 'update:isValid']);
 
@@ -175,7 +179,7 @@ const currentValues = ref(null);
 
 const customComponentsInValidity = ref({});
 const customComponentsEmptiness = ref({});
-
+  
 
 const columnError = (column) => {
   const val = computed(() => {
@@ -196,11 +200,24 @@ const columnError = (column) => {
     ) {
       return 'This field is required';
     }
+    if (column.type === 'json' && currentValues.value[column.name]) {
+      try {
+        JSON.parse(currentValues.value[column.name]);
+      } catch (e) {
+        return 'Invalid JSON';
+      }
+    }
     if ( column.type === 'string' || column.type === 'text' ) {
       if ( column.maxLength && currentValues.value[column.name]?.length > column.maxLength ) {
         return `This field must be shorter than ${column.maxLength} characters`;
       }
+      
       if ( column.minLength && currentValues.value[column.name]?.length < column.minLength ) {
+        // if column.required[mode.value] is false, then we check if the field is empty
+        let needToCheckEmpty = column.required[mode.value] || currentValues.value[column.name]?.length > 0;
+        if (!needToCheckEmpty) {
+          return null;
+        }
         return `This field must be longer than ${column.minLength} characters`;
       }
     }
@@ -215,22 +232,13 @@ const columnError = (column) => {
         return `This field must be less than ${column.maxValue}`;
       }
     }
-    if ( column.validation && column.validation.length ) {
-      const validationArray = column.validation;
-      for (let i = 0; i < validationArray.length; i++) {
-        if (validationArray[i].regExp) {
-          const regExp = new RegExp(validationArray[i].regExp);
-          let value = currentValues.value[column.name];
-          if (value === undefined || value === null) {
-            value = '';
-          }
-          if (!regExp.test(value)) {
-            return validationArray[i].message;
-          }
-        }
+    if (currentValues.value[column.name] && column.validation) {
+      const error = applyRegexValidation(currentValues.value[column.name], column.validation);
+      if (error) {
+        return error;
       }
-
     }
+
     return null;
   });
   return val.value;
@@ -244,14 +252,37 @@ const setCurrentValue = (key, value) => {
   } else {
     currentValues.value[key] = value;
   }
+  if (['text', 'richtext', 'string'].includes(col.type) && col.enforceLowerCase) {
+    currentValues.value[key] = currentValues.value[key].toLowerCase();
+  }
+
   currentValues.value = { ...currentValues.value };
-  console.log('3️⃣ setCurrentValue', key, value);
-  emit('update:record', currentValues.value);
+
+  //json fields should transform to object
+  const up = {...currentValues.value};
+  props.resource.columns.forEach((column) => {
+    if (column.type === 'json' && up[column.name]) {
+      try {
+        up[column.name] = JSON.parse(up[column.name]);
+      } catch (e) {
+        // do nothing
+      }
+    }
+  });
+  emit('update:record', up);
 };
 
 onMounted(() => {
+
   currentValues.value = Object.assign({}, props.record);
-  console.log('2️⃣ currentValues', JSON.stringify(currentValues.value));
+  // json values should transform to string
+  props.resource.columns.forEach((column) => {
+    if (column.type === 'json' && currentValues.value[column.name]) {
+      currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);
+    }
+  });
+  console.log('currentValues', currentValues.value);
+
   initFlowbite();
   emit('update:isValid', isValid.value);
 });