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

Write Preview
Loading…
Cancel
Save