mixtape/zero.Backoffice.UI/old_app/pages/settings/role.vue

<template>
  <ui-form ref="form" class="role" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
    <ui-form-header v-model="model" prefix="@role.roles" title="@role.name" :disabled="disabled" :is-create="!$route.params.id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
    <ui-editor config="userRole" v-model="model" :meta="meta" :disabled="disabled">
      <template v-slot:below>
        <ui-editor-infos v-model="model" :disabled="disabled" />
      </template>
    </ui-editor>
  </ui-form>
</template>


<script>
  import UserRolesApi from 'zero/api/userRoles.js';

  export default {
    data: () => ({
      meta: {},
      model: { name: null, features: [], domains: [], claims: [] },
      route: zero.alias.settings.users + '-role',
      disabled: false
    }),

    methods: {

      onLoad(form)
      {
        form.load(!this.$route.params.id ? UserRolesApi.getEmpty() : UserRolesApi.getById(this.$route.params.id)).then(response =>
        {
          this.disabled = !response.meta.canEdit;
          this.meta = response.meta;
          this.model = response.entity;
        });
      },


      onSubmit(form)
      {
        form.handle(UserRolesApi.save(this.model));
      },


      onDelete(item, opts)
      {
        opts.hide();
        this.$refs.form.onDelete(UserRolesApi.delete.bind(this, this.$route.params.id));
      }     
    }
  }
</script>

<style lang="scss">
  .role-permission-toggle + .role-permission-toggle
  {
    padding-top: 0;
    margin-top: var(--padding);
  }

  .role .ui-box + .ui-permissions
  {
    margin-top: var(--padding);
  }
</style>