92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
Vue
<template>
|
|
<modal
|
|
:hide-header="false"
|
|
:small="true"
|
|
class="change-visibility">
|
|
<h1
|
|
class="change-visibility__heading"
|
|
data-cy="modal-title"
|
|
slot="header">Sichtbarkeit anpassen</h1>
|
|
<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>
|
|
<div slot="footer">
|
|
<a
|
|
class="button button--primary"
|
|
data-cy="modal-save-button"
|
|
@click="confirm">Speichern</a>
|
|
<a
|
|
class="button"
|
|
@click="cancel">Abbrechen</a>
|
|
</div>
|
|
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
import Modal from '@/components/Modal';
|
|
import Radiobutton from '@/components/Radiobutton';
|
|
|
|
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>
|