web: validate form and add number input

Co-authored-by: Schmackofatz <Schmackofatz@gmail.com>
This commit is contained in:
Mika 2024-07-10 19:02:53 +02:00
parent 813260d029
commit 0f2280005f
2 changed files with 167 additions and 154 deletions

View file

@ -1,139 +1,134 @@
<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>
<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-form>
<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>
<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>
<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-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-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-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-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-form>
</v-card>
</v-dialog>
<v-btn icon class="mr-3">
<Pencil />
</v-btn>
</div>
<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"
<!-- 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 -->
@ -142,31 +137,46 @@
</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';
import { store } from "@/store";
import {
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 addAmount = ref('');
const addNotes = ref('');
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 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>

View file

@ -5,11 +5,12 @@
*/
// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import "@mdi/font/css/materialdesignicons.css";
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',
darker: '#003135',
contrast: '#964734',
accent: '#0FA4AF',
accentLigher: '#AFDDE5',
backdrop: '#e3e3e3',
main: "#024950",
darker: "#003135",
contrast: "#964734",
accent: "#0FA4AF",
accentLigher: "#AFDDE5",
backdrop: "#e3e3e3",
},
}
},
},
},
})
components: {
VNumberInput,
},
});