unity/resources/js/user/pages/users/Form.vue

  <template>
    <b-card class="main-card mb-3">
      <div v-if="!this_admin.data" class="text-center">
        <vue-element-loading :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
      </div>
      <div v-if="this_admin.data">
        <form-wizard 
          @on-complete="onComplete"
          title="" 
          subtitle=""
          finish-button-text="Submit"
          @keydown="form.errors.clear($event.target.name)"
          color="var(--primary)"
        >
          <tab-content 
            title="Details"
            :before-change="validOne"
            ref="valid_one"
            icon="fa fa-info-circle"
          >
            <!-- ///////////////////////////////////////////////////// -->
            <image-input
              :input_name="'img'"
              :form="form"
              :label="'Profile Img'"
              :exist_img="exist_img"
            ></image-input>
            <!-- ///////////////////////////////////////////////////// -->
            <text-input
              :input_name="'first_name'"
              :form="form"
              :label="'First Name*'"
            ></text-input>
            <!-- ///////////////////////////////////////////////////// -->
            <text-input
              :input_name="'last_name'"
              :form="form"
              :label="'Last Name*'"
            ></text-input>
            <!-- ///////////////////////////////////////////////////// -->
            <text-input
              :input_name="'email'"
              :form="form"
              :label="'Email*'"
            ></text-input>
            <!-- ///////////////////////////////////////////////////// -->
            <password-input
              :input_name="'password'"
              :form="form"
              :label="'Password*'"
            ></password-input>
            <!-- ///////////////////////////////////////////////////// -->
            <password-input
              :input_name="'password_confirmation'"
              :form="form"
              :label="'Confirm Password*'"
            ></password-input>
            <!-- ///////////////////////////////////////////////////// -->
            <text-read-only-input
              v-if="mode == 'profile'"
              :value="this_admin.data.role_list[0].name"
              :label="'Role'"
            >
            </text-read-only-input>
            <!-- ///////////////////////////////////////////////////// -->
            <switch-input
              :input_name="'status'"
              :form="form"
              :label="'Status'"
            ></switch-input>
            <!-- ///////////////////////////////////////////////////// -->
          </tab-content>
        </form-wizard>
      </div>
    </b-card>
  </template>

  <script>
    import TextInput from '../../components/inputs/TextInput';
    import TextReadOnlyInput from '../../components/inputs/TextReadOnlyInput';
    import PasswordInput from '../../components/inputs/PasswordInput';
    import SwitchInput from '../../components/inputs/SwitchInput';
    import ImageInput from '../../components/inputs/ImageInput';

    export default {
      props: {
        mode: String
      },
      components: {
        TextInput,
        TextReadOnlyInput,
        PasswordInput,
        SwitchInput,
        ImageInput
      },
      data() {
        return {
          form: new Form({
            img: [],
            first_name: '',
            last_name: '',
            email: '',
            password: '',
            password_confirmation: '',
            status: 1
          }),
          this_admin: [],
          exist_img: [],
          exist_user_role: []
        }
      },
      methods: {
        validOne() {
          let vm = this;
          let ref_inputs = ['img', 'first_name', 'last_name', 'email', 'password', 'password_confirmation', 'status'];
          let url = 'user/valid-check/' + vm.this_admin.data.hash_id;
          return General.validCheck(url, vm.form, ref_inputs);
        },
        onComplete() {
          let vm = this;
          let method = vm.mode == 'create' ? 'post' : 'put';
          let url = 'user/update';

          return General.onComplete(url, vm.form, method)
            .then(data => {
              General.toastedMessage('edit', 'User Profile', data.data.hash_id);
            });
        },
        loadThisAdmin() {
          let vm = this;
          let url = 'user/self';
          let form = new Form({});
          General.getCall(url, form).then(data => {
            vm.this_admin = data;
            vm.exist_img = vm.this_admin.data.img;
            vm.form.first_name = vm.this_admin.data.first_name;
            vm.form.last_name = vm.this_admin.data.last_name;
            vm.form.email = vm.this_admin.data.email;
            vm.form.status = vm.this_admin.data.status;
            vm.form.role_id  = General.getKey(vm.this_admin.data.role_list, 'id');
            vm.exist_user_role = General.autoCompleteKeyConvert(vm.this_admin.data.role_list);
          });
        }
      },
      created() {
        let vm = this;
        vm.loadThisAdmin();
      }
    }
</script>