Add collapse/expand buttons to steps [SCI-6887]

This commit is contained in:
Anton 2022-06-09 16:15:06 +02:00
parent ada26d8036
commit d62f712166
2 changed files with 18 additions and 4 deletions

View file

@ -59,7 +59,15 @@
<span class="fas fa-plus" aria-hidden="true"></span> <span class="fas fa-plus" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.steps.new_step") }}</span> <span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a> </a>
<a v-if="urls.reorder_steps_url" class="btn btn-default" data-toggle="modal" @click="startStepReorder"> <button class="btn btn-light" @click="collapseSteps">
<span class="fas fa-caret-up"></span>
{{ i18n.t("protocols.steps.collapse_label") }}
</button>
<button class="btn btn-light" @click="expandSteps">
<span class="fas fa-caret-down"></span>
{{ i18n.t("protocols.steps.expand_label") }}
</button>
<a v-if="urls.reorder_steps_url" class="btn btn-light" data-toggle="modal" @click="startStepReorder">
<span class="fas fa-arrows-alt-v" aria-hidden="true"></span> <span class="fas fa-arrows-alt-v" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.reorder_steps.button") }}</span> <span>{{ i18n.t("protocols.reorder_steps.button") }}</span>
</a> </a>
@ -144,6 +152,12 @@
}); });
}, },
methods: { methods: {
collapseSteps() {
$('.step-container .collapse').collapse('hide')
},
expandSteps() {
$('.step-container .collapse').collapse('show')
},
refreshProtocolStatus() { refreshProtocolStatus() {
if (this.inRepository) return if (this.inRepository) return
// legacy method from app/assets/javascripts/my_modules/protocols.js // legacy method from app/assets/javascripts/my_modules/protocols.js

View file

@ -16,9 +16,9 @@
<i class="fas fa-grip-vertical"></i> <i class="fas fa-grip-vertical"></i>
</div> </div>
<a class="step-collapse-link" <a class="step-collapse-link"
:href="'#stepBody' + step.id" :href="'#stepBody' + step.id"
data-toggle="collapse" data-toggle="collapse"
data-remote="true"> data-remote="true">
<span class="fas fa-caret-right"></span> <span class="fas fa-caret-right"></span>
</a> </a>
<div v-if="!inRepository" class="step-complete-container"> <div v-if="!inRepository" class="step-complete-container">