mirror of https://github.com/nocodb/nocodb
198 lines
5.5 KiB
198 lines
5.5 KiB
<template> |
|
<div> |
|
<v-toolbar flat height="60" class="toolbar-border-bottom"> |
|
<v-text-field |
|
v-model="search" |
|
label="Search" |
|
class="mx-4" |
|
dense |
|
outlined |
|
hide-details |
|
prepend-inner-icon="search" |
|
/> |
|
|
|
<v-spacer /> |
|
<x-btn |
|
outlined |
|
:tooltip="$t('tooltip.reloadList')" |
|
small |
|
color="primary" |
|
icon="refresh" |
|
btn.class="text-capitalize" |
|
@click="loadRelations" |
|
> |
|
<!-- Reload --> |
|
{{ $t('general.reload') }} |
|
</x-btn> |
|
<!-- <x-btn |
|
outlined |
|
tooltip="Toggle All" |
|
small |
|
color="primary" |
|
btn.class="text-capitalize" |
|
icon="mdi-check-bold" |
|
@click="toggleAll(toggle)" |
|
> |
|
Toggle All {{ toggle ? 'ON' : 'OFF' }} |
|
</x-btn>--> |
|
<x-btn |
|
outlined |
|
:tooltip="$t('tooltip.saveChanges')" |
|
small |
|
:disabled="!edited" |
|
:loading="updating" |
|
btn.class="text-capitalize" |
|
color="primary" |
|
icon="save" |
|
@click="save" |
|
> |
|
<!-- Save --> |
|
{{ $t('general.save') }} |
|
</x-btn> |
|
</v-toolbar> |
|
<div class="d-flex justify-center"> |
|
<v-skeleton-loader v-if="loading" type="table" class="flex-shrink-1" style="min-width: 75%" /> |
|
<v-data-table |
|
v-else |
|
dense |
|
class="flex-shrink-1" |
|
style="min-width: 75%" |
|
:headers="[{}, {}, {}, { value: 'tn' }, { value: 'rtn' }, {}]" |
|
hide-default-header |
|
:items="relations" |
|
:search="search" |
|
> |
|
<template #header> |
|
<thead> |
|
<tr class="text-left caption"> |
|
<th class="grey--text">#</th> |
|
<th class="grey--text"> |
|
Table Name <span class="caption grey--text">({{ selectedCount }})</span> |
|
</th> |
|
<th class="grey--text">Relation</th> |
|
<th class="grey--text">Parent</th> |
|
<th class="grey--text">Child</th> |
|
<!-- <th />--> |
|
</tr> |
|
</thead> |
|
</template> |
|
|
|
<template #item="{ item, index }"> |
|
<tr class="caption"> |
|
<td>{{ index + 1 }}</td> |
|
<td>{{ item.relationType === 'hm' ? item.rtn : item.table_name }}</td> |
|
<td>{{ item.relationType === 'hm' ? 'HasMany' : 'BelongsTo' }}</td> |
|
<td>{{ item.rtn }}</td> |
|
<td>{{ item.table_name }}</td> |
|
<!-- <td> |
|
<v-checkbox |
|
v-model="item.enabled" |
|
class="" |
|
dense |
|
hide-details |
|
@change="$set(item,'edited',true)" |
|
/> |
|
</td>--> |
|
</tr> |
|
</template> |
|
</v-data-table> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: 'DisableOrEnableRelations', |
|
props: ['nodes', 'dbAlias'], |
|
data: () => ({ |
|
loading: true, |
|
toggle: true, |
|
updating: false, |
|
relations: [], |
|
search: '', |
|
}), |
|
computed: { |
|
selectedCount() { |
|
return `${this.relations.filter(({ enabled }) => enabled).length}/${this.relations.length}`; |
|
}, |
|
edited() { |
|
return this.relations.some(({ edited }) => edited); |
|
}, |
|
}, |
|
async created() { |
|
await this.loadRelations(); |
|
}, |
|
methods: { |
|
async loadRelations() { |
|
this.loading = true; |
|
try { |
|
this.relations = await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
{ |
|
dbAlias: this.dbAlias, |
|
env: this.$store.getters['project/GtrEnv'], |
|
}, |
|
'xcRelationsGet', |
|
]); |
|
} catch (e) { |
|
console.log(e); |
|
} |
|
this.loading = false; |
|
}, |
|
toggleAll(toggle) { |
|
this.toggle = !toggle; |
|
for (const rel of this.relations) { |
|
this.$set(rel, 'edited', rel.edited || rel.enabled !== toggle); |
|
this.$set(rel, 'enabled', toggle); |
|
} |
|
}, |
|
async save() { |
|
const editedRelations = this.relations.filter(({ edited }) => edited); |
|
this.updating = true; |
|
try { |
|
await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
{ |
|
dbAlias: this.dbAlias, |
|
env: this.$store.getters['project/GtrEnv'], |
|
}, |
|
'xcRelationsSet', |
|
editedRelations, |
|
]); |
|
this.$toast.success('Relations enabled/disabled successfully').goAway(3000); |
|
for (const rel of this.relations) { |
|
this.$set(rel, 'edited', false); |
|
} |
|
} catch (e) { |
|
this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000); |
|
console.log(e.message); |
|
} |
|
this.updating = false; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped></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/>. |
|
* |
|
*/ |
|
-->
|
|
|