diff --git a/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.html b/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.html index 4aadf5dc83aa5de7167b9aa1e2815ae9cd347b86..82b0157636ad720594e9062cba23f2c402b94aef 100644 --- a/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.html +++ b/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.html @@ -4,6 +4,18 @@ <mat-slide-toggle class="primary" [(ngModel)]="considerVotes"></mat-slide-toggle> </mat-card> + <div align="end"> + <button mat-button [matMenuTriggerFor]="sortMenu" mat-ripple> + <mat-icon>sort</mat-icon> + </button> + </div> + + <mat-menu #sortMenu> + <button mat-menu-item (click)="sortQuestions(sortModeEnum.ALPHABETIC)">Sort Alphabetically</button> + <button mat-menu-item (click)="sortQuestions(sortModeEnum.QUESTIONSCOUNT)">Sort Question Count</button> + <!-- <button mat-menu-item (click)="sortScore(true)" aria-labelledby="sort-lbl-rating">{{'question-wall.sort-score' | translate}}</button> --> + </mat-menu> + <mat-accordion> <mat-expansion-panel *ngFor="let keyword of keywords"> <mat-expansion-panel-header class="color"> @@ -24,10 +36,10 @@ <div *ngIf="!edit && isCreatorOrMod"> <mat-divider></mat-divider> - <button mat-icon-button style="align-self:flex-end;" (click)="editKeyword()"> + <button class="margin-right" mat-icon-button style="align-self:flex-end;" (click)="editKeyword()"> <mat-icon class="primary">edit</mat-icon> </button> - <button mat-icon-button style="align-self:flex-end;" + <button class="margin-right" mat-icon-button style="align-self:flex-end;" (click)="openConfirmDialog(keyword)"> <mat-icon class="warn">delete</mat-icon> </button> @@ -41,10 +53,10 @@ <input matInput [(ngModel)]="newKeyword"> </mat-form-field> <div> - <button mat-icon-button (click)="confirmEdit(keyword.keywordID)"> + <button class="margin-right" mat-icon-button (click)="confirmEdit(keyword.keywordID)"> <mat-icon class="primary">check</mat-icon> </button> - <button mat-icon-button (click)="cancelEdit()"> + <button class="margin-right" mat-icon-button (click)="cancelEdit()"> <mat-icon class="warn">cancel</mat-icon> </button> </div> diff --git a/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.scss b/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.scss index b0840e4578b79061126a186366cad103c8b2343d..a52afae755f1845a12d9d4aede99120022b8b444 100644 --- a/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.scss +++ b/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.scss @@ -4,7 +4,7 @@ } //TODO: hide scrollbar for IE and Firefox -button { +.margin-right { margin-right: 16px; } diff --git a/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.ts b/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.ts index b1c0b533975d8032ffbda43ce1122b562b7b9261..bb613c18ed2f01ea6c0acfbc435d1fc4ae0ec64b 100644 --- a/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.ts +++ b/src/app/components/shared/_dialogs/topic-cloud-dialog/topic-cloud-dialog.component.ts @@ -19,6 +19,8 @@ export class TopicCloudDialogComponent implements OnInit { newKeyword: string = ''; edit: boolean = false; isCreatorOrMod: boolean; + sortMode: SortMode = SortMode.ALPHABETIC; + sortModeEnum: typeof SortMode = SortMode; // needed for use in template keywords: Keyword[] = [ { keywordID: 1, @@ -100,23 +102,25 @@ export class TopicCloudDialogComponent implements OnInit { this.sortQuestions(); } + sortQuestions(sortMode?: SortMode) { + if (sortMode !== undefined) { + this.sortMode = sortMode; + } - - sortQuestions() { - this.keywords.sort((a, b) => a.keyword.localeCompare(b.keyword)); + switch (this.sortMode) { + case SortMode.ALPHABETIC: + this.keywords.sort((a, b) => a.keyword.localeCompare(b.keyword)); + break; + case SortMode.QUESTIONSCOUNT: + this.keywords.sort((a, b) => b.questions.length - a.questions.length); + break; + } } checkIfUserIsModOrCreator() { this.isCreatorOrMod = this.authenticationService.getRole() === UserRole.CREATOR || this.authenticationService.getRole() === UserRole.EDITING_MODERATOR || this.authenticationService.getRole() === UserRole.EDITING_MODERATOR; - // if (this.authenticationService.getRole() === UserRole.CREATOR || - // this.authenticationService.getRole() === UserRole.EDITING_MODERATOR || - // this.authenticationService.getRole() === UserRole.EDITING_MODERATOR){ - // this.isCreatorOrMod = true; - // } else { - // this.isCreatorOrMod = false; - // } } checkIfThereAreQuestions() { @@ -125,7 +129,7 @@ export class TopicCloudDialogComponent implements OnInit { this.notificationService.show(msg); }); this.cloudDialogRef.close(); - } + } } pushToArray(id: number, key: string, questions: string[]){ @@ -134,11 +138,11 @@ export class TopicCloudDialogComponent implements OnInit { keyword: key, questions: questions } - this.keywords.push(_keyword); + this.keywords.push(_keyword); } editKeyword(): void { - this.edit = true; + this.edit = true; } deleteKeyword(id: number): void{ @@ -146,8 +150,9 @@ export class TopicCloudDialogComponent implements OnInit { if (keyword.keywordID == id) this.keywords.splice(this.keywords.indexOf(keyword, 0), 1); }); - if (this.keywords.length == 0) + if (this.keywords.length == 0) { this.cloudDialogRef.close(); + } } cancelEdit(): void { @@ -162,6 +167,7 @@ export class TopicCloudDialogComponent implements OnInit { }); this.edit = false; this.newKeyword = ''; + this.sortQuestions(); } openConfirmDialog(keyword: Keyword): void { @@ -178,6 +184,11 @@ export class TopicCloudDialogComponent implements OnInit { } } +export enum SortMode { + ALPHABETIC, + QUESTIONSCOUNT +} + interface Keyword { keywordID: number; keyword: string;