add todos, remove focus trap from custom dialog

hpi-schul-cloud · Dec 5, 2024 · 6ec5504 · 6ec5504
1 parent c25cbf8
commit 6ec5504
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 75 deletions.
diff --git a/src/components/organisms/vCustomDialog.vue b/src/components/organisms/vCustomDialog.vue
@@ -6,85 +6,81 @@
 		@click:outside="closeDialog"
 		@keydown.esc="closeDialog"
 	>
-		<!-- ToDo: think about this focus trap if there could be problem to do it here -->
-		<UseFocusTrap>
-			<v-card :ripple="false">
-				<v-card-title data-testid="dialog-title" class="dialog-title px-6 pt-4">
-					<slot name="title" />
-				</v-card-title>
-				<v-card-text class="text--primary">
-					<slot name="content" />
-				</v-card-text>
-				<v-card-actions v-if="hasButtons" class="action-buttons px-6">
-					<div class="button-section button-left">
-						<v-btn
-							v-if="checkButtons('back')"
-							data-testid="dialog-back"
-							variant="outlined"
-							@click="$emit('back')"
-						>
-							{{ $t("common.actions.back") }}
-						</v-btn>
-						<v-btn
-							v-if="checkButtons('edit')"
-							data-testid="dialog-edit"
-							variant="flat"
-							@click="$emit('dialog-edit')"
-						>
-							{{ $t("common.actions.edit") }}
-						</v-btn>
-					</div>
-					<v-spacer />
-					<div class="button-section button-right">
-						<v-btn
-							v-if="checkButtons('cancel')"
-							data-testid="dialog-cancel"
-							class="dialog-closed"
-							variant="text"
-							@click="cancelDialog"
-						>
-							{{ $t("common.actions.cancel") }}
-						</v-btn>
-						<v-btn
-							v-if="checkButtons('confirm')"
-							data-testid="dialog-confirm"
-							class="dialog-confirmed px-6"
-							color="primary"
-							variant="flat"
-							:disabled="confirmBtnDisabled"
-							@click="confirmDialog"
-						>
-							<v-icon v-if="confirmBtnIcon" size="small" class="mr-1">
-								{{ confirmBtnIcon }}
-							</v-icon>
-							{{ $t(confirmBtnTitleKey) }}
-						</v-btn>
-						<v-btn
-							v-if="checkButtons('close')"
-							data-testid="dialog-close"
-							variant="outlined"
-							@click="closeDialog"
-						>
-							{{ $t("common.labels.close") }}
-						</v-btn>
-						<v-btn
-							v-if="checkButtons('next')"
-							data-testid="dialog-next"
-							color="primary"
-							variant="flat"
-							:disabled="nextBtnDisabled"
-							@click="$emit('next')"
-							>{{ $t(nextBtnTitleKey) }}
-						</v-btn>
-					</div>
-				</v-card-actions>
-			</v-card>
-		</UseFocusTrap>
+		<v-card :ripple="false">
+			<v-card-title data-testid="dialog-title" class="dialog-title px-6 pt-4">
+				<slot name="title" />
+			</v-card-title>
+			<v-card-text class="text--primary">
+				<slot name="content" />
+			</v-card-text>
+			<v-card-actions v-if="hasButtons" class="action-buttons px-6">
+				<div class="button-section button-left">
+					<v-btn
+						v-if="checkButtons('back')"
+						data-testid="dialog-back"
+						variant="outlined"
+						@click="$emit('back')"
+					>
+						{{ $t("common.actions.back") }}
+					</v-btn>
+					<v-btn
+						v-if="checkButtons('edit')"
+						data-testid="dialog-edit"
+						variant="flat"
+						@click="$emit('dialog-edit')"
+					>
+						{{ $t("common.actions.edit") }}
+					</v-btn>
+				</div>
+				<v-spacer />
+				<div class="button-section button-right">
+					<v-btn
+						v-if="checkButtons('cancel')"
+						data-testid="dialog-cancel"
+						class="dialog-closed"
+						variant="text"
+						@click="cancelDialog"
+					>
+						{{ $t("common.actions.cancel") }}
+					</v-btn>
+					<v-btn
+						v-if="checkButtons('confirm')"
+						data-testid="dialog-confirm"
+						class="dialog-confirmed px-6"
+						color="primary"
+						variant="flat"
+						:disabled="confirmBtnDisabled"
+						@click="confirmDialog"
+					>
+						<v-icon v-if="confirmBtnIcon" size="small" class="mr-1">
+							{{ confirmBtnIcon }}
+						</v-icon>
+						{{ $t(confirmBtnTitleKey) }}
+					</v-btn>
+					<v-btn
+						v-if="checkButtons('close')"
+						data-testid="dialog-close"
+						variant="outlined"
+						@click="closeDialog"
+					>
+						{{ $t("common.labels.close") }}
+					</v-btn>
+					<v-btn
+						v-if="checkButtons('next')"
+						data-testid="dialog-next"
+						color="primary"
+						variant="flat"
+						:disabled="nextBtnDisabled"
+						@click="$emit('next')"
+						>{{ $t(nextBtnTitleKey) }}
+					</v-btn>
+				</div>
+			</v-card-actions>
+		</v-card>
 	</v-dialog>
 </template>
 
 <script setup lang="ts">
-import { UseFocusTrap } from "@vueuse/integrations/useFocusTrap/component";
 import { ModelRef, PropType } from "vue";
 
 const props = defineProps({

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
@@ -1,4 +1,5 @@
 <template>
+	<!-- ToDo: replace vCustomDialog with v-dailog, use component <UseFocusTrap>  -->
 	<vCustomDialog
 		data-testid="delete-dialog-item"
 		has-buttons