WIP: form validation

src/components/configurationForm.vue

@@ -1,82 +1,112 @@
 <script setup>
 import { reactive, ref } from 'vue'
+import {
+  DB_TYPE_WEB,
+  DB_TYPE_OLTP,
+  DB_TYPE_DW,
+  DB_TYPE_DESKTOP,
+  DB_TYPE_MIXED,
+  DB_VERSIONS,
+  OS_LINUX,
+  OS_MAC,
+  OS_WINDOWS,
+  SIZE_UNIT_TB,
+  SIZE_UNIT_GB,
+  SIZE_UNIT_MB,
+  HARD_DRIVE_SSD,
+  HARD_DRIVE_NVME,
+  HARD_DRIVE_SAN,
+  HARD_DRIVE_HDD,
+  DB_SIZE_LESS_RAM,
+  DB_SIZE_MID_RAM,
+  DB_SIZE_GREATER_RAM,
+} from '../utils/constants/configuration'
+import { validationSchema as schema } from '../utils/validation'
 
-const dbVersions = ref(['18', '17', '16', '15', '14', '13', '12', '11', '10'])
+const dbVersions = ref(DB_VERSIONS)
 
-const osTypes = ref(['Linux', 'Windows', 'OS X'])
+const osTypes = ref([OS_LINUX, OS_WINDOWS, OS_MAC])
 
 const dbTypes = ref([
-  'Web application',
+  DB_TYPE_WEB,
-  'Online transaction processing system',
+  DB_TYPE_OLTP,
-  'Data warehouse',
+  DB_TYPE_DW,
-  'Desktop application',
+  DB_TYPE_DESKTOP,
-  'Mixed type of application',
+  DB_TYPE_MIXED,
 ])
 
-const ramUnits = ref(['TB', 'GB', 'MB'])
+const ramUnits = ref([SIZE_UNIT_TB, SIZE_UNIT_GB, SIZE_UNIT_MB])
 
 const dataStorages = ref([
-  'NVME storage',
+  HARD_DRIVE_HDD,
-  'SSD storage',
+  HARD_DRIVE_SSD,
-  'Network (SAN) storage',
+  HARD_DRIVE_SAN,
-  'HDD storage',
+  HARD_DRIVE_NVME,
 ])
 
-const dataSizes = ref(['Less than RAM', 'RAM - 3xRAM', 'More than 3xRAM'])
+const dataSizes = ref([DB_SIZE_LESS_RAM, DB_SIZE_MID_RAM, DB_SIZE_GREATER_RAM])
 
 const state = reactive({
   dbVersion: 18,
-  osType: 'Linux',
+  osType: OS_LINUX,
-  dbType: 'Web application',
+  dbType: DB_TYPE_WEB,
-  totalRAM: undefined,
+  totalMemory: undefined,
-  ramUnit: 'GB',
+  totalMemoryUnit: SIZE_UNIT_GB,
-  totalCPUs: 1,
+  cpuNum: 1,
-  totalConnections: 100,
+  connectionNum: 100,
-  dataStorage: 'SSD storage',
+  hdType: HARD_DRIVE_NVME,
-  dataSize: 'Less than RAM',
+  dbSize: DB_SIZE_LESS_RAM,
 })
 </script>
 
 <template>
-  <UForm class="space-y-4" :state>
+  <UForm class="space-y-4" :state :schema>
     <UFormField
       label="DB version"
       help="PostgreSQL version (find out via 'SELECT version();')"
+      name="dbVersion"
     >
       <USelect v-model="state.dbVersion" :items="dbVersions" class="w-full" />
     </UFormField>
     <UFormField
       label="OS Type"
       help="Operation system of the PostgreSQL server host"
+      name="osType"
     >
       <USelect v-model="state.osType" :items="osTypes" class="w-full" />
     </UFormField>
     <UFormField
       label="DB type"
       help="What type of application is PostgreSQL used for"
+      name="dbType"
     >
       <USelect v-model="state.dbType" :items="dbTypes" class="w-full" />
     </UFormField>
+    <div class="flex items-start gap-4">
       <UFormField
         label="Total memory (RAM)"
         help="How much memory can PostgreSQL use"
         required
-    >
+        name="totalMemory"
-      <div class="flex items-center gap-4">
-        <UInputNumber
-          v-model="state.totalRAM"
         class="grow"
+      >
+        <UInputNumber
+          v-model="state.totalMemory"
+          class="w-full"
           placeholder="Total memory (RAM) (* required)"
         />
-        <USelect v-model="state.ramUnit" :items="ramUnits" />
-      </div>
       </UFormField>
+      <UFormField required name="totalMemoryUnit" label="Unit">
+        <USelect v-model="state.totalMemoryUnit" :items="ramUnits" />
+      </UFormField>
+    </div>
     <UFormField
       label="Number of CPUs"
       help="Number of CPUs, which PostgreSQL can use. CPUs = N threads per core * N cores per socket * N sockets"
+      name="cpuNum"
     >
       <UInputNumber
-        v-model="state.totalCPUs"
+        v-model="state.cpuNum"
         class="w-full"
         placeholder="Number of CPUs"
       />
@@ -84,25 +114,27 @@ const state = reactive({
     <UFormField
       label="Number of connections"
       help="Maximum number of PostgreSQL client connections"
+      name="connectionNum"
     >
       <UInputNumber
-        v-model="state.totalConnections"
+        v-model="state.connectionNum"
         class="w-full"
         placeholder="Number of connections"
       />
     </UFormField>
-    <UFormField label="Data storage" help="Type of data storage device">
+    <UFormField
-      <USelect
+      label="Data storage"
-        v-model="state.dataStorage"
+      help="Type of data storage device"
-        :items="dataStorages"
+      name="hdType"
-        class="w-full"
+    >
-      />
+      <USelect v-model="state.hdType" :items="dataStorages" class="w-full" />
     </UFormField>
     <UFormField
       label="Total data size"
       help="Estimated total size of your database compared to total server RAM"
+      name="dbSize"
     >
-      <USelect v-model="state.dataSize" :items="dataSizes" class="w-full" />
+      <USelect v-model="state.dbSize" :items="dataSizes" class="w-full" />
     </UFormField>
     <UButton size="xl" label="GENERATE" block type="submit" class="h-16" />
   </UForm>