Alisa/web/src/components/HeaderBar.vue

<template>
  <div>
    <v-toolbar color="main" dark prominent>
      <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
      <v-spacer></v-spacer>
      <!-- Create, Edit -->
      <div>
        <!-- ADD SECTION -->
        <v-btn icon class="mr-3" @click="add = true">
          <Plus />
        </v-btn>
        <v-dialog v-model="add" width="600" persistent>
          <v-card max-width="600">
            <v-form @submit.prevent="submit">
              <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
                    :rules="licenseNameRules"
                    class="mb-3"
                  ></v-text-field>
                  <div>
                    <div class="mb-3">
                      <v-date-input
                        label="Start Date (optional)"
                        variant="outlined"
                        prepend-icon=""
                        prepend-inner-icon="mdi-calendar-check"
                        clearable
                        v-model="addStartDate"
                      ></v-date-input>
                    </div>
                    <div class="mb-5">
                      <v-date-input
                        label="Stop Date (optional)"
                        variant="outlined"
                        prepend-icon=""
                        prepend-inner-icon="mdi-calendar-remove"
                        clearable
                        v-model="addStopDate"
                      ></v-date-input>
                    </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>
              </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" type="submit"></v-btn>
                  </v-col>
                </v-row>
              </v-card-actions>
            </v-form>
          </v-card>
        </v-dialog>

        <!-- EDIT SECTION -->
        <v-btn icon class="mr-3" @click="edit = true">
          <Pencil />
        </v-btn>
        <v-dialog v-model="edit" width="600" persistent>
          <v-card max-width="600">
            <v-form @submit.prevent="submit">
              <v-card-title>
                <span class="headline">Edit License</span>
              </v-card-title>
              <v-card-subtitle>
                <span> Edit a License inside the Database</span>
              </v-card-subtitle>
              <v-card-text>
                <!-- PLACEHOLDER FOR ELEMENTS -->
              </v-card-text>
              <v-card-actions>
                <v-row>
                  <v-col cols="10" align="right" no-gutters>
                    <v-btn
                      class="ms-auto"
                      text="Cancel"
                      @click="edit = false"
                    ></v-btn>
                  </v-col>
                  <v-col>
                    <v-btn class="ms-auto" text="Save" type="submit"></v-btn>
                  </v-col>
                </v-row>
              </v-card-actions>
            </v-form>
          </v-card>
        </v-dialog>
      </div>

      <!-- Search -->
      <v-text-field
        class="compact-form mr-2"
        label="Search"
        variant="solo"
        density="compact"
        prepend-inner-icon="mdi-magnify"
        hide-details
        single-line
        clearable
        rounded="pill"
      ></v-text-field>

      <!-- Logout -->
      <v-btn icon variant="outlined" @click="handlelogout">
        <LogOut />
      </v-btn>
    </v-toolbar>
  </div>
</template>

<script setup lang="ts">
import { store } from "@/store";
import { SubmitEventPromise } from "vuetify";
import { computed, ref } from "vue";
import {
  Plus,
  LogOut,
  Pencil,
  CalendarCheck,
  CalendarX,
} from "lucide-vue-next";

function handlelogout() {
  console.log("logout");
  store.setToken(null);
}

async function submit(event: SubmitEventPromise) {
  const result = await event;
  console.log(result);
}

//
//  ADD SECTION
//
const add = ref(false);
// References for Add License Dialog
const addLicenseName = ref<string>("");
const licenseNameRules = [
  (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 addStopDate = ref<Date | undefined>();

//
//  EDIT SECTION
//

const edit = ref(false);
</script>

<style scoped>
.logo {
  margin-right: 20%;
  margin-left: 10px;
}

.dialogNote {
  font-size: 13px;
  color: grey;
}
</style>