MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

refactor dashboard recent activity listing

This commit is contained in:
mchouliara 2024-09-04 14:17:22 +03:00
parent 4d13fc5443
commit 0c209d5360
4 changed files with 73 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/app/ui/dashboard/dashboard.component.html
View File

@ -59,16 +59,30 @@
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<mat-tab-group dynamicHeight color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
<mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}}">
<app-recent-edited-activity [isActive]="currentType == 'recent'" [includePlans]="true" [includeDescriptions]="true"></app-recent-edited-activity>
<app-recent-edited-activity
[currentType]="currentType"
[type]="ActivityListingType.Recent"
></app-recent-edited-activity>
</mat-tab>
<mat-tab aria-label="drafts" label="{{'DASHBOARD.DRAFTS' | translate}}">
<app-recent-edited-activity [isActive]="currentType == 'drafts'" [includePlans]="true" [includeDescriptions]="true" [onlyDrafts]="true" type="drafts" [selectedType]="currentType"></app-recent-edited-activity>
<app-recent-edited-activity
[currentType]="currentType"
[type]="ActivityListingType.Drafts"
></app-recent-edited-activity>
</mat-tab>
<mat-tab aria-label="plans" label="{{'DASHBOARD.PLANS' | translate}}">
<app-recent-edited-activity [isActive]="currentType == 'plans'" [includePlans]="true" type="plans" [selectedType]="currentType"></app-recent-edited-activity>
<app-recent-edited-activity
[currentType]="currentType"
[type]="ActivityListingType.Plans"
></app-recent-edited-activity>
</mat-tab>
<mat-tab aria-label="descriptions" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
<app-recent-edited-activity [isActive]="currentType == 'descriptions'" [includeDescriptions]="true" type="descriptions" [selectedType]="currentType" [hasPlans]="this.hasPlans()" (addNewDescription)="addNewDescription($event)"></app-recent-edited-activity>
<app-recent-edited-activity
[currentType]="currentType"
[type]="ActivityListingType.Descriptions"
[hasPlans]="this.hasPlans()"
(addNewDescription)="addNewDescription($event)"
></app-recent-edited-activity>
</mat-tab>
</mat-tab-group>
</div>

36
frontend/src/app/ui/dashboard/dashboard.component.ts
View File

@ -31,10 +31,12 @@ export class DashboardComponent extends BaseComponent implements OnInit {
public dashboardStatistics: DashboardStatistics;
public grantCount = 0;
public organizationCount = 0;
currentType: string = "recent";
currentType: ActivityListingType = ActivityListingType.Recent;
newReleaseNotificationVisible = false;
isIntroCardVisible = true;
ActivityListingType = ActivityListingType;
constructor(
public routerUtils: RouterUtilsService,
private router: Router,
@ -57,11 +59,7 @@ export class DashboardComponent extends BaseComponent implements OnInit {
ngOnInit() {
this.route.queryParams.subscribe(params => {
let type = params['type'];
if (type || type == "recent" || (type == "drafts" && this.isAuthenticated()) || type == "plans" || type == "descriptions") {
this.currentType = type;
} else {
this.currentType = "recent";
}
this.currentType = type ?? ActivityListingType.Recent
});
this.analyticsService.trackPageView(AnalyticsService.Dashboard);
@ -92,20 +90,13 @@ export class DashboardComponent extends BaseComponent implements OnInit {
}
public get indexFromCurrentType() {
if (this.currentType == "recent") {
return 0;
}
if (this.currentType == "drafts") {
return 1;
}
if (this.currentType == "plans") {
return this.isAuthenticated() ? 2 : 1;
}
if (this.currentType == "descriptions") {
return this.isAuthenticated() ? 3 : 2;
}
return 0;
switch(this.currentType){
case ActivityListingType.Recent: return 0;
case ActivityListingType.Drafts: return 1;
case ActivityListingType.Plans: return this.isAuthenticated() ? 2 : 1;
case ActivityListingType.Descriptions: return this.isAuthenticated() ? 3 : 2;
}
}
public isAuthenticated(): boolean {
@ -255,3 +246,10 @@ export class DashboardComponent extends BaseComponent implements OnInit {
return true;
}
}
export enum ActivityListingType {
'Recent'= 'recent',
'Drafts' = 'drafts',
'Plans' = 'plans',
'Descriptions' = 'descriptions'
}

2
frontend/src/app/ui/dashboard/dashboard.module.ts
View File

@ -25,7 +25,7 @@ import { RecentEditedActivityComponent } from './recent-edited-activity/recent-e
],
declarations: [
DashboardComponent,
RecentEditedActivityComponent,
RecentEditedActivityComponent,
]
})
export class DashboardModule { }

56
frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
View File

@ -1,5 +1,5 @@
import { Location } from '@angular/common';
import { Component, Input, OnInit, Output } from '@angular/core';
import { Component, computed, effect, input, Input, OnInit, Output } from '@angular/core';
import { UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { DescriptionStatusEnum } from '@app/core/common/enum/description-status';
@ -27,6 +27,7 @@ import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/
import { BehaviorSubject } from 'rxjs';
import { debounceTime, map, takeUntil } from 'rxjs/operators';
import { nameof } from 'ts-simple-nameof';
import { ActivityListingType } from '../dashboard.component';
@Component({
selector: 'app-recent-edited-activity',
@ -43,15 +44,32 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
pageSize: number = 5;
listingItems: RecentActivityItem[]= [];
@Input() type: string;
@Input() selectedType: string;
@Input() includeDescriptions: boolean = false;
@Input() includePlans: boolean = false;
@Input() onlyDrafts: boolean = false;
@Input() type: ActivityListingType = ActivityListingType.Recent;
@Input() hasPlans: boolean = false;
@Output() addNewDescription: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
currentType = input<ActivityListingType>();
isActive = computed(() => this.currentType() === this.type);
get onlyDrafts(): boolean {
return this.type === ActivityListingType.Drafts;
}
get includeDescriptions(): boolean {
const activityListingTypes = [ActivityListingType.Recent, ActivityListingType.Drafts, ActivityListingType.Descriptions]
return activityListingTypes.includes(this.type);
}
get includePlans(): boolean {
const activityListingTypes = [ActivityListingType.Recent, ActivityListingType.Drafts, ActivityListingType.Plans]
return activityListingTypes.includes(this.type);
}
get isDefault(): boolean {
return this.type === ActivityListingType.Recent;
}
get onlyPlans(): boolean {
return this.includePlans && !this.includeDescriptions;
}
@ -72,7 +90,6 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
totalCount: number;
offsetLess: number = 0;
@Input() isActive: boolean = false;
constructor(
private route: ActivatedRoute,
@ -86,12 +103,17 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
private httpErrorHandlingService: HttpErrorHandlingService
) {
super();
effect(() => {
if(this.isActive()){ //on Type Changes
this.updateUrl();
}
})
}
ngOnInit() {
this.analyticsService.trackPageView(AnalyticsService.RecentEditedActivity);
this.route.queryParams.subscribe(params => {
if (this.isActive) {
if (this.isActive()) {
let page = (params['page'] === undefined) ? 0 : + params['page'];
this.currentPage = (page <= 0) ? 0 : page;
@ -123,24 +145,20 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
this.refresh()
});
if (!this.formGroup.get('order').value) this.formGroup.get('order').setValue(this.order.UpdatedAt);
if (!this.formGroup.get('order').value){
this.formGroup.get('order').setValue(this.order.UpdatedAt);
}
this.formGroup.get('order').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
.subscribe(x => {this.refresh()});
this.refresh();
}
ngOnChanges() {
if (this.isActive) {
this.updateUrl();
}
}
updateUrl() {
let parametersArray: string[] = [
...( this.selectedType && this.type === this.selectedType ? ["type=" + this.selectedType] : []),
...( !this.isDefault && this.isActive() ? ["type=" + this.type] : []),
...(this.currentPage > 1 ? ["page=" + this.currentPage] : []),
...(this.formGroup.get("like").value ? ["keyword=" + this.formGroup.get("like").value] : [])
]