Merge pull request #900 from flowforge/dialog-api

Dialog JS API

frontend/src/layouts/Platform.vue

@@ -13,6 +13,10 @@
                                        :type="a.type" :message="a.message"
                                        :countdown="a.countdown || 3000" @close="clear($index)"></ff-notification-toast>
             </TransitionGroup>
+            <ff-dialog ref="dialog" :header="dialog.header" :kind="dialog.kind" :disable-primary="dialog.disablePrimary" :confirm-label="dialog.confirmLabel" @cancel="clearDialog" @confirm="dialog.onConfirm">
+                <p v-if="dialog.text">{{ dialog.text }}</p>
+                <div class="space-y-2" v-html="dialog.html"></div>
+            </ff-dialog>
         </div>
     </div>
 </template>
@@ -21,6 +25,7 @@
 import PageHeader from '@/components/PageHeader.vue'
 
 import alerts from '@/services/alerts.js'
+import dialog from '@/services/dialog.js'
 
 export default {
     name: 'ff-layout-platform',
@@ -30,7 +35,15 @@ export default {
     data () {
         return {
             mobileMenuOpen: false,
-            alerts: []
+            alerts: [],
+            dialog: {
+                header: null,
+                text: null,
+                html: null,
+                confirmLabel: null,
+                kind: null,
+                onConfirm: null
+            }
         }
     },
     computed: {
@@ -47,6 +60,7 @@ export default {
     mounted () {
         this.checkRouteMeta()
         alerts.subscribe(this.alertReceived)
+        dialog.bind(this.$refs.dialog, this.showDialogHandler)
     },
     methods: {
         toggleMenu () {
@@ -69,6 +83,30 @@ export default {
                 timestamp: Date.now()
             })
         },
+        showDialogHandler (msg, onConfirm) {
+            if (typeof (msg) === 'string') {
+                this.dialog.content = msg
+            } else {
+                // msg is an object, let's break it apart
+                this.dialog.header = msg.header
+                this.dialog.text = msg.text
+                this.dialog.html = msg.html
+                this.dialog.confirmLabel = msg.confirmLabel
+                this.dialog.kind = msg.kind
+                this.dialog.disablePrimary = msg.disablePrimary
+            }
+            this.dialog.onConfirm = onConfirm
+        },
+        clearDialog () {
+            this.dialog = {
+                header: null,
+                text: null,
+                html: null,
+                confirmLabel: null,
+                kind: null,
+                onConfirm: null
+            }
+        },
         clear (i) {
             this.alerts.splice(this.alerts.length - 1 - i, 1)
         }

frontend/src/pages/admin/ProjectTypes/dialogs/ProjectTypeEditDialog.vue

@@ -2,13 +2,13 @@
     <ff-dialog ref="dialog" :header="dialogTitle">
         <template v-slot:default>
             <form class="space-y-6 mt-2" @submit.prevent>
-                <FormRow v-model="input.name" :error="errors.name">Name</FormRow>
-                <FormRow v-model="input.active" type="checkbox">Active</FormRow>
-                <FormRow v-model="input.description" :error="errors.description">Description
+                <FormRow v-model="input.name" :error="errors.name" data-form="name">Name</FormRow>
+                <FormRow v-model="input.active" type="checkbox" data-form="active">Active</FormRow>
+                <FormRow v-model="input.description" :error="errors.description" data-form="description">Description
                     <template #description>Use markdown for formatting</template>
                     <template #input><textarea class="w-full" rows="6" v-model="input.description"></textarea></template>
                 </FormRow>
-                <FormRow :options="stacks" v-model="input.defaultStack" :disabled="stacks.length === 0" id="stack">
+                <FormRow :options="stacks" v-model="input.defaultStack" :disabled="stacks.length === 0" id="stack" data-form="stack">
                     Default Stack
                     <template #description><div v-if="stacks.length === 0">There no stacks defined for this Project Type yet.</div></template>
                 </FormRow>

frontend/src/pages/admin/ProjectTypes/index.vue

@@ -2,15 +2,15 @@
     <form class="space-y-6">
         <FormHeading>Project Types
             <template v-slot:tools>
-                <ff-button size="small" @click="showCreateProjectTypeDialog">
+                <ff-button size="small" @click="showCreateProjectTypeDialog" data-action="create-type">
                     <template v-slot:icon-right>
                         <PlusSmIcon />
                     </template>
                     Create project type
                 </ff-button>
             </template>
         </FormHeading>
-        <ff-tile-selection>
+        <ff-tile-selection data-el="active-types">
             <ff-tile-selection-option v-for="(projType, index) in activeProjectTypes" :key="index"
                                       :editable="true" @edit="showEditProjectTypeDialog(projType)" :price="projType.properties?.billingDescription?.split('/')[0]"
                                       :price-interval="projType.properties?.billingDescription?.split('/')[1]"
@@ -21,7 +21,7 @@
             <a v-if="!loading" @click.stop="loadItems" class="forge-button-inline">Load more...</a>
         </div>
         <FormHeading>Inactive Types</FormHeading>
-        <ff-data-table :columns="columns" :rows="inactiveProjectTypes">
+        <ff-data-table :columns="columns" :rows="inactiveProjectTypes" data-el="inactive-types">
             <template v-slot:context-menu="{row}">
                 <ff-list-item label="Edit Project Type" @click="projectTypeAction('edit', row.id)"/>
                 <ff-list-item label="Delete Project Type" kind="danger" @click="projectTypeAction('delete', row.id)"/>
@@ -33,16 +33,17 @@
     </form>
     <ProjectTypeEditDialog ref="adminProjectTypeEditDialog" @projectTypeCreated="projectTypeCreated"
                            @projectTypeUpdated="projectTypeUpdated" @showDeleteDialog="showConfirmProjectTypeDeleteDialog"/>
-    <ProjectTypeDeleteDialog ref="adminProjectTypeDeleteDialog" @deleteProjectType="deleteProjectType" />
 </template>
 
 <script>
 import projectTypesApi from '@/api/projectTypes'
 import FormHeading from '@/components/FormHeading'
 import { markRaw } from 'vue'
 import { mapState } from 'vuex'
+
+import Dialog from '@/services/dialog'
+
 import ProjectTypeEditDialog from './dialogs/ProjectTypeEditDialog'
-import ProjectTypeDeleteDialog from './dialogs/ProjectTypeDeleteDialog'
 import ProjectTypeDescriptionCell from './components/ProjectTypeDescriptionCell'
 import { PlusSmIcon } from '@heroicons/vue/outline'
 
@@ -87,10 +88,11 @@ export default {
             case 'edit':
                 this.showEditProjectTypeDialog(projectType)
                 break
-            case 'delete':
+            case 'delete': {
                 this.showConfirmProjectTypeDeleteDialog(projectType)
                 break
             }
+            }
         },
         showCreateProjectTypeDialog () {
             this.$refs.adminProjectTypeEditDialog.show()
@@ -99,13 +101,19 @@ export default {
             this.$refs.adminProjectTypeEditDialog.show(projectType)
         },
         showConfirmProjectTypeDeleteDialog (projectType) {
-            this.$refs.adminProjectTypeDeleteDialog.show(projectType)
-        },
-        async deleteProjectType (projectType) {
-            console.log(projectType)
-            await projectTypesApi.deleteProjectType(projectType.id)
-            const index = this.projectTypes.findIndex(pt => pt.id === projectType.id)
-            this.projectTypes.splice(index, 1)
+            const text = projectType.projectCount > 0 ? 'You cannot delete a project type that is still being used by projects.' : 'Are you sure you want to delete this project type?'
+            Dialog.show({
+                header: 'Delete Project Type',
+                kind: 'danger',
+                text: text,
+                confirmLabel: 'Delete',
+                disablePrimary: projectType.projectCount > 0
+            }, async () => {
+                // on confirm - delete the project type
+                await projectTypesApi.deleteProjectType(projectType.id)
+                const index = this.projectTypes.findIndex(pt => pt.id === projectType.id)
+                this.projectTypes.splice(index, 1)
+            })
         },
         async projectTypeCreated (projectType) {
             this.projectTypes.push(projectType)
@@ -145,8 +153,7 @@ export default {
     components: {
         FormHeading,
         PlusSmIcon,
-        ProjectTypeEditDialog,
-        ProjectTypeDeleteDialog
+        ProjectTypeEditDialog
     }
 }
 </script>

frontend/src/pages/admin/Stacks/index.vue

@@ -3,7 +3,7 @@
         <FormHeading>Active Stacks
         </FormHeading>
         <ff-loading v-if="loadingActive" message="Loading Stacks..." />
-        <ff-data-table v-if="!loadingActive" :columns="activeColumns" :rows="activeStacks"
+        <ff-data-table v-if="!loadingActive" data-el="active-stacks" :columns="activeColumns" :rows="activeStacks"
                        :show-search="true" search-placeholder="Search by Stack Name..."  no-data-message="No Inactive Stacks Found">
             <template v-slot:actions>
                 <ff-button @click="showCreateStackDialog">
@@ -24,7 +24,7 @@
         </div>
         <FormHeading>Inactive Stacks</FormHeading>
         <ff-loading v-if="loadingInactive" message="Loading Stacks..." />
-        <ff-data-table v-if="!loadingInactive" :columns="inactiveColumns" :rows="inactiveStacks"
+        <ff-data-table v-if="!loadingInactive" data-el="inactive-stacks" :columns="inactiveColumns" :rows="inactiveStacks"
                        :show-search="true" search-placeholder="Search by Stack Name..." no-data-message="No Inactive Stacks Found">
             <template v-slot:context-menu="{row}">
                 <ff-list-item label="Create New Version" @click="stackAction('createNewVersion', row.id)"/>
@@ -37,21 +37,21 @@
         </div>
     </form>
     <AdminStackEditDialog @stackCreated="stackCreated" @stackUpdated="stackUpdated" ref="adminStackEditDialog"/>
-    <AdminStackDeleteDialog @deleteStack="deleteStack" ref="adminStackDeleteDialog"/>
-
 </template>
 
 <script>
 import stacksApi from '@/api/stacks'
 import projectTypesApi from '@/api/projectTypes'
 
+import Alerts from '@/services/alerts'
+import Dialog from '@/services/dialog'
+
 import FormHeading from '@/components/FormHeading'
 
 import { markRaw } from 'vue'
 import { mapState } from 'vuex'
 
 import AdminStackEditDialog from './dialogs/AdminStackEditDialog'
-import AdminStackDeleteDialog from './dialogs/AdminStackDeleteDialog'
 
 import StackPropertiesCell from './components/StackPropertiesCell'
 
@@ -107,15 +107,40 @@ export default {
     },
     methods: {
         stackAction (action, stackId) {
+            console.log('stack action')
             const stack = this.allStacks[stackId]
             if (stack) {
                 switch (action) {
                 case 'editProperties':
                     this.$refs.adminStackEditDialog.showEdit(stack)
                     break
-                case 'delete':
-                    this.$refs.adminStackDeleteDialog.show(stack)
+                case 'delete': {
+                    const text = stack.projectCount > 0 ? 'You cannot delete a stack that is still being used by projects.' : 'Are you sure you want to delete this stack?'
+                    Dialog.show({
+                        header: 'Delete Stack',
+                        kind: 'danger',
+                        text: text,
+                        confirmLabel: 'Delete',
+                        disablePrimary: stack.projectCount > 0
+                    }, async () => {
+                        // on confirm - delete the stack
+                        stacksApi.deleteStack(stack.id)
+                            .then(() => {
+                                if (stack.active) {
+                                    const index = this.activeStacks.indexOf(stack)
+                                    this.activeStacks.splice(index, 1)
+                                } else {
+                                    const index = this.inactiveStacks.indexOf(stack)
+                                    this.inactiveStacks.splice(index, 1)
+                                }
+                                delete this.allStacks[stack.id]
+                            })
+                            .catch((err) => {
+                                Alerts.emit(err.message, 'warning')
+                            })
+                    })
                     break
+                }
                 case 'createNewVersion':
                     this.$refs.adminStackEditDialog.showCreateVersion(stack)
                 }
@@ -174,17 +199,6 @@ export default {
             this.sortStacks(this.activeStacks)
             this.sortStacks(this.inactiveStacks)
         },
-        async deleteStack (stack) {
-            await stacksApi.deleteStack(stack.id)
-            if (stack.active) {
-                const index = this.activeStacks.indexOf(stack)
-                this.activeStacks.splice(index, 1)
-            } else {
-                const index = this.inactiveStacks.indexOf(stack)
-                this.inactiveStacks.splice(index, 1)
-            }
-            delete this.allStacks[stack.id]
-        },
         loadActiveItems: async function () {
             this.loadingActive = true
             const result = await stacksApi.getStacks(this.nextCursor, 30, 'active')
@@ -232,7 +246,6 @@ export default {
     components: {
         FormHeading,
         AdminStackEditDialog,
-        AdminStackDeleteDialog,
         PlusSmIcon
     }
 }