mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
ListWorkflow: styles for list (like in twig)
This commit is contained in:
parent
d88207132b
commit
84a76d2c76
@ -474,6 +474,7 @@ div.workflow {
|
||||
// Override bootstrap popover styles
|
||||
div.popover {
|
||||
box-shadow: 0 0 10px -5px $dark;
|
||||
z-index: 9999;
|
||||
.popover-arrow {}
|
||||
.popover-header {}
|
||||
.popover-body {}
|
||||
|
||||
@ -7,7 +7,6 @@ const i18n = _createI18n({});
|
||||
// list workflow
|
||||
document.querySelectorAll('[data-list-workflows]')
|
||||
.forEach(function (el) {
|
||||
console.log('allowCreate', el.dataset.allowCreate);
|
||||
const app = {
|
||||
components: {
|
||||
ListWorkflowModalVue,
|
||||
|
||||
@ -1,37 +1,86 @@
|
||||
<template>
|
||||
<div class="list-group my-2 workflow workflow-box">
|
||||
<div class="list-group-item">
|
||||
<h4>Workflow associés</h4>
|
||||
<div class="flex-table workflow" id="workflow-list">
|
||||
<div v-for="(w, i) in workflows" :key="`workflow-${i}`"
|
||||
class="item-bloc">
|
||||
|
||||
<div>
|
||||
<div class="item-row col">
|
||||
<h2>Workflow</h2>
|
||||
<div class="flex-grow-1 ms-3 h3">
|
||||
<div>
|
||||
{{ w.relatedEntityClass }}
|
||||
{{ w.relatedEntityId }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="breadcrumb">
|
||||
<template v-for="(step, j) in w.steps">
|
||||
<span class="mx-2"
|
||||
:key="`step-${j}`"
|
||||
tabindex="0"
|
||||
data-bs-trigger="focus hover"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-custom-class="workflow-transition"
|
||||
:title="getPopTitle(step)"
|
||||
:data-bs-content="getPopContent(step)">
|
||||
|
||||
<i v-if="step.currentStep.text === 'initial'"
|
||||
class="fa fa-circle me-1 text-chill-yellow">
|
||||
</i>
|
||||
<i v-if="step.isFreezed"
|
||||
class="fa fa-snowflake-o fa-sm me-1">
|
||||
</i>
|
||||
{{ step.currentStep.text }}
|
||||
</span>
|
||||
<span v-if="j !== Object.keys(w.steps).length - 1">
|
||||
→
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Etape actuelle: {{ w.currentStep.currentStep.text }}
|
||||
<ul>
|
||||
<li v-for="w in w.steps">
|
||||
Etape: {{ w.currentStep.text }},
|
||||
<span v-if="w.transitionPrevious != null">
|
||||
transition pour arriver à cette étape : {{ w.transitionPrevious.text }},
|
||||
par: {{ w.transitionPreviousBy.text }}, le {{ w.transitionPreviousAt.datetime }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
-->
|
||||
|
||||
<div class="item-row">
|
||||
<div class="item-col flex-grow-1">
|
||||
<p v-if="isUserSubscribedToStep(w)">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('you_subscribed_to_all_steps') }}
|
||||
</p>
|
||||
<p v-if="isUserSubscribedToFinal(w)">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('you_subscribed_to_final_step') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="$t('action.show')"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item" v-for="w in workflows">
|
||||
{{ w.id }}
|
||||
|
||||
Etape actuelle: {{ w.currentStep.currentStep.text }}
|
||||
|
||||
<ul>
|
||||
<li v-for="w in w.steps">
|
||||
Etape: {{ w.currentStep.text }},
|
||||
<span v-if="w.transitionPrevious != null">
|
||||
transition pour arriver à cette étape : {{ w.transitionPrevious.text }},
|
||||
par: {{ w.transitionPreviousBy.text }}, le {{ w.transitionPreviousAt.datetime }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="btn btn-sm btn-outline-primary"
|
||||
title="voir"
|
||||
:href="goToUrl(w)">
|
||||
<i class="fa fa-eye fa-fw"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popover from 'bootstrap/js/src/popover';
|
||||
|
||||
export default {
|
||||
name: "ListWorkflow",
|
||||
props: {
|
||||
@ -43,6 +92,39 @@ export default {
|
||||
methods: {
|
||||
goToUrl(w) {
|
||||
return `/fr/main/workflow/${w.id}/show`;
|
||||
},
|
||||
getPopTitle(w) {
|
||||
// todo
|
||||
return 'title'
|
||||
},
|
||||
getPopContent(w) {
|
||||
// todo
|
||||
return 'content'
|
||||
},
|
||||
isUserSubscribedToStep(w) {
|
||||
// todo
|
||||
return false;
|
||||
},
|
||||
isUserSubscribedToFinal(w) {
|
||||
// todo
|
||||
return false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const triggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||
const popoverList = triggerList.map(function (el) {
|
||||
console.log('popover', el)
|
||||
return new Popover(el, {
|
||||
html: true,
|
||||
});
|
||||
});
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
you_subscribed_to_all_steps: "Vous recevrez une notification à chaque étape",
|
||||
you_subscribed_to_final_step: "Vous recevrez une notification à l'étape finale",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
Liste des workflows
|
||||
<h2 class="modal-title">{{ $t('workflow_list') }}</h2>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
@ -94,8 +94,12 @@ export default {
|
||||
this.modal.showModal = true;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log('allowCreate', this.allowCreate);
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
workflow_list: "Liste des workflows",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user