chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

<template>
    <banner />
    <sticky-nav />

    <h1 v-if="accompanyingCourse.step === 'DRAFT'">
        {{ $t("course.title.draft") }}
    </h1>
    <h1 v-else>
        {{ $t("course.title.active") }}
    </h1>

    <persons-associated />
    <course-location />
    <origin-demand />
    <admin-location />
    <requestor :is-anonymous="accompanyingCourse.requestorAnonymous" />
    <social-issue />
    <scopes />
    <referrer />
    <resources />
    <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')" />
    <comment v-if="accompanyingCourse.step === 'DRAFT'" />
    <confirm v-if="accompanyingCourse.step === 'DRAFT'" />

    <!-- <div v-for="error in errorMsg" v-bind:key="error.id" class="vue-component errors alert alert-danger">
       <p>
          <span>{{ error.sta }} {{ error.txt }}</span><br>
          <span>{{ $t(error.msg) }}</span>
       </p>
    </div> -->
</template>
<script>
import { mapState } from "vuex";
import Banner from "./components/Banner.vue";
import StickyNav from "./components/StickyNav.vue";
import OriginDemand from "./components/OriginDemand.vue";
import AdminLocation from "./components/AdminLocation.vue";
import PersonsAssociated from "./components/PersonsAssociated.vue";
import Requestor from "./components/Requestor.vue";
import SocialIssue from "./components/SocialIssue.vue";
import CourseLocation from "./components/CourseLocation.vue";
import Scopes from "./components/Scopes.vue";
import Referrer from "./components/Referrer.vue";
import Resources from "./components/Resources.vue";
import Comment from "./components/Comment.vue";
import Confirm from "./components/Confirm.vue";
import StartDate from "./components/StartDate.vue";

export default {
    name: "App",
    components: {
        Banner,
        StickyNav,
        OriginDemand,
        AdminLocation,
        PersonsAssociated,
        Requestor,
        SocialIssue,
        CourseLocation,
        Scopes,
        Referrer,
        Resources,
        Comment,
        Confirm,
        StartDate,
    },
    computed: {
        ...mapState(["accompanyingCourse", "addressContext"]),
    },
};
</script>

<style lang="scss">
@import "ChillMainAssets/module/bootstrap/shared";
$chill-accourse-context: #718596;

div#accompanying-course {
    div.vue-component {
        h2 {
            margin: 1em 0.7em;
            position: relative;
            &:before {
                position: absolute;
                content: "\f142"; //ellipsis-v
                font-family: "ForkAwesome";
                color: tint-color($chill-accourse-context, 10%);
                left: -22px;
                top: 4px;
            }
            a[id^="section"] {
                position: absolute;
                top: -2.5em; // reference for stickNav
            }
        }
        padding: 0em 0em;
        margin: 1em 0;
        border-radius: 5px;
        border: 1px dotted tint-color($chill-accourse-context, 10%);
        border-left: 1px dotted tint-color($chill-accourse-context, 10%);
        border-right: 1px dotted tint-color($chill-accourse-context, 10%);
        dd {
            margin-left: 1em;
        }
        & > div {
            margin: 1em 3em 0;

            &.flex-table,
            &.flex-bloc {
                margin: 1em 0 0;
            }
            &.alert.to-confirm {
                margin: 1em 0 0;
                padding: 1em 3em;
            }
        }

        div.flex-table {
            div.item-row {
                div.item-col:first-child {
                    flex-basis: 33%;
                }
            }
        }

        &.errors {
            //display: flex;
            //position: sticky;
            //bottom: 0.3em;
            //z-index: 1000;
            margin: 1em 0;
            padding: 1em;
            border-radius: 0;
        }
    }
}
</style>