Skip to content

Commit

Permalink
Merge pull request #1550 from DSD-DBS/refactor-diagram-cache-apply-ne…
Browse files Browse the repository at this point in the history 
…w-control-flow

refactor: Apply new angular control flow to diagram cache component
  • Loading branch information
@MoritzWeber0
MoritzWeber0 authored May 7, 2024
2 parents 52dc875 + a535e93 commit 3400b16
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 92 deletions.
164 changes: 75 additions & 89 deletions ...src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,97 +27,83 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
/>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<span *ngIf="filteredDiagrams"
>{{ filteredDiagrams.length }} diagram(s) found:
</span>
<div class="flex flex-wrap gap-5">
<div
class="collab-card !flex grow basis-[calc(30%-20px)] flex-col justify-between"
#diagram
[id]="diagram.uuid"
[attr.success]="diagram.success"
*ngFor="let diagram of filteredDiagrams"
>
<img
(click)="openModelDiagramPreviewDialog(diagram)"
matTooltip="Open preview"
*ngIf="diagram.success && diagrams[diagram.uuid]?.content"
class="mb-2 h-[200px] w-full !touch-auto hover:cursor-pointer"
[src]="diagrams[diagram.uuid].content"
/>
<ngx-skeleton-loader
class="mb-2 w-full"
*ngIf="
(!diagrams[diagram.uuid] && diagram.success) ||
diagrams[diagram.uuid]?.loading
"
[theme]="{
'border-radius': '5px',
margin: 0,
padding: 0,
height: '200px',
width: '100%',
border: '1px solid white'
}"
></ngx-skeleton-loader>
<div *ngIf="!diagram.success" class="diagram-error">
<mat-icon class="scale-[2] text-red-900">error</mat-icon> <br />
Diagram export has failed. <br />Please contact your diagram cache
administrator.
</div>
<div
*ngIf="
diagram.success &&
diagrams[diagram.uuid] &&
diagrams[diagram.uuid].content === null
"
class="diagram-error"
>
<mat-icon>error</mat-icon> <br />
Error loading the diagram from the server. <br />Please try again later.
<br />
If the problem persists, please contact your diagram cache
administrator.
</div>
<div class="mb-2 flex flex-nowrap justify-between">
<div class="overflow-y-hidden">
<div class="text-lg">{{ diagram.name }}</div>
<div class="text-gray-700">UUID: {{ diagram.uuid }}</div>
</div>
</div>
<button
class="mx-0 my-[5px] w-full"
(click)="downloadDiagram(diagram.uuid)"
mat-raised-button
[disabled]="!diagram.success"
>
<mat-icon>cloud_download</mat-icon> Download
</button>
</div>
</div>
<div class="flex flex-wrap" *ngIf="filteredDiagrams === undefined">
<ngx-skeleton-loader
*ngFor="let _ of loaderArray"
class="m-2 grow basis-[calc(30%-20px)]"
[theme]="{
'border-radius': '5px',
height: '332px',
'min-width': '208px',
border: '1px solid white'
}"
></ngx-skeleton-loader>
</div>
<div *ngIf="this.diagramMetadata?.diagrams?.length === 0">

@if (this.diagramMetadata?.diagrams?.length === 0) {
Your model doesn't seem to contain diagrams.
</div>
<div
*ngIf="
this.diagramMetadata?.diagrams?.length !== 0 &&
filteredDiagrams?.length === 0
"
>
} @else if (filteredDiagrams === undefined) {
<div class="flex flex-wrap">
@for (_ of loaderArray; track $index) {
<ngx-skeleton-loader
class="m-2 grow basis-[calc(30%-20px)]"
[theme]="{
'border-radius': '5px',
height: '332px',
'min-width': '208px',
border: '1px solid white'
}"
></ngx-skeleton-loader>
}
</div>
} @else if (filteredDiagrams.length === 0) {
No diagrams for the given filter found. Please remove your search query.
</div>
} @else {
<span> {{ filteredDiagrams.length }} diagram(s) found: </span>
<div class="flex flex-wrap gap-5">
@for (diagram of filteredDiagrams; track diagram.uuid) {
<div
class="collab-card !flex grow basis-[calc(30%-20px)] flex-col justify-between"
#diagram
[id]="diagram.uuid"
[attr.success]="diagram.success"
>
@if (diagram.success) {
@if (!diagrams[diagram.uuid] || diagrams[diagram.uuid].loading) {
<ngx-skeleton-loader
class="mb-2 w-full"
[theme]="{
'border-radius': '5px',
margin: 0,
padding: 0,
height: '200px',
width: '100%',
border: '1px solid white'
}"
></ngx-skeleton-loader>
} @else if (diagrams[diagram.uuid].content) {
<img
(click)="openModelDiagramPreviewDialog(diagram)"
matTooltip="Open preview"
class="mb-2 h-[200px] w-full !touch-auto hover:cursor-pointer"
[src]="diagrams[diagram.uuid].content"
/>
}
} @else {
<div class="diagram-error">
<mat-icon class="scale-[2] text-red-900">error</mat-icon> <br />
Diagram export has failed. <br />
Please contact your diagram cache administrator.
</div>
}

<div class="mb-2 flex flex-nowrap justify-between">
<div class="overflow-y-hidden">
<div class="text-lg">{{ diagram.name }}</div>
<div class="text-gray-700">UUID: {{ diagram.uuid }}</div>
</div>
</div>
<button
class="mx-0 my-[5px] w-full"
(click)="downloadDiagram(diagram.uuid)"
mat-raised-button
[disabled]="!diagram.success"
>
<mat-icon>cloud_download</mat-icon> Download
</button>
</div>
}
</div>
}

<div class="sticky bottom-0 w-full bg-white md:hidden">
<mat-divider class="my-2"></mat-divider>
<button class="w-full" mat-button mat-dialog-close>Close</button>
Expand Down
4 changes: 1 addition & 3 deletions ...d/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { NgIf, NgFor, DatePipe } from '@angular/common';
import { DatePipe } from '@angular/common';
import {
Component,
Inject,
Expand Down Expand Up @@ -57,8 +57,6 @@ import { ModelDiagramCodeBlockComponent } from './model-diagram-code-block/model
FormsModule,
MatIcon,
MatSuffix,
NgIf,
NgFor,
MatTooltip,
NgxSkeletonLoaderModule,
MatButton,
Expand Down

0 comments on commit 3400b16

Please sign in to comment.