wip port dialog

cloudblue · Jul 20, 2023 · a3c0781 · a3c0781
1 parent f057337
commit a3c0781
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/ui/src/pages/DeploymentDetails.vue b/ui/src/pages/DeploymentDetails.vue
@@ -12,6 +12,7 @@
         label="sync",
         color="accent",
         mode="solid",
+        @click="openDialog",
       )
 
     .info-container
@@ -74,6 +75,14 @@
       template(#configuration="")
         .configuration-tab Configuration
 
+    c-dialog(
+      v-model="isDialogShown",
+      :actions="actions",
+      :tabs="dialogTabs",
+      title="Foo",
+      error-text="Lorem ipsum dolor sit amet",
+    )
+
 </template>
 
 <script>
@@ -82,6 +91,7 @@ import {
 } from '@cloudblueconnect/material-svg/baseline';
 
 import cButton from '~components/cButton.vue';
+import cDialog from '~components/cDialog.vue';
 import cStatus from '~components/cStatus.vue';
 import cTabs from '~components/cTabs.vue';
 import cView from '~components/cView.vue';
@@ -97,6 +107,7 @@ import {
 export default {
   components: {
     cButton,
+    cDialog,
     cStatus,
     cTabs,
     cView,
@@ -109,6 +120,8 @@ export default {
     currentTab: null,
     loading: true,
     deployment: null,
+
+    isDialogShown: false,
   }),
 
   computed: {
@@ -123,6 +136,34 @@ export default {
       { label: 'PPR', value: 'ppr' },
       { label: 'Configuration', value: 'configuration' },
     ],
+
+    dialogTabs: () => [
+      { key: 'tab1', label: 'Tab 1', assistiveText: 'Tab 1 assistive text' },
+      { key: 'tab2', label: 'Tab 2' },
+      { key: 'tab3', label: 'Tab 3', assistiveText: 'Tab 3 assistive text' },
+    ],
+
+    actions: () => [
+      {
+        label: 'Cancel',
+        closeAfterHandle: true,
+        color: 'black',
+      },
+      {
+        label: 'Submit',
+        closeAfterHandle: true,
+        handler: () => new Promise((resolve) => {
+          setTimeout(resolve, 2500);
+        }),
+        // color: 'black',
+      },
+    ],
+  },
+
+  methods: {
+    openDialog() {
+      this.isDialogShown = true;
+    },
   },
 
   created() {