From 8ca4f2f7789b138c514c943b6727bc0a83234651 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 15 Nov 2023 15:05:50 +0000
Subject: [PATCH] FOUR-11498:Initial script Modal

---
 .../scripts/components/CreateScriptModal.vue  | 339 +++++++++---------
 1 file changed, 174 insertions(+), 165 deletions(-)

diff --git a/resources/js/processes/scripts/components/CreateScriptModal.vue b/resources/js/processes/scripts/components/CreateScriptModal.vue
index 10dc5ec963..64869941b7 100644
--- a/resources/js/processes/scripts/components/CreateScriptModal.vue
+++ b/resources/js/processes/scripts/components/CreateScriptModal.vue
@@ -11,176 +11,185 @@
     </b-button>
     <modal
       id="createScript"
+      size="xl"
+      scrollable
       :ok-disabled="disabled"
       :title="modalSetUp"
       @hidden="onClose"
       @ok.prevent="onSubmit"
     >
-      <template v-if="countCategories">
-        <required />
-        <b-form-group
-          :description="
-            formDescription(
-              'The script name must be unique.',
-              'title',
-              addError
-            )
-          "
-          :invalid-feedback="errorMessage('title', addError)"
-          :label="$t('Name')"
-          :state="errorState('title', addError)"
-          required
-        >
-          <b-form-input
-            v-model="title"
-            :state="errorState('title', addError)"
-            autocomplete="off"
-            autofocus
-            name="title"
-            required
-          />
-        </b-form-group>
-        <b-form-group
-          :invalid-feedback="errorMessage('description', addError)"
-          :label="$t('Description')"
-          :state="errorState('description', addError)"
-          required
-        >
-          <b-form-textarea
-            v-model="description"
-            :state="errorState('description', addError)"
-            autocomplete="off"
-            name="description"
-            required
-            rows="2"
-          />
-        </b-form-group>
-        <category-select
-          v-show="!projectAsset"
-          v-model="script_category_id"
-          :errors="addError.script_category_id"
-          :label="$t('Category')"
-          api-get="script_categories"
-          api-list="script_categories"
-          name="script_category_id"
-        />
-        <project-select
-          v-if="isProjectsInstalled"
-          v-model="projects"
-          :errors="addError.projects"
-          :label="$t('Project')"
-          :required="isProjectSelectionRequired"
-          api-get="projects"
-          api-list="projects"
-          name="project"
-          :project-id="projectId"
-        />
-        <b-form-group
-          :invalid-feedback="errorMessage('script_executor_id', addError)"
-          :label="$t('Language')"
-          :state="errorState('script_executor_id', addError)"
-          :disabled="copyAssetMode"
-          required
-        >
-          <b-form-select
-            v-model="script_executor_id"
-            :options="scriptExecutors"
-            :state="errorState('script_executor_id', addError)"
-            :disabled="copyAssetMode"
-            name="script_executor_id"
-            required
-          />
-        </b-form-group>
-        <b-form-group
-          :description="
-            formDescription(
-              'Select a user to set the API access of the Script',
-              'run_as_user_id',
-              addError
-            )
-          "
-          :invalid-feedback="errorMessage('run_as_user_id', addError)"
-          :label="$t('Run script as')"
-          :state="errorState('run_as_user_id', addError)"
-          required
-        >
-          <select-user
-            v-model="selectedUser"
-            :class="{
-              'is-invalid': errorState('run_as_user_id', addError) == false,
-            }"
-            :multiple="false"
-            name="run_as_user_id"
-          />
-        </b-form-group>
-        <slider-with-input
-          :description="
-            $t(
-              'How many seconds the script should be allowed to run (0 is unlimited).'
-            )
-          "
-          :error="
-            errorState('timeout', addError)
-              ? null
-              : errorMessage('timeout', addError)
-          "
-          :label="$t('Timeout')"
-          :max="300"
-          :min="0"
-          :value="timeout"
-          @input="timeout = $event"
-        />
-        <slider-with-input
-          :description="
-            $t(
-              'Number of times to retry. Leave empty to use script default. Set to 0 for no retry attempts.'
-            )
-          "
-          :error="
-            errorState('retry_attempts', addError)
-              ? null
-              : errorMessage('retry_attempts', addError)
-          "
-          :label="$t('Retry Attempts')"
-          :max="10"
-          :min="0"
-          :value="retry_attempts"
-          @input="retry_attempts = $event"
-        />
-        <slider-with-input
-          :description="
-            $t(
-              'Seconds to wait before retrying. Leave empty to use script default. Set to 0 for no retry wait time.'
-            )
-          "
-          :error="
-            errorState('retry_wait_time', addError)
-              ? null
-              : errorMessage('retry_wait_time', addError)
-          "
-          :label="$t('Retry Wait Time')"
-          :max="3600"
-          :min="0"
-          :value="retry_wait_time"
-          @input="retry_wait_time = $event"
-        />
-        <component
-          :is="cmp"
-          v-for="(cmp, index) in createScriptHooks"
-          :key="`create-script-hook-${index}`"
-          ref="createScriptHooks"
-          :script="script"
-        />
-      </template>
-      <template v-else>
-        <div>{{ $t("Categories are required to create a script") }}</div>
-        <a
-          class="btn btn-primary container mt-2"
-          href="/designer/scripts/categories"
-        >
-          {{ $t("Add Category") }}
-        </a>
-      </template>
+      <b-row>
+        <b-col cols="4">
+          <!-- TODO -->
+        </b-col>
+        <b-col cols="8">
+          <template v-if="countCategories">
+            <required />
+            <b-form-group
+              :description="
+                formDescription(
+                  'The script name must be unique.',
+                  'title',
+                  addError
+                )
+              "
+              :invalid-feedback="errorMessage('title', addError)"
+              :label="$t('Name')"
+              :state="errorState('title', addError)"
+              required
+            >
+              <b-form-input
+                v-model="title"
+                :state="errorState('title', addError)"
+                autocomplete="off"
+                autofocus
+                name="title"
+                required
+              />
+            </b-form-group>
+            <b-form-group
+              :invalid-feedback="errorMessage('description', addError)"
+              :label="$t('Description')"
+              :state="errorState('description', addError)"
+              required
+            >
+              <b-form-textarea
+                v-model="description"
+                :state="errorState('description', addError)"
+                autocomplete="off"
+                name="description"
+                required
+                rows="2"
+              />
+            </b-form-group>
+            <category-select
+              v-show="!projectAsset"
+              v-model="script_category_id"
+              :errors="addError.script_category_id"
+              :label="$t('Category')"
+              api-get="script_categories"
+              api-list="script_categories"
+              name="script_category_id"
+            />
+            <project-select
+              v-if="isProjectsInstalled"
+              v-model="projects"
+              :errors="addError.projects"
+              :label="$t('Project')"
+              :required="isProjectSelectionRequired"
+              api-get="projects"
+              api-list="projects"
+              name="project"
+              :project-id="projectId"
+            />
+            <b-form-group
+              :invalid-feedback="errorMessage('script_executor_id', addError)"
+              :label="$t('Language')"
+              :state="errorState('script_executor_id', addError)"
+              :disabled="copyAssetMode"
+              required
+            >
+              <b-form-select
+                v-model="script_executor_id"
+                :options="scriptExecutors"
+                :state="errorState('script_executor_id', addError)"
+                :disabled="copyAssetMode"
+                name="script_executor_id"
+                required
+              />
+            </b-form-group>
+            <b-form-group
+              :description="
+                formDescription(
+                  'Select a user to set the API access of the Script',
+                  'run_as_user_id',
+                  addError
+                )
+              "
+              :invalid-feedback="errorMessage('run_as_user_id', addError)"
+              :label="$t('Run script as')"
+              :state="errorState('run_as_user_id', addError)"
+              required
+            >
+              <select-user
+                v-model="selectedUser"
+                :class="{
+                  'is-invalid': errorState('run_as_user_id', addError) == false,
+                }"
+                :multiple="false"
+                name="run_as_user_id"
+              />
+            </b-form-group>
+            <slider-with-input
+              :description="
+                $t(
+                  'How many seconds the script should be allowed to run (0 is unlimited).'
+                )
+              "
+              :error="
+                errorState('timeout', addError)
+                  ? null
+                  : errorMessage('timeout', addError)
+              "
+              :label="$t('Timeout')"
+              :max="300"
+              :min="0"
+              :value="timeout"
+              @input="timeout = $event"
+            />
+            <slider-with-input
+              :description="
+                $t(
+                  'Number of times to retry. Leave empty to use script default. Set to 0 for no retry attempts.'
+                )
+              "
+              :error="
+                errorState('retry_attempts', addError)
+                  ? null
+                  : errorMessage('retry_attempts', addError)
+              "
+              :label="$t('Retry Attempts')"
+              :max="10"
+              :min="0"
+              :value="retry_attempts"
+              @input="retry_attempts = $event"
+            />
+            <slider-with-input
+              :description="
+                $t(
+                  'Seconds to wait before retrying. Leave empty to use script default. Set to 0 for no retry wait time.'
+                )
+              "
+              :error="
+                errorState('retry_wait_time', addError)
+                  ? null
+                  : errorMessage('retry_wait_time', addError)
+              "
+              :label="$t('Retry Wait Time')"
+              :max="3600"
+              :min="0"
+              :value="retry_wait_time"
+              @input="retry_wait_time = $event"
+            />
+            <component
+              :is="cmp"
+              v-for="(cmp, index) in createScriptHooks"
+              :key="`create-script-hook-${index}`"
+              ref="createScriptHooks"
+              :script="script"
+            />
+          </template>
+          <template v-else>
+            <div>{{ $t("Categories are required to create a script") }}</div>
+            <a
+              class="btn btn-primary container mt-2"
+              href="/designer/scripts/categories"
+            >
+              {{ $t("Add Category") }}
+            </a>
+          </template>
+        </b-col>
+      </b-row>
     </modal>
   </div>
 </template>