2022-04-21 21:12:34 +08:00
|
|
|
<template>
|
|
|
|
<div class="task-protocol">
|
|
|
|
<div class="task-section-header">
|
|
|
|
<a class="task-section-caret" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
|
|
|
|
<i class="fas fa-caret-right"></i>
|
|
|
|
<div class="task-section-title">
|
|
|
|
<h2>{{ i18n.t('Protocol') }}</h2>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
|
|
|
|
<div class="protocol-description">
|
|
|
|
<input type="text" class="inline" :model="protocol.name" :placeholder="i18n.t('my_modules.protocols.protocol_status_bar.enter_name')">
|
|
|
|
</div>
|
|
|
|
<div class="protocol-steps">
|
2022-04-22 19:07:51 +08:00
|
|
|
<template v-for="(step, index) in steps">
|
|
|
|
<div class="step-block" :key="step.id">
|
|
|
|
<button v-if="index > 0" class="btn btn-primary" @click="addStep(index)">
|
|
|
|
<i class="fas fa-plus"></i>
|
|
|
|
{{ i18n.t("protocols.steps.new_step") }}
|
|
|
|
</button>
|
|
|
|
<Step
|
|
|
|
:step.sync="steps[index]"
|
|
|
|
@step:delete="updateStepsPosition"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
2022-04-21 21:12:34 +08:00
|
|
|
</div>
|
2022-04-22 19:07:51 +08:00
|
|
|
<button class="btn btn-primary" @click="addStep(steps.length)">
|
|
|
|
<i class="fas fa-plus"></i>
|
|
|
|
{{ i18n.t("protocols.steps.new_step") }}
|
|
|
|
</button>
|
2022-04-21 21:12:34 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-04-22 19:07:51 +08:00
|
|
|
import Step from 'vue/protocol/step'
|
|
|
|
|
2022-04-21 21:12:34 +08:00
|
|
|
export default {
|
|
|
|
name: 'ProtocolContainer',
|
|
|
|
props: {
|
2022-04-22 19:07:51 +08:00
|
|
|
protocolUrl: {
|
|
|
|
type: String,
|
|
|
|
required: true
|
|
|
|
},
|
|
|
|
stepsUrl: {
|
|
|
|
type: String,
|
|
|
|
required: true
|
|
|
|
},
|
|
|
|
addStepUrl: {
|
|
|
|
type: String,
|
|
|
|
required: true
|
|
|
|
}
|
2022-04-21 21:12:34 +08:00
|
|
|
},
|
2022-04-22 19:07:51 +08:00
|
|
|
components: { Step },
|
2022-04-21 21:12:34 +08:00
|
|
|
data() {
|
|
|
|
return {
|
2022-04-22 19:07:51 +08:00
|
|
|
protocol: {},
|
|
|
|
steps: {}
|
2022-04-21 21:12:34 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
$.get(this.protocolUrl, (data) => {
|
|
|
|
this.protocol = data;
|
|
|
|
});
|
2022-04-22 19:07:51 +08:00
|
|
|
$.get(this.stepsUrl, (result) => {
|
|
|
|
this.steps = result.data
|
|
|
|
})
|
2022-04-21 21:12:34 +08:00
|
|
|
},
|
2022-04-22 19:07:51 +08:00
|
|
|
methods: {
|
|
|
|
addStep(position) {
|
|
|
|
$.post(this.addStepUrl, {position: position}, (result) => {
|
|
|
|
this.updateStepsPosition(result.data)
|
|
|
|
})
|
|
|
|
},
|
|
|
|
updateStepsPosition(step, action = 'add') {
|
|
|
|
let position = step.attributes.position;
|
|
|
|
if (action === 'delete') {
|
|
|
|
this.steps.splice(position, 1)
|
|
|
|
}
|
|
|
|
let unordered_steps = this.steps.map( s => {
|
|
|
|
if (s.attributes.position >= position) {
|
|
|
|
if (action === 'add') {
|
|
|
|
s.attributes.position += 1;
|
|
|
|
} else {
|
|
|
|
s.attributes.position -= 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return s;
|
|
|
|
})
|
|
|
|
if (action === 'add') {
|
|
|
|
unordered_steps.push(step);
|
|
|
|
}
|
|
|
|
this.reorderSteps(unordered_steps)
|
|
|
|
|
|
|
|
},
|
|
|
|
reorderSteps(steps) {
|
|
|
|
this.steps = steps.sort((a, b) => a.attributes.position - b.attributes.position);
|
|
|
|
}
|
|
|
|
}
|
2022-04-21 21:12:34 +08:00
|
|
|
}
|
|
|
|
</script>
|