nocodb/packages/nc-gui/components/project/tableTabs/CustomAcl.vue

<!-- eslint-disable -->
<template>
  <v-skeleton-loader v-if="loading" type="text@3" />
  <div v-else class="caption text-left">
    {{ Array.isArray(value) ? '[' : '{' }}

    <ul>
      <template v-if="Array.isArray(value)">
        <li v-for="(v, i) in value">
          <custom-acl v-model="value[i]" :nodes="nodes" :table="table" />
        </li>
        <li class="caption add" @click="addConditionObj">add +</li>
      </template>
      <template v-else>
        <li v-for="(key, i) in keys" v-if="key !== 'relationType'" :key="key" :class="{ empty: !keys[i] }">
          <div class="d-inline">
            <!--      <span contenteditable v-text="key" class="key"></span>-->
            <select :ref="'keySelect' + i" v-model="keys[i]" class="caption" @change="onKeyChange(i, key)">
              <template v-if="table">
                <optgroup v-if="columns && columns.length" label="columns">
                  <option v-for="col in columns" v-show="!keys.includes(col)" :data-value="col">
                    {{ col }}
                  </option>
                </optgroup>
                <optgroup v-if="hmList && hmList.length" label="Has Many">
                  <option v-for="hm in hmList" v-show="!keys.includes(hm)" data-relation-type="hm" :data-table="hm">
                    {{ hm }}
                  </option>
                </optgroup>
                <optgroup v-if="btList && btList.length" label="BelongsTo">
                  <option v-for="bt in btList" v-show="!keys.includes(bt)" data-relation-type="bt" :data-table="bt">
                    {{ bt }}
                  </option>
                </optgroup>
                <optgroup label="Logical Operators">
                  <option v-for="op in logicOp" data-logical-op="true" :data-op="op">
                    {{ op }}
                  </option>
                </optgroup>
              </template>
              <optgroup v-else label="Comparison Operators">
                <option v-for="op in compOp" v-show="!keys.includes(op)" :data-op="op">
                  {{ op }}
                </option>
              </optgroup>
            </select>
            <div class="delete-wrapper">
              <x-icon
                v-if="typeof value[key] !== 'string'"
                color="red"
                icon-class="delete"
                x-small
                @click="deleteCondition(key)"
              >
                mdi-delete-outline
              </x-icon>
            </div>
            <span class="separator"> : </span>
          </div>
          <template v-if="typeof value[key] === 'string'">
            <input v-model="value[key]" type="text" class="value caption" />
          </template>
          <!--          @input="e => $set(value,key,e.target.innerHTML)"   -->

          <template v-else>
            <span v-if="value[key].relationType" class="caption grey--text">
              {{ `'${table}' ${value[key].relationType === 'bt' ? 'BelongsTo' : 'HasMany'} '${key}'` }}
            </span>
            <custom-acl
              v-model="value[key]"
              :nodes="nodes"
              :table="(value[key].relationType ? key : null) || (logicOp.includes(key) ? table : null)"
            />
          </template>
        </li>
        <li v-if="table" class="caption add" @click="addConditionProp">add +</li>
      </template>
    </ul>
    {{ Array.isArray(value) ? '] ,' : '} ,' }}
  </div>
</template>

<script>
import { insertKey } from '../../../helpers/xutils';

export default {
  name: 'CustomAcl',
  props: ['value', 'table', 'column', 'nodes'],
  data: () => ({
    columns: null,
    hmList: null,
    btList: null,
    logicOp: ['_and', '_or', '_not'],
    compOp: ['eq', 'neq', 'like', 'nlike', 'in', 'gt', 'lt', 'le', 'ge'],
    loading: false,
  }),
  computed: {
    keys() {
      return Object.keys(this.value);
    },
  },
  created() {},
  async mounted() {
    await this.loadTableMetaDetails();
  },
  methods: {
    onKeyChange(i, key) {
      let value = JSON.parse(JSON.stringify(this.value));

      const selected = this.$refs[`keySelect${i}`][0].selectedOptions;
      let selectedVal = '';
      if (selected && selected[0]) {
        selectedVal = selected[0].dataset;
      }
      if (selectedVal.value) {
        delete value[key];
        value = insertKey(this.keys[i], { eq: '' }, value, i);
      } else if (selectedVal.relationType === 'hm') {
        delete value[key];
        value = insertKey(
          selectedVal.table,
          {
            relationType: 'hm',
            '': '',
          },
          value,
          i
        );
      } else if (selectedVal.relationType === 'bt') {
        delete value[key];
        value = insertKey(
          selectedVal.table,
          {
            relationType: 'bt',
            '': '',
          },
          value,
          i
        );
      } else if (selectedVal.op) {
        const oldVal = value[key];
        delete value[key];
        if (selectedVal.logicalOp) {
          if (selectedVal.op === '_not') {
            value = insertKey(
              selectedVal.op,
              {
                '': '',
              },
              value,
              i
            );
          } else {
            value = insertKey(
              selectedVal.op,
              [
                {
                  '': '',
                },
              ],
              value,
              i
            );
          }
        } else {
          value[selectedVal.op] = oldVal;
        }
      }
      this.$emit('input', value);
    },
    addConditionProp() {
      const value = JSON.parse(JSON.stringify(this.value));
      value[''] = '';
      this.$emit('input', value);
    },
    addConditionObj() {
      const value = JSON.parse(JSON.stringify(this.value));
      value.push({
        '': '',
      });
      this.$emit('input', value);
    },
    deleteCondition(key) {
      const value = JSON.parse(JSON.stringify(this.value));
      delete value[key];
      this.$emit('input', value);
    },
    async loadTableMetaDetails() {
      if (this.table) {
        this.loading = true;
        try {
          const meta = await this.$store.dispatch('sqlMgr/ActSqlOp', [
            {
              env: this.nodes.env,
              dbAlias: this.nodes.dbAlias,
            },
            'tableXcModelGet',
            {
              tn: this.table,
            },
          ]);
          const metaObj = JSON.parse(meta.meta);
          this.columns = metaObj.columns.map(v => v.column_name);
          console.log(metaObj);
          this.hmList = metaObj.hasMany.map(v => v.table_name);
          this.btList = metaObj.belongsTo.map(v => v.rtn);
        } catch (e) {
          console.log('load meta', this.table, e);
        } finally {
          this.loading = false;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.key,
.value {
  min-width: 40px;
  border-bottom: 1px dotted #bbbbbb;
  display: inline-block;
}

ul {
  position: relative;
  list-style: none;
  padding-left: 35px;
  overflow: visible;

  li {
    padding: 1px 5px;
  }

  border-left: 1px dotted #bbbbbb;
}

select {
  border-bottom: 1px dotted #bbbbbb;
  -webkit-appearance: listbox;
  -moz-appearance: listbox;
  appearance: listbox;
}

.separator {
  margin: 0 10px;
}

.add {
  font-size: 10px;
}

.empty {
  background: #ddd;
}

.delete-wrapper {
  width: 20px;
  display: inline-block;
}

.delete {
  max-width: 0;
  overflow: hidden;
  //opacity: 0;
  transition: max-width 0.4s, opacity 0.4s;
}

div:hover > .delete-wrapper .delete {
  max-width: 20px;
  //opacity: 1;
}

select,
input {
  color: var(--v-primary-text);
}
</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/>.
 *
 */
-->