104 lines
2.0 KiB
Vue
104 lines
2.0 KiB
Vue
<template>
|
|
<modal
|
|
:hide-header="false"
|
|
:small="true"
|
|
class="change-visibility"
|
|
>
|
|
<template #header>
|
|
<h1
|
|
class="change-visibility__heading"
|
|
data-cy="modal-title"
|
|
>
|
|
Sichtbarkeit anpassen
|
|
</h1>
|
|
</template>
|
|
<div class="change-visibility__content">
|
|
<radiobutton
|
|
:checked="!restricted"
|
|
:class="{ 'change-visibility__radio--selected': !restricted }"
|
|
data-cy="select-option"
|
|
class="change-visibility__radio"
|
|
label="Raumeinträge sind für alle Lernenden sichtbar"
|
|
@input="restrict(false)"
|
|
/>
|
|
<radiobutton
|
|
:checked="restricted"
|
|
:class="{ 'change-visibility__radio--selected': restricted }"
|
|
data-cy="select-option"
|
|
class="change-visibility__radio"
|
|
label="Lernende sehen nur die eigenen Beiträge"
|
|
@input="restrict(true)"
|
|
/>
|
|
</div>
|
|
<template #footer>
|
|
<div>
|
|
<a
|
|
class="button button--primary"
|
|
data-cy="modal-save-button"
|
|
@click="confirm"
|
|
>Speichern</a
|
|
>
|
|
<a
|
|
class="button"
|
|
@click="cancel"
|
|
>Abbrechen</a
|
|
>
|
|
</div>
|
|
</template>
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
import Modal from '@/components/Modal.vue';
|
|
import Radiobutton from '@/components/Radiobutton.vue';
|
|
|
|
export default {
|
|
components: {
|
|
Radiobutton,
|
|
Modal,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
restricted: false,
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.restricted = this.$modal.state.payload.restricted;
|
|
},
|
|
|
|
methods: {
|
|
restrict(restricted) {
|
|
this.restricted = restricted;
|
|
},
|
|
confirm() {
|
|
this.$modal.confirm(this.restricted);
|
|
},
|
|
cancel() {
|
|
this.$modal.cancel();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.change-visibility {
|
|
&__heading {
|
|
@include modal-heading;
|
|
}
|
|
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: $medium-spacing 0;
|
|
}
|
|
|
|
&__radio:first-of-type {
|
|
margin-bottom: $medium-spacing;
|
|
}
|
|
}
|
|
</style>
|