From ca3da69c2cf7cb76b755907dcd5618793cf30c40 Mon Sep 17 00:00:00 2001
From: Corrado Stortini <corrado.stortini2@studio.unibo.it>
Date: Mon, 1 Sep 2025 14:36:54 +0200
Subject: [PATCH 1/3] refactor: add groups to device event trigger

---
 src/components/tasks-automations/TriggerComponent.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks-automations/TriggerComponent.vue b/src/components/tasks-automations/TriggerComponent.vue
index 49a70f1..39d88db 100644
--- a/src/components/tasks-automations/TriggerComponent.vue
+++ b/src/components/tasks-automations/TriggerComponent.vue
@@ -10,6 +10,7 @@ import {
 } from './timeUtils'
 import type { Device } from '@/model/devices-management/Device'
 import { useDevicesStore } from '@/stores/devices'
+import DeviceNameAndGroup from '../DeviceNameAndGroup.vue'
 
 const props = defineProps<{
   trigger?: Trigger
@@ -204,10 +205,12 @@ onMounted(() => {
       </template>
       <!-- Device Event trigger -->
       <template v-else-if="isDeviceEventTrigger(trigger) && selectedDevice">
-        <p class="col-span-full font-bold text-center">{{ selectedDevice.name }}</p>
+        <p class="col-span-full font-bold justify-self-center">
+          <DeviceNameAndGroup :id="selectedDevice.id" :device="selectedDevice" />
+        </p>
         <select
           v-model="selectedEvent"
-          class="col-span-full select h-7 w-45 select-primary justify-self-center text-center"
+          class="col-span-full select h-7 w-50 select-primary justify-self-center text-center"
           v-if="edit"
         >
           <option selected disabled>Pick an event</option>

From b434c914248dc44fa4779da1da7e841624b22e8b Mon Sep 17 00:00:00 2001
From: Corrado Stortini <corrado.stortini2@studio.unibo.it>
Date: Mon, 1 Sep 2025 15:05:40 +0200
Subject: [PATCH 2/3] refactor: add groups to device chosen in device event
 trigger dialog

---
 src/components/DeviceNameAndGroup.vue          |  3 ++-
 .../tasks-automations/TriggerComponent.vue     | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/DeviceNameAndGroup.vue b/src/components/DeviceNameAndGroup.vue
index bba1f42..9b0235d 100644
--- a/src/components/DeviceNameAndGroup.vue
+++ b/src/components/DeviceNameAndGroup.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Device } from '@/model/devices-management/Device'
 import DeviceGroupsButton from './DeviceGroupsButton.vue'
+import { useGroupsStore } from '@/stores/groups';
 
 defineProps<{
   id: string
@@ -10,7 +11,7 @@ defineProps<{
 
 <template>
   <span class="grid grid-cols-1 sm:grid-cols-7 gap-1">
-    <span class="sm:col-span-3"> {{ device.name }}</span>
+    <span :class="useGroupsStore().getGroupsOfDevice(device.id).length === 0 ? 'col-span-full' : 'sm:col-span-3'"> {{ device.name }}</span>
     <DeviceGroupsButton :id="id" :device="device" class="sm:col-span-4" />
   </span>
 </template>
diff --git a/src/components/tasks-automations/TriggerComponent.vue b/src/components/tasks-automations/TriggerComponent.vue
index 39d88db..8644f36 100644
--- a/src/components/tasks-automations/TriggerComponent.vue
+++ b/src/components/tasks-automations/TriggerComponent.vue
@@ -8,9 +8,10 @@ import {
   formatDateForDatetimeLocalInput,
   formatDuration,
 } from './timeUtils'
-import type { Device } from '@/model/devices-management/Device'
+import type { Device, DeviceId } from '@/model/devices-management/Device'
 import { useDevicesStore } from '@/stores/devices'
 import DeviceNameAndGroup from '../DeviceNameAndGroup.vue'
+import { useGroupsStore } from '@/stores/groups'
 
 const props = defineProps<{
   trigger?: Trigger
@@ -152,6 +153,18 @@ function closeDialog() {
 onMounted(() => {
   devices.value = useDevicesStore().devices
 })
+
+function groupsToString(deviceId: DeviceId) {
+  const deviceGroups = useGroupsStore().getGroupsOfDevice(deviceId)
+  return deviceGroups.length > 0
+    ? '(' +
+        deviceGroups[0].name +
+        (deviceGroups.length > 1
+          ? ', ' + deviceGroups[1].name + (deviceGroups.length > 2 ? ', ...' : '')
+          : '') +
+        ')'
+    : ''
+}
 </script>
 
 <template>
@@ -205,7 +218,7 @@ onMounted(() => {
       </template>
       <!-- Device Event trigger -->
       <template v-else-if="isDeviceEventTrigger(trigger) && selectedDevice">
-        <p class="col-span-full font-bold justify-self-center">
+        <p class="col-span-full font-bold justify-self-center w-55 text-center">
           <DeviceNameAndGroup :id="selectedDevice.id" :device="selectedDevice" />
         </p>
         <select
@@ -242,6 +255,7 @@ onMounted(() => {
         <template v-for="device in devices" :key="device.id">
           <option :value="device" v-if="device.events.length !== 0">
             {{ device.name }}
+            {{ groupsToString(device.id) }}
           </option>
         </template>
       </select>

From df95cddd94538bc8fa30a04fc61aad53a9a1bb2a Mon Sep 17 00:00:00 2001
From: Corrado Stortini <corrado.stortini2@studio.unibo.it>
Date: Mon, 1 Sep 2025 16:27:03 +0200
Subject: [PATCH 3/3] refactor: use of code formatter

---
 src/components/DeviceNameAndGroup.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/DeviceNameAndGroup.vue b/src/components/DeviceNameAndGroup.vue
index 9b0235d..680b320 100644
--- a/src/components/DeviceNameAndGroup.vue
+++ b/src/components/DeviceNameAndGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Device } from '@/model/devices-management/Device'
 import DeviceGroupsButton from './DeviceGroupsButton.vue'
-import { useGroupsStore } from '@/stores/groups';
+import { useGroupsStore } from '@/stores/groups'
 
 defineProps<{
   id: string
@@ -11,7 +11,15 @@ defineProps<{
 
 <template>
   <span class="grid grid-cols-1 sm:grid-cols-7 gap-1">
-    <span :class="useGroupsStore().getGroupsOfDevice(device.id).length === 0 ? 'col-span-full' : 'sm:col-span-3'"> {{ device.name }}</span>
+    <span
+      :class="
+        useGroupsStore().getGroupsOfDevice(device.id).length === 0
+          ? 'col-span-full'
+          : 'sm:col-span-3'
+      "
+    >
+      {{ device.name }}</span
+    >
     <DeviceGroupsButton :id="id" :device="device" class="sm:col-span-4" />
   </span>
 </template>