WIP: form

src/components/configurationForm.vue

@@ -1,11 +1,9 @@
 <script setup>
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 
 const dbVersions = ref(['18', '17', '16', '15', '14', '13', '12', '11', '10'])
-const dbVersion = ref('18')
 
 const osTypes = ref(['Linux', 'Windows', 'OS X'])
-const osType = ref('Linux')
 
 const dbTypes = ref([
   'Web application',
@@ -14,15 +12,8 @@ const dbTypes = ref([
   'Desktop application',
   'Mixed type of application',
 ])
-const dbType = ref('Web application')
 
-const totalRam = ref()
 const ramUnits = ref(['TB', 'GB', 'MB'])
-const ramUnit = ref('GB')
-
-const totalCPUs = ref(1)
-
-const totalConnections = ref(100)
 
 const dataStorages = ref([
   'NVME storage',
@@ -30,31 +21,41 @@ const dataStorages = ref([
   'Network (SAN) storage',
   'HDD storage',
 ])
-const dataStorage = ref('SSD storage')
 
 const dataSizes = ref(['Less than RAM', 'RAM - 3xRAM', 'More than 3xRAM'])
-const dataSize = ref('Less than RAM')
+
+const state = reactive({
+  dbVersion: 18,
+  osType: 'Linux',
+  dbType: 'Web application',
+  totalRAM: undefined,
+  ramUnit: 'GB',
+  totalCPUs: 1,
+  totalConnections: 100,
+  dataStorage: 'SSD storage',
+  dataSize: 'Less than RAM',
+})
 </script>
 
 <template>
-  <UForm class="space-y-4">
+  <UForm class="space-y-4" :state>
     <UFormField
       label="DB version"
       help="PostgreSQL version (find out via 'SELECT version();')"
     >
-      <USelect v-model="dbVersion" :items="dbVersions" class="w-full" />
+      <USelect v-model="state.dbVersion" :items="dbVersions" class="w-full" />
     </UFormField>
     <UFormField
       label="OS Type"
       help="Operation system of the PostgreSQL server host"
     >
-      <USelect v-model="osType" :items="osTypes" class="w-full" />
+      <USelect v-model="state.osType" :items="osTypes" class="w-full" />
     </UFormField>
     <UFormField
       label="DB type"
       help="What type of application is PostgreSQL used for"
     >
-      <USelect v-model="dbType" :items="dbTypes" class="w-full" />
+      <USelect v-model="state.dbType" :items="dbTypes" class="w-full" />
     </UFormField>
     <UFormField
       label="Total memory (RAM)"
@@ -63,11 +64,11 @@ const dataSize = ref('Less than RAM')
     >
       <div class="flex items-center gap-4">
         <UInputNumber
-          v-model="totalRam"
+          v-model="state.totalRAM"
           class="grow"
           placeholder="Total memory (RAM) (* required)"
         />
-        <USelect v-model="ramUnit" :items="ramUnits" />
+        <USelect v-model="state.ramUnit" :items="ramUnits" />
       </div>
     </UFormField>
     <UFormField
@@ -75,7 +76,7 @@ const dataSize = ref('Less than RAM')
       help="Number of CPUs, which PostgreSQL can use. CPUs = N threads per core * N cores per socket * N sockets"
     >
       <UInputNumber
-        v-model="totalCPUs"
+        v-model="state.totalCPUs"
         class="w-full"
         placeholder="Number of CPUs"
       />
@@ -85,19 +86,23 @@ const dataSize = ref('Less than RAM')
       help="Maximum number of PostgreSQL client connections"
     >
       <UInputNumber
-        v-model="totalConnections"
+        v-model="state.totalConnections"
         class="w-full"
         placeholder="Number of connections"
       />
     </UFormField>
     <UFormField label="Data storage" help="Type of data storage device">
-      <USelect v-model="dataStorage" :items="dataStorages" class="w-full" />
+      <USelect
+        v-model="state.dataStorage"
+        :items="dataStorages"
+        class="w-full"
+      />
     </UFormField>
     <UFormField
       label="Total data size"
       help="Estimated total size of your database compared to total server RAM"
     >
-      <USelect v-model="dataSize" :items="dataSizes" class="w-full" />
+      <USelect v-model="state.dataSize" :items="dataSizes" class="w-full" />
     </UFormField>
     <UButton size="xl" label="GENERATE" block type="submit" class="h-16" />
   </UForm>