179 lines
4.5 KiB
Vue
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>
|