feat: improve grid validation (#508)

components/ModalTemplateAddEditGrid.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import type { GridWidget } from '@/types/grid'
 import type { SelectStringOption } from '@lukso/web-components'
 
 const { modal, closeModal } = useModal()
 const { formatMessage } = useIntl()
 const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
 const { addGrid, updateGrid } = useGrid()
 
-const INPUT_FOCUS_DELAY = 10 // small delay for focusing input after element render
 const DEFAULT_PROPERTIES = {
   title: '',
   gridColumns: GRID_COLUMNS_MIN,
@@ -72,8 +70,8 @@ const handleSave = () => {
       ...grid,
     })
   } else {
-    const newGrid: Grid<GridWidget> = {
-      id: createGridId<GridWidget>(grid, tempGrid.value),
+    const newGrid: Grid = {
+      id: createGridId(grid, tempGrid.value),
       ...grid,
       grid: [],
     }
@@ -90,14 +88,6 @@ watchEffect(() => {
 })
 
 onMounted(() => {
-  setTimeout(() => {
-    const input = document?.querySelector(
-      'lukso-input'
-    ) as unknown as HTMLElement
-
-    input?.shadowRoot?.querySelector('input')?.focus()
-  }, INPUT_FOCUS_DELAY)
-
   Object.assign(inputValues, modal?.data?.grid || DEFAULT_PROPERTIES)
 })
 </script>
@@ -131,7 +121,6 @@ onMounted(() => {
         :options="JSON.stringify(gridColumnsOptions)"
         :label="formatMessage('add_grid_columns_label')"
         is-full-width
-        autofocus
         @on-select="handleChangeColumnNumber"
       ></lukso-select>
     </div>

components/ModalTemplateMoveGridWidget.vue

@@ -72,7 +72,6 @@ onMounted(() => {
       :value="JSON.stringify(selectedOptionValue)"
       :options="JSON.stringify(options)"
       is-full-width
-      autofocus
       @on-select="handleChange"
     ></lukso-select>
 

domains/grid/components/AddWidget.vue

@@ -13,15 +13,15 @@ const props = defineProps<Props>()
 const component = shallowRef<Component | undefined>()
 
 const WIDGET_COMPONENTS: Record<string, string> = {
-  [GRID_WIDGET_TYPE.TEXT]: 'Text',
-  [GRID_WIDGET_TYPE.IMAGE]: 'Basic',
-  [GRID_WIDGET_TYPE.IFRAME]: 'Basic',
-  [GRID_WIDGET_TYPE.X]: 'GenericPlatform',
-  [GRID_WIDGET_TYPE.INSTAGRAM]: 'GenericPlatform',
-  [GRID_WIDGET_TYPE.SPOTIFY]: 'GenericPlatform',
-  [GRID_WIDGET_TYPE.SOUNDCLOUD]: 'GenericPlatform',
-  [GRID_WIDGET_TYPE.WARPCAST]: 'Basic',
-  [GRID_WIDGET_TYPE.YOUTUBE]: 'GenericPlatform',
+  [GRID_WIDGET_TYPE.enum.TEXT]: 'Text',
+  [GRID_WIDGET_TYPE.enum.IMAGE]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.IFRAME]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.X]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.INSTAGRAM]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.SPOTIFY]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.SOUNDCLOUD]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.WARPCAST]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.YOUTUBE]: 'Basic',
 }
 
 const loadComponent = (type?: string): Component | undefined => {

domains/grid/components/AddWidgetBasic.vue

@@ -12,68 +12,54 @@ const { formatMessage } = useIntl()
 const { closeModal, showModal } = useModal()
 const { addGridWidget, updateGridWidget, getGridById } = useGrid()
 const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
-
-const TEXTAREA_FOCUS_DELAY = 10 // small delay for focusing textarea after element render
-const inputValue = ref('')
-const inputError = ref('')
-
-const canSubmit = computed(() => inputValue.value && !inputError.value)
+const schema = WIDGET_SCHEMA_MAP[props.type]
 const isEdit = computed(() => !!props.id)
-
-const handleSave = () => {
+const {
+  inputValues,
+  canSubmit,
+  getFieldErrorMessage,
+  handleFieldChange,
+  handleFormErrors,
+} = useForm(schema, (await schema?.safeParseAsync(props.properties))?.data)
+
+const handleSave = async () => {
   if (!canSubmit.value) {
     return
   }
 
-  const properties = {
-    src: inputValue.value,
-  }
-
-  if (isEdit.value) {
-    updateGridWidget(props.id, {
-      properties,
-      w: props.width,
-      h: props.height,
-    })
-  } else {
-    const newWidget: GridWidgetWithoutCords = createWidgetObject({
-      type: props.type,
-      properties,
-      w: props.width,
-      h: props.height,
-    })
-
-    addGridWidget(newWidget, getGridById(tempGrid.value, selectedGridId.value))
+  try {
+    const properties = await schema?.parseAsync(inputValues.value)
+
+    if (isEdit.value) {
+      updateGridWidget(props.id, {
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+    } else {
+      const newWidget: GridWidgetWithoutCords = createWidgetObject({
+        type: props.type,
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+
+      addGridWidget(
+        newWidget,
+        getGridById(tempGrid.value, selectedGridId.value)
+      )
+    }
+
+    handleCancel()
+  } catch (error: unknown) {
+    handleFormErrors(error)
   }
-
-  handleCancel()
 }
 
 const handleCancel = () => {
   closeModal()
 }
 
-const handleInput = async (customEvent: CustomEvent) => {
-  const event = customEvent.detail.event
-  const input = event.target as HTMLInputElement
-  inputError.value = ''
-
-  // if no value is entered we just exit here
-  if (!input.value) {
-    return
-  }
-
-  // validation
-  try {
-    new URL(input.value)
-    inputValue.value = encodeURI(input.value)
-  } catch (error) {
-    console.warn(error)
-    inputError.value = formatMessage('errors_invalid_url')
-    return
-  }
-}
-
 const handleBackToSelection = () => {
   showModal({
     template: 'AddGridWidget',
@@ -83,18 +69,6 @@ const handleBackToSelection = () => {
     },
   })
 }
-
-onMounted(() => {
-  setTimeout(() => {
-    const textarea = document?.querySelector(
-      'lukso-textarea'
-    ) as unknown as HTMLElement
-
-    textarea?.shadowRoot?.querySelector('textarea')?.focus()
-  }, TEXTAREA_FOCUS_DELAY)
-
-  inputValue.value = props.properties?.src || ''
-})
 </script>
 
 <template>
@@ -122,16 +96,18 @@ onMounted(() => {
       }}
     </div>
 
-    <!-- Input -->
+    <!-- Content -->
     <lukso-textarea
       is-full-width
       autofocus
       :placeholder="
         formatMessage(`add_widget_${type.toLowerCase()}_input_placeholder`)
       "
-      :value="inputValue"
-      :error="inputError"
-      @on-input="handleInput"
+      :value="inputValues.src"
+      :error="getFieldErrorMessage('src')"
+      @on-input="
+        (customEvent: CustomEvent) => handleFieldChange(customEvent, 'src')
+      "
     ></lukso-textarea>
 
     <!-- Buttons -->