From 3b81e1c7b5a9a6c4bc86afca05dccb0447e74d3d Mon Sep 17 00:00:00 2001
From: David Siegfried <david.siegfried@uni-vechta.de>
Date: Wed, 15 Nov 2023 11:39:02 +0000
Subject: [PATCH] move button to footer, re #3465
Closes #3465
Merge request studip/studip!2361
---
.../CoursewareAccordionContainer.vue | 57 +++++++++++++------
.../containers/CoursewareDefaultContainer.vue | 14 +++--
.../containers/CoursewareTabsContainer.vue | 57 +++++++++++++------
3 files changed, 87 insertions(+), 41 deletions(-)
diff --git a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue b/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
index 33f515a5b20..acc2282110d 100644
--- a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
@@ -12,7 +12,7 @@
<template v-if="showEditMode && canEdit && !currentElementisLink">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
- {{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
+ {{ $gettext('Drücken Sie die Leertaste, um neu anzuordnen.') }}
</span>
</template>
<courseware-collapsible-box
@@ -78,22 +78,30 @@
</div>
</template>
</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 v-slot:containerEditDialog>
<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">
<label>
- <translate>Title</translate>
+ {{ $gettext('Title')}}
<input type="text" v-model="section.name" />
</label>
<label>
- <translate>Icon</translate>
+ {{ $gettext('Icon')}}
<studip-select :options="icons" v-model="section.icon">
<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 #no-options>
- <translate>Es steht keine Auswahl zur Verfügung.</translate>
+ {{ $gettext('Es steht keine Auswahl zur Verfügung.')}}
</template>
<template #selected-option="option">
<studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
@@ -107,11 +115,13 @@
class="cw-container-section-delete"
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>
</fieldset>
</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>
</courseware-default-container>
</template>
@@ -153,7 +163,9 @@ export default {
processing: false,
keyboardSelected: null,
sortInSlots: [],
- assistiveLive: ''
+ assistiveLive: '',
+ showDeleteDialog: false,
+ currentSection: null,
};
},
computed: {
@@ -223,26 +235,35 @@ export default {
addSection() {
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) {
return;
}
- if (this.currentContainer.attributes.payload.sections[index].blocks.length > 0) {
- if (index === 0) {
+ if (this.currentContainer.attributes.payload.sections[this.currentSection].blocks.length > 0) {
+ if (this.currentSection === 0) {
this.currentContainer.attributes.payload.sections[
- index + 1
- ].blocks = this.currentContainer.attributes.payload.sections[index + 1].blocks.concat(
- this.currentContainer.attributes.payload.sections[index].blocks
+ this.currentSection + 1
+ ].blocks = this.currentContainer.attributes.payload.sections[this.currentSection + 1].blocks.concat(
+ this.currentContainer.attributes.payload.sections[this.currentSection].blocks
);
} else {
this.currentContainer.attributes.payload.sections[
- index - 1
- ].blocks = this.currentContainer.attributes.payload.sections[index - 1].blocks.concat(
- this.currentContainer.attributes.payload.sections[index].blocks
+ this.currentSection - 1
+ ].blocks = this.currentContainer.attributes.payload.sections[this.currentSection - 1].blocks.concat(
+ 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() {
const timeout = setTimeout(() => this.processing = true, 800);
diff --git a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
index e8e2bb5a563..d818a34366c 100644
--- a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
@@ -47,6 +47,10 @@
<template v-slot:dialogContent>
<slot name="containerEditDialog"></slot>
</template>
+ <template v-slot:dialogButtons>
+ <slot name="containerEditButtons"></slot>
+ </template>
+
</studip-dialog>
<studip-dialog
@@ -66,18 +70,18 @@
<div class="cw-radioset-wrapper" role="group" aria-labelledby="container-type">
<p id="container-type">{{ $gettext('Typ') }}</p>
<div class="cw-radioset">
- <div
+ <div
v-for="(container, index) in containerTypes"
:key="index"
- class="cw-radioset-box"
+ class="cw-radioset-box"
:class="[container.type === changeType ? 'selected' : '']"
>
- <input type="radio" :id="'type-' + container.type" :value="container.type" v-model="changeType" name="container-type"/>
+ <input type="radio" :id="'type-' + container.type" :value="container.type" v-model="changeType" name="container-type"/>
<label :for="'type-' + container.type" >
<div class="label-icon" :class="[container.type, container.type === changeType ? 'selected' : '']"></div>
<p>{{ container.title }}</p>
</label>
-
+
</div>
</div>
</div>
@@ -372,7 +376,7 @@ export default {
'container-id': this.container.id,
'object-type': this.container.type,
'object-kind': this.container.attributes['container-type'],
-
+
}
};
diff --git a/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue b/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
index c6264c765ac..475c33f7e53 100644
--- a/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
@@ -9,10 +9,18 @@
@closeEdit="initCurrentData"
>
<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">
<span aria-live="assertive" class="assistive-text">{{ assistiveLive }}</span>
<span id="operation" class="assistive-text">
- {{$gettext('Drücken Sie die Leertaste, um neu anzuordnen.')}}
+ {{ $gettext('Drücken Sie die Leertaste, um neu anzuordnen.') }}
</span>
</template>
<courseware-tabs>
@@ -82,17 +90,17 @@
<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">
<label>
- <translate>Title</translate>
+ {{ $gettext('Title') }}
<input type="text" v-model="section.name" />
</label>
<label>
- <translate>Icon</translate>
+ {{ $gettext('Icon') }}
<studip-select :options="icons" v-model="section.icon">
<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 #no-options>
- <translate>Es steht keine Auswahl zur Verfügung.</translate>
+ {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
</template>
<template #selected-option="option">
<studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
@@ -106,11 +114,13 @@
class="cw-container-section-delete"
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>
</fieldset>
</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>
</courseware-default-container>
</template>
@@ -156,7 +166,9 @@ export default {
processing: false,
keyboardSelected: null,
sortInTab: 0,
- assistiveLive: ''
+ assistiveLive: '',
+ showDeleteDialog: false,
+ currentSection: null,
};
},
computed: {
@@ -225,26 +237,35 @@ export default {
addSection() {
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) {
return;
}
- if (this.currentContainer.attributes.payload.sections[index].blocks.length > 0) {
- if (index === 0) {
+ if (this.currentContainer.attributes.payload.sections[this.currentSection].blocks.length > 0) {
+ if (this.currentSection === 0) {
this.currentContainer.attributes.payload.sections[
- index + 1
- ].blocks = this.currentContainer.attributes.payload.sections[index + 1].blocks.concat(
- this.currentContainer.attributes.payload.sections[index].blocks
+ this.currentSection + 1
+ ].blocks = this.currentContainer.attributes.payload.sections[this.currentSection + 1].blocks.concat(
+ this.currentContainer.attributes.payload.sections[this.currentSection].blocks
);
} else {
this.currentContainer.attributes.payload.sections[
- index - 1
- ].blocks = this.currentContainer.attributes.payload.sections[index - 1].blocks.concat(
- this.currentContainer.attributes.payload.sections[index].blocks
+ this.currentSection - 1
+ ].blocks = this.currentContainer.attributes.payload.sections[this.currentSection - 1].blocks.concat(
+ 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() {
const timeout = setTimeout(() => this.processing = true, 800);
--
GitLab