Modules checkbox

in Vue.js

by simati

HTML

<div id="app">
  <hr>
  <div v-for="(module, moduleIndex) in modules"><b>{{ module.moduleName }}</b>
    <hr>
    <div class="selectall">
      <input type="checkbox" name="selectall" label="selectall" value="selectall" @click="selectall">Select all
    </div>

    <br>

    <div v-for="(action, actionIndex) in module.actions">{{ action.actionName }}

      <div v-for="(permission, permIndex) in action.permissions">
        <input type="checkbox" v-model='modules[moduleIndex].actions[actionIndex].permissions[permIndex].value'> {{ permission.permissionName }} - {{modules[moduleIndex].actions[actionIndex].permissions[permIndex].value}}
      </div>

    </div>
    <hr>
  </div>

  <pre>{{ JSON.stringify(this.updated_modules,null,4)}}</pre>

JavaScript

new Vue({
  el: '#app',
  data: {
    modules: [{
      moduleName: "Module ABC",
      id: 1,
      actions: [{
        actionName: "addbrand",
        id: 1,
        permissions: [{
          permissionName: "read",
          "id": 1,
          "value": true
        }, {
          permissionName: "write",
          "id": 2,
          "value": true
        }, {
          permissionName: "execute",
          "id": 1,
          "value": false
        }]
      }, {
        actionName: "addproduct",
        id: 2,
        permissions: [{
          permissionName: "read",
          id: 1,
          value: true
        }, {
          permissionName: "write",
          id: 2,
          value: true
        }, {
          permissionName: "execute",
          id: 1,
          value: false
        }]
      }]
    }, {
      moduleName: "Module PQR",
      id: 2,
      actions: [{
        actionName: "addrules",
        id: 3,
        permissions: [{
          permissionName: "read",
          id: 1,
          value: true
        }, {
          permissionName: "write",
          id: 2,
          value: true
        }, {
          permissionName: "execute",
          id: 1,
          value: false
        }]
      }, {
        actionName: "addactions",
        id: 4,
        permissions: [{
          permissionName: "read",
          id: 1,
          value: true
        }, {
          permissionName: "write",
          id: 2,
          value: true
        }, {
          permissionName: "execute",
          id: 1,
          value: false
        }]
      }]
    }]
  },
  computed: {
    updated_modules: function() {
      var updated = JSON.parse(JSON.stringify(this.modules));

      for (const obj of updated) {
        for (const action of obj.actions) {
          action.permissions = action.permissions.filter((p) => p.value);
        }
        obj.actions = obj.actions.filter((a) => a.permissions.length);
      }
      updated = updated.filter((o) => o.actions.length);

     ...