WorkflowInvocation.vue

<template>
  <v-card flat>
    <v-expansion-panels focusable multiple>
      <v-expansion-panel v-for="step in steps" :key="step.step_id">
        <v-expansion-panel-header disable-icon-rotate>
          <v-row no-gutters>
            <v-col>
              {{ step.step_id }}. {{ step.tool.name }}
              <span class="text-caption text--secondary ml-2"
                ><v-chip small>{{ step.tool.version }}</v-chip></span
              >
            </v-col>
            <v-col>{{ step.tool.description }}</v-col>
          </v-row>
          <template v-slot:actions>
            <analysis-state :state="step.job.state"></analysis-state>
          </template>
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <v-template v-if="Object.keys(step.job.params).length > 0">
            <v-list-item
              v-for="k in Object.keys(step.job.params)"
              :key="k"
              dense
            >
              <template #default>
                <v-list-item-content>
                  <v-list-item-subtitle>
                    <v-badge
                      color="secondary"
                      inline
                      :content="step.job.params[k]"
                      >{{ k }} :
                    </v-badge>
                  </v-list-item-subtitle>
                </v-list-item-content></template
              >
            </v-list-item>
          </v-template>
          <v-card v-else flat>
            <v-card-text>
              <v-alert text type="info">
                No parameter to set
              </v-alert></v-card-text
            ></v-card
          >
        </v-expansion-panel-content></v-expansion-panel
      >
    </v-expansion-panels>
  </v-card>
</template>
<script>
import AnalysisState from '@/components/AnalysisState'

export default {
  components: {
    AnalysisState,
  },
  props: { steps: { type: Array, default: () => [] } },
  methods: {
    getCols() {
      if (this.$vuetify.breakpoint.xlOnly) {
        return false
      } else if (this.$vuetify.breakpoint.smAndDown) {
        return 12
      } else {
        return 4
      }
    },
  },
}
</script>