Skip to content

Commit

Permalink
Merge pull request #1127 from DSD-DBS/feat-add-custom-input-dialog
Browse files Browse the repository at this point in the history
feat: Add custom input dialog
  • Loading branch information
MoritzWeber0 authored Oct 31, 2023
2 parents b85e77a + 2447015 commit 61a7b06
Show file tree
Hide file tree
Showing 12 changed files with 294 additions and 140 deletions.
4 changes: 3 additions & 1 deletion frontend/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,16 @@ import { AuthInterceptor } from './general/auth/http-interceptor/auth.intercepto
import { LogoutComponent } from './general/auth/logout/logout/logout.component';
import { LogoutRedirectComponent } from './general/auth/logout/logout-redirect/logout-redirect.component';
import { BreadcrumbsComponent } from './general/breadcrumbs/breadcrumbs.component';
import { ConfirmationDialogComponent } from './general/confirmation-dialog/confirmation-dialog.component';
import { ErrorHandlingInterceptor } from './general/error-handling/error-handling.interceptor';
import { FooterComponent } from './general/footer/footer.component';
import { LegalComponent } from './general/footer/legal/legal.component';
import { HeaderComponent } from './general/header/header.component';
import { VersionComponent } from './general/metadata/version/version.component';
import { NavBarMenuComponent } from './general/nav-bar-menu/nav-bar-menu.component';
import { NoticeComponent } from './general/notice/notice.component';
import { ConfirmationDialogComponent } from './helpers/confirmation-dialog/confirmation-dialog.component';
import { DisplayValueComponent } from './helpers/display-value/display-value.component';
import { InputDialogComponent } from './helpers/input-dialog/input-dialog.component';
import { MatIconComponent } from './helpers/mat-icon/mat-icon.component';
import { ButtonSkeletonLoaderComponent } from './helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component';
import { FormFieldSkeletonLoaderComponent } from './helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component';
Expand Down Expand Up @@ -176,6 +177,7 @@ import { SettingsComponent } from './settings/settings.component';
GitSettingsComponent,
HeaderComponent,
InitModelComponent,
InputDialogComponent,
JobRunOverviewComponent,
LegalComponent,
LicencesComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
~ SPDX-License-Identifier: Apache-2.0
-->

<div class="dialog" id="custom-dialog">
<div class="dialog">
<form (submit)="onSubmit()">
<h2>{{ data.title }}</h2>
<p>{{ data.text }}</p>
Expand All @@ -28,7 +28,7 @@ <h2>{{ data.title }}</h2>
mat-flat-button
color="primary"
type="button"
(click)="onCancelClick()"
(click)="onCancel()"
>
Cancel
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export class ConfirmationDialogComponent implements OnInit {
}
}

onCancelClick(): void {
onCancel(): void {
this.dialogRef.close(false);
}

Expand Down
37 changes: 37 additions & 0 deletions frontend/src/app/helpers/input-dialog/input-dialog.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!--
~ SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
~ SPDX-License-Identifier: Apache-2.0
-->

<div class="dialog">
<form [formGroup]="form" (submit)="onSubmit()">
<h2>{{ data.title }}</h2>
<p>{{ data.text }}</p>

<mat-form-field class="w-full" appearance="fill">
<mat-label>Reason</mat-label>
<textarea rows="6" matInput formControlName="result"></textarea>
<mat-error *ngIf="form.controls.result.errors?.required">
Please enter something or click on cancel!
</mat-error>
</mat-form-field>
<div class="flex justify-between">
<button
mat-flat-button
color="primary"
type="button"
(click)="onCancel()"
>
Cancel
</button>
<button
mat-flat-button
color="primary"
type="submit"
[disabled]="!form.valid"
>
Confirm
</button>
</div>
</form>
</div>
49 changes: 49 additions & 0 deletions frontend/src/app/helpers/input-dialog/input-dialog.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/*
* SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

export interface InputDialogData {
title: string;
text: string;
}

export interface InputDialogResult {
text?: string;
success: boolean;
}

@Component({
selector: 'app-input-dialog',
templateUrl: './input-dialog.component.html',
})
export class InputDialogComponent implements OnInit {
form = new FormGroup({
result: new FormControl<string | undefined>(undefined, [
Validators.required,
]),
});

constructor(
public dialogRef: MatDialogRef<InputDialogComponent, InputDialogResult>,
@Inject(MAT_DIALOG_DATA) public data: InputDialogData,
) {}

ngOnInit(): void {
this.dialogRef.updateSize('500px');
}

onSubmit(): void {
if (this.form.valid) {
this.dialogRef.close({ text: this.form.value.result!, success: true });
}
}

onCancel(): void {
this.dialogRef.close({ text: undefined, success: false });
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { combineLatest, filter, switchMap, tap } from 'rxjs';
import { ConfirmationDialogComponent } from 'src/app/general/confirmation-dialog/confirmation-dialog.component';
import { ConfirmationDialogComponent } from 'src/app/helpers/confirmation-dialog/confirmation-dialog.component';
import { ToastService } from 'src/app/helpers/toast/toast.service';
import { ModelService } from 'src/app/projects/models/service/model.service';
import {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { ActivatedRoute, Router } from '@angular/router';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { filter, map, Observable, of } from 'rxjs';
import { BreadcrumbsService } from 'src/app/general/breadcrumbs/breadcrumbs.service';
import { ConfirmationDialogComponent } from 'src/app/general/confirmation-dialog/confirmation-dialog.component';
import { ConfirmationDialogComponent } from 'src/app/helpers/confirmation-dialog/confirmation-dialog.component';
import { ToastService } from 'src/app/helpers/toast/toast.service';
import {
absoluteOrRelativeValidators,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { combineLatest, filter } from 'rxjs';
import { ConfirmationDialogComponent } from 'src/app/general/confirmation-dialog/confirmation-dialog.component';
import { ConfirmationDialogComponent } from 'src/app/helpers/confirmation-dialog/confirmation-dialog.component';
import { ToastService } from 'src/app/helpers/toast/toast.service';
import {
SubmitT4CModel,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
MatDialogRef,
} from '@angular/material/dialog';
import { Observable, map } from 'rxjs';
import { ConfirmationDialogComponent } from 'src/app/general/confirmation-dialog/confirmation-dialog.component';
import { ConfirmationDialogComponent } from 'src/app/helpers/confirmation-dialog/confirmation-dialog.component';
import { ToastService } from 'src/app/helpers/toast/toast.service';
import {
Model,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { filter } from 'rxjs';
import { ConfirmationDialogComponent } from 'src/app/general/confirmation-dialog/confirmation-dialog.component';
import { ConfirmationDialogComponent } from 'src/app/helpers/confirmation-dialog/confirmation-dialog.component';
import { ToastService } from 'src/app/helpers/toast/toast.service';
import { ModelService } from 'src/app/projects/models/service/model.service';
import { ProjectUserService } from 'src/app/projects/project-detail/project-users/service/project-user.service';
Expand Down
Loading

0 comments on commit 61a7b06

Please sign in to comment.