From 07ab6ee61328584fc240c80b701dcac809674a29 Mon Sep 17 00:00:00 2001
From: ali-khoshnevisan <ali.kh.3437@gmail.com>
Date: Sat, 11 Nov 2023 15:50:17 +0330
Subject: [PATCH 1/3] action panel

---
 .../TestComponent1Widget/OptionPanel.vue      |  11 +-
 .../TestComponent1Widget.vue                  |  12 +-
 .../OptionPanelComponents/OptionPanelTabs.vue |  19 +-
 .../Tabs/ActionPanel/ActionPanel.vue          | 192 ++++++++++++++++++
 ui/src/mixin/OptionPanel.js                   |  28 +++
 5 files changed, 259 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/components/OptionPanelComponents/Tabs/ActionPanel/ActionPanel.vue

diff --git a/ui/dev/src/components/Widgets/TestComponent1Widget/OptionPanel.vue b/ui/dev/src/components/Widgets/TestComponent1Widget/OptionPanel.vue
index cb95971..9f8a6d6 100644
--- a/ui/dev/src/components/Widgets/TestComponent1Widget/OptionPanel.vue
+++ b/ui/dev/src/components/Widgets/TestComponent1Widget/OptionPanel.vue
@@ -2,6 +2,7 @@
   <option-panel-tabs v-model:options="localOptions"
                      :show-hover-effects-tab="true"
                      :show-box-shadows-tab="true"
+                     :show-action-tab="true"
                      :show-border-style-tab="true">
     <template #main-tab>
       <div />
@@ -49,7 +50,15 @@ export default defineComponent({
             skewY: 0,
             translateX: 0,
             translateY: 0
-          }
+          },
+        },
+        action: {
+          hasAction: false,
+          actionName: null,
+          scrollTo: null,
+          route: null,
+          eventName: null,
+          eventArgs: null
         }
       }
     }
diff --git a/ui/dev/src/components/Widgets/TestComponent1Widget/TestComponent1Widget.vue b/ui/dev/src/components/Widgets/TestComponent1Widget/TestComponent1Widget.vue
index fc7b8df..4c3c1cd 100644
--- a/ui/dev/src/components/Widgets/TestComponent1Widget/TestComponent1Widget.vue
+++ b/ui/dev/src/components/Widgets/TestComponent1Widget/TestComponent1Widget.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="Test-component1-widget"
-       :style="localOptions.style">
+       :style="localOptions.style"
+       :class="{'cursor-pointer': localOptions.action.hasAction}"
+       @click="takeAction()">
     Test-component-11111111111111111111111111111111111111111111111111
     <br>
     Test-component-11111111111111111111111111111111111111111111111111
@@ -97,6 +99,14 @@ export default {
             translateX: 0,
             translateY: 0
           }
+        },
+        action: {
+          hasAction: false,
+          actionName: null,
+          scrollTo: null,
+          route: null,
+          eventName: null,
+          eventArgs: null
         }
       }
     }
diff --git a/ui/src/components/OptionPanelComponents/OptionPanelTabs.vue b/ui/src/components/OptionPanelComponents/OptionPanelTabs.vue
index f1b502c..a3eb69e 100644
--- a/ui/src/components/OptionPanelComponents/OptionPanelTabs.vue
+++ b/ui/src/components/OptionPanelComponents/OptionPanelTabs.vue
@@ -25,6 +25,9 @@
       <q-tab v-if="showResponsiveSpacing"
              name="ResponsiveSpacing"
              label="ResponsiveSpacing" />
+      <q-tab v-if="showActionTab"
+             name="ActionPanel"
+             label="ActionPanel" />
     </q-tabs>
 
     <q-separator />
@@ -71,6 +74,10 @@
                    name="ResponsiveSpacing">
         <responsive-spacing v-model:spacing="localOptions.responsiveSpacing" />
       </q-tab-panel>
+      <q-tab-panel v-if="showActionTab"
+                   name="ActionPanel">
+        <action-panel v-model:action="localOptions.action" />
+      </q-tab-panel>
 
     </q-tab-panels>
   </q-card>
@@ -83,6 +90,7 @@ import StyleTabComponent from './Tabs/Style/Style.vue'
 import BoxShadows from './Tabs/BoxShadows/BoxShadows.vue'
 import BorderStyle from './Tabs/BorderStyle/BorderStyle.vue'
 import ResponsiveSpacing from './Tabs/ResponsiveSpacing/ResponsiveSpacing.vue'
+import ActionPanel from "./Tabs/ActionPanel/ActionPanel.vue";
 
 export default {
   name: 'OptionPanelTabs',
@@ -92,7 +100,8 @@ export default {
     HoverEffects,
     ResponsiveShow,
     ResponsiveSpacing,
-    StyleTabComponent
+    StyleTabComponent,
+    ActionPanel
   },
   props: {
     showStyleTab: {
@@ -119,6 +128,10 @@ export default {
       type: Boolean,
       default: false
     },
+    showActionTab: {
+      type: Boolean,
+      default: false
+    },
     options: {
       type: Object,
       default: () => {
@@ -136,10 +149,14 @@ export default {
         return this.getDefaultOptions(this.options)
       },
       set(newValue) {
+        console.log(newValue)
         this.$emit('update:options', newValue)
       }
     }
   },
+  mounted() {
+    console.log(this.localOptions)
+  },
   methods: {
     getDefaultOptions (options) {
       if (!options.style) {
diff --git a/ui/src/components/OptionPanelComponents/Tabs/ActionPanel/ActionPanel.vue b/ui/src/components/OptionPanelComponents/Tabs/ActionPanel/ActionPanel.vue
new file mode 100644
index 0000000..a8e9060
--- /dev/null
+++ b/ui/src/components/OptionPanelComponents/Tabs/ActionPanel/ActionPanel.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="row q-col-gutter-sm">
+    <div class="col-md-2">
+      <q-checkbox v-model="localOptions.hasAction" left-label label="has action" />
+    </div>
+    <div v-if="localOptions.hasAction" class="input-container col-md-2">
+      <q-select v-model="localOptions.actionName"
+                :options="actionOptions" />
+    </div>
+    <div v-if="localOptions.actionName === 'scroll'"
+         class="input-container col-md-8">
+      <q-input v-model="localOptions.scrollTo"
+               label="scrollTo" />
+    </div>
+    <div v-if="localOptions.actionName === 'link'"
+         class="input-container col-md-8">
+      <q-input v-model="localOptions.route"
+               label="route" />
+    </div>
+    <div v-if="localOptions.actionName === 'event'"
+         class="input-container col-md-4">
+      <q-input v-model="localOptions.eventName"
+               label="eventName" />
+    </div>
+    <div v-if="localOptions.actionName === 'event'"
+         class="input-container col-md-4">
+      <q-input v-model="localOptions.eventArgs"
+               label="eventArgs" />
+    </div>
+<!--    <div v-if="localOptions.action === 'hamburger_menu'"-->
+<!--         class="input-container col-md-12">-->
+<!--      <q-expansion-item label="topWidgets">-->
+<!--        <q-card>-->
+<!--          <q-card-section v-for="(widget, index) in localOptions.topSectionWidgets"-->
+<!--                          :key="index">-->
+<!--            <q-expansion-item :label=widget.name-->
+<!--                              icon="build">-->
+<!--              <template v-slot:header>-->
+<!--                <q-item-section avatar>-->
+<!--                  <q-icon name="build" />-->
+<!--                </q-item-section>-->
+
+<!--                <q-item-section>-->
+<!--                  {{ widget.name }}-->
+<!--                </q-item-section>-->
+
+<!--                <q-item-section side>-->
+<!--                  <q-btn color="negative"-->
+<!--                         flat-->
+<!--                         icon="delete"-->
+<!--                         @click="deleteWidget('topSectionWidgets', index)" />-->
+<!--                </q-item-section>-->
+<!--              </template>-->
+<!--              <q-card>-->
+<!--                <q-card-section>-->
+<!--                  <option-panel v-if="widget.name === 'ActionButton'"-->
+<!--                                v-model:options="widget.options" />-->
+<!--                  <component :is="widget.name.concat('OptionPanel')"-->
+<!--                             v-model:options="widget.options" />-->
+<!--                </q-card-section>-->
+<!--              </q-card>-->
+<!--            </q-expansion-item>-->
+<!--          </q-card-section>-->
+<!--          <q-card-section>-->
+<!--            <div class="row q-col-gutter-md">-->
+<!--              <div>-->
+<!--                <q-btn icon="isax:add"-->
+<!--                       class="full-width"-->
+<!--                       color="positive"-->
+<!--                       label="text"-->
+<!--                       @click="addTextWidget('topSectionWidgets')" />-->
+<!--              </div>-->
+<!--              <div>-->
+<!--                <q-btn icon="isax:add"-->
+<!--                       class="full-width"-->
+<!--                       color="positive"-->
+<!--                       label="image"-->
+<!--                       @click="addImageWidget('topSectionWidgets')" />-->
+<!--              </div>-->
+<!--              <div>-->
+<!--                <q-btn icon="isax:add"-->
+<!--                       class="full-width"-->
+<!--                       color="positive"-->
+<!--                       label="action button"-->
+<!--                       @click="addActionButtonWidget('topSectionWidgets')" />-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </q-card-section>-->
+<!--        </q-card>-->
+<!--      </q-expansion-item>-->
+<!--      <q-expansion-item label="bottomWidgets">-->
+<!--        <q-card>-->
+<!--          <q-card-section v-for="(widget, index) in localOptions.bottomSectionWidgets"-->
+<!--                          :key="index">-->
+<!--            <q-expansion-item :label=widget.name-->
+<!--                              icon="build">-->
+<!--              <template v-slot:header>-->
+<!--                <q-item-section avatar>-->
+<!--                  <q-icon name="build" />-->
+<!--                </q-item-section>-->
+
+<!--                <q-item-section>-->
+<!--                  {{ widget.name }}-->
+<!--                </q-item-section>-->
+
+<!--                <q-item-section side>-->
+<!--                  <q-btn color="negative"-->
+<!--                         flat-->
+<!--                         icon="delete"-->
+<!--                         @click="deleteWidget('bottomSectionWidgets', index)" />-->
+<!--                </q-item-section>-->
+<!--              </template>-->
+<!--              <q-card>-->
+<!--                <q-card-section>-->
+<!--                  <component :is="widget.name.concat('OptionPanel')"-->
+<!--                             v-model:options="widget.options" />-->
+<!--                </q-card-section>-->
+<!--              </q-card>-->
+<!--            </q-expansion-item>-->
+<!--          </q-card-section>-->
+<!--          <q-card-section>-->
+<!--            <div class="row q-col-gutter-md">-->
+<!--              <div class="col-3">-->
+<!--                <q-btn icon="isax:add"-->
+<!--                       class="full-width"-->
+<!--                       color="positive"-->
+<!--                       label="text"-->
+<!--                       @click="addTextWidget('bottomSectionWidgets')" />-->
+<!--              </div>-->
+<!--              <div class="col-3">-->
+<!--                <q-btn icon="isax:add"-->
+<!--                       class="full-width"-->
+<!--                       color="positive"-->
+<!--                       label="image"-->
+<!--                       @click="addImageWidget('bottomSectionWidgets')" />-->
+<!--              </div>-->
+<!--              <div class="col-3">-->
+<!--                <q-btn icon="isax:add"-->
+<!--                       class="full-width"-->
+<!--                       color="positive"-->
+<!--                       label="action button"-->
+<!--                       @click="addActionButtonWidget('bottomSectionWidgets')" />-->
+<!--              </div>-->
+<!--              <div class="col-3">-->
+<!--                <q-btn icon="isax:add"-->
+<!--                       class="full-width"-->
+<!--                       color="positive"-->
+<!--                       label="timer"-->
+<!--                       @click="addTimerWidget('bottomSectionWidgets')" />-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </q-card-section>-->
+<!--        </q-card>-->
+<!--      </q-expansion-item>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ActionPanel",
+  props: {
+    action: {
+      type: Object,
+      default: () => {
+      }
+    },
+  },
+  data() {
+    return {
+      actionOptions: ['scroll', 'link', 'event'],
+    }
+  },
+  computed: {
+    localOptions: {
+      get() {
+        return this.action
+      },
+      set(newValue) {
+        this.$emit('update:action', newValue)
+      }
+    }
+  },
+  mounted() {
+    console.log(this.localOptions)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/ui/src/mixin/OptionPanel.js b/ui/src/mixin/OptionPanel.js
index dc2b8a4..05652de 100644
--- a/ui/src/mixin/OptionPanel.js
+++ b/ui/src/mixin/OptionPanel.js
@@ -37,6 +37,34 @@ const OptionPanel = {
   methods: {
     removeNullKeys () {
 
+    },
+    takeAction() {
+      if (!this.localOptions.action.hasAction) {
+        return
+      } else if (this.localOptions.action.actionName && this.localOptions.action.actionName === 'scroll') {
+        this.scrollToElement(this.localOptions.action.scrollTo)
+      } else if (this.localOptions.action.actionName && this.localOptions.action.actionName === 'link') {
+        this.redirectRoute(this.localOptions.action.route)
+      } else if (this.localOptions.action.actionName && this.localOptions.action.actionName === 'event') {
+        this.$bus.emit(this.localOptions.action.eventName, this.localOptions.action.eventArgs)
+      }
+    },
+    scrollToElement(className) {
+      const el = document.getElementsByClassName(className)[0]
+      const headerOffset = 0
+      const elementPosition = el.getBoundingClientRect().top
+      const offsetPosition = elementPosition + window.pageYOffset - headerOffset
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth'
+      })
+    },
+    redirectRoute(url) {
+      if ((url.indexOf('http://') > -1 || url.indexOf('https://') > -1)) {
+        window.open(url, '_blank')
+      } else {
+        this.$router.push(url)
+      }
     },
     updateLocalOptions (newValue) {
       const newVal = newValue || this.localOptions

From 69b8bc5f7946f394c16d2bad0c64d9cf7b0480ca Mon Sep 17 00:00:00 2001
From: ali-khoshnevisan <ali.kh.3437@gmail.com>
Date: Sat, 11 Nov 2023 15:51:02 +0330
Subject: [PATCH 2/3] action panel

---
 .../OptionPanelComponents/OptionPanelTabs.vue |   3 -
 .../Tabs/ActionPanel/ActionPanel.vue          | 129 ------------------
 2 files changed, 132 deletions(-)

diff --git a/ui/src/components/OptionPanelComponents/OptionPanelTabs.vue b/ui/src/components/OptionPanelComponents/OptionPanelTabs.vue
index a3eb69e..9452d14 100644
--- a/ui/src/components/OptionPanelComponents/OptionPanelTabs.vue
+++ b/ui/src/components/OptionPanelComponents/OptionPanelTabs.vue
@@ -154,9 +154,6 @@ export default {
       }
     }
   },
-  mounted() {
-    console.log(this.localOptions)
-  },
   methods: {
     getDefaultOptions (options) {
       if (!options.style) {
diff --git a/ui/src/components/OptionPanelComponents/Tabs/ActionPanel/ActionPanel.vue b/ui/src/components/OptionPanelComponents/Tabs/ActionPanel/ActionPanel.vue
index a8e9060..5c584d6 100644
--- a/ui/src/components/OptionPanelComponents/Tabs/ActionPanel/ActionPanel.vue
+++ b/ui/src/components/OptionPanelComponents/Tabs/ActionPanel/ActionPanel.vue
@@ -27,132 +27,6 @@
       <q-input v-model="localOptions.eventArgs"
                label="eventArgs" />
     </div>
-<!--    <div v-if="localOptions.action === 'hamburger_menu'"-->
-<!--         class="input-container col-md-12">-->
-<!--      <q-expansion-item label="topWidgets">-->
-<!--        <q-card>-->
-<!--          <q-card-section v-for="(widget, index) in localOptions.topSectionWidgets"-->
-<!--                          :key="index">-->
-<!--            <q-expansion-item :label=widget.name-->
-<!--                              icon="build">-->
-<!--              <template v-slot:header>-->
-<!--                <q-item-section avatar>-->
-<!--                  <q-icon name="build" />-->
-<!--                </q-item-section>-->
-
-<!--                <q-item-section>-->
-<!--                  {{ widget.name }}-->
-<!--                </q-item-section>-->
-
-<!--                <q-item-section side>-->
-<!--                  <q-btn color="negative"-->
-<!--                         flat-->
-<!--                         icon="delete"-->
-<!--                         @click="deleteWidget('topSectionWidgets', index)" />-->
-<!--                </q-item-section>-->
-<!--              </template>-->
-<!--              <q-card>-->
-<!--                <q-card-section>-->
-<!--                  <option-panel v-if="widget.name === 'ActionButton'"-->
-<!--                                v-model:options="widget.options" />-->
-<!--                  <component :is="widget.name.concat('OptionPanel')"-->
-<!--                             v-model:options="widget.options" />-->
-<!--                </q-card-section>-->
-<!--              </q-card>-->
-<!--            </q-expansion-item>-->
-<!--          </q-card-section>-->
-<!--          <q-card-section>-->
-<!--            <div class="row q-col-gutter-md">-->
-<!--              <div>-->
-<!--                <q-btn icon="isax:add"-->
-<!--                       class="full-width"-->
-<!--                       color="positive"-->
-<!--                       label="text"-->
-<!--                       @click="addTextWidget('topSectionWidgets')" />-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                <q-btn icon="isax:add"-->
-<!--                       class="full-width"-->
-<!--                       color="positive"-->
-<!--                       label="image"-->
-<!--                       @click="addImageWidget('topSectionWidgets')" />-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                <q-btn icon="isax:add"-->
-<!--                       class="full-width"-->
-<!--                       color="positive"-->
-<!--                       label="action button"-->
-<!--                       @click="addActionButtonWidget('topSectionWidgets')" />-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </q-card-section>-->
-<!--        </q-card>-->
-<!--      </q-expansion-item>-->
-<!--      <q-expansion-item label="bottomWidgets">-->
-<!--        <q-card>-->
-<!--          <q-card-section v-for="(widget, index) in localOptions.bottomSectionWidgets"-->
-<!--                          :key="index">-->
-<!--            <q-expansion-item :label=widget.name-->
-<!--                              icon="build">-->
-<!--              <template v-slot:header>-->
-<!--                <q-item-section avatar>-->
-<!--                  <q-icon name="build" />-->
-<!--                </q-item-section>-->
-
-<!--                <q-item-section>-->
-<!--                  {{ widget.name }}-->
-<!--                </q-item-section>-->
-
-<!--                <q-item-section side>-->
-<!--                  <q-btn color="negative"-->
-<!--                         flat-->
-<!--                         icon="delete"-->
-<!--                         @click="deleteWidget('bottomSectionWidgets', index)" />-->
-<!--                </q-item-section>-->
-<!--              </template>-->
-<!--              <q-card>-->
-<!--                <q-card-section>-->
-<!--                  <component :is="widget.name.concat('OptionPanel')"-->
-<!--                             v-model:options="widget.options" />-->
-<!--                </q-card-section>-->
-<!--              </q-card>-->
-<!--            </q-expansion-item>-->
-<!--          </q-card-section>-->
-<!--          <q-card-section>-->
-<!--            <div class="row q-col-gutter-md">-->
-<!--              <div class="col-3">-->
-<!--                <q-btn icon="isax:add"-->
-<!--                       class="full-width"-->
-<!--                       color="positive"-->
-<!--                       label="text"-->
-<!--                       @click="addTextWidget('bottomSectionWidgets')" />-->
-<!--              </div>-->
-<!--              <div class="col-3">-->
-<!--                <q-btn icon="isax:add"-->
-<!--                       class="full-width"-->
-<!--                       color="positive"-->
-<!--                       label="image"-->
-<!--                       @click="addImageWidget('bottomSectionWidgets')" />-->
-<!--              </div>-->
-<!--              <div class="col-3">-->
-<!--                <q-btn icon="isax:add"-->
-<!--                       class="full-width"-->
-<!--                       color="positive"-->
-<!--                       label="action button"-->
-<!--                       @click="addActionButtonWidget('bottomSectionWidgets')" />-->
-<!--              </div>-->
-<!--              <div class="col-3">-->
-<!--                <q-btn icon="isax:add"-->
-<!--                       class="full-width"-->
-<!--                       color="positive"-->
-<!--                       label="timer"-->
-<!--                       @click="addTimerWidget('bottomSectionWidgets')" />-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </q-card-section>-->
-<!--        </q-card>-->
-<!--      </q-expansion-item>-->
-<!--    </div>-->
   </div>
 </template>
 
@@ -181,9 +55,6 @@ export default {
       }
     }
   },
-  mounted() {
-    console.log(this.localOptions)
-  }
 }
 </script>
 

From 37f13fb7959e5e0634bfd0c32d45c76182612eed Mon Sep 17 00:00:00 2001
From: ali-khoshnevisan <ali.kh.3437@gmail.com>
Date: Sun, 28 Jul 2024 12:58:50 +0330
Subject: [PATCH 3/3] fix: add responsiveShow class to row widget

---
 ui/src/components/Row/Row.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/Row/Row.vue b/ui/src/components/Row/Row.vue
index 6cf6ecb..e510a13 100644
--- a/ui/src/components/Row/Row.vue
+++ b/ui/src/components/Row/Row.vue
@@ -288,7 +288,8 @@ export default {
         'absolute-right': this.rowOptions.absolute === 'right',
         'absolute-bottom': this.rowOptions.absolute === 'bottom',
         'absolute-left': this.rowOptions.absolute === 'left',
-        [this.rowOptions.className]: true
+        [this.rowOptions.className]: true,
+        [this.responsiveShow] :true
       }
     },
     computedCol: {