From d1da4803cf482d61005a7886d37823e10e648cca Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 23 Sep 2024 03:17:20 +0200
Subject: [PATCH] [#341] Adapted `alarm` UI to the changes to the
 `ProcedureEditor` component.

---
 .../src/components/Action/ActionsList.vue     |  9 +++++
 .../src/components/elements/Dropdown.vue      |  2 +-
 .../src/components/panels/Entities/Alarm.vue  |  9 +++--
 .../panels/Entities/Alarm/AlarmEditor.vue     | 38 ++++++++++++-------
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
index 09296ffdac..ee8facceeb 100644
--- a/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
+++ b/platypush/backend/http/webapp/src/components/Action/ActionsList.vue
@@ -146,6 +146,7 @@ export default {
     'drop',
     'input',
     'reset',
+    'update',
   ],
 
   components: {
@@ -921,6 +922,14 @@ export default {
     this.syncValue()
     this.syncSpacers()
   },
+
+  updated() {
+    if (!this.hasChanges) {
+      return
+    }
+
+    this.$emit('update', this.newValue)
+  },
 }
 </script>
 
diff --git a/platypush/backend/http/webapp/src/components/elements/Dropdown.vue b/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
index a4c008f5b4..53150e28b2 100644
--- a/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
+++ b/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
@@ -176,7 +176,7 @@ export default {
 
     toggle(event) {
       event.stopPropagation()
-      this.$emit('click')
+      this.$emit('click', event)
       this.visible ? this.close() : this.open()
     },
 
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue
index c6924c28e7..9ccb84de76 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue
@@ -370,16 +370,13 @@ $icon-width: 2em;
     cursor: default;
 
     .content {
-      width: 50em;
-      max-width: 90%;
-
       .body {
         width: 100%;
       }
     }
 
     .alarm-running-modal {
-      width: 100%;
+      min-width: 90vw;
       height: 100%;
       display: flex;
       flex-direction: column;
@@ -387,6 +384,10 @@ $icon-width: 2em;
       justify-content: center;
       padding: 1em;
 
+      @include from($tablet) {
+        min-width: 40em;
+      }
+
       .icon {
         font-size: 3.5em;
         color: $selected-fg;
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue
index 64779e2252..e7b377ad3a 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue
@@ -85,7 +85,7 @@
             </span>
           </div>
 
-          <div class="value">
+          <div class="value file-selector">
             <FileSelector :value="editForm.media" @input="editForm.media = $event" />
           </div>
         </div>
@@ -127,7 +127,7 @@
 
             <div class="value">
               <ToggleSwitch :value="editForm.media_repeat"
-                            @input="editForm.media_repeat = $event.target.checked" />
+                            @input="editForm.media_repeat = !!$event.target.checked" />
             </div>
           </label>
         </div>
@@ -208,9 +208,7 @@
           </div>
 
           <div class="value">
-            <ProcedureEditor :value="procedure"
-                             :with-name="false"
-                             @input="onActionsInput($event)" />
+            <ActionsList :value="procedure" @update="onActionsUpdate($event)" />
           </div>
         </div>
       </div>
@@ -219,8 +217,8 @@
 </template>
 
 <script>
-import Loading from "@/components/Loading";
-import ProcedureEditor from "@/components/Procedure/ProcedureEditor"
+import ActionsList from "@/components/Action/ActionsList"
+import Loading from "@/components/Loading"
 import Slider from "@/components/elements/Slider"
 import CronEditor from "@/components/elements/CronEditor"
 import FileSelector from "@/components/elements/FileSelector"
@@ -232,10 +230,10 @@ export default {
   emits: ['input'],
   mixins: [Utils],
   components: {
+    ActionsList,
     CronEditor,
     FileSelector,
     Loading,
-    ProcedureEditor,
     Slider,
     TimeInterval,
     ToggleSwitch,
@@ -262,9 +260,7 @@ export default {
 
   computed: {
     procedure() {
-      return {
-        actions: [...(this.editForm.actions || [])],
-      }
+      return [...(this.editForm.actions || [])]
     },
 
     audioVolume() {
@@ -338,8 +334,12 @@ export default {
       this.editForm.condition_type = type
     },
 
-    onActionsInput(procedure) {
-      this.editForm.actions = procedure.actions
+    onActionsUpdate(actions) {
+      actions = [...(actions ?? [])]
+      if (JSON.stringify(this.editForm.actions) === JSON.stringify(actions))
+        return
+
+      this.editForm.actions = actions
     },
 
     onVolumeChange(event) {
@@ -498,5 +498,17 @@ $header-height: 3.5em;
   input[type=text] {
     min-height: 2em;
   }
+
+  :deep(.file-selector) {
+    .modal {
+      .body {
+        min-width: 95vw;
+
+        @include from($tablet) {
+          min-width: 40em;
+        }
+      }
+    }
+  }
 }
 </style>