diff --git a/client/src/app/site/base/base-list-view.ts b/client/src/app/site/base/base-list-view.ts index 400d781a6..dc5231326 100644 --- a/client/src/app/site/base/base-list-view.ts +++ b/client/src/app/site/base/base-list-view.ts @@ -57,7 +57,7 @@ export abstract class BaseListViewComponent extends Bas titleService: Title, translate: TranslateService, matSnackBar: MatSnackBar, - protected storage?: StorageService + protected storage: StorageService ) { super(titleService, translate, matSnackBar); this.selectedRows = []; diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts index b93c20ba2..39c36b0ac 100644 --- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts +++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts @@ -20,6 +20,7 @@ import { PblNgridDataMatrixRow } from '@pebula/ngrid/target-events'; import { BehaviorSubject, Observable, Subscription } from 'rxjs'; import { OperatorService } from 'app/core/core-services/operator.service'; +import { StorageService } from 'app/core/core-services/storage.service'; import { MediafileRepositoryService } from 'app/core/repositories/mediafiles/mediafile-repository.service'; import { GroupRepositoryService } from 'app/core/repositories/users/group-repository.service'; import { MediaManageService } from 'app/core/ui-services/media-manage.service'; @@ -185,6 +186,7 @@ export class MediafileListComponent extends BaseListViewComponent titleService: Title, protected translate: TranslateService, matSnackBar: MatSnackBar, + storage: StorageService, private route: ActivatedRoute, private router: Router, public repo: MediafileRepositoryService, @@ -199,7 +201,7 @@ export class MediafileListComponent extends BaseListViewComponent private groupRepo: GroupRepositoryService, private cd: ChangeDetectorRef ) { - super(titleService, translate, matSnackBar); + super(titleService, translate, matSnackBar, storage); this.canMultiSelect = true; this.newDirectoryForm = this.formBuilder.group({ diff --git a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html index 1d327c7ca..6041794df 100644 --- a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html +++ b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html @@ -12,10 +12,43 @@ - - - New category - + + +
+ +
{{ category.prefixedName }}
+
+ + +
+ {{ category.motions.length }} +
+
+ + + + + + + +

+ New category +

+

@@ -28,64 +61,19 @@

- + A name is required

- - - - -
+
+ - - - - - - - - - - - Title - - -
{{ category.prefixedName }}
-
-
- - - - - Motions - - - {{ category.motions.length }} - - - - - - - - - - - - - -
-
- - - - +
+
diff --git a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts index 19f2ddfa9..47b716435 100644 --- a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts +++ b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts @@ -1,14 +1,17 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { MatDialog } from '@angular/material'; import { MatSnackBar } from '@angular/material/snack-bar'; -import { MatTableDataSource } from '@angular/material/table'; import { Title } from '@angular/platform-browser'; import { TranslateService } from '@ngx-translate/core'; +import { PblColumnDefinition } from '@pebula/ngrid'; import { OperatorService } from 'app/core/core-services/operator.service'; +import { StorageService } from 'app/core/core-services/storage.service'; import { CategoryRepositoryService } from 'app/core/repositories/motions/category-repository.service'; -import { BaseViewComponent } from 'app/site/base/base-view'; +import { infoDialogSettings } from 'app/shared/utils/dialog-settings'; +import { BaseListViewComponent } from 'app/site/base/base-list-view'; import { ViewCategory } from 'app/site/motions/models/view-category'; /** @@ -19,21 +22,33 @@ import { ViewCategory } from 'app/site/motions/models/view-category'; templateUrl: './category-list.component.html', styleUrls: ['./category-list.component.scss'] }) -export class CategoryListComponent extends BaseViewComponent implements OnInit { +export class CategoryListComponent extends BaseListViewComponent implements OnInit { + @ViewChild('newCategoryDialog', { static: true }) + private newCategoryDialog: TemplateRef; + /** * Holds the create form */ public createForm: FormGroup; /** - * Table data Source + * Define the columns to show */ - public dataSource: MatTableDataSource; + public tableColumnDefinition: PblColumnDefinition[] = [ + { + prop: 'title', + width: 'auto' + }, + { + prop: 'amount', + width: this.singleButtonWidth + } + ]; /** - * Flag, if the creation panel is open + * Define extra filter properties */ - public isCreatingNewCategory = false; + public filterProps = ['prefixedName']; /** * helper for permission checks @@ -59,11 +74,13 @@ export class CategoryListComponent extends BaseViewComponent implements OnInit { titleService: Title, translate: TranslateService, matSnackBar: MatSnackBar, - private repo: CategoryRepositoryService, + storage: StorageService, + public repo: CategoryRepositoryService, private formBuilder: FormBuilder, + private dialog: MatDialog, private operator: OperatorService ) { - super(titleService, translate, matSnackBar); + super(titleService, translate, matSnackBar, storage); this.createForm = this.formBuilder.group({ prefix: [''], @@ -77,74 +94,46 @@ export class CategoryListComponent extends BaseViewComponent implements OnInit { */ public ngOnInit(): void { super.setTitle('Categories'); - - this.dataSource = new MatTableDataSource(); - this.repo.getViewModelListObservable().subscribe(viewCategories => { - if (viewCategories && this.dataSource) { - this.dataSource.data = viewCategories; - } - }); - } - - /** - * Returns the columns that should be shown in the table - * - * @returns an array of strings building the column definition - */ - public getColumnDefinition(): string[] { - return ['title', 'amount', 'anchor']; } /** * Click handler for the plus button */ public onPlusButton(): void { - if (!this.isCreatingNewCategory) { - this.createForm.reset(); - this.isCreatingNewCategory = true; - } - } - - /** - * Click handler for the save button. - * Sends the category to create to the repository and resets the form. - */ - public onCreate(): void { - if (this.createForm.valid) { - try { - this.repo.create(this.createForm.value); - this.createForm.reset(); - this.isCreatingNewCategory = false; - } catch (e) { - this.raiseError(e); + this.createForm.reset(); + const dialogRef = this.dialog.open(this.newCategoryDialog, infoDialogSettings); + dialogRef.afterClosed().subscribe(res => { + if (res) { + this.save(); } - } - // set a form control as "touched" to trigger potential error messages - this.createForm.get('name').markAsTouched(); + }); } /** - * clicking Shift and Enter will save automatically + * Sends the category to create to the repository. + */ + private save(): void { + if (this.createForm.valid) { + this.repo.create(this.createForm.value).catch(this.raiseError); + } + } + + /** + * clicking Enter will save automatically * clicking Escape will cancel the process * * @param event has the code */ public onKeyDown(event: KeyboardEvent): void { if (event.key === 'Enter') { - this.onCreate(); + this.save(); + this.dialog.closeAll(); } if (event.key === 'Escape') { - this.onCancel(); + this.dialog.closeAll(); } } - /** - * Cancels the current form action - */ - public onCancel(): void { - this.isCreatingNewCategory = false; - } - public getMargin(category: ViewCategory): string { return `${category.level * 20}px`; } diff --git a/client/src/app/site/tags/components/tag-list/tag-list.component.ts b/client/src/app/site/tags/components/tag-list/tag-list.component.ts index 38da6f29a..9a0cd589e 100644 --- a/client/src/app/site/tags/components/tag-list/tag-list.component.ts +++ b/client/src/app/site/tags/components/tag-list/tag-list.component.ts @@ -7,6 +7,7 @@ import { Title } from '@angular/platform-browser'; import { TranslateService } from '@ngx-translate/core'; import { PblColumnDefinition } from '@pebula/ngrid'; +import { StorageService } from 'app/core/core-services/storage.service'; import { TagRepositoryService } from 'app/core/repositories/tags/tag-repository.service'; import { PromptService } from 'app/core/ui-services/prompt.service'; import { Tag } from 'app/shared/models/core/tag'; @@ -68,13 +69,14 @@ export class TagListComponent extends BaseListViewComponent implements public constructor( titleService: Title, matSnackBar: MatSnackBar, + storage: StorageService, public repo: TagRepositoryService, protected translate: TranslateService, // protected required for ng-translate-extract private promptService: PromptService, private dialog: MatDialog, private formBuilder: FormBuilder ) { - super(titleService, translate, matSnackBar); + super(titleService, translate, matSnackBar, storage); } /**