From 6aaff0e9cdcd990cafe7cad84673f27839c68e7d Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Fri, 17 Nov 2023 16:18:49 +0000
Subject: [PATCH] FOUR-12188:Create a New Dropdwon-Card component with preview
 Icons

sonar
---
 ProcessMaker/Models/ScriptExecutor.php        |  2 +-
 resources/img/script_lang/default.svg         |  5 ++
 resources/img/script_lang/javascript.svg      |  5 ++
 resources/img/script_lang/lua.svg             |  5 ++
 resources/img/script_lang/php.svg             |  9 +++
 .../scripts/components/CreateScriptModal.vue  | 23 +++---
 .../scripts/components/LanguageScript.vue     | 77 +++++++++++++++++++
 webpack.mix.js                                |  1 +
 8 files changed, 116 insertions(+), 11 deletions(-)
 create mode 100644 resources/img/script_lang/default.svg
 create mode 100644 resources/img/script_lang/javascript.svg
 create mode 100644 resources/img/script_lang/lua.svg
 create mode 100644 resources/img/script_lang/php.svg
 create mode 100644 resources/js/processes/scripts/components/LanguageScript.vue

diff --git a/ProcessMaker/Models/ScriptExecutor.php b/ProcessMaker/Models/ScriptExecutor.php
index cc86f6f5e1..055374973b 100644
--- a/ProcessMaker/Models/ScriptExecutor.php
+++ b/ProcessMaker/Models/ScriptExecutor.php
@@ -154,7 +154,7 @@ public static function list($language = null)
         }
 
         foreach ($executors->get() as $executor) {
-            $list[$executor->id] = $executor->language . ' - ' . $executor->title;
+            $list[$executor->id] = $executor->language;
         }
 
         return $list;
diff --git a/resources/img/script_lang/default.svg b/resources/img/script_lang/default.svg
new file mode 100644
index 0000000000..f2e3da27cf
--- /dev/null
+++ b/resources/img/script_lang/default.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1171275567">
+<path id="Vector" d="M9.2 16.2L10.8333 14.5375L8.29583 12L10.8333 9.4625L9.2 7.8L5 12L9.2 16.2ZM14.8 16.2L19 12L14.8 7.8L13.1667 9.4625L15.7042 12L13.1667 14.5375L14.8 16.2ZM3.83333 22.5C3.19167 22.5 2.64217 22.2713 2.18484 21.814C1.7275 21.3567 1.49922 20.8076 1.5 20.1667V3.83333C1.5 3.19167 1.72867 2.64217 2.186 2.18484C2.64334 1.7275 3.19245 1.49922 3.83333 1.5H20.1667C20.8083 1.5 21.3578 1.72867 21.8152 2.186C22.2725 2.64334 22.5008 3.19245 22.5 3.83333V20.1667C22.5 20.8083 22.2713 21.3578 21.814 21.8152C21.3567 22.2725 20.8076 22.5008 20.1667 22.5H3.83333Z" fill="#1572C2"/>
+</g>
+</svg>
diff --git a/resources/img/script_lang/javascript.svg b/resources/img/script_lang/javascript.svg
new file mode 100644
index 0000000000..bc0e4d5fa2
--- /dev/null
+++ b/resources/img/script_lang/javascript.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1171275565">
+<path id="Vector" d="M4.66667 1C3.69421 1 2.76158 1.36875 2.07394 2.02513C1.38631 2.6815 1 3.57174 1 4.5V18.5C1 19.4283 1.38631 20.3185 2.07394 20.9749C2.76158 21.6313 3.69421 22 4.66667 22H19.3333C20.3058 22 21.2384 21.6313 21.9261 20.9749C22.6137 20.3185 23 19.4283 23 18.5V4.5C23 3.57174 22.6137 2.6815 21.9261 2.02513C21.2384 1.36875 20.3058 1 19.3333 1H4.66667ZM13.6304 16.2308C14.5104 16.9075 15.388 17.24 16.2656 17.2318C16.8033 17.2318 17.2164 17.1385 17.5024 16.9495C17.636 16.8668 17.7446 16.7522 17.8177 16.6172C17.8908 16.4822 17.9258 16.3313 17.9192 16.1795C17.921 16.0139 17.8847 15.8499 17.8129 15.6991C17.7411 15.5484 17.6356 15.4145 17.5037 15.3068C17.2164 15.0677 16.6738 14.8285 15.8757 14.5882C14.9174 14.3233 14.1768 13.9815 13.6573 13.5615C13.1464 13.1415 12.8873 12.5558 12.8776 11.8033C12.8776 11.0928 13.2002 10.499 13.8456 10.0195C14.4738 9.54117 15.2756 9.30083 16.2533 9.30083C17.6149 9.30083 18.7088 9.617 19.5326 10.2505L18.5914 11.6493C18.2526 11.3978 17.8639 11.2144 17.4487 11.1103C17.0755 10.9912 16.6858 10.9263 16.2924 10.9178C15.828 10.9178 15.4552 10.9995 15.1766 11.1617C14.8991 11.325 14.761 11.5385 14.761 11.8033C14.761 12.095 14.9309 12.3423 15.2707 12.5477C15.6129 12.7448 16.1947 12.963 17.0184 13.2022C18.0133 13.4845 18.7222 13.8613 19.1427 14.3315C19.5643 14.8017 19.7746 15.4013 19.7746 16.1282C19.7746 16.8725 19.4751 17.5142 18.8738 18.0532C18.2822 18.584 17.4218 18.8617 16.2924 18.8873C14.8136 18.8873 13.5767 18.4638 12.5818 17.6168L13.6304 16.2308ZM6.87156 16.9752C7.15878 17.1467 7.50344 17.2318 7.90678 17.2318C8.32844 17.2318 8.67678 17.1163 8.95544 16.8853C9.23289 16.6462 9.37222 16.2308 9.37222 15.6405V9.45483H11.1872V15.9742C11.1603 16.9833 10.856 17.7113 10.273 18.1558C9.9549 18.414 9.58406 18.6063 9.184 18.7205C8.81346 18.8283 8.42857 18.8845 8.04122 18.8873C7.369 18.8873 6.77256 18.7765 6.25311 18.5537C5.697 18.3145 5.23133 17.891 4.85489 17.2832L6.11867 16.295C6.35089 16.5948 6.60267 16.8212 6.87156 16.9752Z" fill="#1572C2"/>
+</g>
+</svg>
diff --git a/resources/img/script_lang/lua.svg b/resources/img/script_lang/lua.svg
new file mode 100644
index 0000000000..b4ed3b20ee
--- /dev/null
+++ b/resources/img/script_lang/lua.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1171275564">
+<path id="Vector" d="M10.2 3.8771C7.4948 3.8771 4.90039 4.95174 2.98751 6.86462C1.07464 8.77749 0 11.3719 0 14.0771C0 16.7823 1.07464 19.3767 2.98751 21.2896C4.90039 23.2025 7.4948 24.2771 10.2 24.2771C11.5395 24.2771 12.8659 24.0133 14.1034 23.5007C15.3409 22.9881 16.4653 22.2368 17.4125 21.2896C18.3597 20.3425 19.111 19.218 19.6236 17.9805C20.1362 16.743 20.4 15.4166 20.4 14.0771C20.4 11.3719 19.3254 8.77749 17.4125 6.86462C15.4996 4.95174 12.9052 3.8771 10.2 3.8771ZM13.8 13.4771C13.0044 13.4771 12.2413 13.161 11.6787 12.5984C11.1161 12.0358 10.8 11.2728 10.8 10.4771C10.8 9.68146 11.1161 8.9184 11.6787 8.35579C12.2413 7.79318 13.0044 7.47711 13.8 7.47711C14.5957 7.47711 15.3587 7.79318 15.9213 8.35579C16.4839 8.9184 16.8 9.68146 16.8 10.4771C16.8 11.2728 16.4839 12.0358 15.9213 12.5984C15.3587 13.161 14.5957 13.4771 13.8 13.4771ZM21 0.2771C20.2044 0.2771 19.4413 0.59317 18.8787 1.15578C18.3161 1.71839 18 2.48145 18 3.2771C18 4.07275 18.3161 4.83581 18.8787 5.39842C19.4413 5.96103 20.2044 6.27711 21 6.27711C21.394 6.27711 21.7841 6.19951 22.1481 6.04874C22.512 5.89798 22.8428 5.677 23.1213 5.39842C23.3999 5.11985 23.6209 4.78913 23.7717 4.42515C23.9224 4.06118 24 3.67107 24 3.2771C24 2.48145 23.684 1.71839 23.1213 1.15578C22.5587 0.59317 21.7957 0.2771 21 0.2771Z" fill="#1572C2"/>
+</g>
+</svg>
diff --git a/resources/img/script_lang/php.svg b/resources/img/script_lang/php.svg
new file mode 100644
index 0000000000..05d8c7574a
--- /dev/null
+++ b/resources/img/script_lang/php.svg
@@ -0,0 +1,9 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1171275566">
+<g id="Subtract">
+<path d="M7.02752 10.748C7.57952 10.748 7.93952 10.844 8.13152 11.06C8.32352 11.252 8.34752 11.612 8.25152 12.092C8.15552 12.596 7.96352 12.98 7.67552 13.196C7.38752 13.412 6.95552 13.532 6.37952 13.532H5.49152L6.01952 10.748H7.02752Z" fill="#1572C2"/>
+<path d="M19.8195 11.06C19.6275 10.844 19.2675 10.748 18.7155 10.748H17.7075L17.1795 13.532H18.0675C18.6435 13.532 19.0755 13.412 19.3635 13.196C19.6515 12.98 19.8435 12.596 19.9395 12.092C20.0355 11.612 20.0115 11.252 19.8195 11.06Z" fill="#1572C2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3795 12.5C24.3795 19.1274 19.0069 24.5 12.3795 24.5C5.7521 24.5 0.379517 19.1274 0.379517 12.5C0.379517 5.87258 5.7521 0.5 12.3795 0.5C19.0069 0.5 24.3795 5.87258 24.3795 12.5ZM11.2035 7.94H12.6435L12.3075 9.716H13.5795C14.3715 9.716 14.9475 9.86 15.2355 10.148C15.5475 10.436 15.6435 10.892 15.4995 11.516L14.8995 14.612H13.4355L14.0115 11.684C14.0835 11.348 14.0595 11.132 13.9395 11.012C13.8195 10.892 13.5795 10.82 13.2195 10.82H12.0675L11.3235 14.612H9.88352L11.2035 7.94ZM3.49952 16.34H4.93952L5.27552 14.564H6.52352C7.07552 14.564 7.50752 14.516 7.86752 14.396C8.22752 14.276 8.53952 14.084 8.82752 13.82C9.06752 13.604 9.25952 13.34 9.42752 13.076C9.57152 12.812 9.69152 12.5 9.73952 12.188C9.88352 11.396 9.78752 10.796 9.40352 10.34C9.01952 9.908 8.41952 9.692 7.57952 9.692H4.79552L3.49952 16.34ZM16.6275 16.34H15.1875L16.4835 9.692H19.2675C20.1075 9.692 20.7075 9.908 21.0915 10.34C21.4755 10.796 21.5715 11.396 21.4275 12.188C21.3795 12.5 21.2595 12.812 21.1155 13.076C20.9475 13.34 20.7555 13.604 20.5155 13.82C20.2275 14.084 19.9155 14.276 19.5555 14.396C19.1955 14.516 18.7635 14.564 18.2115 14.564H16.9635L16.6275 16.34Z" fill="#1572C2"/>
+</g>
+</g>
+</svg>
diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index ac773f8ad9..e534347104 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -20,7 +20,10 @@
     >
       <b-row>
         <b-col cols="4">
-          <!-- TODO -->
+          <language-script
+            :languages="scriptExecutors"
+            :select="onSelect"
+          />
         </b-col>
         <b-col cols="8">
           <template v-if="countCategories">
@@ -225,6 +228,7 @@ import Required from "../../../components/shared/Required.vue";
 import ProjectSelect from "../../../components/shared/ProjectSelect.vue";
 import SliderWithInput from "../../../components/shared/SliderWithInput.vue";
 import { isQuickCreate as isQuickCreateFunc } from "../../../utils/isQuickCreate";
+import LanguageScript from "./LanguageScript.vue";
 
 const channel = new BroadcastChannel("assetCreation");
 
@@ -234,6 +238,7 @@ export default {
     Required,
     SliderWithInput,
     ProjectSelect,
+    LanguageScript,
   },
   mixins: [FormErrorsMixin],
   props: [
@@ -305,15 +310,7 @@ export default {
         .get(`/users/${this.userRunScript}`)
         .then((response) => {
           this.selectedUser = response.data;
-        })
-    },
-    /**
-       * Check if the search params contains create=true which means is coming from the Modeler as a Quick Asset Creation
-       * @returns {boolean}
-       */
-    isQuickCreate() {
-      const searchParams = new URLSearchParams(window.location.search);
-      return searchParams?.get("create") === "true";
+        });
     },
     onClose() {
       this.title = "";
@@ -390,6 +387,12 @@ export default {
           }
         });
     },
+    /**
+     * Set the ID of the language selected
+     */
+    onSelect(langId) {
+      this.script_executor_id = langId;
+    },
   },
 };
 </script>
diff --git a/resources/js/processes/scripts/components/LanguageScript.vue b/resources/js/processes/scripts/components/LanguageScript.vue
new file mode 100644
index 0000000000..1217706307
--- /dev/null
+++ b/resources/js/processes/scripts/components/LanguageScript.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="container-lang">
+    <label class="choose-lang m-2 text-uppercase">
+      {{ $t("Choose a language") }}
+    </label>
+    <div
+      v-for="(lang, index) in languages"
+      :key="index"
+    >
+      <b-card
+        :ref="`${lang}`"
+        class="mt-2 card-lang"
+        @click="selectLanguage(lang, index)"
+      >
+        <b-card-text>
+          <img
+            :src="getImage(lang)"
+            :alt="lang"
+          >
+          <span class="text-uppercase ml-2">
+            {{ lang }}
+          </span>
+        </b-card-text>
+      </b-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["languages", "select"],
+  methods: {
+    /**
+     * Check the language selected and emit to modal
+     */
+    selectLanguage(lang, index) {
+      this.selectedLang(lang);
+      this.select(index);
+    },
+    /**
+     * Get the Icon of the language
+     */
+    getImage(lang) {
+      return `/img/script_lang/${lang}.svg`;
+    },
+    /**
+     * Add the border to the item selected
+     */
+    selectedLang(lang) {
+      for (const item in this.$refs) {
+        this.$refs[item][0].className = "card mb-2 card-lang";
+      }
+      this.$refs[lang][0].className = "card mb-2 card-lang selected";
+    },
+  },
+};
+</script>
+
+<style scoped>
+  .selected {
+    border: 3px solid #1572C2;
+    background-color: #EDF6FF;
+  }
+  .card-lang {
+    cursor: pointer;
+    width: 90%;
+    margin-left: 5%;
+  }
+  .container-lang {
+    background-color: #F6F9FB;
+    height: 100%;
+    font-size: 14px;
+  }
+  .choose-lang {
+    color: #6A7888;
+  }
+</style>
diff --git a/webpack.mix.js b/webpack.mix.js
index 5d729dde12..5fa355a8ed 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -54,6 +54,7 @@ mix.extract([
   "@fortawesome/vue-fontawesome"
 ])
   .copy("resources/img/*", "public/img")
+  .copy("resources/img/script_lang/*", "public/img/script_lang")
   .copy("node_modules/snapsvg/dist/snap.svg.js", "public/js")
   .copy("resources/js/components/CustomActions.vue", "public/js")
   .copy("resources/js/components/DetailRow.vue", "public/js")