137 lines
3.6 KiB
Vue
137 lines
3.6 KiB
Vue
<template>
|
|
<v-icon v-if="adminMenu" class="me-2" size="small" @click="edit = true"
|
|
>mdi-pencil</v-icon
|
|
>
|
|
<v-btn v-else icon class="mr-3" @click="edit = true">
|
|
<Users />
|
|
</v-btn>
|
|
<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"
|
|
clearable
|
|
:rules="editUserNameRules"
|
|
class="mb-3"
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="User Email *"
|
|
v-model="editUserEmail"
|
|
variant="outlined"
|
|
clearable
|
|
:rules="editUserEmailRules"
|
|
class="mb-3"
|
|
></v-text-field>
|
|
<v-text-field
|
|
label="User Password (Optional)"
|
|
v-model="editUserPassword"
|
|
variant="outlined"
|
|
clearable
|
|
class="mb-3"
|
|
></v-text-field>
|
|
<v-switch
|
|
label="Admin (Optional)"
|
|
inset
|
|
v-model="editUserAdmin"
|
|
color="primary"
|
|
v-if="adminMenu"
|
|
></v-switch>
|
|
<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="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, User } from "@/types";
|
|
import { Users } from "lucide-vue-next";
|
|
|
|
const { user, adminMenu } = defineProps<{ user: User; adminMenu: boolean }>();
|
|
|
|
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: ["users"] });
|
|
edit.value = false;
|
|
},
|
|
});
|
|
|
|
const edit = ref(false);
|
|
const editUserName = ref(user.name);
|
|
const editUserEmail = ref(user.email);
|
|
const editUserAdmin = ref(user.admin);
|
|
const editUserPassword = ref(undefined);
|
|
</script>
|
|
|
|
<style scoped></style>
|