Add multi device type modification warning dialog

Author: aspecter

src/components/ZclCreateModifyEndpoint.vue

@@ -120,20 +120,36 @@ limitations under the License.
         />
       </q-card-actions>
     </q-card>
+    <q-dialog v-model="showWarningDialog" persistent>
+      <zcl-warning-dialog
+        title="Do you want to proceed?"
+        message="ZCL device type is being modified which can cause all the configuration on the endpoint to be cleared and re-adjusted."
+        cancel-label="No"
+        ok-label="Yes"
+        @ok="
+          () => {
+            warningDialogReturnValue = 'ok'
+            saveOrCreateHandler()
+          }
+        "
+      />
+    </q-dialog>
   </div>
 </template>
 
 <script>
 import * as RestApi from '../../src-shared/rest-api'
 import * as DbEnum from '../../src-shared/db-enum'
 import CommonMixin from '../util/common-mixin'
+import ZclWarningDialog from './ZclWarningDialog.vue'
 const _ = require('lodash')
 
 export default {
   name: 'ZclCreateModifyEndpoint',
   props: ['endpointReference'],
   emits: ['saveOrCreateValidated', 'updateData'],
   mixins: [CommonMixin],
+  components: { ZclWarningDialog },
   watch: {
     deviceTypeRefAndDeviceIdPair(val) {
       this.setDeviceTypeCallback(val)
@@ -175,6 +191,7 @@ export default {
 
       // Set device types only in edit mode
       this.deviceTypeTmp = deviceTypes
+      this.deviceTypeMountSnapshot = JSON.parse(JSON.stringify(deviceTypes))
       this.primaryDeviceTypeTmp = deviceTypes[0] ?? null // First item is the primary device type
     } else {
       this.shownEndpoint.endpointIdentifier = this.getSmallestUnusedEndpointId()
@@ -198,8 +215,11 @@ export default {
       saveOrCreateCloseFlag: false,
       deviceTypeTmp: [], // Temp store for the selected device types
       primaryDeviceTypeTmp: null, // Temp store for the selected primary device type
-      enableMultipleDevice: false, // TODO make it data driven
-      enablePrimaryDevice: false, // TODO make it data driven
+      enableMultipleDevice: false,
+      enablePrimaryDevice: false,
+      showWarningDialog: false,
+      warningDialogReturnValue: null,
+      deviceTypeMountSnapshot: null,
     }
   },
   computed: {
@@ -361,6 +381,21 @@ export default {
       }
     },
     saveOrCreateHandler() {
+      // Check if warning dialog available for the given situation
+      if (
+        this.endpointReference &&
+        this.warningDialogReturnValue == null &&
+        this.deviceType?.length > 1
+      ) {
+        // Check if warning dialog should be shown
+        let deviceTypeChanged = true
+        // this.deviceTypeMountSnapshot
+        if (deviceTypeChanged) {
+          this.showWarningDialog = true
+          return
+        }
+      }
+      this.warningDialogReturnValue = null
       let profile = this.$store.state.zap.isProfileIdShown
         ? this.$refs.profile.validate()
         : true

src/components/ZclWarningDialog.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <q-card>
+      <q-card-section class="content-size">
+        <div class="text-h6 text-align:left q-mb-md">
+          {{ title }}
+        </div>
+        <div>
+          {{ message }}
+        </div>
+      </q-card-section>
+      <q-card-actions>
+        <q-btn :label="cancelLabel" v-close-popup class="col" @click="cancel" />
+        <q-btn
+          :label="okLabel"
+          color="primary"
+          class="col v-step-4"
+          @click="ok"
+        />
+      </q-card-actions>
+    </q-card>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ZclWarningDialog',
+  emits: ['cancel', 'ok'],
+  props: {
+    title: { type: String, required: true },
+    message: { type: String, required: false },
+    cancelLabel: {
+      type: String,
+      required: false,
+      default: () => 'Cancel',
+    },
+    okLabel: { type: String, required: false, default: () => 'Ok' },
+  },
+  methods: {
+    cancel() {
+      this.$emit('cancel')
+    },
+    ok() {
+      this.$emit('ok')
+    },
+  },
+}
+</script>
+<style scoped>
+.content-size {
+  min-width: 400px;
+}
+</style>