mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
91 lines
2.8 KiB
Vue
91 lines
2.8 KiB
Vue
<template>
|
|
|
|
<teleport to="#header-accompanying_course-name #banner-flags">
|
|
<toggle-flags></toggle-flags>
|
|
</teleport>
|
|
|
|
<teleport to="#header-accompanying_course-name #banner-status">
|
|
<span v-if="accompanyingCourse.step === 'DRAFT'"
|
|
class="text-md-end d-md-block">
|
|
<span class="badge bg-secondary">
|
|
{{ $t('course.step.draft') }}
|
|
</span>
|
|
</span>
|
|
<span v-else-if="accompanyingCourse.step === 'CONFIRMED'" class="text-md-end">
|
|
<span class="d-md-block mb-md-3">
|
|
<span class="badge bg-primary">
|
|
{{ $t('course.step.active') }}
|
|
</span>
|
|
</span>
|
|
<span class="d-md-block">
|
|
<span class="d-md-block ms-3 ms-md-0">
|
|
<i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
|
|
</span>
|
|
<span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
|
|
<span class="item-key">{{ $t('course.referrer') }}:</span> <b>{{ accompanyingCourse.user.text }}</b>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<span v-else class="text-md-end d-md-block">
|
|
<span class="badge bg-danger">
|
|
{{ $t('course.step.closed') }}
|
|
</span>
|
|
<span class="d-md-block">
|
|
<span class="d-md-block ms-3 ms-md-0">
|
|
<i>{{ $d(accompanyingCourse.openingDate.datetime, 'text') }} - {{ $d(accompanyingCourse.closingDate.datetime, 'text') }}</i>
|
|
</span>
|
|
<span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
|
|
<span class="item-key">{{ $t('course.referrer') }}:</span> <b>{{ accompanyingCourse.user.text }}</b>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</teleport>
|
|
|
|
<teleport to="#header-accompanying_course-details #banner-social-issues">
|
|
<social-issue
|
|
v-for="issue in accompanyingCourse.socialIssues"
|
|
v-bind:key="issue.id"
|
|
v-bind:issue="issue">
|
|
</social-issue>
|
|
</teleport>
|
|
|
|
<teleport to="#header-accompanying_course-details #banner-persons-associated">
|
|
<persons-associated :accompanyingCourse="accompanyingCourse"></persons-associated>
|
|
</teleport>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import ToggleFlags from './Banner/ToggleFlags';
|
|
import SocialIssue from './Banner/SocialIssue.vue';
|
|
import PersonsAssociated from './Banner/PersonsAssociated.vue';
|
|
|
|
export default {
|
|
name: 'Banner',
|
|
components: {
|
|
ToggleFlags,
|
|
SocialIssue,
|
|
PersonsAssociated
|
|
},
|
|
computed: {
|
|
accompanyingCourse() {
|
|
return this.$store.state.accompanyingCourse
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
div#banner-flags,
|
|
div#banner-status {
|
|
.badge {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
div#banner-status {
|
|
span.badge {
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
</style>
|