feat(effects): change colors in effect when selecting different colors

src/components/lights/effects/EffectControllerButtonDialog.vue

@@ -137,8 +137,8 @@ const emit = defineEmits<{
 
 const store = useEffectsControllerStore();
 
-const name = ref<string | undefined>();
-const icon = ref<string | undefined>('');
+const name = ref<string>('');
+const icon = ref<string>('');
 const type = ref<ButtonTypes>(ButtonTypes.LightsButtonNull);
 const properties = ref<LightsPredefinedEffectProperties | undefined>();
 const propertiesValid = ref<boolean>(false);
@@ -189,11 +189,13 @@ watch([props], () => {
   // Reset the form to default values
   propertiesValid.value = false;
   if (props.button) {
-    name.value = props.button.name;
+    name.value = props.button.name || '';
+    icon.value = props.button.icon || '';
     type.value = props.button.properties.type as ButtonTypes;
     properties.value = props.button.properties;
   } else {
-    name.value = undefined;
+    name.value = '';
+    icon.value = '';
     type.value = ButtonTypes.LightsButtonNull;
     properties.value = undefined;
   }

src/components/lights/effects/button/ButtonDialogColors.vue

@@ -1,11 +1,14 @@
 <template>
   <SelectorLightsColor v-model="colors" />
+  <span class="mt-4 italic">* Lights groups to immediately apply the color to</span>
+  <LightsGroupsSelect v-model="lightsGroupIds" />
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
 import SelectorLightsColor from '@/components/lights/effects/props/SelectorLightsColor.vue';
 import { type LightsButtonColors, RgbColor } from '@/api';
+import LightsGroupsSelect from '@/components/lights/effects/button/LightsGroupsSelect.vue';
 
 const props = defineProps<{
   defaultProperties?: LightsButtonColors;
@@ -17,19 +20,21 @@ const emit = defineEmits<{
 }>();
 
 const colors = ref<RgbColor[]>(props.defaultProperties?.colors || []);
+const lightsGroupIds = ref<number[]>(props.defaultProperties?.lightsGroupIds || []);
 
 const handleChange = () => {
   const properties: LightsButtonColors = {
     type: 'LightsButtonColors',
     colors: colors.value,
+    lightsGroupIds: lightsGroupIds.value.length > 0 ? lightsGroupIds.value : undefined,
   };
   const inputIsValid: boolean = colors.value.length > 0;
 
   emit('update:modelValue', properties);
   emit('inputValid', inputIsValid);
 };
 
-watch([colors], handleChange);
+watch([colors, lightsGroupIds], handleChange);
 onMounted(handleChange);
 </script>
 

src/components/lights/effects/button/LightsGroupsSelect.vue

@@ -1,7 +1,6 @@
 <template>
   <MultiSelect
     filter
-    :max-selected-labels="2"
     :model-value="modelValue"
     option-label="name"
     option-value="id"

src/stores/effects-controller.store.ts

@@ -8,6 +8,7 @@ import {
   enableStrobeOnLightsGroup,
   getAllLightsSwitches,
   getAllPredefinedLightsEffects,
+  type LightsButtonColors,
   type LightsButtonSwitch,
   type LightsEffectsColorCreateParams,
   type LightsEffectsMovementCreateParams,
@@ -19,6 +20,7 @@ import {
   RgbColor,
   turnOffLightsSwitch,
   turnOnLightsSwitch,
+  updateLightsEffectColorColors,
   updatePredefinedLightsEffect,
 } from '@/api';
 
@@ -244,7 +246,12 @@ export const useEffectsControllerStore = defineStore('effectsController', {
     async onEffectButtonPress(button: LightsPredefinedEffectResponse) {
       switch (button.properties.type) {
         case 'LightsButtonColors': {
-          this.currentColors = button.properties.colors;
+          const properties = button.properties as LightsButtonColors;
+          this.currentColors = properties.colors;
+          const promises = button.properties.lightsGroupIds?.map(async (id) => {
+            await updateLightsEffectColorColors({ path: { id }, body: { colors: properties.colors } });
+          });
+          if (promises) await Promise.all(promises);
           return;
         }
         case 'LightsButtonEffectColor': {