多维表格

512 lines
17 KiB

<template>
<v-container class="ma-0 pa-0" fluid style="height: 100%">
<template v-if="!isSimpleProject">
<v-toolbar height="42" class="toolbar-border-bottom elevation-0">
<v-breadcrumbs :items="[{
text: this.nodes.env,
disabled: true,
href: '#'
},{
text: this.nodes.dbAlias,
disabled: true,
href: '#'
}]" divider=">" small>
<template v-slot:divider>
<v-icon small color="grey lighten-2">forward</v-icon>
</template>
</v-breadcrumbs>
<p class=" pt-3 body-2" v-if="tableMigrationFiles.data.length">
: Pending Migrations
<span><b>( {{ tableMigrationFiles.status }} )</b></span>
</p>
<v-spacer></v-spacer>
<!-- <x-btn tooltip="Open Migrations Folder"
icon="mdi-folder-open"
outlined
small
@click="openFolder">
Open Folder
</x-btn>-->
<x-btn tooltip="Reload Migrations"
small
outlined
@dblclick="showUpAndDownBtns = !showUpAndDownBtns"
@click="loadEnv">
<v-icon left small>refresh</v-icon>
Reload
</x-btn>
<div
class="ml-1" v-if=" showUpAndDownBtns &&tableMigrationFiles.data.length">
<v-menu v-for="(menu,menuIndex) in migrationMenu" open-on-hover bottom offset-y
:key="menuIndex" class="ml-1"
>
<template v-slot:activator="{ on }">
<v-btn
:tooltip="menu.tooltip"
:color="menu.color"
outlined
small
v-on="on"
:disabled="isMigrationButtonEnabled(menu.label)"
>
{{ menu.label }}
<v-icon>mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list dense>
<div v-for="(item, itemIndex) in menu.menuItems"
:key="itemIndex"
>
<v-list-item
@click="item.action"
>
<v-list-item-title>
<v-icon small
:color="menu.color">{{ item.icon }}
</v-icon> &nbsp;
{{ item.label }}
</v-list-item-title>
</v-list-item>
<v-divider v-if="itemIndex < menu.menuItems.length - 1"></v-divider>
</div>
</v-list>
</v-menu>
</div>
</v-toolbar>
<!-- <v-row class="height" v-if="tableMigrationFiles.data.length">-->
<!-- <v-col class="column py-0 my-0" cols="6">-->
<splitpanes v-if="tableMigrationFiles.data.length"
style="height:calc(100% - 42px);border-top: 1px solid grey" class="xc-theme">
<pane min-size="20" size="40" style="overflow: auto">
<v-card class="px-0 py-0 my-0">
<!-- v-if="tableMigrationFiles.status"-->
<v-hover>
<v-checkbox
class="pl-3 "
dense
v-model="tableMigrationFiles.showPendingMigrations"
slot-scope="{ hover }"
color="primary lighten-1"
>
<template v-slot:label=""><span
class="body-2"
:class="{'white--text ':hover}">Show Only Pending Migrations ({{ tableMigrationFiles.status }})</span>
</template>
</v-checkbox
>
</v-hover>
<v-data-table
dense
style=" border-top: 1px solid #7F828B33;"
:headers="tableMigrationFiles.headers"
:items="tableMigrationFiles.data"
v-model="tableMigrationFiles.selected"
footer-props.items-per-page-options="15"
>
<template v-slot:item="props">
<tr
v-if="tableMigrationFiles.showPendingMigrations
? props.item.status === true
: true"
@click="getMigrationFiles(props.item)"
:active="!!selectedMigration.migration &&
selectedMigration.migration.title == props.item.title">
<td :class="findMigrationTextColor(props.item)" class="caption">
{{ props.index + 1 }}
</td>
<td class="text-center py-2 caption" style="cursor: pointer"
:class="findMigrationTextColor(props.item)">
<span>{{ props.item.title }}</span> &nbsp;&nbsp;&nbsp;&nbsp; <span>{{ props.item.titleDown }}</span>
</td>
<!-- <td></td>-->
<td class="text-center caption">
<div class="pa-0 ma-0 caption" v-if="props.item.status">
<x-btn text tooltip="Migration yet to be applied" btn.class="warning--text caption">
No
<!-- <v-icon :color="findNextMigrationColor(props.item)">mdi-seal-->
<!-- </v-icon>-->
</x-btn>
</div>
<div v-else class="pa-0 ma-0">
<x-btn text tooltip="Applied migration" btn.class="primary--text caption">
Yes
<!-- <v-icon :color="findNextMigrationColor(props.item)">mdi-seal</v-icon>-->
</x-btn>
</div>
</td>
</tr>
</template>
</v-data-table>
</v-card>
<!-- </v-col>-->
<!-- <v-col class="column " cols="6">-->
</pane>
<pane min-size="33" size="60" style="overflow: auto">
<MonacoEditor
v-if="selectedMigration.up"
:code.sync="selectedMigration.up"
:heading="`${selectedMigration.migration.title}`"
cssStyle="height:300px"
:readOnly="true"
/>
<MonacoEditor
v-if="selectedMigration.down"
:code.sync="selectedMigration.down"
cssStyle="height:300px"
:heading="`${selectedMigration.migration.titleDown}`"
:readOnly="true"
/>
<!-- </v-col-->
<!-- >-->
<!-- </v-row>-->
</pane>
</splitpanes>
<v-row v-cloak v-else class="pa-4 ma-4" justify="center" align="center">
<v-card class="pa-4 ma-4 text-center">
<p class="display-2">
Schema migrations will be created automatically
</p>
<p class="display-2">
Create a table and refresh this page.
<br>
Show GIF
</p>
</v-card>
</v-row>
</template>
<template v-else>
<v-row>
<v-col class="pa-4">
<v-alert type="info" class="mx-3" outlined>Migration is not available in Simple DB Connection project
</v-alert>
</v-col>
</v-row>
</template>
</v-container>
</template>
<script>
import {mapGetters, mapActions} from "vuex";
import dlgLabelSubmitCancel from "../../utils/dlgLabelSubmitCancel";
import MonacoEditor from "../../monaco/Monaco";
import {Splitpanes, Pane} from 'splitpanes'
// const {shell, path} = require("electron").remote.require(
// "./libs"
// );
export default {
components: {
// dlgLabelSubmitCancel,
MonacoEditor,
Splitpanes, Pane
},
name:'db',
data() {
return {
showUpAndDownBtns: false,
tableMigrationFiles: {
heading: "",
selected: [],
headers: [
{text: "#", sortable: false, width: "1%", class: ' text-center'},
{text: "Migration Files", value: 'migration', sortable: false, class: ' pa-4 text-center'},
// { text: "Down File", sortable: false, width: "1%" ,class:''},
{text: "Migrations applied", sortable: false, width: "1%", class: ' pa-4 text-center'}
],
data: [],
status: "",
showPendingMigrations: false
},
tableMigrationRows: {
heading: "",
headers: [],
data: []
},
selectedMigration: {migration: null, up: null, down: null},
view: {},
oldViewDefination: "",
newView: this.nodes.newView ? true : false,
dialogShow: false,
migrationMenu: [
{
label: 'Migration Up',
tooltip: 'Apply Database Migrations',
color: 'primary',
menuItems: [
{
label: 'Migration Up One',
icon: 'mdi-redo',
action: () => this.migrationUp(1)
},
{
label: 'MIGRATION UP ALL',
icon: 'mdi-fast-forward',
action: () => this.migrationUp()
}
]
}, {
label: 'Migration Down',
color: 'warning',
tooltip: 'Revert Database Migrations',
menuItems: [
{
label: 'Migration Down One',
icon: 'mdi-undo',
action: () => this.migrationDown(1)
},
{
label: 'Migration Down All',
icon: 'mdi-rewind',
action: () => this.migrationDown()
}
]
}
]
};
},
computed: {
...mapGetters({
sqlMgr: "sqlMgr/sqlMgr",
currentProjectFolder: "project/currentProjectFolder",
isSimpleProject: "project/GtrProjectIsDbConnection",
})
},
methods: {
// openFolder() {
// shell.openItem(path.join(this.currentProjectFolder, 'server', 'tool', this.nodes.dbAlias, 'migrations'));
// },
isMigrationButtonEnabled(name) {
console.log('menu -- - ', name);
return this.nodes.dbConnection.client === 'sqlite3' && name === 'Migration Down'
},
async getMigrationFiles(migration) {
this.selectedMigration.migration = "";
this.selectedMigration.up = "";
this.selectedMigration.down = "";
console.log(migration);
this.selectedMigration.migration = migration;
// let result = await this.sqlMgr.migrator().migrationsToSql({
// env: this.nodes.env,
// dbAlias: this.nodes.dbAlias,
// folder: this.currentProjectFolder,
// title: migration.title,
// titleDown: migration.titleDown
// });
// let result = await this.sqlMgr.sqlOp(null, 'migrationsToSql', {
// env: this.nodes.env,
// dbAlias: this.nodes.dbAlias,
// folder: this.currentProjectFolder,
// title: migration.title,
// titleDown: migration.titleDown
// });
let result = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'migrationsToSql', {
env: this.nodes.env,
dbAlias: this.nodes.dbAlias,
folder: this.currentProjectFolder,
title: migration.title,
titleDown: migration.titleDown
}]);
console.log(result);
this.selectedMigration.up = result.data.object.up;
this.selectedMigration.down = result.data.object.down;
},
async loadEnv() {
try {
this.$store.commit('notification/MutToggleProgressBar', true);
const migrationArgs = {
env: this.nodes.env,
dbAlias: this.nodes.dbAlias,
folder: this.currentProjectFolder,
sqlContentMigrate: 0,
migrationSteps: 9999,
onlyList: true
};
console.log("this.currentProjectFolder", this.currentProjectFolder);
// let result = await this.sqlMgr.migrator().migrationsList(migrationArgs);
// let result = await this.sqlMgr.sqlOp(null, 'migrationsList', migrationArgs);
let result = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'migrationsList', migrationArgs]);
let nextMigration = 0;
for (let i = 0; i < result.data.object.list.length; i++) {
const el = result.data.object.list[i];
el.nextMigration = 0;
if (el.status === true && nextMigration === 0) {
nextMigration = 1;
el.nextMigration = nextMigration;
} else if (el.status === true && nextMigration === 1) {
el.nextMigration = 2;
}
}
console.log("loadEnv: ", result);
this.tableMigrationFiles.data = result.data.object.list;
this.tableMigrationFiles.status = result.data.object.pending;
if (this.tableMigrationFiles.data[0]) {
await this.getMigrationFiles(this.tableMigrationFiles.data[0]);
}
} catch (e) {
console.log(e);
} finally {
this.$store.commit('notification/MutToggleProgressBar', false);
}
},
async applyChanges() {
},
async deleteView(action = "") {
},
async migrationUp(steps = 99999999999) {
try {
// await this.sqlMgr.migrator().migrationsUp({
// env: this.nodes.env,
// dbAlias: this.nodes.dbAlias,
// migrationSteps: steps,
// folder: this.currentProjectFolder,
// sqlContentMigrate: 1
// });
// await this.sqlMgr.sqlOp(null, 'migrationsUp', {
// env: this.nodes.env,
// dbAlias: this.nodes.dbAlias,
// migrationSteps: steps,
// folder: this.currentProjectFolder,
// sqlContentMigrate: 1
// });
await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'migrationsUp', {
env: this.nodes.env,
dbAlias: this.nodes.dbAlias,
migrationSteps: steps,
folder: this.currentProjectFolder,
sqlContentMigrate: 1
}]);
this.$toast.success("Migration up was successfully completed.").goAway(5000)
} catch (e) {
this.$toast.error("Migration up was failed.").goAway(5000)
}
await this.loadEnv();
},
async migrationDown(steps = 99999999999) {
try {
// await this.sqlMgr.migrator().migrationsDown({
// env: this.nodes.env,
// dbAlias: this.nodes.dbAlias,
// migrationSteps: steps,
// folder: this.currentProjectFolder,
// sqlContentMigrate: 1
// });
// await this.sqlMgr.sqlOp(null, 'migrationsDown', {
// env: this.nodes.env,
// dbAlias: this.nodes.dbAlias,
// migrationSteps: steps,
// folder: this.currentProjectFolder,
// sqlContentMigrate: 1
// });
await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'migrationsDown', {
env: this.nodes.env,
dbAlias: this.nodes.dbAlias,
migrationSteps: steps,
folder: this.currentProjectFolder,
sqlContentMigrate: 1
}]);
this.$toast.success("Migration down was successfully completed.").goAway(5000)
} catch (e) {
this.$toast.error("Migration down was failed.").goAway(5000)
}
await this.loadEnv();
},
findNextMigrationColor(item) {
if (item.nextMigration === 1) {
return "orange";
} else if (item.nextMigration === 2) {
return "orange";
} else if (item.nextMigration === 0) {
return "grey";
}
return "";
},
findMigrationTextColor(item) {
// if (item.nextMigration === 1) {
// return "white--text";
// } else if (item.nextMigration === 2) {
// return "white--text";
// } else if (item.nextMigration === 0) {
// return "grey--text";
// }
return "";
}
},
beforeCreated() {
},
created() {
this.loadEnv();
},
mounted() {
},
beforeDestroy() {
},
destroy() {
},
validate({params}) {
return true;
},
head() {
return {};
},
props: ["nodes"],
watch: {},
directives: {}
};
</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/>.
*
*/
-->