feat(ui): add some missing input type

close #610
kestra-io · Jul 4, 2022 · aec0bb8 · aec0bb8
1 parent f305477
commit aec0bb8
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 {