web: validate form and add number input

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

web/src/components/HeaderBar.vue

@@ -1,139 +1,134 @@
 <template>
   <div>
-    <v-toolbar
+    <v-toolbar color="main" dark prominent>
-      color="main"
+      <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
-      dark
+      <v-spacer></v-spacer>
-      prominent
+      <!-- Create, Delete, Edit -->
-    >
+      <div>
-    <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
+        <v-btn icon class="mr-3" @click="add = true">
-    <v-spacer></v-spacer>
+          <Plus />
-    <!-- Create, Delete, Edit -->
+        </v-btn>
-    <div>
+        <v-dialog v-model="add" width="600" persistent>
-      <v-btn icon class="mr-3" @click="add = true">
+          <v-card max-width="600">
-        <Plus />
+            <v-form>
-      </v-btn>
+              <v-card-title>
-      <v-dialog
+                <span class="headline">Add License</span>
-        v-model="add"
+              </v-card-title>
-        width="600"
+              <v-card-subtitle>
-        persistent
+                <span> Add an extra License to the database</span>
-      >
+              </v-card-subtitle>
-        <v-card
+              <v-card-text>
-          max-width="600"
-        >
-          <v-card-title>
-            <span class="headline">Add License</span>
-          </v-card-title>
-          <v-card-subtitle>
-            <span> Add an extra License to the database</span>
-          </v-card-subtitle>
-          <v-card-text>
-            <div>
-              <v-text-field
-                label="License Name *"
-                v-model="addLicenseName"
-                variant="outlined"
-                required
-                clearable
-              ></v-text-field>
                 <div>
-                  <div class="mb-3">
+                  <v-text-field
-                    <v-menu>
+                    label="License Name *"
-                      <template v-slot:activator="{ props }">
+                    v-model="addLicenseName"
-
+                    variant="outlined"
-                      <v-text-field
+                    required
-                        v-bind="props"
+                    clearable
-                        label="Start Date (optional)"
+                    :rules="licenseNameRules"
-                        variant="outlined"
+                    class="mb-3"
-                        :model-value="addStartDateDisplay"
+                  ></v-text-field>
-                        @click:clear="(event: Event) => addStartDate = undefined"
+                  <div>
-                        readonly
+                    <div class="mb-3">
-                        clearable
+                      <v-menu>
-                        hide-details
+                        <template v-slot:activator="{ props }">
-                      >
+                          <v-text-field
-                    </v-text-field>
+                            v-bind="props"
-                  </template>
+                            label="Start Date (optional)"
-                  <v-date-picker
+                            variant="outlined"
-                    v-model="addStartDate"
+                            :model-value="addStartDateDisplay"
-                    show-adjacent-months
+                            @click:clear="(event: Event) => addStartDate = undefined"
-                  ></v-date-picker>
+                            readonly
-                  </v-menu>
+                            clearable
+                            hide-details
+                          >
+                          </v-text-field>
+                        </template>
+                        <v-date-picker
+                          v-model="addStartDate"
+                          show-adjacent-months
+                        ></v-date-picker>
+                      </v-menu>
+                    </div>
+                    <div class="mb-5">
+                      <v-menu>
+                        <template v-slot:activator="{ props }">
+                          <v-text-field
+                            v-bind="props"
+                            label="Stop Date (optional)"
+                            variant="outlined"
+                            :model-value="addStopDateDisplay"
+                            @click:clear="(event: Event) => addStopDate = undefined"
+                            readonly
+                            clearable
+                            hide-details
+                          >
+                          </v-text-field>
+                        </template>
+                        <v-date-picker
+                          v-model="addStopDate"
+                          show-adjacent-months
+                        ></v-date-picker>
+                      </v-menu>
+                    </div>
+                  </div>
+                  <v-number-input
+                    label="Amount (optional)"
+                    variant="outlined"
+                    clearable
+                    :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>
                 </div>
-                <div class="mb-5">
+              </v-card-text>
-                  <v-menu>
+              <v-card-actions>
-                    <template v-slot:activator="{ props }">
+                <v-row>
-                      <v-text-field
+                  <v-col cols="10" align="right" no-gutters>
-                        v-bind="props"
+                    <v-btn
-                        label="Stop Date (optional)"
+                      class="ms-auto"
-                        variant="outlined"
+                      text="Cancel"
-                        :model-value="addStopDateDisplay"
+                      @click="add = false"
-                        @click:clear="(event: Event) => addStopDate = undefined"
+                    ></v-btn>
-                        readonly
+                  </v-col>
-                        clearable
+                  <v-col>
-                        hide-details
+                    <v-btn
-                      >
+                      class="ms-auto"
-                      </v-text-field>
+                      text="Add"
-                    </template>
+                      @click="add = false"
-                    <v-date-picker
+                    ></v-btn>
-                      v-model="addStopDate"
+                  </v-col>
-                      show-adjacent-months
+                </v-row>
-                    ></v-date-picker>
+              </v-card-actions>
-                  </v-menu>
+            </v-form>
-                </div>
+          </v-card>
-              </div>
+        </v-dialog>
-              <v-text-field
-                label="Amount (optional)"
-                v-model="addAmount"
-                variant="outlined"
-                clearable
-              ></v-text-field>
-              <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>
-            </div>
-          </v-card-text>
-          <v-card-actions>
-            <v-row>
-              <v-col cols="10" align="right" no-gutters>
-                <v-btn
-                  class="ms-auto"
-                  text="Cancel"
-                  @click="add = false"
-                ></v-btn>
-              </v-col>
-              <v-col>
-                <v-btn
-                  class="ms-auto"
-                  text="Add"
-                  @click="add = false"
-                ></v-btn>
-              </v-col>
-            </v-row>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
 
+        <v-btn icon class="mr-3">
+          <Pencil />
+        </v-btn>
+      </div>
 
-      <v-btn icon class="mr-3">
+      <!-- Search -->
-        <Pencil />
+      <v-text-field
-      </v-btn>
+        class="compact-form mr-2"
-     </div>
+        label="Search"
-
+        variant="solo"
-
+        density="compact"
-     <!-- Search -->
+        prepend-inner-icon="mdi-magnify"
-     <v-text-field
+        hide-details
-          class="compact-form mr-2"
+        single-line
-          label="Search"
+        clearable
-          variant="solo"
+        rounded="pill"
-          density="compact"
-          prepend-inner-icon="mdi-magnify"
-          hide-details
-          single-line
-          clearable
-          rounded="pill"
       ></v-text-field>
 
       <!-- Logout -->
@@ -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,
+  },
+});