From cdcaf9d20cd299198d9bee30d347d792f3c32176 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 20 Nov 2023 20:04:13 +0000
Subject: [PATCH] FOUR-12482:Integration: New Script Modal Redesign

---
 .../scripts/components/CreateScriptModal.vue  | 26 ++++++--
 .../scripts/components/LanguageScript.vue     | 62 ++++++++++++-------
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 3a49f1a810..891385c5d9 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -14,6 +14,7 @@
       size="xl"
       scrollable
       centered
+      no-close-on-backdrop
       :ok-disabled="disabled"
       :title="modalSetUp"
     >
@@ -22,6 +23,7 @@
           <language-script
             :languages="scriptExecutors"
             :select="onSelect"
+            :invalid_feedback="errorMessage('script_executor_id', addError)"
           />
         </b-col>
         <b-col
@@ -240,12 +242,23 @@
           </template>
         </b-col>
       </b-row>
-      <div slot="modal-footer" class="w-100 m-0 d-flex d-flex align-items-center">
+      <div
+        slot="modal-footer"
+        class="w-100 m-0 d-flex d-flex align-items-center"
+      >
         <required />
-        <button type="button" class="btn btn-outline-secondary ml-auto" @click="onClose">
+        <button
+          type="button"
+          class="btn btn-outline-secondary ml-auto"
+          @click="onClose"
+        >
           {{ $t('Cancel') }}
         </button>
-        <button type="button" class="btn btn-secondary ml-3" @click="onSubmit">
+        <button
+          type="button"
+          class="btn btn-secondary ml-3"
+          @click="onSubmit"
+        >
           {{ $t('Save') }}
         </button>
       </div>
@@ -309,9 +322,6 @@ export default {
       userRunScript: 1,
     };
   },
-  mounted() {
-    this.getAdminUser();
-  },
   computed: {
     modalSetUp() {
       if (this.copyAssetMode) {
@@ -333,6 +343,9 @@ export default {
       return this.$t("Create Script");
     },
   },
+  mounted() {
+    this.getAdminUser();
+  },
   methods: {
     show() {
       this.$bvModal.show("createScript");
@@ -356,6 +369,7 @@ export default {
       this.retry_attempts = 0;
       this.retry_wait_time = 5;
       this.addError = {};
+      this.close();
     },
     close() {
       this.$bvModal.hide("createScript");
diff --git a/resources/js/processes/scripts/components/LanguageScript.vue b/resources/js/processes/scripts/components/LanguageScript.vue
index 1217706307..a81de50ec9 100644
--- a/resources/js/processes/scripts/components/LanguageScript.vue
+++ b/resources/js/processes/scripts/components/LanguageScript.vue
@@ -3,32 +3,50 @@
     <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)"
+    <div class="content-lang">
+      <template
+        v-for="(lang, index) in languages"
       >
-        <b-card-text>
-          <img
-            :src="getImage(lang)"
-            :alt="lang"
-          >
-          <span class="text-uppercase ml-2">
-            {{ lang }}
-          </span>
-        </b-card-text>
-      </b-card>
+        <b-card
+          :key="index"
+          :ref="`${lang}`"
+          class="mt-2"
+          @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>
+      </template>
+      <span
+        v-if="showError !== ''"
+        class="d-block invalid-feedback"
+      >
+        {{ invalid_feedback }}
+      </span>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["languages", "select"],
+  props: ["languages", "select", "invalid_feedback"],
+  data() {
+    return {
+      showError: false,
+    };
+  },
+  watch: {
+    invalid_feedback(newVal) {
+      this.showError = newVal === "";
+    },
+  },
   methods: {
     /**
      * Check the language selected and emit to modal
@@ -63,8 +81,6 @@ export default {
   }
   .card-lang {
     cursor: pointer;
-    width: 90%;
-    margin-left: 5%;
   }
   .container-lang {
     background-color: #F6F9FB;
@@ -74,4 +90,8 @@ export default {
   .choose-lang {
     color: #6A7888;
   }
+  .content-lang {
+    width: 90%;
+    margin-left: 5%;
+  }
 </style>