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, Delete, Edit -->
    <div>
      <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-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-menu>
                      <template v-slot:activator="{ props }">

                      <v-text-field
                        v-bind="props"
                        label="Start Date (optional)"
                        variant="outlined"
                        :model-value="addStartDateDisplay"
                        @click:clear="(event: Event) => addStartDate = undefined"
                        readonly
                        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-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>


     <!-- 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 { Plus, LogOut, Pencil, CalendarCheck, CalendarX } from 'lucide-vue-next';
import { computed, ref } from 'vue';

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

const add = ref(false);
// References for Add License Dialog
const addLicenseName = ref('');
const addAmount = ref('');
const addNotes = ref('');

// Date Picker
const addStartDate = ref<Date | undefined>();
const addStartDateDisplay = computed<string>(() => addStartDate.value ? addStartDate.value.toLocaleDateString() : "");
const addStopDate = ref<Date | undefined>();
const addStopDateDisplay = computed<string>(() => addStopDate.value ? addStopDate.value.toLocaleDateString(): "");

</script>

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

.dialogNote{
  font-size: 13px;
  color: grey;
}

</style>