base_ui/components/admin/components/NewUserForm.vue
2025-02-01 13:04:55 +03:30

179 lines
4.5 KiB
Vue

<template>
<div class="sign-up__form">
<div class="sign-up__form-inputs">
<div class="sign-up__form-row sign-up__simple-input">
<div class="form-group position-relative">
<input
class="form-control elem__placeholder-gray"
v-model.trim="userModel.name"
type="text"
:placeholder="$t('Name')"
name="name"
id="name"
autocomplete="off"
/>
</div>
</div>
<div class="sign-up__form-row sign-up__simple-input">
<div class="form-group position-relative">
<input
class="form-control elem__placeholder-gray"
v-model.trim="userModel.lastname"
type="text"
:placeholder="$t('LastName')"
name="lastname"
id="lastname"
autocomplete="off"
/>
</div>
</div>
<div class="sign-up__form-row sign-up__simple-input">
<div class="form-group position-relative">
<input
class="form-control elem__placeholder-gray"
type="text"
name="mobile"
id="mobile"
v-model.trim="userModel.mobile"
:placeholder="$t('Mobile')"
dir="ltr"
autocomplete="off"
/>
</div>
</div>
<div class="sign-up__form-row sign-up__simple-input">
<div class="form-group position-relative">
<input
class="form-control elem__placeholder-gray"
type="text"
name="username"
id="username"
v-model.trim="userModel.username"
:placeholder="$t('UserName')"
dir="ltr"
autocomplete="off"
/>
</div>
</div>
<div class="sign-up__form-row sign-up__simple-input">
<div class="form-group position-relative">
<input
class="form-control elem__placeholder-gray"
type="text"
name="email"
id="email"
v-model.trim="userModel.email"
:placeholder="$t('Email')"
dir="ltr"
autocomplete="off"
/>
</div>
</div>
<div class="sign-up__form-row sign-up__simple-input">
<div class="form-group position-relative">
<input
class="form-control elem__placeholder-gray"
type="password"
name="password"
id="password"
v-model.trim="userModel.password"
:placeholder="$t('Password')"
dir="ltr"
autocomplete="off"
/>
</div>
</div>
<div class="sign-up__form-row sign-up__simple-input">
<div class="form-group position-relative">
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input"
id="select-all-checkbox"
v-model="userModel.is_active"
:true-value="1"
:false-value="0"
/>
<label class="custom-control-label" for="select-all-checkbox">
فعال:
</label>
</div>
</div>
</div>
</div>
<div class="sign-up__btn-container">
<button class="btn btn-primary" @click="submit()">
<the-button-loading v-if="loading"></the-button-loading>
<div v-if="userModel.id">
{{ $t("Update") }}
</div>
<div v-else>
{{ $t("Register") }}
</div>
</button>
</div>
</div>
</template>
<script>
export default {
props: {
parentLoading: false,
userData: {
default() {
return {
id: undefined,
name: null,
lastname: null,
username: null,
email: null,
password: null,
is_active: 1,
mobile: null,
};
},
},
},
watch: {
userData(newValu) {
this.userModel = newValu;
},
parentLoading(newVal) {
this.loading = newVal;
},
},
mounted() {
this.userModel = this.userData;
},
data() {
return {
loading: this.parentLoading,
userModel: {
id: undefined,
name: null,
lastname: null,
username: null,
email: null,
password: null,
is_active:1,
mobile: null,
},
};
},
methods: {
submit() {
this.loading = true;
this.$emit("on-pass-by-emit", this.userModel);
},
},
};
</script>