FOUR-12188:Create a New Dropdwon-Card component with preview Icons

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;

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>

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>

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")