From b280f2be0bf09bf18a7a37eaa97608fdcfbabb5c Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Mon, 16 Dec 2024 10:00:41 -0300
Subject: [PATCH 1/3] Components: Add side config panel

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/SideConfigPanel.vue | 108 +++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/components/SideConfigPanel.vue

diff --git a/src/components/SideConfigPanel.vue b/src/components/SideConfigPanel.vue
new file mode 100644
index 000000000..85a29a36a
--- /dev/null
+++ b/src/components/SideConfigPanel.vue
@@ -0,0 +1,108 @@
+<template>
+  <transition
+    :enter-active-class="enterActiveClass"
+    :leave-active-class="leaveActiveClass"
+    :enter-from-class="enterFromClass"
+    :enter-to-class="enterToClass"
+    :leave-from-class="leaveFromClass"
+    :leave-to-class="leaveToClass"
+  >
+    <div v-if="visible" class="fixed shadow-lg" :class="panelPositionClass">
+      <v-btn
+        v-if="hideButton"
+        icon
+        size="x-small"
+        variant="text"
+        class="close_btn bg-transparent text-white"
+        @click="closePanel"
+      >
+        <v-icon class="text-[18px]">{{ `mdi-arrow-${position}` }}</v-icon>
+      </v-btn>
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
+
+const props = defineProps<{
+  /**
+   * Panel position
+   */
+  position?: 'right' | 'bottom' | 'top' | 'left'
+  /**
+   * hide button
+   */
+  hideButton?: boolean
+}>()
+
+const visible = computed(() => interfaceStore.configPanelVisible)
+
+const closePanel = (): void => {
+  interfaceStore.configPanelVisible = false
+}
+
+const enterActiveClass = 'transition-transform duration-500 ease-in-out'
+const leaveActiveClass = 'transition-transform duration-0 ease-in-out'
+
+const enterFromClass = computed(() => {
+  switch (props.position) {
+    case 'right':
+      return 'translate-x-full opacity-0'
+    case 'bottom':
+      return 'translate-y-full opacity-0'
+    case 'top':
+      return '-translate-y-full opacity-0'
+    case 'left':
+    default:
+      return '-translate-x-full opacity-0'
+  }
+})
+const enterToClass = 'translate-x-0 translate-y-0 opacity-100'
+const leaveFromClass = 'translate-x-0 translate-y-0 opacity-100'
+const leaveToClass = computed(() => {
+  switch (props.position) {
+    case 'right':
+      return 'translate-x-full opacity-0'
+    case 'bottom':
+      return 'translate-y-full opacity-0'
+    case 'top':
+      return '-translate-y-full opacity-0'
+    case 'left':
+    default:
+      return '-translate-x-full opacity-0'
+  }
+})
+
+const panelPositionClass = computed(() => {
+  switch (props.position) {
+    case 'right':
+      return 'right-0 top-0 bottom-0 w-64'
+    case 'bottom':
+      return 'left-0 right-0 bottom-0 h-64'
+    case 'top':
+      return 'left-0 right-0 top-0 h-64'
+    case 'left':
+    default:
+      return 'left-0 top-0 bottom-0 w-64'
+  }
+})
+</script>
+
+<style scoped>
+.fixed {
+  height: 100%;
+  z-index: 500;
+  pointer-events: all;
+}
+.close_btn {
+  z-index: 500;
+  position: absolute;
+  margin-top: 3px;
+}
+</style>

From d3e100dcbfbc51f40ae384474eabca23870c0ad7 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Mon, 16 Dec 2024 13:31:08 -0300
Subject: [PATCH 2/3] Input-widgets: Convert element-config to run inside
 side-config-panel

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/ElementConfigPanel.vue | 592 +++++++++++++-------------
 1 file changed, 299 insertions(+), 293 deletions(-)

diff --git a/src/components/ElementConfigPanel.vue b/src/components/ElementConfigPanel.vue
index 336ea85fa..03c00c8fa 100644
--- a/src/components/ElementConfigPanel.vue
+++ b/src/components/ElementConfigPanel.vue
@@ -1,320 +1,326 @@
 <template>
-  <div class="flex flex-col text-center">
-    <v-btn
-      class="absolute top-0 left-0"
-      variant="text"
-      size="small"
-      icon="mdi-close"
-      style="z-index: 50000"
-      @click="CloseConfigPanel"
-    />
-    <v-btn
-      class="absolute bg-[#FFFFFF44] text-white bottom-2 right-2"
-      variant="plain"
-      size="small"
-      prepend-icon="mdi-delete"
-      @click="deleteElement"
-    >
-      Delete
-    </v-btn>
-    <ExpansiblePanel
-      v-if="currentElement"
-      mark-expanded
-      compact
-      elevation-effect
-      no-bottom-divider
-      darken-content
-      invert-chevron
-      :is-expanded="true"
-    >
-      <template #title><p class="ml-10">Options</p></template>
-      <template #content>
-        <div class="flex flex-col items-center mb-4 -ml-[7px] w-[248px]">
-          <div
-            v-for="optionKey in sortedOptionKeys"
-            :key="optionKey"
-            class="flex w-full justify-between items-center border-b-[1px] border-[#FFFFFF33] h-auto"
-          >
-            <p class="text-start ml-1 text-[14px] w-[60%]">{{ formatLabel(optionKey) }}</p>
-
-            <template
-              v-if="
-                typeof currentElement.options.layout[optionKey] === 'string' &&
-                !Array.isArray(getSelectChoices(optionKey)) &&
-                !isColorPicker(optionKey) &&
-                optionKey !== 'cockpitAction' &&
-                optionKey !== 'cockpitActions'
-              "
+  <div
+    class="flex fixed w-[250px] h-[78vh] right-0 top-0 border-l-[1px] border-[#FFFFFF44] text-white elevation-5 bg-[#051e2d]"
+  >
+    <div class="flex flex-col text-center">
+      <v-btn
+        class="absolute top-0 left-0"
+        variant="text"
+        size="small"
+        icon="mdi-close"
+        style="z-index: 50000"
+        @click="CloseConfigPanel"
+      />
+      <v-btn
+        class="absolute bg-[#FFFFFF44] text-white bottom-2 right-2"
+        variant="plain"
+        size="small"
+        prepend-icon="mdi-delete"
+        @click="deleteElement"
+      >
+        Delete
+      </v-btn>
+      <ExpansiblePanel
+        v-if="currentElement"
+        mark-expanded
+        compact
+        elevation-effect
+        no-bottom-divider
+        darken-content
+        invert-chevron
+        :is-expanded="true"
+      >
+        <template #title><p class="ml-10">Options</p></template>
+        <template #content>
+          <div class="flex flex-col items-center mb-4 -ml-[7px] w-[248px]">
+            <div
+              v-for="optionKey in sortedOptionKeys"
+              :key="optionKey"
+              class="flex w-full justify-between items-center border-b-[1px] border-[#FFFFFF33] h-auto"
             >
-              <div class="max-w-[120px]">
-                <input
-                  v-model="currentElement.options.layout[optionKey]"
-                  type="text"
-                  class="p-2 bg-[#FFFFFF11] w-[123px]"
-                />
-              </div>
-            </template>
+              <p class="text-start ml-1 text-[14px] w-[60%]">{{ formatLabel(optionKey) }}</p>
 
-            <template v-if="optionKey === 'cockpitAction'">
-              <div class="max-w-[120px]">
-                <select v-model="currentElement.options.layout[optionKey]" class="p-2 bg-[#FFFFFF11] w-[120px]">
-                  <option
-                    v-for="cockpitAction in availableCockpitActions"
-                    :key="cockpitAction.name"
-                    :value="cockpitAction"
-                    class="bg-[#000000AA]"
-                  >
-                    {{ cockpitAction.name }}
-                  </option>
-                </select>
-              </div>
-            </template>
+              <template
+                v-if="
+                  typeof currentElement.options.layout[optionKey] === 'string' &&
+                  !Array.isArray(getSelectChoices(optionKey)) &&
+                  !isColorPicker(optionKey) &&
+                  optionKey !== 'cockpitAction' &&
+                  optionKey !== 'cockpitActions'
+                "
+              >
+                <div class="max-w-[120px]">
+                  <input
+                    v-model="currentElement.options.layout[optionKey]"
+                    type="text"
+                    class="p-2 bg-[#FFFFFF11] w-[123px]"
+                  />
+                </div>
+              </template>
 
-            <template v-if="typeof currentElement.options.layout[optionKey] === 'number'">
-              <div class="max-w-[120px]">
-                <input
-                  v-model="currentElement.options.layout[optionKey]"
-                  type="number"
-                  class="p-2 bg-[#FFFFFF11] w-[128px]"
-                />
-              </div>
-            </template>
+              <template v-if="optionKey === 'cockpitAction'">
+                <div class="max-w-[120px]">
+                  <select v-model="currentElement.options.layout[optionKey]" class="p-2 bg-[#FFFFFF11] w-[120px]">
+                    <option
+                      v-for="cockpitAction in availableCockpitActions"
+                      :key="cockpitAction.name"
+                      :value="cockpitAction"
+                      class="bg-[#000000AA]"
+                    >
+                      {{ cockpitAction.name }}
+                    </option>
+                  </select>
+                </div>
+              </template>
 
-            <template v-else-if="Array.isArray(getSelectChoices(optionKey)) && optionKey !== 'selectorOptions'">
-              <div class="max-w-[120px]">
-                <select v-model="currentElement.options.layout[optionKey]" class="p-2 bg-[#FFFFFF11] w-[120px]">
-                  <option
-                    v-for="choice in getSelectChoices(optionKey)"
-                    :key="choice"
-                    :value="choice"
-                    class="bg-[#000000AA]"
-                  >
-                    {{ choice }}
-                  </option>
-                </select>
-              </div>
-            </template>
+              <template v-if="typeof currentElement.options.layout[optionKey] === 'number'">
+                <div class="max-w-[120px]">
+                  <input
+                    v-model="currentElement.options.layout[optionKey]"
+                    type="number"
+                    class="p-2 bg-[#FFFFFF11] w-[128px]"
+                  />
+                </div>
+              </template>
 
-            <template v-else-if="typeof currentElement.options.layout[optionKey] === 'boolean'">
-              <div class="flex items-center max-w-[120px]">
-                <v-checkbox
-                  v-model="currentElement.options.layout[optionKey]"
-                  hide-details
-                  density="compact"
-                  class="text-white mr-10 h-[40px]"
-                />
-              </div>
-            </template>
+              <template v-else-if="Array.isArray(getSelectChoices(optionKey)) && optionKey !== 'selectorOptions'">
+                <div class="max-w-[120px]">
+                  <select v-model="currentElement.options.layout[optionKey]" class="p-2 bg-[#FFFFFF11] w-[120px]">
+                    <option
+                      v-for="choice in getSelectChoices(optionKey)"
+                      :key="choice"
+                      :value="choice"
+                      class="bg-[#000000AA]"
+                    >
+                      {{ choice }}
+                    </option>
+                  </select>
+                </div>
+              </template>
 
-            <template v-else-if="isColorPicker(optionKey)">
-              <div class="max-w-[120px]">
-                <input v-model="currentElement.options.layout[optionKey]" type="color" class="p-0 w-20 mr-4" />
-              </div>
-            </template>
+              <template v-else-if="typeof currentElement.options.layout[optionKey] === 'boolean'">
+                <div class="flex items-center max-w-[120px]">
+                  <v-checkbox
+                    v-model="currentElement.options.layout[optionKey]"
+                    hide-details
+                    density="compact"
+                    class="text-white mr-10 h-[40px]"
+                  />
+                </div>
+              </template>
 
-            <template v-if="optionKey === 'selectorOptions'">
-              <div class="flex flex-col w-[144px] items-end h-auto">
-                <div
-                  v-for="(item, index) in currentElement.options.layout[optionKey]"
-                  :key="index"
-                  class="flex items-center text-center border-b-[1px] border-l-[1px] border-[#FFFFFF11] w-full whitespace-nowrap"
-                >
-                  <v-btn
-                    v-if="currentElement.options.layout.selectorOptions.length > 1"
-                    icon
-                    size="x-small"
-                    variant="text"
-                    @click="removeSelectorOption(optionKey, index)"
-                  >
-                    <v-icon>mdi-delete</v-icon>
-                  </v-btn>
-                  <v-menu
-                    v-model="isOptionsMenuOpen[index]"
-                    :close-on-content-click="false"
-                    location="top start"
-                    origin="top start"
-                    transition="scale-transition"
-                  >
-                    <template #activator="{ props }">
-                      <div class="flex justify-end items-center min-h-[40px] w-full">
-                        <p
-                          v-if="currentElement.options.layout[optionKey][index].name"
-                          v-bind="props"
-                          class="text-[14px] text-center w-[130px] cursor-pointer"
-                        >
-                          {{ currentElement.options.layout[optionKey][index].name }}
-                        </p>
+              <template v-else-if="isColorPicker(optionKey)">
+                <div class="max-w-[120px]">
+                  <input v-model="currentElement.options.layout[optionKey]" type="color" class="p-0 w-20 mr-4" />
+                </div>
+              </template>
 
-                        <v-btn
-                          v-else
-                          variant="elevated"
-                          class="bg-[#FFFFFF22] my-[10px] mr-[23px] w-22"
-                          size="x-small"
-                          v-bind="props"
-                          >edit</v-btn
-                        >
-                      </div>
-                    </template>
-                    <v-card
-                      class="flex flex-col overflow-hidden pa-3 pb-0 gap-x-4"
-                      :style="interfaceStore.globalGlassMenuStyles"
+              <template v-if="optionKey === 'selectorOptions'">
+                <div class="flex flex-col w-[144px] items-end h-auto">
+                  <div
+                    v-for="(item, index) in currentElement.options.layout[optionKey]"
+                    :key="index"
+                    class="flex items-center text-center border-b-[1px] border-l-[1px] border-[#FFFFFF11] w-full whitespace-nowrap"
+                  >
+                    <v-btn
+                      v-if="currentElement.options.layout.selectorOptions.length > 1"
+                      icon
+                      size="x-small"
+                      variant="text"
+                      @click="removeSelectorOption(optionKey, index)"
                     >
-                      <div class="flex gap-x-4">
-                        <div class="flex flex-col items-center">
-                          <p class="text-[14px]">{{ `Option ${index + 1} name` }}</p>
-                          <input
-                            v-model="currentElement.options.layout[optionKey][index].name"
-                            placeholder="option name"
-                            theme="dark"
-                            type="text"
-                            class="p-2 w-[120px] bg-[#FFFFFF11]"
-                          />
+                      <v-icon>mdi-delete</v-icon>
+                    </v-btn>
+                    <v-menu
+                      v-model="isOptionsMenuOpen[index]"
+                      :close-on-content-click="false"
+                      location="top start"
+                      origin="top start"
+                      transition="scale-transition"
+                    >
+                      <template #activator="{ props }">
+                        <div class="flex justify-end items-center min-h-[40px] w-full">
+                          <p
+                            v-if="currentElement.options.layout[optionKey][index].name"
+                            v-bind="props"
+                            class="text-[14px] text-center w-[130px] cursor-pointer"
+                          >
+                            {{ currentElement.options.layout[optionKey][index].name }}
+                          </p>
+
+                          <v-btn
+                            v-else
+                            variant="elevated"
+                            class="bg-[#FFFFFF22] my-[10px] mr-[23px] w-22"
+                            size="x-small"
+                            v-bind="props"
+                            >edit</v-btn
+                          >
                         </div>
-                        <div class="flex flex-col items-center">
-                          <p class="text-[14px]">{{ `Option ${index + 1} value` }}</p>
-                          <input
-                            v-model="currentElement.options.layout[optionKey][index].value"
-                            placeholder="value"
-                            theme="dark"
-                            type="text"
-                            class="p-2 w-[120px] bg-[#FFFFFF11]"
-                          />
+                      </template>
+                      <v-card
+                        class="flex flex-col overflow-hidden pa-3 pb-0 gap-x-4"
+                        :style="interfaceStore.globalGlassMenuStyles"
+                      >
+                        <div class="flex gap-x-4">
+                          <div class="flex flex-col items-center">
+                            <p class="text-[14px]">{{ `Option ${index + 1} name` }}</p>
+                            <input
+                              v-model="currentElement.options.layout[optionKey][index].name"
+                              placeholder="option name"
+                              theme="dark"
+                              type="text"
+                              class="p-2 w-[120px] bg-[#FFFFFF11]"
+                            />
+                          </div>
+                          <div class="flex flex-col items-center">
+                            <p class="text-[14px]">{{ `Option ${index + 1} value` }}</p>
+                            <input
+                              v-model="currentElement.options.layout[optionKey][index].value"
+                              placeholder="value"
+                              theme="dark"
+                              type="text"
+                              class="p-2 w-[120px] bg-[#FFFFFF11]"
+                            />
+                          </div>
                         </div>
-                      </div>
-                      <div class="flex justify-between items-center">
-                        <v-btn
-                          variant="text"
-                          size="x-small"
-                          class="my-2"
-                          @click="
-                            () => {
-                              if (currentElement?.options.layout[optionKey][index].name === '') {
-                                removeSelectorOption(optionKey, index)
+                        <div class="flex justify-between items-center">
+                          <v-btn
+                            variant="text"
+                            size="x-small"
+                            class="my-2"
+                            @click="
+                              () => {
+                                if (currentElement?.options.layout[optionKey][index].name === '') {
+                                  removeSelectorOption(optionKey, index)
+                                }
+                                isOptionsMenuOpen[index] = false
+                              }
+                            "
+                            >close</v-btn
+                          >
+                          <v-btn
+                            variant="text"
+                            size="small"
+                            class="my-3"
+                            :disabled="currentElement.options.layout[optionKey][index].name === ''"
+                            @click="
+                              () => {
+                                addSelectorOption(optionKey)
+                                isOptionsMenuOpen[index] = false
+                                isOptionsMenuOpen[index + 1] = true
                               }
-                              isOptionsMenuOpen[index] = false
-                            }
-                          "
-                          >close</v-btn
-                        >
-                        <v-btn
-                          variant="text"
-                          size="small"
-                          class="my-3"
-                          :disabled="currentElement.options.layout[optionKey][index].name === ''"
-                          @click="
-                            () => {
-                              addSelectorOption(optionKey)
-                              isOptionsMenuOpen[index] = false
-                              isOptionsMenuOpen[index + 1] = true
-                            }
-                          "
-                          >add another option</v-btn
-                        >
-                      </div>
-                    </v-card>
-                  </v-menu>
+                            "
+                            >add another option</v-btn
+                          >
+                        </div>
+                      </v-card>
+                    </v-menu>
+                  </div>
+                  <v-btn
+                    variant="elevated"
+                    class="bg-[#3B78A8] my-[10px] mr-[13px] w-22"
+                    size="x-small"
+                    @click="addSelectorOption(optionKey)"
+                    >add</v-btn
+                  >
                 </div>
+              </template>
+            </div>
+          </div>
+        </template>
+      </ExpansiblePanel>
+      <ExpansiblePanel
+        v-if="currentElement"
+        :key="currentElement.hash"
+        no-bottom-divider
+        no-top-divider
+        mark-expanded
+        elevation-effect
+        compact
+        darken-content
+        invert-chevron
+        :is-expanded="true"
+      >
+        <template #title>Cockpit actions</template>
+        <template #content>
+          <div class="flex flex-col items-center mb-4 -ml-[7px] w-[248px]">
+            <template v-if="currentElement.component !== CustomWidgetElementType.Button">
+              <div class="flex w-full justify-between items-center h-[40px] border-b-[1px] border-[#FFFFFF33]">
+                <p class="text-center w-full text-sm">Action URL parameter</p>
                 <v-btn
+                  v-if="
+                    openNewDataLakeVariableForm === false && currentElement.options.dataLakeVariable?.name === undefined
+                  "
                   variant="elevated"
-                  class="bg-[#3B78A8] my-[10px] mr-[13px] w-22"
+                  class="bg-[#3B78A8] mr-[13px]"
                   size="x-small"
-                  @click="addSelectorOption(optionKey)"
-                  >add</v-btn
+                  @click="openNewDataLakeVariableForm = true"
+                  >create</v-btn
                 >
               </div>
             </template>
-          </div>
-        </div>
-      </template>
-    </ExpansiblePanel>
-    <ExpansiblePanel
-      v-if="currentElement"
-      :key="currentElement.hash"
-      no-bottom-divider
-      no-top-divider
-      mark-expanded
-      elevation-effect
-      compact
-      darken-content
-      invert-chevron
-      :is-expanded="true"
-    >
-      <template #title>Cockpit actions</template>
-      <template #content>
-        <div class="flex flex-col items-center mb-4 -ml-[7px] w-[248px]">
-          <template v-if="currentElement.component !== CustomWidgetElementType.Button">
-            <div class="flex w-full justify-between items-center h-[40px] border-b-[1px] border-[#FFFFFF33]">
-              <p class="text-center w-full text-sm">Action URL parameter</p>
-              <v-btn
-                v-if="
-                  openNewDataLakeVariableForm === false && currentElement.options.dataLakeVariable?.name === undefined
-                "
-                variant="elevated"
-                class="bg-[#3B78A8] mr-[13px]"
-                size="x-small"
-                @click="openNewDataLakeVariableForm = true"
-                >create</v-btn
-              >
-            </div>
-          </template>
-          <template v-if="openNewDataLakeVariableForm || currentElement.options.dataLakeVariable?.name">
-            <div
-              class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]"
-              :class="{ 'border-[1px] border-red-700': dataLakeVariableError.includes('This name is already in use') }"
-            >
-              <p class="ml-1 text-[14px]">Name</p>
-              <input v-model="futureDataLakeVariable.name" type="text" class="p-2 bg-[#FFFFFF11] w-[123px]" />
-            </div>
-            <div class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]">
-              <p class="ml-1 text-[14px]">Description</p>
-              <input v-model="futureDataLakeVariable.description" type="text" class="p-2 bg-[#FFFFFF11] w-[123px]" />
-            </div>
-            <div class="flex w-full justify-end">
-              <v-btn
-                variant="text"
-                size="x-small"
-                class="mr-[15px] mt-2"
-                :disabled="currentElement.options.dataLakeVariable === undefined"
-                @click="deleteParameterFromDataLake"
-                >delete</v-btn
-              >
-              <v-btn
-                variant="elevated"
-                size="x-small"
-                class="bg-[#3B78A8] mr-1 mt-2"
+            <template v-if="openNewDataLakeVariableForm || currentElement.options.dataLakeVariable?.name">
+              <div
+                class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]"
                 :class="{
-                  'opacity-10': futureDataLakeVariable.name === '',
+                  'border-[1px] border-red-700': dataLakeVariableError.includes('This name is already in use'),
                 }"
-                :disabled="futureDataLakeVariable.name === ''"
-                @click="saveOrUpdateParameter"
-                >{{ currentElement.options.dataLakeVariable === undefined ? 'save' : 'update' }}</v-btn
               >
-            </div>
-          </template>
-          <template v-if="currentElement.component === CustomWidgetElementType.Button">
-            <div class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]">
-              <p class="ml-1 text-[14px]">Action to trigger</p>
-              <select v-model="currentElement.options.cockpitAction" class="p-2 bg-[#FFFFFF11] w-[123px]">
-                <option
-                  v-for="cockpitAction in availableCockpitActions"
-                  :key="cockpitAction.name"
-                  :value="cockpitAction"
-                  class="bg-[#000000AA]"
+                <p class="ml-1 text-[14px]">Name</p>
+                <input v-model="futureDataLakeVariable.name" type="text" class="p-2 bg-[#FFFFFF11] w-[123px]" />
+              </div>
+              <div class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]">
+                <p class="ml-1 text-[14px]">Description</p>
+                <input v-model="futureDataLakeVariable.description" type="text" class="p-2 bg-[#FFFFFF11] w-[123px]" />
+              </div>
+              <div class="flex w-full justify-end">
+                <v-btn
+                  variant="text"
+                  size="x-small"
+                  class="mr-[15px] mt-2"
+                  :disabled="currentElement.options.dataLakeVariable === undefined"
+                  @click="deleteParameterFromDataLake"
+                  >delete</v-btn
                 >
-                  {{ cockpitAction.name }}
-                </option>
-              </select>
-            </div>
-          </template>
-        </div>
-        <div
-          v-if="dataLakeVariableError.length > 0"
-          class="flex justify-center items-center text-[14px] text-center h-[30px] bg-red-800 rounded-lg"
-        >
-          <p v-for="message in dataLakeVariableError" :key="message">• {{ message }}</p>
-        </div>
-      </template>
-    </ExpansiblePanel>
+                <v-btn
+                  variant="elevated"
+                  size="x-small"
+                  class="bg-[#3B78A8] mr-1 mt-2"
+                  :class="{
+                    'opacity-10': futureDataLakeVariable.name === '',
+                  }"
+                  :disabled="futureDataLakeVariable.name === ''"
+                  @click="saveOrUpdateParameter"
+                  >{{ currentElement.options.dataLakeVariable === undefined ? 'save' : 'update' }}</v-btn
+                >
+              </div>
+            </template>
+            <template v-if="currentElement.component === CustomWidgetElementType.Button">
+              <div class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]">
+                <p class="ml-1 text-[14px]">Action to trigger</p>
+                <select v-model="currentElement.options.cockpitAction" class="p-2 bg-[#FFFFFF11] w-[123px]">
+                  <option
+                    v-for="cockpitAction in availableCockpitActions"
+                    :key="cockpitAction.name"
+                    :value="cockpitAction"
+                    class="bg-[#000000AA]"
+                  >
+                    {{ cockpitAction.name }}
+                  </option>
+                </select>
+              </div>
+            </template>
+          </div>
+          <div
+            v-if="dataLakeVariableError.length > 0"
+            class="flex justify-center items-center text-[14px] text-center h-[30px] bg-red-800 rounded-lg"
+          >
+            <p v-for="message in dataLakeVariableError" :key="message">• {{ message }}</p>
+          </div>
+        </template>
+      </ExpansiblePanel>
+    </div>
   </div>
 </template>
 

From 0f63aa8c2991ff43c356c1ae4afd2f51d3255b7f Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Mon, 16 Dec 2024 10:10:07 -0300
Subject: [PATCH 3/3] Components: Input-element-config: Rename and implement on
 EditMenu

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/EditMenu.vue                   | 60 +++++--------------
 ...ConfigPanel.vue => InputElementConfig.vue} |  0
 src/stores/appInterface.ts                    |  2 +
 3 files changed, 16 insertions(+), 46 deletions(-)
 rename src/components/{ElementConfigPanel.vue => InputElementConfig.vue} (100%)

diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 2b6025c24..90ecd3eba 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -617,21 +617,10 @@
       </v-card>
     </GlassModal>
   </teleport>
-  <transition
-    enter-active-class="transition-transform duration-500 ease-in-out"
-    leave-active-class="transition-transform duration-0 ease-in-out"
-    enter-from-class="translate-x-full opacity-0"
-    enter-to-class="translate-x-0 opacity-100"
-    leave-from-class="translate-x-0 opacity-100"
-    leave-to-class="translate-x-full opacity-0"
-  >
-    <div
-      v-if="store.isElementsPropsDrawerVisible && store.editingMode && store.elementToShowOnDrawer"
-      class="flex fixed w-[250px] h-[78vh] right-0 top-0 border-l-[1px] border-[#FFFFFF44] text-white elevation-5 bg-[#051e2d]"
-    >
-      <ElementConfigPanel />
-    </div>
-  </transition>
+
+  <SideConfigPanel position="right">
+    <ElementConfigPanel v-if="store.elementToShowOnDrawer?.hash" />
+  </SideConfigPanel>
 </template>
 
 <script setup lang="ts">
@@ -672,10 +661,11 @@ import {
   WidgetType,
 } from '@/types/widgets'
 
-import ElementConfigPanel from './ElementConfigPanel.vue'
 import ExpansiblePanel from './ExpansiblePanel.vue'
 import GlassModal from './GlassModal.vue'
+import ElementConfigPanel from './InputElementConfig.vue'
 import MiniWidgetInstantiator from './MiniWidgetInstantiator.vue'
+import SideConfigPanel from './SideConfigPanel.vue'
 
 const { showDialog, closeDialog } = useInteractionDialog()
 
@@ -714,6 +704,14 @@ const emit = defineEmits<{
   (e: 'update:editMode', editMode: boolean): void
 }>()
 
+watch(
+  () => store.elementToShowOnDrawer?.hash,
+  (newValue) => {
+    if (newValue) interfaceStore.configPanelVisible = true
+    if (!newValue) interfaceStore.configPanelVisible = false
+  }
+)
+
 const availableWidgetTypes = computed(() => Object.values(WidgetType))
 const availableMiniWidgetTypes = computed(() =>
   Object.values(MiniWidgetType).map((widgetType) => ({
@@ -1064,25 +1062,6 @@ const vehicleTypesAssignedToCurrentProfile = computed({
   color: white;
 }
 
-.fade-and-suffle-move,
-.fade-and-suffle-enter-active,
-.fade-and-suffle-leave-active,
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-}
-.fade-and-suffle-enter-from,
-.fade-enter-from,
-.fade-and-suffle-leave-to,
-.fade-leave-to {
-  opacity: 0;
-  transform: scaleY(0.01) translate(30px, 0);
-}
-
-.sortable-ghost {
-  cursor: grabbing;
-}
-
 .icon-btn {
   display: flex;
   align-items: center;
@@ -1097,13 +1076,6 @@ const vehicleTypesAssignedToCurrentProfile = computed({
   cursor: pointer;
   opacity: 0.8;
 }
-.icon-bt {
-  opacity: 1;
-}
-
-.selected-view {
-  @apply bg-slate-400;
-}
 
 .content-expand-collapse {
   width: 100%;
@@ -1120,10 +1092,6 @@ const vehicleTypesAssignedToCurrentProfile = computed({
   max-height: 0;
 }
 
-.linear-gradient {
-  background: linear-gradient(90deg, rgba(39, 56, 66, 0) 0%, rgba(39, 56, 66, 1) 57%, rgba(39, 56, 66, 1) 100%);
-}
-
 .wrapclass {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/components/ElementConfigPanel.vue b/src/components/InputElementConfig.vue
similarity index 100%
rename from src/components/ElementConfigPanel.vue
rename to src/components/InputElementConfig.vue
diff --git a/src/stores/appInterface.ts b/src/stores/appInterface.ts
index 5dd5e3ba4..00b900fd9 100644
--- a/src/stores/appInterface.ts
+++ b/src/stores/appInterface.ts
@@ -27,6 +27,7 @@ export const useAppInterfaceStore = defineStore('responsive', {
     configComponent: -1,
     isGlassModalAlwaysOnTop: false,
     isTutorialVisible: false,
+    configPanelVisible: false,
   }),
   actions: {
     updateWidth() {
@@ -89,6 +90,7 @@ export const useAppInterfaceStore = defineStore('responsive', {
       boxShadow: '0px 4px 4px 0px #00000033, 0px 8px 12px 6px #00000016',
       animation: 'highlightBackground 0.5s alternate 20',
     }),
+    isConfigPanelVisible: (state) => state.configPanelVisible,
   },
 })