diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html index 418d28cce964b40b69bbce2549cc098ecdc430ad..791c2868d70f3a83e0ddbcce6bd545b0a161a7dd 100644 --- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html +++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html @@ -334,7 +334,7 @@ <p [ngClass]="{'animation-blink': searchMode}" matTooltip="{{'topic-cloud-dialog.keyword-counter' | translate}}"> {{searchMode ? filteredKeywords.length : - keywords.length}}</p> + selectedTabIndex === 0 ? keywords.length : blacklistKeywords.length}}</p> </div> <div class="margin-left vertical-center"> <button [ngClass]="{'animation-blink': sortMode!=='alphabetic'}" mat-icon-button [matMenuTriggerFor]="sortMenu"> @@ -361,16 +361,15 @@ </button> </mat-menu> - <mat-card class="color-surface" - *ngIf="(keywords.length === 0 || (searchMode && filteredKeywords.length === 0))&&!isLoading"> - <p class="color-on-surface" fxLayoutAlign="center"> - {{'topic-cloud-dialog.no-keywords-note' | translate}} - </p> - </mat-card> - <mat-accordion> - <mat-tab-group animationDuration="0ms" mat-stretch-tabs mat-align-tabs="center"> + <mat-tab-group [selectedIndex]="selectedTabIndex" (selectedIndexChange)="changeTabIndex()" animationDuration="0ms" mat-stretch-tabs mat-align-tabs="center"> <mat-tab label="{{'topic-cloud-dialog.keywords' | translate}}"> + <mat-card class="color-surface" + *ngIf="(keywords.length === 0 || (searchMode && filteredKeywords.length === 0))&&!isLoading"> + <p class="color-on-surface" fxLayoutAlign="center"> + {{'topic-cloud-dialog.no-keywords-note' | translate}} + </p> + </mat-card> <div *ngFor="let keyword of (searchMode ? filteredKeywords : keywords); let i = index"> <mat-expansion-panel class="color-surface" (opened)="panelOpenState = true" (closed)="panelOpenState = edit = false" [attr.data-index]="i" diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts index 1193be5fcd3b7adde13fba1eccd5dcd9a32d0e53..a2c7877166dc38ec752eebe1c81ae04c377a5a5c 100644 --- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts +++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts @@ -59,6 +59,7 @@ export class TopicCloudAdministrationComponent implements OnInit, OnDestroy { minUpvotes: string; startDate: string; endDate: string; + selectedTabIndex = 0; keywords: Keyword[] = []; private topicCloudAdminData: TopicCloudAdminData; @@ -105,6 +106,13 @@ export class TopicCloudAdministrationComponent implements OnInit, OnDestroy { this.initializeKeywords(); } + changeTabIndex() { + this.selectedTabIndex = this.selectedTabIndex === 0 ? 1 : 0; + if (this.searchMode) { + this.searchKeyword(); + } + } + removeFromKeywords(comment: Comment) { for (const keyword of this.keywords) { keyword.comments.forEach(_comment => { @@ -450,10 +458,11 @@ export class TopicCloudAdministrationComponent implements OnInit, OnDestroy { } searchKeyword(): void { + const toFilteredKeywords = this.selectedTabIndex === 0 ? this.keywords : this.blacklistKeywords; if (!this.searchedKeyword) { this.searchMode = false; } else { - this.filteredKeywords = this.keywords.filter(keyword => + this.filteredKeywords = toFilteredKeywords.filter(keyword => keyword.keyword.toLowerCase().includes(this.searchedKeyword.toLowerCase()) ); this.searchMode = true;