From aec0bb8f2ded21d41db551acc5dd9234646f25bf Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Mon, 4 Jul 2022 13:41:06 +0200
Subject: [PATCH] feat(ui): add some missing input type

close #610
---
 ui/src/components/flows/FlowRun.vue | 66 +++++++++++++++++++++++++++--
 ui/src/styles/layout/bootstrap.scss |  8 ++++
 ui/src/utils/submitTask.js          |  8 ++++
 3 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/flows/FlowRun.vue b/ui/src/components/flows/FlowRun.vue
index 1bafe59ecc..2f3ac02f2d 100644
--- a/ui/src/components/flows/FlowRun.vue
+++ b/ui/src/components/flows/FlowRun.vue
@@ -18,6 +18,7 @@
                     type="text"
                     :required="input.required"
                     :placeholder="`${placeholder} ${input.name}`"
+                    :state="state(input)"
                 />
                 <b-form-input
                     v-if="input.type === 'INT'"
@@ -26,6 +27,7 @@
                     step="1"
                     :required="input.required"
                     :placeholder="`${placeholder} ${input.name}`"
+                    :state="state(input)"
                 />
                 <b-form-input
                     v-if="input.type === 'FLOAT'"
@@ -34,28 +36,69 @@
                     step="0.001"
                     :required="input.required"
                     :placeholder="`${placeholder} ${input.name}`"
+                    :state="state(input)"
+                />
+                <b-form-checkbox
+                    v-if="input.type === 'BOOLEAN'"
+                    v-model="input.value"
+                    type="checkbox"
+                    value="true"
+                    unchecked-value="false"
+                    :required="input.required"
+                    :state="state(input)"
                 />
                 <date-picker
                     v-if="input.type === 'DATETIME'"
                     v-model="input.value"
                     :required="input.required"
+                    :state="state(input)"
                     type="datetime"
-                    class="w-100"
-                    :placeholder="$t('select datetime')"
+                    :placeholder="`${placeholder} ${input.name}`"
+                />
+                <date-picker
+                    v-if="input.type === 'DATE'"
+                    v-model="input.value"
+                    :required="input.required"
+                    :state="state(input)"
+                    type="date"
+                    :placeholder="`${placeholder} ${input.name}`"
+                />
+                <date-picker
+                    v-if="input.type === 'TIME'"
+                    v-model="input.value"
+                    :required="input.required"
+                    :state="state(input)"
+                    type="time"
+                    :placeholder="`${placeholder} ${input.name}`"
+                />
+                <date-picker
+                    v-if="input.type === 'DURATION'"
+                    v-model="input.value"
+                    :required="input.required"
+                    :state="state(input)"
+                    type="time"
+                    :placeholder="`${placeholder} ${input.name}`"
                 />
                 <b-form-file
                     v-if="input.type === 'FILE'"
                     v-model="input.value"
                     :required="input.required"
-                    :state="Boolean(input.value)"
+                    :state="state(input)"
                     :placeholder="$t('choose file')"
                 />
+                <b-form-textarea
+                    v-if="input.type === 'JSON'"
+                    v-model="input.value"
+                    :required="input.required"
+                    :state="state(input)"
+                    :placeholder="`${placeholder} ${input.name}`"
+                />
                 <small v-if="input.description" class="form-text text-muted">{{ input.description }}</small>
             </b-form-group>
             <b-form-group class="text-right mb-0">
                 <b-button type="submit" variant="primary" :disabled="flow.disabled" v-b-tooltip.hover.top="'(Ctrl + Enter)'">
                     {{ $t('launch execution') }}
-                    <trigger title />
+                    <trigger title="" />
                 </b-button>
             </b-form-group>
         </b-form>
@@ -97,7 +140,22 @@
             onSubmit() {
                 executeTask(this, this.flow, {redirect: this.redirect, id: this.flow.id, namespace: this.flow.namespace})
                 this.$emit("onExecutionTrigger")
+            },
+
+            state(input) {
+                const required = input.required === undefined ? true : input.required;
+
+                if (!required && input.value === undefined) {
+                    return null;
+                }
+
+                if (required && input.value === undefined) {
+                    return false;
+                }
+
+                return true;
             }
+
         }
     };
 </script>
diff --git a/ui/src/styles/layout/bootstrap.scss b/ui/src/styles/layout/bootstrap.scss
index 22ebc36fff..d4ecf2b90f 100644
--- a/ui/src/styles/layout/bootstrap.scss
+++ b/ui/src/styles/layout/bootstrap.scss
@@ -448,6 +448,14 @@ select {
     }
 }
 
+form {
+    .form-group {
+        .custom-checkbox {
+            top: 8px;
+        }
+    }
+}
+
 .custom-file-label {
     font-size: $input-font-size;
     color: $input-placeholder-color;
diff --git a/ui/src/utils/submitTask.js b/ui/src/utils/submitTask.js
index 036d30e8a1..c20a84d7fc 100644
--- a/ui/src/utils/submitTask.js
+++ b/ui/src/utils/submitTask.js
@@ -1,9 +1,17 @@
+import Vue from "vue";
+
 export const executeTask = (submitor, flow, options) => {
     const formData = new FormData();
     for (let input of flow.inputs || []) {
         if (input.value !== undefined) {
             if (input.type === "DATETIME") {
                 formData.append(input.name, input.value.toISOString());
+            } else if (input.type === "DATE") {
+                formData.append(input.name, Vue.moment(input.value).format("YYYY-MM-DD"));
+            } else if (input.type === "TIME") {
+                formData.append(input.name, Vue.moment(input.value).format("hh:mm:ss"));
+            } else if (input.type === "DURATION") {
+                formData.append(input.name, Vue.moment.duration(Vue.moment(input.value).format("hh:mm:ss")));
             } else if (input.type === "FILE") {
                 formData.append("files", input.value, input.name);
             } else {