unity/resources/js/admin/pages/admin-roles/Form.vue

  <template>
    <b-card class="main-card mb-3">
      <div v-if="!this_admin_role.data && mode == 'edit'" class="text-center">
        <vue-element-loading :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
      </div>
      <div v-if="this_admin_role.data || mode == 'create'">
        <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"
          >
            <!-- ///////////////////////////////////////////////////// -->
            <text-input
              :input_name="'name'"
              :form="form"
              :label="'Name*'"
            ></text-input>
            <!-- ///////////////////////////////////////////////////// -->
            <switch-list-input
              :input_name="'permission_id'"
              :form="form"
              :label="'Permission*'"
              :list="permission_list"
            ></switch-list-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 SwitchListInput from '../../components/inputs/SwitchListInput';
    import SwitchInput from '../../components/inputs/SwitchInput';

    export default {
      props: {
        mode: String
      },
      components: {
        TextInput,
        SwitchListInput,
        SwitchInput
      },
      data() {
        return {
          form: new Form({
            name: '',
            permission_id: [],
            status: 1
          }),
          this_admin_role: [],
          permission_list: [],
        }
      },
      methods: {
        validOne() {
          let vm = this;
          let ref_inputs = ['name', 'permission_id', 'status'];
          let url = vm.mode == 'create' ? 'admin-role/valid-check' : 'admin-role/valid-check/' + vm.this_admin_role.data.hash_id;
          return General.validCheck(url, vm.form, ref_inputs);
        },
        onComplete() {
          let vm = this;
          let method = vm.mode == 'create' ? 'post' : 'put';
          let url = vm.mode == 'create' ? 'admin-role/store' : 'admin-role/update/' + vm.this_admin_role.data.hash_id;

          return General.onComplete(url, vm.form, method)
            .then(data => {
              let pervious_query = data.pervious_query ? '?' + data.pervious_query : '';
              vm.$router.push('/admin-role/list' + pervious_query);
            
              if (vm.mode == 'create') {
                General.toastedMessage('create', 'Admin Role', data.data.name);
              }
              else {
                General.toastedMessage('edit', 'Admin Role', data.data.name);
              }
            });
        },
        getAllPermissionList() {
          let vm = this;
          let url = 'permission/list';
          let form = new Form({
                'guard_name': 'admin'
              });
          General.getCall(url, form).then(response => {
            vm.permission_list = General.selectStructure(response.data, 'hash_id', 'name');
          });
        },
        loadThisRole() {
          let vm = this;
          let url = 'admin-role/show/' + vm.$route.params.hash_id;
          let form = new Form({});
          General.getCall(url, form).then(response => {
            vm.this_admin_role = response;
            vm.form.name = vm.this_admin_role.data.name;
            vm.form.status = vm.this_admin_role.data.status;
            vm.form.permission_id = General.getKey(vm.this_admin_role.data.permission_list, 'hash_id');
          });
        }
      },
      created() {
        let vm = this;
        vm.getAllPermissionList();
        if (vm.mode == 'edit') {
          vm.loadThisRole();
        }
      }
    }
</script>