Add field errors on process start settings

vue/Process/Configure.vue

@@ -72,7 +72,7 @@
                   <div class="control">
                     <input
                       class="input has-text-weight-semibold"
-                      :class="{ 'is-danger': chunksError }"
+                      :class="{ 'is-danger': fieldErrors.chunks }"
                       type="number"
                       value="1"
                       min="1"
@@ -81,14 +81,14 @@
                       v-model="chunks"
                     />
                   </div>
-                  <p v-if="chunksError" class="help is-danger">{{ chunksError }}</p>
+                  <p v-if="fieldErrors.chunks" :key="err" class="help is-danger">{{ fieldErrors.chunks }}</p>
                 </div>
                 <div class="field" title="Select the Ponos agent farm for this workflow">
                   <label class="label">
                     Agents farm
                   </label>
                   <div class="control is-expanded">
-                    <div class="select is-fullwidth">
+                    <div class="select is-fullwidth" :class="{ 'is-danger': fieldErrors.farm }">
                       <select v-model="farmId">
                         <option value="">Use default farm</option>
                         <template v-if="farms">
@@ -103,6 +103,7 @@
                       </select>
                     </div>
                   </div>
+                  <p v-if="fieldErrors.farm" :key="err" class="help is-danger">{{ fieldErrors.farm }}</p>
                 </div>
                 <div
                   class="field"
@@ -112,6 +113,7 @@
                     Generate thumbnails
                     <input :disabled="hasWorkerRuns" type="checkbox" v-model="thumbnails" />
                   </label>
+                  <p v-if="fieldErrors.thumbnails" class="help is-danger">{{ fieldErrors.thumbnails }}</p>
                 </div>
                 <div
                   class="field"
@@ -121,6 +123,7 @@
                     Store workers activity
                     <input :disabled="!hasWorkerRuns" type="checkbox" v-model="workerActivity" />
                   </label>
+                  <p v-if="fieldErrors.worker_activity" class="help is-danger">{{ fieldErrors.worker_activity }}</p>
                 </div>
                 <div
                   class="field"
@@ -131,6 +134,7 @@
                     Cache optimisation
                     <input :disabled="!hasWorkerRuns" type="checkbox" v-model="useCache" />
                   </label>
+                  <p v-if="fieldErrors.use_cache" class="help is-danger">{{ fieldErrors.use_cache }}</p>
                 </div>
                 <div
                   class="field"
@@ -141,6 +145,7 @@
                     Use a GPU
                     <input :disabled="!hasWorkerRuns" type="checkbox" v-model="useGPU" />
                   </label>
+                  <p v-if="fieldErrors.use_gpu" class="help is-danger">{{ fieldErrors.use_gpu }}</p>
                 </div>
               </div>
             </div>
@@ -199,7 +204,7 @@ export default {
   data: () => ({
     selectionModal: false,
     chunks: 1,
-    chunksError: null,
+    fieldErrors: {},
     farmId: '',
     thumbnails: false,
     processLoading: false,
@@ -283,22 +288,31 @@ export default {
     async runProcess () {
       if (this.processStarting) return
       this.processStarting = true
-      this.chunksError = null
+      this.fieldErrors = {}
+
       const payload = { chunks: this.chunks }
       if (this.farmId) payload.farm = this.farmId
       if (this.thumbnails) payload.thumbnails = true
       if (this.useCache) payload.use_cache = true
       if (this.workerActivity && !this.thumbnails) payload.worker_activity = true
       if (this.useGPU) payload.use_gpu = true
+
       try {
         await this.$store.dispatch('process/startProcess', { processId: this.id, payload })
         this.$router.push({ name: 'process-status', params: { id: this.id } })
       } catch (e) {
-        if (e.response && e.response.status === 400 && e.response.data && e.response.data.chunks) {
-          this.chunksError = e.response.data.chunks.join(' ')
+        this.notify({ type: 'error', text: errorParser(e) })
+        if (e.response?.status === 400 && e.response.data) {
+          /*
+           * Try to parse the error message to display errors below fields.
+           * Some errors might be arrays of strings, so we join them together into a single string.
+           */
+          this.fieldErrors = Object.fromEntries(
+            Object
+              .entries(e.response.data)
+              .map(([key, value]) => [key, Array.isArray(value) ? value.join(' ') : value])
+          )
           this.advancedSettings = true
-        } else {
-          this.notify({ type: 'error', text: errorParser(e) })
         }
       } finally {
         this.processStarting = false