112 lines
2.8 KiB
Vue
112 lines
2.8 KiB
Vue
<template>
|
|
<v-icon class="me-2" size="small" @click="edit = true">mdi-pencil</v-icon>
|
|
<v-dialog v-model="edit" width="600" persistent>
|
|
<v-card max-width="600">
|
|
<v-form @submit.prevent="submitGroup">
|
|
<v-card-title>
|
|
<span class="headline">Edit User</span>
|
|
</v-card-title>
|
|
<v-card-subtitle>
|
|
<span>Edit a User inside the database</span>
|
|
</v-card-subtitle>
|
|
<v-card-text>
|
|
<div>
|
|
<v-text-field
|
|
label="User Name *"
|
|
v-model="editUserName"
|
|
variant="outlined"
|
|
required
|
|
clearable
|
|
:rules="editUserNameRules"
|
|
class="mb-3"
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="User Email *"
|
|
v-model="editUserEmail"
|
|
variant="outlined"
|
|
required
|
|
clearable
|
|
:rules="editUserEmailRules"
|
|
class="mb-3"
|
|
></v-text-field>
|
|
</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="Update"
|
|
type="submit"
|
|
color="blue darken-1"
|
|
></v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-actions>
|
|
</v-form>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { SubmitEventPromise } from "vuetify";
|
|
import { axiosInstance } from "@/client";
|
|
import { useMutation, useQueryClient } from "@tanstack/vue-query";
|
|
import { CreateLicenseDto } from "@/types";
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
const editUserNameRules = [
|
|
(value: string) => {
|
|
if (value) return true;
|
|
|
|
return "YOU MUST ENTER (A USER NAME)";
|
|
},
|
|
];
|
|
|
|
const editUserEmailRules = [
|
|
(value: string) => {
|
|
if (value) return true;
|
|
|
|
return "YOU MUST ENTER (A EMAIL NAME)";
|
|
},
|
|
];
|
|
|
|
async function submitGroup(event: SubmitEventPromise) {
|
|
const result = await event;
|
|
if (result.valid) {
|
|
const userData = {
|
|
name: editUserName.value,
|
|
};
|
|
console.log(userData);
|
|
userMutate(userData);
|
|
} else {
|
|
console.log("Invalid");
|
|
}
|
|
}
|
|
|
|
const { mutate: userMutate } = useMutation({
|
|
mutationFn: async (newLicense: CreateLicenseDto) => {
|
|
await axiosInstance.post("/licenses", newLicense);
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["licenses"] });
|
|
edit.value = false;
|
|
},
|
|
});
|
|
|
|
const editUserName = ref("");
|
|
const editUserEmail = ref("");
|
|
const edit = ref(false);
|
|
</script>
|
|
|
|
<style scoped></style>
|