Resolve "workflow selection UI"

Closes #71 (closed)

client-nuxt/components/RunAnalysisForm.vue

 <template>
-  <div v-if="workflowId">
+  <v-card flat color="transparent">
     <error-alert v-if="error" :error-message="error"></error-alert>
+    <v-card-text>
+      <ValidationObserver ref="observer" v-slot="{ invalid }">
+        <v-stepper v-model="step" vertical flat color="transparent">
+          <ValidationProvider
+            v-slot="{ errors }"
+            name="experiment"
+            rules="requiredExperiment"
+          >
+            <v-stepper-step
+              :complete="step > 1"
+              step="1"
+              editable
+              :rules="[() => errors.length < 1]"
+            >
+              Select an experiment
+              <small>{{ errors[0] }}</small>
+            </v-stepper-step>
+            <v-stepper-content step="1">
+              <v-card flat color="transparent">
+                <v-card-text>
+                  <v-data-table
+                    v-model="analysis.experiments"
+                    :headers="headers"
+                    :items="experiments"
+                    :single-select="singleSelect"
+                    item-key="id"
+                    show-select
+                    class="elevation-1"
+                  >
+                  </v-data-table>
+                  <span>{{ errors[0] }}</span>
+                </v-card-text>
+                <v-card-actions>
+                  <v-btn
+                    v-if="analysis.experiments && analysis.experiments.length"
+                    color="primary"
+                    @click="step = 2"
+                    >Continue</v-btn
+                  >
+                </v-card-actions>
+              </v-card>
+            </v-stepper-content>
+          </ValidationProvider>
+          <template v-if="workflows">
+            <v-stepper-step :complete="step > 2" step="2" editable>
+              Select a workflow
+            </v-stepper-step>
+            <v-stepper-content step="2">
+              <v-card flat color="transparent">
+                <workflow-item-groups
+                  v-model="workflow"
+                  :workflows="detailedWorkflows"
+                  @selection="getWorkflowParameters"
+                ></workflow-item-groups>
+                <v-card-actions>
+                  <v-btn v-if="workflow" color="primary" @click="step = 3"
+                    >Continue</v-btn
+                  ></v-card-actions
+                >
+              </v-card>
+            </v-stepper-content>
+          </template>
+          <v-stepper-step :step="lastWorkflowStep"
+            >Set workflow parameters</v-stepper-step
+          >
+          <v-stepper-content :step="lastWorkflowStep"
+            ><v-form v-model="valid" @submit.prevent="submit">
+              <v-card flat color="transparent">
+                <v-card-text>
+                  <ValidationProvider
+                    v-slot="{ errors }"
+                    name="Name"
+                    rules="required|max:50"
+                  >
+                    <v-text-field
+                      v-model="analysis.name"
+                      :counter="50"
+                      :error-messages="errors"
+                      label="Analyis Name"
+                      hint="Set the analysis name"
+                      persistent-hint
+                      outlined
+                      required
+                    ></v-text-field>
+                  </ValidationProvider>
+                </v-card-text>
+                <!-- <v-card-title>Set workflow parameters</v-card-title> -->
+                <v-card-text>
+                  <v-expansion-panels focusable>
+                    <v-expansion-panel
+                      v-for="param in toolsInputs"
+                      :key="param.stepId"
+                    >
+                      <v-expansion-panel-header color=""
+                        >{{ param.name }}
+                      </v-expansion-panel-header>
 
-    <ValidationObserver ref="observer" v-slot="{ invalid }">
-      <v-form v-model="valid" @submit.prevent="submit">
-        <ValidationProvider
-          v-slot="{ errors }"
-          name="Name"
-          rules="required|max:50"
-        >
-          <v-text-field
-            v-model="analysis.name"
-            :counter="50"
-            :error-messages="errors"
-            label="Name"
-            required
-          ></v-text-field>
-        </ValidationProvider>
-
-        <v-data-table
-          v-model="analysis.experiments"
-          :headers="headers"
-          :items="experiments"
-          :single-select="singleSelect"
-          item-key="id"
-          show-select
-          class="elevation-1"
-        >
-        </v-data-table>
-
-        <v-expansion-panels focusable>
-          <v-expansion-panel v-for="param in toolsInputs" :key="param.stepId">
-            <v-expansion-panel-header>{{
-              param.name
-            }}</v-expansion-panel-header>
-            <v-expansion-panel-content v-if="workflowParameters">
-              <div v-for="input in param.inputs" :key="input.name" class="mt-5">
-                <select-tool-parameter
-                  v-if="
-                    input.model_class == 'SelectToolParameter' &&
-                    workflowParameters[param.stepId][input.name]
-                  "
-                  v-model="workflowParameters[param.stepId][input.name]"
-                  :input="input"
-                />
-                <integer-tool-parameter
-                  v-if="
-                    input.model_class == 'IntegerToolParameter' &&
-                    workflowParameters[param.stepId][input.name]
-                  "
-                  v-model="workflowParameters[param.stepId][input.name]"
-                  :input="input"
-                />
-              </div>
-            </v-expansion-panel-content>
-          </v-expansion-panel>
-        </v-expansion-panels>
-
-        <v-btn type="submit" color="primary" class="mt-4" :disabled="invalid"
-          >Run</v-btn
-        >
-      </v-form>
-    </ValidationObserver>
+                      <v-expansion-panel-content v-if="workflowParameters">
+                        <div
+                          v-for="input in param.inputs"
+                          :key="input.name"
+                          class="mt-5"
+                        >
+                          <select-tool-parameter
+                            v-if="
+                              input.model_class == 'SelectToolParameter' &&
+                              workflowParameters[param.stepId][input.name]
+                            "
+                            v-model="
+                              workflowParameters[param.stepId][input.name]
+                            "
+                            :input="input"
+                          />
+                          <integer-tool-parameter
+                            v-if="
+                              input.model_class == 'IntegerToolParameter' &&
+                              workflowParameters[param.stepId][input.name]
+                            "
+                            v-model="
+                              workflowParameters[param.stepId][input.name]
+                            "
+                            :input="input"
+                          />
+                        </div>
+                      </v-expansion-panel-content>
+                    </v-expansion-panel>
+                  </v-expansion-panels>
+                </v-card-text>
+                <v-card-actions>
+                  <v-btn
+                    type="submit"
+                    color="primary"
+                    class="mt-4"
+                    :disabled="invalid"
+                    >Run</v-btn
+                  >
+                </v-card-actions>
+              </v-card>
+            </v-form></v-stepper-content
+          >
+        </v-stepper>
+      </ValidationObserver>
+    </v-card-text>
     <ProgressBar :waiting="waiting" message="Starting Analysis" />
-  </div>
+  </v-card>
 </template>
 
 <script>
@@ -75,7 +157,7 @@ import {
   setInteractionMode,
 } from 'vee-validate'
 import ProgressBar from '@/components/ProgressBar'
-
+import WorkflowItemGroups from '@/components/WorkflowItemGroups'
 import ErrorAlert from '@/components/ErrorAlert'
 import SelectToolParameter from '~/components/GalaxyForm/SelectToolParameter.vue'
 import IntegerToolParameter from '~/components/GalaxyForm/IntegerToolParameter.vue'
@@ -85,7 +167,10 @@ extend('required', {
   ...required,
   message: '{_field_} can not be empty',
 })
-
+extend('requiredExperiment', {
+  ...required,
+  message: 'You must select one {_field_}',
+})
 extend('max', {
   ...max,
   message: '{_field_} may not be greater than {length} characters',
@@ -98,19 +183,24 @@ export default {
     ValidationObserver,
     ErrorAlert,
     ProgressBar,
+    WorkflowItemGroups,
   },
   props: {
     projectId: { type: Number, required: true },
     experiments: { type: Array, required: true },
-    workflowId: { type: String, required: true },
-    workflowParameters: { type: Object, default: () => null },
+    workflows: { type: Array, default: () => null },
+    preselectedWorkflowId: { type: String, default: null },
+    preselectedWorkflowParameters: { type: Object, default: () => null },
     analysis: {
       type: Object,
       default: () => ({ name: '', galaxy_history_id: '', experiments: [] }),
     },
+    // toolsInputs: { type: Array, default: () => [] },
   },
   data() {
     return {
+      step: 1,
+      workflow: null,
       error: null,
       waiting: false,
       valid: false,
@@ -121,6 +211,7 @@ export default {
       ],
       singleSelect: true,
       workflowTools: null,
+      workflowParameters: null,
     }
   },
   computed: {
@@ -141,28 +232,70 @@ export default {
             .filter((tool) => tool.inputs.length > 0)
         : []
     },
-    // toolsInputsFiltred() {
-    //   return this.toolsInputs
-    //     .map((tool) => {
-    //       tool.inputs = tool.inputs.filter(
-    //         (input) => input.model_class !== 'DataToolParameter'
-    //       )
-    //       return tool
-    //     })
-    //     .filter((tool) => tool.inputs.length > 0)
-    // },
+    workflowId() {
+      if (this.workflow) {
+        return this.workflow.id
+      }
+      if (this.preselectedWorkflowId) {
+        return this.preselectedWorkflowId
+      }
+      return null
+    },
+    detailedWorkflows() {
+      return this.workflows
+        ? this.workflows.map((w) => w.details)
+        : this.workflows
+    },
+    lastWorkflowStep() {
+      return this.workflows ? 3 : 2
+    },
   },
-  async mounted() {
-    try {
-      this.workflowTools = await this.$axios.$get(
-        `/api/workflow-tools/${this.workflowId}/`
-      )
-    } catch (error) {}
+  mounted() {
+    if (this.workflowId) {
+      this.getWorkflowTools()
+    }
+    if (this.preselectedWorkflowParameters) {
+      this.workflowParameters = this.preselectedWorkflowParameters
+    }
   },
+  // updated() {
+  //   console.log('UPDATED hook in RunanalysisFrom')
+  //   this.getWorkflowTools()
+  // },
   methods: {
     isSelect(modelClass) {
       return modelClass === 'SelectToolParameter'
     },
+    async getWorkflowTools() {
+      try {
+        this.workflowTools = await this.$axios.$get(
+          `/api/workflow-tools/${this.workflowId}/`
+        )
+      } catch (error) {
+        this.error = error
+        this.workflowTools = null
+      }
+    },
+    async getWorkflowParameters() {
+      try {
+        const wfParams = await this.$axios.$get(
+          `/api/workflow-default-parameters/${this.workflowId}/`
+        )
+        this.workflowParameters = Object.keys(wfParams).reduce(
+          (acc, stepId) => {
+            if (Object.keys(wfParams[stepId]).length > 0) {
+              acc[stepId] = { ...wfParams[stepId] }
+            }
+            return acc
+          },
+          {}
+        )
+        this.getWorkflowTools()
+      } catch (error) {
+        this.error = error
+        this.workflowParameters = null
+      }
+    },
     async submit() {
       try {
         this.waiting = true