Skip to content

Commit

Permalink
Refactor Recent Events & Add to Org Box- SEAB-5267 (#1735)
Browse files Browse the repository at this point in the history 
* refactor recent events component and add recent events to org box

* missing equal sign

* simplify entry image

* create my org dialog, add org img fallback and update recent events pipe

* update filtering

* typo and add org-selection color
  • Loading branch information
@KimberleyChong
KimberleyChong authored Mar 29, 2023
1 parent a76609e commit 665ea10
Show file tree
Hide file tree
Showing 21 changed files with 480 additions and 374 deletions.
2 changes: 2 additions & 0 deletions src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ import { ExporterStepComponent } from './workflow/snapshot-exporter-modal/export
import { SnaphotExporterModalComponent } from './workflow/snapshot-exporter-modal/snaphot-exporter-modal.component';
import { ViewService } from './workflow/view/view.service';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { MyOrganizationsDialogComponent } from './home-page/widget/organization-box/my-organizations-dialog.component/my-organizations-dialog.component';

export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
showDelay: 500,
Expand Down Expand Up @@ -171,6 +172,7 @@ export function initializerFactory(
FileTreeComponent,
ChangeUsernameBannerComponent,
RevokeTokenDialogComponent,
MyOrganizationsDialogComponent,
],
imports: [
environment.production ? [] : AkitaNgDevtools.forRoot(),
Expand Down
6 changes: 0 additions & 6 deletions src/app/home-page/home-logged-in/home-logged-in.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,6 @@ <h3>Explore Featured Content</h3>
<app-alert></app-alert>
<app-featured-content></app-featured-content>
</div>
<div class="widget-section">
<h3>Recent Activity</h3>
<div class="m-auto mw-macbook-13">
<app-recent-events></app-recent-events>
</div>
</div>
</div>
<div
fxLayout="column"
Expand Down
2 changes: 2 additions & 0 deletions src/app/home-page/home-page.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import { StarredBoxComponent } from './widget/starred-box/starred-box.component'
import { HeaderModule } from 'app/shared/modules/header.module';
import { NewsBoxComponent } from './widget/news-box/news-box.component';
import { MarkdownWrapperModule } from '../shared/modules/markdown-wrapper.module';
import { PipeModule } from '../shared/pipe/pipe.module';

@NgModule({
imports: [
Expand All @@ -64,6 +65,7 @@ import { MarkdownWrapperModule } from '../shared/modules/markdown-wrapper.module
RefreshWizardModule,
HeaderModule,
MarkdownWrapperModule,
PipeModule,
],
declarations: [
HomeComponent,
Expand Down
2 changes: 1 addition & 1 deletion src/app/home-page/new-dashboard/new-dashboard.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@import '/src/materialColorScheme.scss';

.entry-holder {
min-height: 48rem;
min-height: 43rem;
}

.updates-holder {
Expand Down
268 changes: 182 additions & 86 deletions src/app/home-page/recent-events/recent-events.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,199 @@
<app-loading [loading]="loading$ | async">
<div *ngIf="noEvents$ | async">
<mat-card class="alert alert-info mat-elevation-z mx-1" role="alert">
<mat-icon>info</mat-icon> No events found. Star entries or organizations to see events for them. Read
<a [href]="starringDocUrl" target="_blank" rel="noopener noreferrer">Starring Tools and Workflows</a>
to learn how to star entries.
</mat-card>
</div>
<!-- Possible changes: Toggle highlighting of verbs and nouns. Toggle dates into a separate column to the left -->
<mat-card *ngIf="(events$ | async)?.length > 0">
<div fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="1.6rem">
<div *ngFor="let event of events$ | async; last as last">
<div [ngSwitch]="event?.type">
<div *ngSwitchCase="EventType.ADDVERSIONTOENTRY">
<strong>{{ event.initiatorUser?.username }} </strong> created the {{ event.version?.referenceType | lowercase }}
<strong>{{ event.version?.name }}</strong> in {{ event?.tool || event?.apptool ? 'tool' : 'workflow' }}
<a
[routerLink]="
event?.apptool
? '/tools/' + event?.apptool?.full_workflow_path
: event?.tool
? '/tools/' + event?.tool?.tool_path
: '/workflows/' + event?.workflow?.full_workflow_path
"
>{{
(event?.tool | entryToDisplayName) || (event?.workflow | entryToDisplayName) || (event?.apptool | entryToDisplayName)
}}</a
<div *ngIf="events?.length > 0 || isLoading; else noEvents">
<div
*ngFor="let event of events | slice: 0:displayLimit"
class="size-small widget-list-items event"
fxLayout
fxLayoutAlign="space-between center"
>
<div fxLayout>
<a [routerLink]="'/users/' + event.initiatorUser?.username">
<img src="{{ event?.initiatorUser?.avatarUrl }}" alt="User avatar" />
</a>
<div [ngSwitch]="event.type" class="my-3">
<!-- Entries -->
<div *ngSwitchCase="EventType.PUBLISHENTRY" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
published the {{ event | recentEvents: 'entryType' }}
<a [routerLink]="event | recentEvents: 'entryLink'">{{ event | recentEvents: 'displayName' }}</a>
</div>
<div *ngSwitchCase="EventType.UNPUBLISHENTRY" class="truncate-text-2">
<!-- Do not link to an entry that doesn't exist - 404 -->
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
<div class="subtitle">{{ 'on ' + (event.dbCreateDate | date: 'medium') }}</div>
<mat-divider *ngIf="!last" class="custom-margin"></mat-divider>
unpublished the {{ event | recentEvents: 'entryType' }} <strong>{{ event | recentEvents: 'displayName' }}</strong>
</div>
<div *ngSwitchCase="EventType.CREATECOLLECTION">
<strong>{{ event.initiatorUser?.username }}</strong> created the collection
<a [routerLink]="'/organizations/' + event.organization?.name + '/collections/' + event.collection?.name"
>{{ event.collection?.name }}
</a>
<div *ngSwitchCase="EventType.ADDVERSIONTOENTRY" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
created the {{ event.version?.referenceType | lowercase }} <strong>{{ event.version?.name }}</strong> in
{{ event | recentEvents: 'entryType' }}
<a [routerLink]="event | recentEvents: 'entryLink'">{{ event | recentEvents: 'displayName' }}</a>
</div>
<!-- Organizations -->
<div *ngSwitchCase="EventType.CREATEORG" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
created the organization
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
</div>
<div *ngSwitchCase="EventType.APPROVEORG" class="truncate-text-2">
The organization
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
was approved.
</div>
<div *ngSwitchCase="EventType.REJECTORG" class="truncate-text-2">
The organization
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
was rejected.
</div>
<div *ngSwitchCase="EventType.REREQUESTORG" class="truncate-text-2">
The organization
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
was re-requested for review.
</div>
<div *ngSwitchCase="EventType.ADDUSERTOORG" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
added {{ event.user.username }} to the organization
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
</div>
<div *ngSwitchCase="EventType.APPROVEORGINVITE" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
joined the organization
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
</div>
<div *ngSwitchCase="EventType.MODIFYORG" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
updated the organization
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
</div>
<!-- Collections -->
<div *ngSwitchCase="EventType.CREATECOLLECTION" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
created the collection
<a [routerLink]="event | recentEvents: 'collectionLink'">{{ event.collection?.name }}</a>
in organization
<a [routerLink]="'/organizations/' + event.organization?.name">{{ event.organization?.displayName }}</a>
<div class="subtitle">{{ 'on ' + (event.dbCreateDate | date: 'medium') }}</div>
<mat-divider *ngIf="!last" class="custom-margin"></mat-divider>
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
</div>
<div *ngSwitchCase="EventType.DELETECOLLECTION" class="truncate-text-2">
<!-- Do not link to a collection that doesn't exist - 404 -->
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
removed the collection <strong>{{ event.collection?.name }}</strong> in organization
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
</div>
<div *ngSwitchCase="EventType.ADDTOCOLLECTION">
<strong>{{ event.initiatorUser.username }} </strong> added the {{ event?.tool || event?.apptool ? 'tool' : 'workflow' }}
<a
[routerLink]="
event?.apptool
? '/tools/' + event?.apptool?.full_workflow_path
: event?.tool
? '/tools/' + event?.tool?.tool_path
: '/workflows/' + event?.workflow?.full_workflow_path
"
>{{
(event?.tool | entryToDisplayName) || (event?.workflow | entryToDisplayName) || (event?.apptool | entryToDisplayName)
}}</a
<div *ngSwitchCase="EventType.ADDTOCOLLECTION" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
added the {{ event | recentEvents: 'entryType' }}
<a [routerLink]="event | recentEvents: 'entryLink'">{{ event | recentEvents: 'displayName' }}</a>
to the collection
<a [routerLink]="'/organizations/' + event.organization?.name + '/collections/' + event.collection?.name"
>{{ event.collection?.name }}
</a>
<a [routerLink]="event | recentEvents: 'collectionLink'">{{ event.collection?.name }}</a>
in organization
<a [routerLink]="'/organizations/' + event.organization?.name">{{ event.organization?.displayName }}</a>
<div class="subtitle">{{ 'on ' + (event.dbCreateDate | date: 'medium') }}</div>
<mat-divider *ngIf="!last" class="custom-margin"></mat-divider>
<a [routerLink]="event | recentEvents: 'orgLink'">{{ event.organization?.displayName }}</a>
</div>
<div *ngSwitchCase="EventType.PUBLISHENTRY">
<strong>{{ event.user.username }} </strong> published the {{ event?.tool || event?.apptool ? 'tool' : 'workflow' }}
<a
[routerLink]="
event?.apptool
? '/tools/' + event?.apptool?.full_workflow_path
: event?.tool
? '/tools/' + event?.tool?.tool_path
: '/workflows/' + event?.workflow?.full_workflow_path
"
>{{
(event?.tool | entryToDisplayName) || (event?.workflow | entryToDisplayName) || (event?.apptool | entryToDisplayName)
}}</a
<div *ngSwitchCase="EventType.MODIFYCOLLECTION" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
<div class="subtitle">{{ 'on ' + (event.dbCreateDate | date: 'medium') }}</div>
<mat-divider *ngIf="!last" class="custom-margin"></mat-divider>
edited the collection
<a [routerLink]="event | recentEvents: 'collectionLink'">{{ event.collection?.name }}</a>
</div>
<div *ngSwitchCase="EventType.UNPUBLISHENTRY">
<strong>{{ event.user.username }} </strong> unpublished the {{ event?.tool || event?.apptool ? 'tool' : 'workflow' }}
<a
[routerLink]="
event?.apptool
? '/tools/' + event?.apptool?.full_workflow_path
: event?.tool
? '/tools/' + event?.tool?.tool_path
: '/workflows/' + event?.workflow?.full_workflow_path
"
>{{
(event?.tool | entryToDisplayName) || (event?.workflow | entryToDisplayName) || (event?.apptool | entryToDisplayName)
}}</a
<div *ngSwitchCase="EventType.REMOVEFROMCOLLECTION" class="truncate-text-2">
<strong
><a class="no-underline" [routerLink]="'/users/' + event.initiatorUser?.username">{{
event.initiatorUser?.username
}}</a></strong
>
<div class="subtitle">{{ 'on ' + (event.dbCreateDate | date: 'medium') }}</div>
<mat-divider *ngIf="!last" class="custom-margin"></mat-divider>
removed the {{ event | recentEvents: 'entryType' }}
<a [routerLink]="event | recentEvents: 'entryLink'">{{ event | recentEvents: 'displayName' }}</a>
from the collection
<a [routerLink]="event | recentEvents: 'collectionLink'">{{ event.collection?.name }}</a>
</div>
<div class="subtitle">{{ event.dbCreateDate | date: 'medium' }}</div>
</div>
</div>
<div
*ngIf="
event.type === EventType.ADDVERSIONTOENTRY || event.type === EventType.PUBLISHENTRY || event.type === EventType.UNPUBLISHENTRY;
else orgImg
"
>
<a *ngIf="event.type !== EventType.UNPUBLISHENTRY; else noLink" [routerLink]="event | recentEvents: 'entryLink'">
<img
src="../../../assets/svg/sub-nav/{{ event | recentEvents: 'entryType' }}.svg"
class="site-icons-medium mx-3"
alt="{{ event | recentEvents: 'entryType' }} icon"
/>
</a>
<!-- Do not link to an entry that doesn't exist - 404 -->
<ng-template #noLink>
<img
src="../../../assets/svg/sub-nav/{{ event | recentEvents: 'entryType' }}.svg"
class="site-icons-medium mx-3"
alt="{{ event | recentEvents: 'entryType' }} icon"
/>
</ng-template>
</div>
<ng-template #orgImg>
<a *ngIf="event.organization?.avatarUrl; else orgIcon" [routerLink]="event | recentEvents: 'orgLink'">
<img
class="entry-img p-2"
[src]="event.organization.avatarUrl | gravatar"
[appFallback]="orgLogoService.DEFAULT_URL"
alt="Org avatar"
/>
</a>
<ng-template #orgIcon>
<a [routerLink]="event | recentEvents: 'orgLink'">
<img src="../../../assets/svg/sub-nav/organization.svg" class="site-icons-medium mx-3" alt="Org icon" />
</a>
</ng-template>
</ng-template>
</div>
</mat-card>
</div>
<ng-template #noEvents>
<mat-card class="alert alert-info mat-elevation-z mx-1" role="alert">
<mat-icon>info</mat-icon> No events found. Star entries or organizations to see events for them. Read
<a [href]="starringDocUrl" target="_blank" rel="noopener noreferrer">Starring Tools and Workflows</a>
to learn how to star entries.
</mat-card>
</ng-template>
</app-loading>
5 changes: 0 additions & 5 deletions src/app/home-page/recent-events/recent-events.component.scss
View file

This file was deleted.

Loading

0 comments on commit 665ea10

Please sign in to comment.