From a9c3c241e6cfa9491977bf715af0c8283e414ded Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Tue, 3 Dec 2024 13:07:32 -0500
Subject: [PATCH 1/3] Initial VarFinder Modal functionality

---
 .../components/LatestAssets.vue               |   0
 .../components/VarFinderModal.vue             | 252 ++++++++++++++++++
 resources/js/variable-finder/var-finder.js    |   5 +
 resources/views/designer/index.blade.php      |   8 +
 4 files changed, 265 insertions(+)
 create mode 100644 resources/js/variable-finder/components/LatestAssets.vue
 create mode 100644 resources/js/variable-finder/components/VarFinderModal.vue
 create mode 100644 resources/js/variable-finder/var-finder.js

diff --git a/resources/js/variable-finder/components/LatestAssets.vue b/resources/js/variable-finder/components/LatestAssets.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/resources/js/variable-finder/components/VarFinderModal.vue b/resources/js/variable-finder/components/VarFinderModal.vue
new file mode 100644
index 0000000000..f91c1c1fda
--- /dev/null
+++ b/resources/js/variable-finder/components/VarFinderModal.vue
@@ -0,0 +1,252 @@
+<template>
+  <div>
+    <modal
+      id="varFinder"
+      class="var-finder-modal"
+      :ok-disabled="disabled"
+      :hide-footer="true"
+      :hide-header="true"
+      @hidden="onClose"
+      @ok.prevent="onSubmit"
+    >
+      <div class="d-flex justify-content-between">
+        <h6 class="pt-2">
+          {{ $t("VarFinder") }}
+        </h6>
+        <button
+          class="modal-close-btn"
+          data-cy="close-var-finder"
+          @click="close()"
+        >
+          <i class="fas fa-times" />
+        </button>
+      </div>
+      <div class="d-flex panel-tabs justify-content-center">
+        <b-button
+          class="d-inline panel-tab-btn px-1"
+          :class="{ 'recent-selected': recentSelected }"
+          data-cy="recent-tab"
+          @click="showRecentView"
+        >
+          {{ $t("Recent") }}
+        </b-button>
+        <b-button
+          class="d-inline panel-tab-btn"
+          :class="{ 'search-selected': searchSelected }"
+          data-cy="search-tab"
+          @click="showSearchView"
+        >
+          {{ $t("Search") }}
+        </b-button>
+      </div>
+      <div class="d-flex justify-content-center">
+        <div
+          v-if="recentSelected"
+          class="d-flex justify-content-center p-0"
+          data-cy="recent-list"
+        >
+          <span
+            v-if="loading"
+            class="d-flex justify-content-center"
+          >
+            <b-spinner
+              variant="primary"
+              label="Spinning"
+            />
+          </span>
+          <span
+            v-if="noRecentAssets"
+            class="p-2 h-100 overflow-auto"
+          ><h5>{{ $t("No assets found.") }}</h5>
+          </span>
+          <latest-assets v-else />
+        </div>
+        <div
+          v-if="searchSelected"
+          class="d-flex justify-content-center p-0"
+          data-cy="search-list"
+        >
+          <span
+            v-if="loading"
+            class="d-flex justify-content-center"
+          >
+            <b-spinner
+              variant="primary"
+              label="Spinning"
+            />
+          </span>
+          <span
+            v-if="noSearchResults"
+            class="p-2 h-100 overflow-auto"
+          >
+            <h5>{{ $t("No templates found.") }}</h5>
+          </span>
+          <screen-template-card
+            v-for="template in sharedTemplatesData"
+            v-else
+            :key="template.id"
+            :template="template"
+            :screen-id="screenId"
+            :current-screen-page="currentScreenPage"
+            :active-template-id="activeTemplateId"
+            @toggle-active="setActiveTemplate"
+          />
+        </div>
+      </div>
+    </modal>
+  </div>
+</template>
+
+<script>
+import Modal from "../../components/shared/Modal.vue";
+import LatestAssets from "./LatestAssets.vue";
+
+export default {
+  components: {
+    Modal,
+    LatestAssets,
+  },
+  mixins: [],
+  props: [],
+  data() {
+    return {
+      shortcutKeys: ["Meta", "Shift", "v"],
+      pressedKeys: new Set(),
+      recentSelected: true,
+      searchSelected: false,
+      isDesignerPage: false,
+      disabled: false,
+      loading: false,
+      noRecentAssets: false,
+      noSearchResults: false,
+    };
+  },
+  computed: {},
+  watch: {
+    $route: {
+      immediate: true,
+      handler() {
+        this.isDesignerPage = window.location.pathname.includes("/designer");
+        console.log("isDesignerPage", this.isDesignerPage, window.location.pathname);
+        if (this.isDesignerPage) {
+          this.setupKeyboardListeners();
+        } else {
+          this.removeKeyboardListeners();
+        }
+      },
+    },
+  },
+  mounted() {
+    console.log("HIT MOUNTED");
+    this.showRecentView();
+  },
+  beforeDestroy() {
+    this.removeKeyboardListeners();
+  },
+  methods: {
+    show() {
+      console.log("SHOW MODAL");
+      this.$bvModal.show("varFinder");
+    },
+    onClose() {
+      //   this.resetFormData();
+      //   this.resetErrors();
+    },
+    close() {
+      this.$bvModal.hide("varFinder");
+      this.onClose();
+    },
+    setupKeyboardListeners() {
+      window.addEventListener("keydown", this.handleKeyDown);
+      window.addEventListener("keyup", this.handleKeyUp);
+    },
+    removeKeyboardListeners() {
+      window.removeEventListener("keydown", this.handleKeyDown);
+      window.removeEventListener("keyup", this.handleKeyUp);
+    },
+    handleKeyDown(event) {
+      console.log("handleKeyDown", event);
+      this.pressedKeys.add(event.key);
+
+      // Check if all shortcut keys are pressed
+      if (this.shortcutKeys.every((key) => this.pressedKeys.has(key))) {
+        this.show();
+        event.preventDefault();
+      }
+    },
+    handleKeyUp(event) {
+      console.log("handleKeyUp", event);
+      this.pressedKeys.delete(event.key);
+    },
+    showRecentView() {
+      this.recentSelected = true;
+      this.searchSelected = false;
+    },
+    showSearchView() {
+      this.recentSelected = false;
+      this.searchSelected = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.var-finder-modal {
+  border-radius:  16px;
+  width: 576px;
+  height: 812px;
+}
+
+.modal-close-btn {
+  background-color: transparent;
+  border: none;
+  color: #596372;
+}
+
+.panel-tabs {
+  padding: 4px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.panel-tab-btn {
+  width: 50%;
+  background-color: transparent;
+  border: none;
+  color: #20242a;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  text-transform: none;
+}
+
+.recent-selected {
+  background-color: #2773F3;
+  color: #ffffff;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
+    0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05),
+    0px 1px 0px -1px rgb(0, 0, 0, 0.05);
+}
+
+.search-selected {
+  background-color: #2773F3;
+  color: #ffffff;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
+    0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05),
+    0px 1px 0px -1px rgb(0, 0, 0, 0.05);
+}
+</style>
diff --git a/resources/js/variable-finder/var-finder.js b/resources/js/variable-finder/var-finder.js
new file mode 100644
index 0000000000..6b30caa492
--- /dev/null
+++ b/resources/js/variable-finder/var-finder.js
@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import VarFinderModal from './components/VarFinderModal.vue';
+
+// Register the component globally
+Vue.component('VarFinderModal', VarFinderModal);
diff --git a/resources/views/designer/index.blade.php b/resources/views/designer/index.blade.php
index 7db4a0cda9..48e70afc14 100644
--- a/resources/views/designer/index.blade.php
+++ b/resources/views/designer/index.blade.php
@@ -16,6 +16,9 @@
 @section('content')
 
 <div id="new-designer" class="p-3 page-content mb-0 bg-white">
+    {{-- @if (hasPackage('package-variable-finder')) --}}
+        <var-finder-modal ref="varFinder"></var-finder-modal>
+    {{-- @endif --}}
     <welcome-designer></welcome-designer>
     <div class="card card-body border-0">
         <div class="row">
@@ -56,6 +59,11 @@
 @endsection
 
 @section('js')
+
+{{-- @if (hasPackage('package-variable-finder')) --}}
+<script src="{{ mix('js/variable-finder/var-finder.js') }}"></script>
+{{-- @endif --}}
+
 <script>
     window.Processmaker.user = @json($currentUser);
 </script>

From 9a99629d67695f7d36469856eeb5b8ca849bd541 Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Tue, 3 Dec 2024 12:01:20 -0800
Subject: [PATCH 2/3] Remove varfinder components

---
 .../components/LatestAssets.vue               |   0
 .../components/VarFinderModal.vue             | 252 ------------------
 resources/js/variable-finder/var-finder.js    |   5 -
 resources/views/designer/index.blade.php      |   7 -
 4 files changed, 264 deletions(-)
 delete mode 100644 resources/js/variable-finder/components/LatestAssets.vue
 delete mode 100644 resources/js/variable-finder/components/VarFinderModal.vue
 delete mode 100644 resources/js/variable-finder/var-finder.js

diff --git a/resources/js/variable-finder/components/LatestAssets.vue b/resources/js/variable-finder/components/LatestAssets.vue
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/resources/js/variable-finder/components/VarFinderModal.vue b/resources/js/variable-finder/components/VarFinderModal.vue
deleted file mode 100644
index f91c1c1fda..0000000000
--- a/resources/js/variable-finder/components/VarFinderModal.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<template>
-  <div>
-    <modal
-      id="varFinder"
-      class="var-finder-modal"
-      :ok-disabled="disabled"
-      :hide-footer="true"
-      :hide-header="true"
-      @hidden="onClose"
-      @ok.prevent="onSubmit"
-    >
-      <div class="d-flex justify-content-between">
-        <h6 class="pt-2">
-          {{ $t("VarFinder") }}
-        </h6>
-        <button
-          class="modal-close-btn"
-          data-cy="close-var-finder"
-          @click="close()"
-        >
-          <i class="fas fa-times" />
-        </button>
-      </div>
-      <div class="d-flex panel-tabs justify-content-center">
-        <b-button
-          class="d-inline panel-tab-btn px-1"
-          :class="{ 'recent-selected': recentSelected }"
-          data-cy="recent-tab"
-          @click="showRecentView"
-        >
-          {{ $t("Recent") }}
-        </b-button>
-        <b-button
-          class="d-inline panel-tab-btn"
-          :class="{ 'search-selected': searchSelected }"
-          data-cy="search-tab"
-          @click="showSearchView"
-        >
-          {{ $t("Search") }}
-        </b-button>
-      </div>
-      <div class="d-flex justify-content-center">
-        <div
-          v-if="recentSelected"
-          class="d-flex justify-content-center p-0"
-          data-cy="recent-list"
-        >
-          <span
-            v-if="loading"
-            class="d-flex justify-content-center"
-          >
-            <b-spinner
-              variant="primary"
-              label="Spinning"
-            />
-          </span>
-          <span
-            v-if="noRecentAssets"
-            class="p-2 h-100 overflow-auto"
-          ><h5>{{ $t("No assets found.") }}</h5>
-          </span>
-          <latest-assets v-else />
-        </div>
-        <div
-          v-if="searchSelected"
-          class="d-flex justify-content-center p-0"
-          data-cy="search-list"
-        >
-          <span
-            v-if="loading"
-            class="d-flex justify-content-center"
-          >
-            <b-spinner
-              variant="primary"
-              label="Spinning"
-            />
-          </span>
-          <span
-            v-if="noSearchResults"
-            class="p-2 h-100 overflow-auto"
-          >
-            <h5>{{ $t("No templates found.") }}</h5>
-          </span>
-          <screen-template-card
-            v-for="template in sharedTemplatesData"
-            v-else
-            :key="template.id"
-            :template="template"
-            :screen-id="screenId"
-            :current-screen-page="currentScreenPage"
-            :active-template-id="activeTemplateId"
-            @toggle-active="setActiveTemplate"
-          />
-        </div>
-      </div>
-    </modal>
-  </div>
-</template>
-
-<script>
-import Modal from "../../components/shared/Modal.vue";
-import LatestAssets from "./LatestAssets.vue";
-
-export default {
-  components: {
-    Modal,
-    LatestAssets,
-  },
-  mixins: [],
-  props: [],
-  data() {
-    return {
-      shortcutKeys: ["Meta", "Shift", "v"],
-      pressedKeys: new Set(),
-      recentSelected: true,
-      searchSelected: false,
-      isDesignerPage: false,
-      disabled: false,
-      loading: false,
-      noRecentAssets: false,
-      noSearchResults: false,
-    };
-  },
-  computed: {},
-  watch: {
-    $route: {
-      immediate: true,
-      handler() {
-        this.isDesignerPage = window.location.pathname.includes("/designer");
-        console.log("isDesignerPage", this.isDesignerPage, window.location.pathname);
-        if (this.isDesignerPage) {
-          this.setupKeyboardListeners();
-        } else {
-          this.removeKeyboardListeners();
-        }
-      },
-    },
-  },
-  mounted() {
-    console.log("HIT MOUNTED");
-    this.showRecentView();
-  },
-  beforeDestroy() {
-    this.removeKeyboardListeners();
-  },
-  methods: {
-    show() {
-      console.log("SHOW MODAL");
-      this.$bvModal.show("varFinder");
-    },
-    onClose() {
-      //   this.resetFormData();
-      //   this.resetErrors();
-    },
-    close() {
-      this.$bvModal.hide("varFinder");
-      this.onClose();
-    },
-    setupKeyboardListeners() {
-      window.addEventListener("keydown", this.handleKeyDown);
-      window.addEventListener("keyup", this.handleKeyUp);
-    },
-    removeKeyboardListeners() {
-      window.removeEventListener("keydown", this.handleKeyDown);
-      window.removeEventListener("keyup", this.handleKeyUp);
-    },
-    handleKeyDown(event) {
-      console.log("handleKeyDown", event);
-      this.pressedKeys.add(event.key);
-
-      // Check if all shortcut keys are pressed
-      if (this.shortcutKeys.every((key) => this.pressedKeys.has(key))) {
-        this.show();
-        event.preventDefault();
-      }
-    },
-    handleKeyUp(event) {
-      console.log("handleKeyUp", event);
-      this.pressedKeys.delete(event.key);
-    },
-    showRecentView() {
-      this.recentSelected = true;
-      this.searchSelected = false;
-    },
-    showSearchView() {
-      this.recentSelected = false;
-      this.searchSelected = true;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.var-finder-modal {
-  border-radius:  16px;
-  width: 576px;
-  height: 812px;
-}
-
-.modal-close-btn {
-  background-color: transparent;
-  border: none;
-  color: #596372;
-}
-
-.panel-tabs {
-  padding: 4px;
-  background-color: #ffffff;
-  border-radius: 8px;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.panel-tab-btn {
-  width: 50%;
-  background-color: transparent;
-  border: none;
-  color: #20242a;
-  font-size: 12px;
-  padding-left: 0px;
-  padding-right: 0px;
-  text-transform: none;
-}
-
-.recent-selected {
-  background-color: #2773F3;
-  color: #ffffff;
-  border-radius: 8px;
-  border: none;
-  font-weight: 600;
-  font-size: 12px;
-  padding-left: 0px;
-  padding-right: 0px;
-  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
-    0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05),
-    0px 1px 0px -1px rgb(0, 0, 0, 0.05);
-}
-
-.search-selected {
-  background-color: #2773F3;
-  color: #ffffff;
-  border-radius: 8px;
-  border: none;
-  font-weight: 600;
-  font-size: 12px;
-  padding-left: 0px;
-  padding-right: 0px;
-  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
-    0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05),
-    0px 1px 0px -1px rgb(0, 0, 0, 0.05);
-}
-</style>
diff --git a/resources/js/variable-finder/var-finder.js b/resources/js/variable-finder/var-finder.js
deleted file mode 100644
index 6b30caa492..0000000000
--- a/resources/js/variable-finder/var-finder.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Vue from 'vue';
-import VarFinderModal from './components/VarFinderModal.vue';
-
-// Register the component globally
-Vue.component('VarFinderModal', VarFinderModal);
diff --git a/resources/views/designer/index.blade.php b/resources/views/designer/index.blade.php
index 48e70afc14..d3a6b3b18f 100644
--- a/resources/views/designer/index.blade.php
+++ b/resources/views/designer/index.blade.php
@@ -16,9 +16,6 @@
 @section('content')
 
 <div id="new-designer" class="p-3 page-content mb-0 bg-white">
-    {{-- @if (hasPackage('package-variable-finder')) --}}
-        <var-finder-modal ref="varFinder"></var-finder-modal>
-    {{-- @endif --}}
     <welcome-designer></welcome-designer>
     <div class="card card-body border-0">
         <div class="row">
@@ -60,10 +57,6 @@
 
 @section('js')
 
-{{-- @if (hasPackage('package-variable-finder')) --}}
-<script src="{{ mix('js/variable-finder/var-finder.js') }}"></script>
-{{-- @endif --}}
-
 <script>
     window.Processmaker.user = @json($currentUser);
 </script>

From 6c7b431f3c953fb43f34c7f5a471f8494636004f Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Tue, 3 Dec 2024 12:02:10 -0800
Subject: [PATCH 3/3] Include varfinder js files

---
 resources/views/layouts/layout.blade.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/views/layouts/layout.blade.php b/resources/views/layouts/layout.blade.php
index 301ddc5189..5e729b4cf6 100644
--- a/resources/views/layouts/layout.blade.php
+++ b/resources/views/layouts/layout.blade.php
@@ -151,6 +151,10 @@ class="main flex-grow-1 h-100
 @if (hasPackage('package-accessibility'))
   @include('package-accessibility::userway')
 @endif
+
+@if (hasPackage('package-variable-finder'))
+  @include('package-variable-finder::index')
+@endif
     <!--javascript!-->
     @yield('js')
 </body>