194 lines
6.6 KiB
Vue
194 lines
6.6 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
userData: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({
|
|
avatar: "",
|
|
company: "",
|
|
contact: "",
|
|
country: null,
|
|
currentPlan: "",
|
|
email: "",
|
|
fullName: "",
|
|
id: 0,
|
|
role: "",
|
|
status: null,
|
|
username: "",
|
|
language: [],
|
|
projectDone: 0,
|
|
taskDone: 0,
|
|
taxId: "",
|
|
}),
|
|
},
|
|
isDialogVisible: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["submit", "update:isDialogVisible"]);
|
|
|
|
const userData = ref(structuredClone(toRaw(props.userData)));
|
|
|
|
watch(props, () => {
|
|
userData.value = structuredClone(toRaw(props.userData));
|
|
});
|
|
|
|
const onFormSubmit = () => {
|
|
emit("update:isDialogVisible", false);
|
|
emit("submit", userData.value);
|
|
};
|
|
|
|
const onFormReset = () => {
|
|
userData.value = structuredClone(toRaw(props.userData));
|
|
emit("update:isDialogVisible", false);
|
|
};
|
|
|
|
const dialogVisibleUpdate = (val) => {
|
|
emit("update:isDialogVisible", val);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
:width="$vuetify.display.smAndDown ? 'auto' : 900"
|
|
:model-value="props.isDialogVisible"
|
|
@update:model-value="dialogVisibleUpdate"
|
|
>
|
|
<VCard class="pa-sm-11 pa-3">
|
|
<!-- 👉 dialog close btn -->
|
|
|
|
<VCardText class="pt-5">
|
|
<div class="text-center pb-6">
|
|
<h4 class="text-h4 mb-2">Edit User Information</h4>
|
|
<div class="text-body-1">
|
|
Updating user details will receive a privacy audit.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 👉 Form -->
|
|
<VForm class="mt-4" @submit.prevent="onFormSubmit">
|
|
<VRow>
|
|
<!-- 👉 First Name -->
|
|
<VCol cols="12" md="6">
|
|
<VTextField
|
|
v-model="userData.fullName.split(' ')[0]"
|
|
label="First Name"
|
|
placeholder="John"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Last Name -->
|
|
<VCol cols="12" md="6">
|
|
<VTextField
|
|
v-model="userData.fullName.split(' ')[1]"
|
|
label="Last Name"
|
|
placeholder="doe"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 User Name -->
|
|
|
|
<VCol cols="12">
|
|
<VTextField
|
|
v-model="userData.username"
|
|
label="Username"
|
|
placeholder="John Doe"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Billing Email -->
|
|
<VCol cols="12" md="6">
|
|
<VTextField
|
|
v-model="userData.email"
|
|
label="Billing Email"
|
|
placeholder="johndoe@email.com"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Status -->
|
|
<VCol cols="12" md="6">
|
|
<VSelect
|
|
v-model="userData.status"
|
|
:items="['Active', 'Inactive', 'Pending']"
|
|
label="Status"
|
|
placeholder="Status"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Tax Id -->
|
|
<VCol cols="12" md="6">
|
|
<VTextField
|
|
v-model="userData.taxId"
|
|
label="Tax Id"
|
|
placeholder="Tax-3456789"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Contact -->
|
|
<VCol cols="12" md="6">
|
|
<VTextField
|
|
v-model="userData.contact"
|
|
label="Contact"
|
|
placeholder="+1 9876543210"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Language -->
|
|
<VCol cols="12" md="6">
|
|
<VSelect
|
|
v-model="userData.language"
|
|
:items="['English', 'Spanish', 'French']"
|
|
label="Language"
|
|
placeholder="English"
|
|
chips
|
|
closable-chips
|
|
multiple
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Country -->
|
|
<VCol cols="12" md="6">
|
|
<VSelect
|
|
v-model="userData.country"
|
|
:items="[
|
|
'United States',
|
|
'United Kingdom',
|
|
'France',
|
|
]"
|
|
label="Country"
|
|
placeholder="United States"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Switch -->
|
|
<VCol cols="12">
|
|
<VSwitch
|
|
density="compact"
|
|
label="Use as a billing address?"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Submit and Cancel -->
|
|
<VCol
|
|
cols="12"
|
|
class="d-flex flex-wrap justify-center gap-4"
|
|
>
|
|
<VBtn type="submit"> Submit </VBtn>
|
|
|
|
<VBtn
|
|
color="secondary"
|
|
variant="outlined"
|
|
@click="onFormReset"
|
|
>
|
|
Cancel
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|