web: validate form and add number input

Co-authored-by: Schmackofatz <Schmackofatz@gmail.com>

web/src/components/HeaderBar.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <v-toolbar
+    <v-toolbar color="main" dark prominent>
-      color="main"
-      dark
-      prominent
-    >
       <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
       <v-spacer></v-spacer>
       <!-- Create, Delete, Edit -->
@@ -12,14 +8,9 @@
         <v-btn icon class="mr-3" @click="add = true">
           <Plus />
         </v-btn>
-      <v-dialog
+        <v-dialog v-model="add" width="600" persistent>
-        v-model="add"
+          <v-card max-width="600">
-        width="600"
+            <v-form>
-        persistent
-      >
-        <v-card
-          max-width="600"
-        >
               <v-card-title>
                 <span class="headline">Add License</span>
               </v-card-title>
@@ -34,12 +25,13 @@
                     variant="outlined"
                     required
                     clearable
+                    :rules="licenseNameRules"
+                    class="mb-3"
                   ></v-text-field>
                   <div>
                     <div class="mb-3">
                       <v-menu>
                         <template v-slot:activator="{ props }">
-
                           <v-text-field
                             v-bind="props"
                             label="Start Date (optional)"
@@ -80,19 +72,23 @@
                       </v-menu>
                     </div>
                   </div>
-              <v-text-field
+                  <v-number-input
                     label="Amount (optional)"
-                v-model="addAmount"
                     variant="outlined"
                     clearable
-              ></v-text-field>
+                    :min="0"
+                    v-model="addAmount"
+                  >
+                  </v-number-input>
                   <v-text-field
                     label="Notes (optional)"
                     v-model="addNotes"
                     variant="outlined"
                     clearable
                   ></v-text-field>
-              <span class="dialogNote "> all fields marked with * are required </span>
+                  <span class="dialogNote">
+                    all fields marked with * are required
+                  </span>
                 </div>
               </v-card-text>
               <v-card-actions>
@@ -113,16 +109,15 @@
                   </v-col>
                 </v-row>
               </v-card-actions>
+            </v-form>
           </v-card>
         </v-dialog>
 
-
         <v-btn icon class="mr-3">
           <Pencil />
         </v-btn>
       </div>
 
-
       <!-- Search -->
       <v-text-field
         class="compact-form mr-2"
@@ -142,31 +137,46 @@
       </v-btn>
     </v-toolbar>
   </div>
-
 </template>
 
 <script setup lang="ts">
-import { store } from '@/store';
+import { store } from "@/store";
-import { Plus, LogOut, Pencil, CalendarCheck, CalendarX } from 'lucide-vue-next';
+import {
-import { computed, ref } from 'vue';
+  Plus,
+  LogOut,
+  Pencil,
+  CalendarCheck,
+  CalendarX,
+} from "lucide-vue-next";
+import { computed, ref } from "vue";
 
 function handlelogout() {
-  console.log('logout');
+  console.log("logout");
   store.setToken(null);
 }
 
 const add = ref(false);
 // References for Add License Dialog
-const addLicenseName = ref('');
+const addLicenseName = ref<string>("");
-const addAmount = ref('');
+const licenseNameRules = [
-const addNotes = ref('');
+  (value: string) => {
+    if (value) return true;
+
+    return "YOU MUST ENTER A LICENSE NAME";
+  },
+];
+const addAmount = ref<number | undefined>();
+const addNotes = ref<string | undefined>("");
 
 // Date Picker
 const addStartDate = ref<Date | undefined>();
-const addStartDateDisplay = computed<string>(() => addStartDate.value ? addStartDate.value.toLocaleDateString() : "");
+const addStartDateDisplay = computed<string>(() =>
+  addStartDate.value ? addStartDate.value.toLocaleDateString() : ""
+);
 const addStopDate = ref<Date | undefined>();
-const addStopDateDisplay = computed<string>(() => addStopDate.value ? addStopDate.value.toLocaleDateString(): "");
+const addStopDateDisplay = computed<string>(() =>
-
+  addStopDate.value ? addStopDate.value.toLocaleDateString() : ""
+);
 </script>
 
 <style scoped>
@@ -175,9 +185,8 @@ const addStopDateDisplay = computed<string>(() => addStopDate.value ? addStopDat
   margin-left: 10px;
 }
 
-.dialogNote{
+.dialogNote {
   font-size: 13px;
   color: grey;
 }
-
 </style>

web/src/plugins/vuetify.ts

@@ -5,11 +5,12 @@
  */
 
 // Styles
-import '@mdi/font/css/materialdesignicons.css'
+import "@mdi/font/css/materialdesignicons.css";
-import 'vuetify/styles'
+import "vuetify/styles";
 
 // Composables
-import { createVuetify } from 'vuetify'
+import { createVuetify } from "vuetify";
+import { VNumberInput } from "vuetify/labs/components";
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
@@ -18,14 +19,17 @@ export default createVuetify({
       light: {
         dark: false,
         colors: {
-          main: '#024950',
+          main: "#024950",
-          darker: '#003135',
+          darker: "#003135",
-          contrast: '#964734',
+          contrast: "#964734",
-          accent: '#0FA4AF',
+          accent: "#0FA4AF",
-          accentLigher: '#AFDDE5',
+          accentLigher: "#AFDDE5",
-          backdrop: '#e3e3e3',
+          backdrop: "#e3e3e3",
-        },
-      }
         },
       },
-})
+    },
+  },
+  components: {
+    VNumberInput,
+  },
+});