nocodb/packages/nc-gui/components/globalAcl.vue

<!-- eslint-disable -->
<template>
  <div>
    <v-toolbar flat height="42" class="toolbar-border-bottom">
      <v-toolbar-title>
        <v-breadcrumbs
          :items="[{
                     text: nodes.env,
                     disabled: true,
                     href: '#'
                   },
                   {
                     text: 'Global ACL',
                     disabled: true,
                     href: '#'
                   }]"
          divider=">"
          small
        >
          <template #divider>
            <v-icon small color="grey lighten-2">
              forward
            </v-icon>
          </template>
        </v-breadcrumbs>
      </v-toolbar-title>
      <v-spacer />
      <x-btn
        v-ge="['acl','reload']"
        outlined
        tooltip="Reload ACL"
        color="primary"
        small
        @click="loadAcls"
      >
        <v-icon small left>
          refresh
        </v-icon>
        Reload
      </x-btn>

      <x-btn
        v-ge="['acl','save']"
        outlined
        tooltip="Save Changes"
        color="primary"
        class="primary"
        small
        :disabled="disableSaveButton"
      >
        <v-icon small left>
          save
        </v-icon>
        Save
      </x-btn>
    </v-toolbar>

    <v-text-field
      v-model="search"
      dense
      hide-details
      class="ma-2"
      :placeholder="`Search routes`"
      prepend-inner-icon="search"
      outlined
    />

    <v-simple-table v-if="true" v-slot dense>
      <thead>
        <tr>
          <th>Table</th>
          <th v-for="role in roles" :colspan="methods.length">
            {{ role }}
          </th>
          <th width="25" />
        </tr>
        <tr>
          <th />
          <template v-for="role in roles">
            <template v-for="method in methods">
              <th :key="`${role}-${method}`" width="25">
                {{ method }}
              </th>
            </template>
          </template>

          <th />
        </tr>
        <tr>
          <th />
          <template v-for="role in roles">
            <template v-for="method in methods">
              <th :key="`${role}-${method}`" width="25">
                <v-checkbox
                  dense
                  hide-details
                />
              </th>
            </template>
          </template>

          <th width="25" />
        </tr>
      </thead>
      <tbody>
        <template v-for="(acl,table) in groupedData">
          <tr :key="table + 'row'">
            <td class="font-weight-bold">
              {{ table }}
            </td>
            <template v-for="role in roles">
              <template v-for="method in methods">
                <td :key="`${role}-${method}`" width="25">
                  <v-checkbox
                    dense
                    hide-details
                  />
                </td>
              </template>
            </template>
            <td width="25">
              <v-icon v-if="expandedRow !== table" small @click="expandedRow=table">
                mdi-chevron-down
              </v-icon>
              <v-icon v-else small @click="expandedRow=null">
                mdi-chevron-up
              </v-icon>
            </td>
          </tr>
          <template v-for="(item,i) in groupedData[table]" v-if="expandedRow === table">
            <tr v-if="item.path" :key="`${table}-row-${i}`">
              <td class="caption">
                {{ item.path }}
              </td>
              <template v-for="role in roles">
                <template v-for="method in methods">
                  <td :key="`${role}-${method}`" width="25">
                    <v-checkbox
                      dense
                      hide-details
                    />
                  </td>
                </template>
              </template>
              <td width="25" />
            </tr>
          </template>
        </template>
      </tbody>
    </v-simple-table>

    <v-simple-table v-slot dense>
      <thead>
        <tr>
          <th>Table</th>
          <th v-for="role in roles" :colspan="methods.length">
            {{ role }}
          </th>
          <th width="25" />
        </tr>
        <tr>
          <th />
          <template v-for="role in roles">
            <template v-for="method in methods">
              <th :key="`${role}-${method}`" width="25">
                {{ method }}
              </th>
            </template>
          </template>

          <th />
        </tr>
        <tr>
          <th />
          <template v-for="role in roles">
            <template v-for="method in methods">
              <th :key="`${role}-${method}`" width="25">
                <v-checkbox
                  dense
                  hide-details
                />
              </th>
            </template>
          </template>

          <th width="25" />
        </tr>
      </thead>
      <tbody>
        <template v-for="(acl,table) in groupedData">
          <tr :key="table + 'row'">
            <td>{{ table }}</td>
            <template v-for="role in roles">
              <template v-for="method in methods">
                <td :key="`${role}-${method}`" width="25">
                  <v-checkbox
                    dense
                    hide-details
                  />
                </td>
              </template>
            </template>
            <td width="25">
              <v-icon v-if="expandedRow !== table" small @click="expandedRow=table">
                mdi-chevron-down
              </v-icon>
              <v-icon v-else small @click="expandedRow=null">
                mdi-chevron-up
              </v-icon>
            </td>
          </tr>
          <tr v-if="expandedRow === table" :key="table + 'exp'" class="expansion-row">
            <td :colspan="methods.length * roles.length + 2" class="pa-1">
              <acl-ts-file-db-child
                v-if="groupedData"
                key="acl"
                :search="search"
                :nodes="nodes"
                :policies="groupedData[table]"
              />
            </td>
          </tr>
        </template>
      </tbody>
    </v-simple-table>

    <!--    <v-data-table-->
    <!--      :headers="headers"-->
    <!--      :items="acls"-->
    <!--      item-key="name"-->
    <!--      show-expand-->
    <!--      class="elevation-1"-->
    <!--    >-->

    <!--      <template v-slot:expanded-item="{ headers, item }">-->
    <!--        <td :colspan="headers.length">More info about {{ item }}</td>-->
    <!--      </template>-->

    <!--      &lt;!&ndash;      <template v-slot:item="{ headers, item }">&ndash;&gt;-->
    <!--      &lt;!&ndash;      <tr>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <td>test</td>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </tr>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </template>&ndash;&gt;-->

    <!--      &lt;!&ndash;      <template v-slot:header="{ headers, item }">&ndash;&gt;-->
    <!--      &lt;!&ndash;        <tr>&ndash;&gt;-->
    <!--      &lt;!&ndash;          <th>test</th>&ndash;&gt;-->
    <!--      &lt;!&ndash;        </tr>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </template>&ndash;&gt;-->

    <!--    </v-data-table>-->

    <!--    <v-virtual-scroll-->
    <!--      :items="data"-->
    <!--      :item-height="50"-->
    <!--      height="100%"-->
    <!--    >-->
    <!--      <template v-slot="{ item }">-->
    <!--    <acl-ts-file-db-child-->
    <!--      v-if="data"-->
    <!--      :nodes="nodes" :policies="data"></acl-ts-file-db-child>-->
    <!--      </template>-->
    <!--    </v-virtual-scroll>-->

    <!--    <v-tabs-->
    <!--      v-model="aclTabs"-->
    <!--    >-->
    <!--      <template v-for="table in tables">-->
    <!--        <v-tab :key="table">{{ table }}</v-tab>-->
    <!--        &lt;!&ndash;        <v-tab-item :key="table">&ndash;&gt;-->
    <!--        &lt;!&ndash;              <acl-ts-file-db-child&ndash;&gt;-->
    <!--        &lt;!&ndash;                v-if="i === aclTabs"&ndash;&gt;-->
    <!--        &lt;!&ndash;                key="acl"&ndash;&gt;-->
    <!--        &lt;!&ndash;                :nodes="nodes" :policies="item"></acl-ts-file-db-child>&ndash;&gt;-->
    <!--        &lt;!&ndash;        </v-tab-item>&ndash;&gt;-->
    <!--      </template>-->

    <!--    </v-tabs>-->

    <!--    <acl-ts-file-db-child-->
    <!--      key="acl"-->
    <!--      v-if="groupedData"-->
    <!--      :nodes="nodes" :policies="acls[aclTabs]"></acl-ts-file-db-child>-->
  </div>
</template>

<script>
/* eslint-disable */

import AclTsFileDbChild from '@/components/project/tableTabs/aclTsFileDbChild'

export default {
  name: 'GlobalAcl',
  components: { AclTsFileDbChild },
  props: ['nodes'],
  data: () => ({
    loading: false,
    edited: false,
    data: null,
    groupedData: null,
    aclTabs: null,
    expandedRow: null,
    search: '',
    roles: [
      'creator',
      'editor',
      'guest'
    ],
    methods: [
      'get', 'post', 'put', 'delete'
    ]
  }),
  computed: {
    tables () {
      return this.groupedData ? Object.keys(this.groupedData) : []
    },
    acls () {
      return this.groupedData ? Object.values(this.groupedData) : []
    }
  },
  async created () {
    await this.loadAcls()
  },
  methods: {
    async loadAcls () {
      try {
        const data = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
          env: this.nodes.env,
          dbAlias: this.$store.state.project.authDbAlias
        }, 'xcRoutesPolicyGet'])).data.list

        const groupedData = {}

        for (const item of data) {
          groupedData[item.tn] = groupedData[item.tn] || []
          groupedData[item.tn].push(item)
        }

        this.groupedData = groupedData

        // for()

        this.data = data
      } catch (e) {
        this.$toast.error('Failed loading role list').goAway(3000)
      }

      this.edited = false
    }

  }
}
</script>

<style scoped lang="scss">
::v-deep {
  table {
    .expansion-row {
      &, td {
        height: auto !important;
        background: transparent !important;
      }
    }
  }
}
</style>
<!--
/**
 * @copyright Copyright (c) 2021, Xgene Cloud Ltd
 *
 * @author Naveen MR <oof1lab@gmail.com>
 * @author Pranav C Balan <pranavxc@gmail.com>
 *
 * @license GNU AGPL version 3 or any later version
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 *
 */
-->