LF2/Alisa
6
0
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

web: initial edit menu

Browse source
This commit is contained in:
Mika 2024-07-11 19:47:55 +02:00
parent 29525608ed
commit b2fc33b137
5 changed files with 202 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
web/components.d.ts vendored
View file

@ -5,14 +5,14 @@
// Read more: https://github.com/vuejs/core/pull/3399
export {}
declare module "vue" {
declare module 'vue' {
export interface GlobalComponents {
CategoryContainer: typeof import("./src/components/CategoryContainer.vue")["default"];
Clipboard: typeof import("./src/components/Clipboard.vue")["default"];
HeaderBar: typeof import("./src/components/HeaderBar.vue")["default"];
ListViewElement: typeof import("./src/components/ListViewElement.vue")["default"];
LoginPage: typeof import("./src/components/loginPage.vue")["default"];
MainPage: typeof import("./src/components/MainPage.vue")["default"];
UsersDialog: typeof import("./src/components/NavBarIcons/UsersDialog.vue")["default"];
CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
Clipboard: typeof import('./src/components/Clipboard.vue')['default']
HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
LoginPage: typeof import('./src/components/loginPage.vue')['default']
MainPage: typeof import('./src/components/MainPage.vue')['default']
UsersDialog: typeof import('./src/components/NavBarIcons/UsersDialog.vue')['default']
}
}

9
web/src/components/CategoryContainer.vue
View file

@ -12,15 +12,6 @@
notes="license.notes"
/>
</li>
<!-- <ListViewElement
licenseName="Jetbrains Ultimate 2024.2.1"
key=""
startDate=""
endDate=""
amount=""
tags=""
notes=""
/> -->
</div>
</template>

13
web/src/components/HeaderBar.vue
View file

@ -113,18 +113,7 @@
label="Start Date (optional)"
variant="outlined"
prepend-icon=""
prepend-inner-icon="mdi-calendar-check"
clearable
v-model="addStartDate"
hide-details
></v-date-input>
</div>
<div class="mb-6">
<v-date-input
label="Stop Date (optional)"
variant="outlined"
prepend-icon=""
prepend-inner-icon="mdi-calendar-remove"
prepend-inner-icon="mdi-calenadddar-remove"
clearable
v-model="addStopDate"
hide-details

193
web/src/components/ListViewElement.vue
View file

@ -75,9 +75,119 @@
<!-- -->
<!-- EDIT SECTION -->
<!-- -->
<v-btn class="mr-3" flat size="small">
<v-btn class="mr-3" @click="edit" flat size="small">
<Pencil />
</v-btn>
<v-dialog v-model="edit" width="600" persistent>
<v-card max-width="600">
<v-form @submit.prevent="submitEdit">
<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="editLicenseName"
variant="outlined"
required
clearable
:rules="editNameRules"
class="mb-3"
></v-text-field>
<v-text-field
label="License Key *"
v-model="editLicenseKey"
variant="outlined"
required
clearable
:rules="editNameRules"
class="mb-3"
></v-text-field>
<v-autocomplete
clearable
label="Select Group *"
:items="Data"
variant="outlined"
:rules="editNameRules"
class="mb-1"
v-model="editLicenseGroup"
></v-autocomplete>
<!-- Divider maybe remove -->
<v-divider
class="border-opacity-50"
:thickness="2"
></v-divider>
<div>
<div class="mb-3 mt-3">
<v-date-input
label="Start Date (optional)"
variant="outlined"
prepend-icon=""
prepend-inner-icon="mdi-calendar-check"
clearable
v-model="editStartDate"
hide-details
></v-date-input>
</div>
<div class="mb-6">
<v-date-input
label="Stop Date (optional)"
variant="outlined"
prepend-icon=""
prepend-inner-icon="mdi-calendar-remove"
clearable
v-model="editStopDate"
hide-details
></v-date-input>
</div>
</div>
<v-number-input
label="Amount (optional)"
users
variant="outlined"
clearable
:min="0"
v-model="editAmount"
>
</v-number-input>
<v-text-field
label="Notes (optional)"
v-model="editNotes"
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"
color="blue darken-1"
@click="edit = false"
></v-btn>
</v-col>
<v-col>
<v-btn
class="ms-auto"
text="Add"
type="submit"
color="blue darken-1"
></v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
<!-- -->
<!-- DELETE BTN -->
<!-- -->
@ -102,9 +212,13 @@ import {
Trash,
} from "lucide-vue-next";
import { ref } from "vue";
import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
import { axiosInstance } from "@/client";
import { SubmitEventPromise } from "vuetify";
import { LicenseGroup, UpdateLicenseDto } from "@/types";
const props = defineProps<{
id: number;
id: string;
licenseName: string;
licenseKey: string;
startDate: Date | null;
@ -116,6 +230,81 @@ const props = defineProps<{
// EDIT SECTION
const edit = ref(false);
const editLicenseName = ref("");
const editLicenseGroup = ref();
const editAmount = ref();
const editLicenseKey = ref("");
const editStartDate = ref<Date | null>();
const editStopDate = ref<Date | null>();
const editNotes = ref<string | undefined>("");
//Give initial values to the fields
editLicenseName.value = props.licenseName;
editLicenseKey.value = props.licenseKey;
editAmount.value = props.amount;
editStartDate.value = props.startDate;
editStopDate.value = props.endDate;
editNotes.value = props.notes;
const editNameRules = [
(value: string) => {
if (value) return true;
return "YOU MUST ENTER (A GROUP NAME)";
},
];
async function submitEdit(event: SubmitEventPromise) {
const result = await event;
if (result.valid) {
const editData = {
name: editLicenseName.value,
group_id: editLicenseGroup.value,
amount: editAmount.value,
key: editLicenseKey.value,
start: editStartDate.value ?? null,
end: editStopDate.value ?? null,
notes: editNotes.value,
};
console.log(editData);
editMutate(editData);
} else {
console.log("Invalid");
}
}
const queryClient = useQueryClient();
const gyros = props.id;
const { mutate: editMutate } = useMutation({
mutationFn: async (newEdit: UpdateLicenseDto) => {
await axiosInstance.put(`/licenses/${gyros}`, newEdit);
},
onError: (error) => {
console.log(error);
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["licenses"] });
edit.value = false;
},
});
const { data } = useQuery({
queryKey: ["licenses"],
queryFn: async () => {
const res = await axiosInstance.get<LicenseGroup[]>("/licenses");
return res.data;
},
select: (data) => {
return data.map((group) => {
return {
title: group.name,
value: group.id,
};
});
},
});
</script>
<style scoped>

2
web/src/types.ts
View file

@ -23,3 +23,5 @@ export interface CreateLicenseDto {
}
export type CreateGroupDto = Omit<LicenseGroup, "id" | "licenses">;
export type UpdateLicenseDto = Omit<License, "id">;