chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue

<template>
    <span v-if="hasNoResults(workflows)" class="chill-no-data-statement">{{ $t('no_data') }}</span>
    <tab-table v-else>
        <template v-slot:thead>
            <th scope="col">{{ $t('Object_workflow') }}</th>
            <th scope="col">{{ $t('Step') }}</th>
            <th scope="col">{{ $t('concerned_users') }}</th>
            <th scope="col"></th>
        </template>
        <template v-slot:tbody>
            <tr v-for="(w, i) in workflows.results" :key="`workflow-${i}`">
                <td>
                    {{ w.title }}
                </td>
                <td>
                    <div class="workflow">
                        <div class="breadcrumb">
                            <i class="fa fa-circle me-1 text-chill-yellow mx-2"></i>
                            <span class="mx-2">{{ getStep(w) }}</span>
                        </div>
                        <span v-if="w.isOnHoldAtCurrentStep" class="badge bg-success rounded-pill">{{ $t('on_hold') }}</span>
                    </div>
                </td>
                <td v-if="w.datas.persons !== null">
                    <span v-for="p in w.datas.persons" class="me-1" :key="p.id">
                        <on-the-fly
                            :type="p.type"
                            :id="p.id"
                            :buttonText="p.textAge"
                            :displayBadge="'true' === 'true'"
                            action="show">
                        </on-the-fly>
                    </span>
                </td>
                <td>
                <a class="btn btn-sm btn-show" :href="getUrl(w)">
                    {{ $t('show_entity', { entity: $t('the_workflow') }) }}
                </a>
                </td>
            </tr>
        </template>
    </tab-table>
</template>

<script>
import { mapGetters } from "vuex";
import TabTable from "./TabTable";
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';

export default {
    name: "MyWorkflows",
    components: {
        TabTable,
        OnTheFly
    },
    props: ['workflows'],
    computed: {
        ...mapGetters([
            'isWorkflowsLoaded',
        ]),
    },
    methods: {
        hasNoResults(workflows) {
            if (!this.isWorkflowsLoaded) {
                return false;
            } else {
                return workflows.count === 0;
            }
        },
        getUrl(w) {
            return `/fr/main/workflow/${w.id}/show`;
        },
        getStep(w) {
            const lastStep = w.steps.length - 1
            return w.steps[lastStep].currentStep.text;
        }
    },
}
</script>

<style scoped>
span.outdated {
    font-weight: bold;
    color: var(--bs-warning);
}
</style>