github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui): add confirm dialog for project operations 

Added confirm dialog for project delete,start,restart and stop operations

closes #255

Signed-off-by: Pranav C Balan <pranavxc@gmail.com>
pull/262/head
Pranav C Balan 3 years ago
parent
819a3e9a48
commit
f127c79557
1 changed files with 486 additions and 451 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 147
      packages/nc-gui/pages/projects/index.vue

147
packages/nc-gui/pages/projects/index.vue
Unescape View File

@ -36,7 +36,8 @@
@click="projectsLoad" @click="projectsLoad"
v-bind:tooltip="$t('home.reload_projects_tooltip')" v-bind:tooltip="$t('home.reload_projects_tooltip')"
> >
mdi-refresh </x-icon mdi-refresh
</x-icon
>&nbsp; >&nbsp;
<!-- </x-btn>--> <!-- </x-btn>-->
</h1> </h1>
@ -132,7 +133,8 @@
<v-tooltip right> <v-tooltip right>
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-icon v-on="on" x-small color="grey" class="ml-4" <v-icon v-on="on" x-small color="grey" class="ml-4"
>mdi-information-outline</v-icon >mdi-information-outline
</v-icon
> >
</template> </template>
<!-- Create a new project --> <!-- Create a new project -->
@ -163,7 +165,8 @@
<v-tooltip right> <v-tooltip right>
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-icon v-on="on" x-small color="grey" class="ml-4" <v-icon v-on="on" x-small color="grey" class="ml-4"
>mdi-information-outline</v-icon >mdi-information-outline
</v-icon
> >
</template> </template>
<!-- Supports MySQL, PostgreSQL, SQL Server & SQLite --> <!-- Supports MySQL, PostgreSQL, SQL Server & SQLite -->
@ -313,7 +316,8 @@
<v-menu offset-y> <v-menu offset-y>
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<x-icon v-on="on" color="grey" <x-icon v-on="on" color="grey"
>mdi-dots-vertical</x-icon >mdi-dots-vertical
</x-icon
> >
</template> </template>
<v-list dense> <v-list dense>
@ -374,7 +378,7 @@
:value="true" :value="true"
color="error" color="error"
icon="warning" icon="warning"
>{{ $t('home.search.no_result', { search }) }} >{{ $t('home.search.no_result', {search}) }}
</v-alert> </v-alert>
<!-- <template v-slot:no-data>--> <!-- <template v-slot:no-data>-->
<!-- <v-alert :value="true" outlined color="success" icon="mdi-information-outline">Create a new project--> <!-- <v-alert :value="true" outlined color="success" icon="mdi-information-outline">Create a new project-->
@ -435,7 +439,8 @@
@click="onCreateProject" @click="onCreateProject"
> >
<v-icon color="white" class="blink_me"> <v-icon color="white" class="blink_me">
mdi-lightbulb-on </v-icon mdi-lightbulb-on
</v-icon
>&nbsp; >&nbsp;
<!-- New Project --> <!-- New Project -->
{{ $t('home.create_new_project_button.text') }} {{ $t('home.create_new_project_button.text') }}
@ -454,7 +459,7 @@
align-start align-start
" "
> >
<sponsor-mini /> <sponsor-mini/>
</v-col> </v-col>
</v-row> </v-row>
<!-- <dlgLabelSubmitCancel--> <!-- <dlgLabelSubmitCancel-->
@ -507,13 +512,15 @@
> >
<v-list-item-icon> <v-list-item-icon>
<v-icon class="ml-2" :color="textColors[3]" <v-icon class="ml-2" :color="textColors[3]"
>mdi-calendar-month</v-icon >mdi-calendar-month
</v-icon
> >
</v-list-item-icon> </v-list-item-icon>
<!-- Book a Free DEMO --> <!-- Book a Free DEMO -->
<v-list-item-title>{{ <v-list-item-title>{{
$t('home.show_community_message_2') $t('home.show_community_message_2')
}}</v-list-item-title> }}
</v-list-item-title>
</v-list-item> </v-list-item>
<v-divider></v-divider> <v-divider></v-divider>
<v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank"> <v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank">
@ -523,7 +530,8 @@
<!-- Get your questions answered --> <!-- Get your questions answered -->
<v-list-item-title>{{ <v-list-item-title>{{
$t('home.show_community_message_3') $t('home.show_community_message_3')
}}</v-list-item-title> }}
</v-list-item-title>
</v-list-item> </v-list-item>
<v-divider></v-divider> <v-divider></v-divider>
<v-list-item dense href="https://twitter.com/NocoDB" target="_blank"> <v-list-item dense href="https://twitter.com/NocoDB" target="_blank">
@ -533,7 +541,8 @@
<!-- Follow NocoDB --> <!-- Follow NocoDB -->
<v-list-item-title>{{ <v-list-item-title>{{
$t('home.show_community_message_4') $t('home.show_community_message_4')
}}</v-list-item-title> }}
</v-list-item-title>
</v-list-item> </v-list-item>
</v-list> </v-list>
</div> </div>
@ -558,15 +567,15 @@
</template> </template>
<script> <script>
import dlgLabelSubmitCancel from '../../components/utils/dlgLabelSubmitCancel.vue'; import dlgLabelSubmitCancel from '../../components/utils/dlgLabelSubmitCancel.vue';
import DlgProjectCreate from '@/components/utils/dlgProjectCreate'; import DlgProjectCreate from '@/components/utils/dlgProjectCreate';
import colors from '~/mixins/colors'; import colors from '~/mixins/colors';
import { mapState } from 'vuex'; import {mapState} from 'vuex';
import SponsorOverlay from '@/components/sponsorOverlay'; import SponsorOverlay from '@/components/sponsorOverlay';
import SponsorMini from '@/components/sponsorMini'; import SponsorMini from '@/components/sponsorMini';
export default { export default {
components: { components: {
SponsorMini, SponsorMini,
SponsorOverlay, SponsorOverlay,
@ -664,13 +673,21 @@
}, },
methods: { methods: {
async stopProject(project) { async stopProject(project) {
this.dialogShow = true;
this.confirmMessage =
'Do you want to stop the project?';
this.confirmAction = async act => {
if (act === 'hideDialog') {
this.dialogShow = false;
} else {
this.$set(project, 'status', 'stopping'); this.$set(project, 'status', 'stopping');
const project_id = project.id; const project_id = project.id;
this.statusUpdatingProjectId = project_id; this.statusUpdatingProjectId = project_id;
this.projectStatusUpdating = true; this.projectStatusUpdating = true;
try { try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [ await this.$store.dispatch('sqlMgr/ActSqlOp', [
{ project_id }, {project_id},
'projectStop', 'projectStop',
]); ]);
this.$toast this.$toast
@ -683,15 +700,26 @@
} }
await this.projectsLoad(); await this.projectsLoad();
this.projectStatusUpdating = false; this.projectStatusUpdating = false;
this.dialogShow = false;
}
}
}, },
async startProject(project) { async startProject(project) {
this.dialogShow = true;
this.confirmMessage =
'Do you want to start the project?';
this.confirmAction = async act => {
if (act === 'hideDialog') {
this.dialogShow = false;
} else {
this.$set(project, 'status', 'starting'); this.$set(project, 'status', 'starting');
const project_id = project.id; const project_id = project.id;
this.statusUpdatingProjectId = project_id; this.statusUpdatingProjectId = project_id;
this.projectStatusUpdating = true; this.projectStatusUpdating = true;
try { try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [ await this.$store.dispatch('sqlMgr/ActSqlOp', [
{ project_id }, {project_id},
'projectStart', 'projectStart',
]); ]);
this.$toast this.$toast
@ -704,15 +732,25 @@
} }
await this.projectsLoad(); await this.projectsLoad();
this.projectStatusUpdating = false; this.projectStatusUpdating = false;
this.dialogShow = false;
}
}
}, },
async restartProject(project) { async restartProject(project) {
this.dialogShow = true;
this.confirmMessage =
'Do you want to restart the project?';
this.confirmAction = async act => {
if (act === 'hideDialog') {
this.dialogShow = false;
} else {
this.$set(project, 'status', 'restarting'); this.$set(project, 'status', 'restarting');
const project_id = project.id; const project_id = project.id;
this.statusUpdatingProjectId = project_id; this.statusUpdatingProjectId = project_id;
this.projectStatusUpdating = true; this.projectStatusUpdating = true;
try { try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [ await this.$store.dispatch('sqlMgr/ActSqlOp', [
{ project_id }, {project_id},
'projectRestart', 'projectRestart',
]); ]);
this.$toast this.$toast
@ -725,15 +763,25 @@
} }
await this.projectsLoad(); await this.projectsLoad();
this.projectStatusUpdating = false; this.projectStatusUpdating = false;
this.dialogShow = false
}
}
}, },
async deleteProject(project) { async deleteProject(project) {
this.dialogShow = true;
this.confirmMessage =
'Do you want to delete the project?';
this.confirmAction = async act => {
if (act === 'hideDialog') {
this.dialogShow = false;
} else {
this.$set(project, 'status', 'deleting'); this.$set(project, 'status', 'deleting');
const project_id = project.id; const project_id = project.id;
this.statusUpdatingProjectId = project_id; this.statusUpdatingProjectId = project_id;
this.projectStatusUpdating = true; this.projectStatusUpdating = true;
try { try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [ await this.$store.dispatch('sqlMgr/ActSqlOp', [
{ project_id }, {project_id},
'projectDelete', 'projectDelete',
]); ]);
this.$toast this.$toast
@ -746,6 +794,10 @@
} }
await this.projectsLoad(); await this.projectsLoad();
this.projectStatusUpdating = false; this.projectStatusUpdating = false;
this.dialogShow = false;
}
}
}, },
onCreateProject(xcdb) { onCreateProject(xcdb) {
if (xcdb === 'xcdb') { if (xcdb === 'xcdb') {
@ -754,7 +806,8 @@
this.$router.push('/project/0'); this.$router.push('/project/0');
} }
}, },
async importProjectFromJSON() {}, async importProjectFromJSON() {
},
onTourCompletion() { onTourCompletion() {
// this.$store.commit('windows/MutShowTour', {page: 'home'}) // this.$store.commit('windows/MutShowTour', {page: 'home'})
}, },
@ -820,13 +873,6 @@
}); });
} }
}, },
async projectRemove(project) {
this._project = project;
this.deleteBtnClicked = true;
this.dialog.title =
'Project will drop all databases and remove all migrations files in your local directory. Click submit to delete';
this.dialog.show = true;
},
async projectEdit(project) { async projectEdit(project) {
console.log('projectEdit'); console.log('projectEdit');
this.$router.push({ this.$router.push({
@ -836,18 +882,7 @@
async projectOpenFolder(project) { async projectOpenFolder(project) {
console.log('projectEdit'); console.log('projectEdit');
}, },
async _projectRemove(action) {
if (action === 'hideDialog') {
this.deleteBtnClicked = false;
this.dialog.show = false;
} else {
this.deleteBtnClicked = true;
await this.sqlMgr.projectRemove(this._project);
this.deleteBtnClicked = false;
this.projectsLoad();
this.dialog.show = false;
}
},
async exportMetaZip(project_id) { async exportMetaZip(project_id) {
this.dialogShow = true; this.dialogShow = true;
@ -874,7 +909,7 @@
}, },
]); ]);
const url = window.URL.createObjectURL( const url = window.URL.createObjectURL(
new Blob([data], { type: 'application/zip' }) new Blob([data], {type: 'application/zip'})
); );
const link = document.createElement('a'); const link = document.createElement('a');
link.href = url; link.href = url;
@ -997,40 +1032,40 @@
await this.projectsLoad(); await this.projectsLoad();
// await this.openProjectIfQueryParamFound() // await this.openProjectIfQueryParamFound()
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.action-icons { .action-icons {
opacity: 0; opacity: 0;
transition: 0.2s opacity; transition: 0.2s opacity;
} }
tr:hover .action-icons { tr:hover .action-icons {
opacity: 1; opacity: 1;
} }
@media screen and (max-width: 1240px) { @media screen and (max-width: 1240px) {
.community-card { .community-card {
display: none; display: none;
} }
} }
.community-card { .community-card {
position: absolute; position: absolute;
right: -300px; right: -300px;
bottom: 60px; bottom: 60px;
opacity: 0; opacity: 0;
transition: 2s right, 2s opacity; transition: 2s right, 2s opacity;
} }
.community-card.active { .community-card.active {
right: 0px; right: 0px;
opacity: 1; opacity: 1;
} }
.nc-container { .nc-container {
position: relative; position: relative;
} }
</style> </style>
<!-- <!--

Write Preview
Loading…
Cancel
Save