183 lines
5.1 KiB
Vue
183 lines
5.1 KiB
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>
|