Skip to content
Snippets Groups Projects
Commit 3b81e1c7 authored by David Siegfried's avatar David Siegfried
Browse files

move button to footer, re #3465 

Closes #3465

Merge request studip/studip!2361
parent 67bee38a
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
+ 39
− 18
View file @ 3b81e1c7
...@@ -78,22 +78,30 @@ ...@@ -78,22 +78,30 @@
</div> </div>
</template> </template>
</courseware-collapsible-box> </courseware-collapsible-box>
<studipDialog
v-if="showDeleteDialog"
:title="$gettext('Fach löschen')"
:question="$gettext('Möchten Sie dieses Fach wirklich löschen?')"
height="180"
@confirm="deleteCurrentSection"
@close="closeDeleteDialog"
></studipDialog>
</template> </template>
<template v-slot:containerEditDialog> <template v-slot:containerEditDialog>
<form class="default cw-container-dialog-edit-form" @submit.prevent=""> <form class="default cw-container-dialog-edit-form" @submit.prevent="">
<fieldset v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)" :key="index"> <fieldset v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)" :key="index">
<label> <label>
<translate>Title</translate> {{ $gettext('Title')}}
<input type="text" v-model="section.name" /> <input type="text" v-model="section.name" />
</label> </label>
<label> <label>
<translate>Icon</translate> {{ $gettext('Icon')}}
<studip-select :options="icons" v-model="section.icon"> <studip-select :options="icons" v-model="section.icon">
<template #open-indicator="selectAttributes"> <template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span> <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
</template> </template>
<template #no-options> <template #no-options>
<translate>Es steht keine Auswahl zur Verfügung.</translate> {{ $gettext('Es steht keine Auswahl zur Verfügung.')}}
</template> </template>
<template #selected-option="option"> <template #selected-option="option">
<studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
...@@ -107,11 +115,13 @@ ...@@ -107,11 +115,13 @@
class="cw-container-section-delete" class="cw-container-section-delete"
v-if="currentContainer.attributes.payload.sections.length > 1" v-if="currentContainer.attributes.payload.sections.length > 1"
> >
<button class="button trash" @click="deleteSection(index)"><translate>Fach löschen</translate></button> <button class="button trash" @click.prevent="confirmDeleteSection(index)">{{ $gettext('Fach löschen')}}</button>
</label> </label>
</fieldset> </fieldset>
</form> </form>
<button class="button add" @click="addSection"><translate>Fach hinzufügen</translate></button> </template>
<template v-slot:containerEditButtons>
<button class="button add" @click="addSection">{{ $gettext('Fach hinzufügen')}}</button>
</template> </template>
</courseware-default-container> </courseware-default-container>
</template> </template>
...@@ -153,7 +163,9 @@ export default { ...@@ -153,7 +163,9 @@ export default {
processing: false, processing: false,
keyboardSelected: null, keyboardSelected: null,
sortInSlots: [], sortInSlots: [],
assistiveLive: '' assistiveLive: '',
showDeleteDialog: false,
currentSection: null,
}; };
}, },
computed: { computed: {
...@@ -223,26 +235,35 @@ export default { ...@@ -223,26 +235,35 @@ export default {
addSection() { addSection() {
this.currentContainer.attributes.payload.sections.push({ name: '', icon: '', blocks: [] }); this.currentContainer.attributes.payload.sections.push({ name: '', icon: '', blocks: [] });
}, },
deleteSection(index) { confirmDeleteSection(index) {
this.currentSection = index;
this.showDeleteDialog = true;
},
closeDeleteDialog() {
this.currentSection = null;
this.showDeleteDialog = false;
},
deleteCurrentSection() {
if (this.currentContainer.attributes.payload.sections.length === 1) { if (this.currentContainer.attributes.payload.sections.length === 1) {
return; return;
} }
if (this.currentContainer.attributes.payload.sections[index].blocks.length > 0) { if (this.currentContainer.attributes.payload.sections[this.currentSection].blocks.length > 0) {
if (index === 0) { if (this.currentSection === 0) {
this.currentContainer.attributes.payload.sections[ this.currentContainer.attributes.payload.sections[
index + 1 this.currentSection + 1
].blocks = this.currentContainer.attributes.payload.sections[index + 1].blocks.concat( ].blocks = this.currentContainer.attributes.payload.sections[this.currentSection + 1].blocks.concat(
this.currentContainer.attributes.payload.sections[index].blocks this.currentContainer.attributes.payload.sections[this.currentSection].blocks
); );
} else { } else {
this.currentContainer.attributes.payload.sections[ this.currentContainer.attributes.payload.sections[
index - 1 this.currentSection - 1
].blocks = this.currentContainer.attributes.payload.sections[index - 1].blocks.concat( ].blocks = this.currentContainer.attributes.payload.sections[this.currentSection - 1].blocks.concat(
this.currentContainer.attributes.payload.sections[index].blocks this.currentContainer.attributes.payload.sections[this.currentSection].blocks
); );
} }
} }
this.currentContainer.attributes.payload.sections.splice(index, 1); this.currentContainer.attributes.payload.sections.splice(this.currentSection, 1);
this.closeDeleteDialog();
}, },
async storeContainer() { async storeContainer() {
const timeout = setTimeout(() => this.processing = true, 800); const timeout = setTimeout(() => this.processing = true, 800);
......
resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
+ 9
− 5
View file @ 3b81e1c7
...@@ -47,6 +47,10 @@ ...@@ -47,6 +47,10 @@
<template v-slot:dialogContent> <template v-slot:dialogContent>
<slot name="containerEditDialog"></slot> <slot name="containerEditDialog"></slot>
</template> </template>
<template v-slot:dialogButtons>
<slot name="containerEditButtons"></slot>
</template>
</studip-dialog> </studip-dialog>
<studip-dialog <studip-dialog
......
resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
+ 39
− 18
View file @ 3b81e1c7
...@@ -9,6 +9,14 @@ ...@@ -9,6 +9,14 @@
@closeEdit="initCurrentData" @closeEdit="initCurrentData"
> >
<template v-slot:containerContent> <template v-slot:containerContent>
<studipDialog
v-if="showDeleteDialog"
:title="$gettext('Tab löschen')"
:question="$gettext('Möchten Sie dieses Tab wirklich löschen?')"
height="180"
@confirm="deleteCurrentSection"
@close="closeDeleteDialog"
></studipDialog>
<template v-if="showEditMode && canEdit && !currentElementisLink"> <template v-if="showEditMode && canEdit && !currentElementisLink">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span> <span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text"> <span id="operation" class="assistive-text">
...@@ -82,17 +90,17 @@ ...@@ -82,17 +90,17 @@
<form class="default cw-container-dialog-edit-form" @submit.prevent=""> <form class="default cw-container-dialog-edit-form" @submit.prevent="">
<fieldset v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)" :key="index"> <fieldset v-for="(section, index) in currentContainer.attributes.payload.sections.filter(section => !section.locked)" :key="index">
<label> <label>
<translate>Title</translate> {{ $gettext('Title') }}
<input type="text" v-model="section.name" /> <input type="text" v-model="section.name" />
</label> </label>
<label> <label>
<translate>Icon</translate> {{ $gettext('Icon') }}
<studip-select :options="icons" v-model="section.icon"> <studip-select :options="icons" v-model="section.icon">
<template #open-indicator="selectAttributes"> <template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span> <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
</template> </template>
<template #no-options> <template #no-options>
<translate>Es steht keine Auswahl zur Verfügung.</translate> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
</template> </template>
<template #selected-option="option"> <template #selected-option="option">
<studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
...@@ -106,11 +114,13 @@ ...@@ -106,11 +114,13 @@
class="cw-container-section-delete" class="cw-container-section-delete"
v-if="currentContainer.attributes.payload.sections.length > 1" v-if="currentContainer.attributes.payload.sections.length > 1"
> >
<button class="button trash" @click="deleteSection(index)"><translate>Tab löschen</translate></button> <button class="button trash" @click="confirmDeleteSection(index)">{{ $gettext('Tab löschen') }}</button>
</label> </label>
</fieldset> </fieldset>
</form> </form>
<button class="button add" @click="addSection"><translate>Tab hinzufügen</translate></button> </template>
<template v-slot:containerEditButtons>
<button class="button add" @click="addSection">{{ $gettext('Tab hinzufügen') }}</button>
</template> </template>
</courseware-default-container> </courseware-default-container>
</template> </template>
...@@ -156,7 +166,9 @@ export default { ...@@ -156,7 +166,9 @@ export default {
processing: false, processing: false,
keyboardSelected: null, keyboardSelected: null,
sortInTab: 0, sortInTab: 0,
assistiveLive: '' assistiveLive: '',
showDeleteDialog: false,
currentSection: null,
}; };
}, },
computed: { computed: {
...@@ -225,26 +237,35 @@ export default { ...@@ -225,26 +237,35 @@ export default {
addSection() { addSection() {
this.currentContainer.attributes.payload.sections.push({ name: '', icon: '', blocks: [] }); this.currentContainer.attributes.payload.sections.push({ name: '', icon: '', blocks: [] });
}, },
deleteSection(index) { confirmDeleteSection(index) {
this.currentSection = index;
this.showDeleteDialog = true;
},
closeDeleteDialog() {
this.currentSection = null;
this.showDeleteDialog = false;
},
deleteCurrentSection() {
if (this.currentContainer.attributes.payload.sections.length === 1) { if (this.currentContainer.attributes.payload.sections.length === 1) {
return; return;
} }
if (this.currentContainer.attributes.payload.sections[index].blocks.length > 0) { if (this.currentContainer.attributes.payload.sections[this.currentSection].blocks.length > 0) {
if (index === 0) { if (this.currentSection === 0) {
this.currentContainer.attributes.payload.sections[ this.currentContainer.attributes.payload.sections[
index + 1 this.currentSection + 1
].blocks = this.currentContainer.attributes.payload.sections[index + 1].blocks.concat( ].blocks = this.currentContainer.attributes.payload.sections[this.currentSection + 1].blocks.concat(
this.currentContainer.attributes.payload.sections[index].blocks this.currentContainer.attributes.payload.sections[this.currentSection].blocks
); );
} else { } else {
this.currentContainer.attributes.payload.sections[ this.currentContainer.attributes.payload.sections[
index - 1 this.currentSection - 1
].blocks = this.currentContainer.attributes.payload.sections[index - 1].blocks.concat( ].blocks = this.currentContainer.attributes.payload.sections[this.currentSection - 1].blocks.concat(
this.currentContainer.attributes.payload.sections[index].blocks this.currentContainer.attributes.payload.sections[this.currentSection].blocks
); );
} }
} }
this.currentContainer.attributes.payload.sections.splice(index, 1); this.currentContainer.attributes.payload.sections.splice(this.currentSection, 1);
this.closeDeleteDialog();
}, },
async storeContainer() { async storeContainer() {
const timeout = setTimeout(() => this.processing = true, 800); const timeout = setTimeout(() => this.processing = true, 800);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment