web: validate form and add number input
Co-authored-by: Schmackofatz <Schmackofatz@gmail.com>
This commit is contained in:
parent
813260d029
commit
0f2280005f
2 changed files with 167 additions and 154 deletions
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue