Skip to content

Commit

Permalink
Merge pull request #256 from amosproj/feat/xd-244
Browse files Browse the repository at this point in the history 
feat: added empty states everywhere and adjusted the content headers
  • Loading branch information
@PatrickSchm1dt
PatrickSchm1dt authored Jul 15, 2024
2 parents 5ea7880 + ed94d05 commit 36ec362
Show file tree
Hide file tree
Showing 9 changed files with 267 additions and 187 deletions.
93 changes: 52 additions & 41 deletions libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
<div class="absolute top-20 right-4 z-50 flex flex-row-reverse gap-x-4">
<ix-button [routerLink]="['/cases/create']" icon="plus"> Create Case </ix-button>
</div>

<ix-content-header
class="pl-4 pt-4"
hasBackButton="true"
Expand All @@ -10,43 +6,58 @@
(backButtonClick)="location.back()"
></ix-content-header>

<ix-content>
<ix-category-filter
placeholder="Filter by"
[repeatCategories]="repeatCategories"
[categories]="categories"
[filterState]="filterState"
(filterChanged)="filterList($event)"
></ix-category-filter>
@if (!_cases()) {
<ix-empty-state
class="mt-8"
header="No cases available"
subHeader="Create a new case first"
icon="document-fail"
action="New Case"
(actionClick)="navigateToCreateCase()"
></ix-empty-state>
} @else {
<div class="absolute top-20 right-4 z-50 flex flex-row-reverse gap-x-4">
<ix-button [routerLink]="['/cases/create']" icon="plus"> Create Case</ix-button>
</div>

<ix-content>
<ix-category-filter
placeholder="Filter by"
[repeatCategories]="repeatCategories"
[categories]="categories"
[filterState]="filterState"
(filterChanged)="filterList($event)"
></ix-category-filter>

<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Priority</th>
<th scope="col">Priority</th>
<th scope="col">Type</th>
<th scope="col">Due to</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
@for (caseItem of processedCases(); track caseItem.id) {
<tr
[routerLink]="['/cases', caseItem.id]"
class="cursor-pointer"
[ngClass]="getStatusClasses(caseItem)"
>
<th scope="row">{{ caseItem.handle }}</th>
<td>{{ caseItem.title }}</td>
<td>{{ caseItem.status }}</td>
<td>{{ caseItem.priority }}</td>
<td>{{ caseItem.type }}</td>
<td>{{ caseItem.dueDate.toString().substring(0, 10) }}</td>
<td>{{ shortenDescription(caseItem.description) }}</td>
</tr>
}
</tbody>
</table>
</ix-content>
<th scope="col">Due to</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
@for (caseItem of processedCases(); track caseItem.id) {
<tr
[routerLink]="['/cases', caseItem.id]"
class="cursor-pointer"
[ngClass]="getStatusClasses(caseItem)"
>
<th scope="row">{{ caseItem.handle }}</th>
<td>{{ caseItem.title }}</td>
<td>{{ caseItem.status }}</td>
<td>{{ caseItem.priority }}</td>
<td>{{ caseItem.type }}</td>
<td>{{ caseItem.dueDate.toString().substring(0, 10) }}</td>
<td>{{ shortenDescription(caseItem.description) }}</td>
</tr>
}
</tbody>
</table>
</ix-content>
}
9 changes: 7 additions & 2 deletions libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
ViewEncapsulation,
} from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { RouterLink } from '@angular/router';
import { Router, RouterLink } from '@angular/router';
import { XdCasesFacade } from '@frontend/cases/frontend/domain';
import { FilterState, IxCategoryFilterCustomEvent, IxModule } from '@siemens/ix-angular';
import { ECasePriority, ECaseStatus, ECaseType, ICaseResponse } from 'cases-shared-models';
Expand All @@ -30,7 +30,7 @@ export class CaseBrowseComponent {
)
);

private readonly _cases = toSignal(this._casesFacade.getAllCases());
protected readonly _cases = toSignal(this._casesFacade.getAllCases());
protected readonly processedCases = computed(() => {
const initialCases = this._cases();
if (initialCases === undefined) {
Expand Down Expand Up @@ -91,6 +91,7 @@ export class CaseBrowseComponent {
protected location: Location,
protected localStorage: LocalStorageService,
private _casesFacade: XdCasesFacade,
private router: Router
) {}

getStatusClasses(_case: ICaseResponse) {
Expand Down Expand Up @@ -128,4 +129,8 @@ export class CaseBrowseComponent {
return { id: filterParts[0], operator: filterParts[1], value: filterParts[2] };
})
}

navigateToCreateCase() {
this.router.navigate([ '/cases/create' ]);
}
}
83 changes: 47 additions & 36 deletions libs/cases/frontend/view/src/lib/components/create-case/create-case.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
class="pl-4 pt-4"
hasBackButton="true"
headerTitle="Create a new Case"
headerSubtitle="View all facilities and their status"
headerSubtitle="Select a facility and fill in the form to create a new case"
(backButtonClick)="location.back()"
></ix-content-header>

Expand Down Expand Up @@ -48,7 +48,7 @@
<label>Description</label>
<textarea
class="pl-2"

name="text"
[(ngModel)]="createCaseForm.text"
required
Expand Down Expand Up @@ -123,42 +123,53 @@
<ix-button type="submit">Create Case</ix-button>
</form>

<div *ngIf="getFacility() as facility">
<ix-tile size="big" class="mr-1">
<div class="mt-4" slot="header">{{ facility.heading }}</div>
<div class="mt-7 text-l">{{ facility.subheading }}</div>
</ix-tile>
@if (!facilities()) {
<ix-empty-state
class="mt-4"
header="No facilities found"
subHeader="You cannot create a case without facilities"
icon="document-fail"
></ix-empty-state>
} @else {
@if (getFacility(); as facility) {
<div>
<ix-tile size="big" class="mr-1">
<div class="mt-4" slot="header">{{ facility.heading }}</div>
<div class="mt-7 text-l">{{ facility.subheading }}</div>
</ix-tile>

@if (facility.location?.locality !== undefined && facility.location?.country !== undefined) {
<ix-tile class="mt-2" size="small">
<p>{{ facility.location?.locality }}, {{ facility.location?.country }}</p>
</ix-tile>
} @else if (facility.location?.country !== undefined) {
<ix-tile class="mt-2" size="small">
<p>{{ facility.location?.country }}</p>
</ix-tile>
} @else if (facility.location?.locality !== undefined) {
<ix-tile class="mt-2" size="small">
<p>{{ facility.location?.locality }}</p>
</ix-tile>
}
@if (facility.location?.locality !== undefined && facility.location?.country !== undefined) {
<ix-tile class="mt-2" size="small">
<p>{{ facility.location?.locality }}, {{ facility.location?.country }}</p>
</ix-tile>
} @else if (facility.location?.country !== undefined) {
<ix-tile class="mt-2" size="small">
<p>{{ facility.location?.country }}</p>
</ix-tile>
} @else if (facility.location?.locality !== undefined) {
<ix-tile class="mt-2" size="small">
<p>{{ facility.location?.locality }}</p>
</ix-tile>
}

<ix-tile class="mt-2" size="small">
<div class="flex">
<ix-typography color="std">status:&nbsp;</ix-typography>
<ix-typography [ngClass]="StatusToColorRecord[facility.status]"
>{{ facility.status }}
</ix-typography>
</div>
</ix-tile>
<ix-tile class="mt-2" size="small">
<div class="flex">
<ix-typography color="std">status:&nbsp;</ix-typography>
<ix-typography [ngClass]="StatusToColorRecord[facility.status]"
>{{ facility.status }}
</ix-typography>
</div>
</ix-tile>

<ix-button
class="mt-4"
variant="secondary"
[routerLink]="['/facilities', facility.id]"
>
View Facility
</ix-button>
</div>
<ix-button
class="mt-4"
variant="secondary"
[routerLink]="['/facilities', facility.id]"
>
View Facility
</ix-button>
</div>
}
}
</div>
</ix-content>
66 changes: 43 additions & 23 deletions libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,105 @@
@if(casedetail(); as _case){
<ix-content-header
class="pl-4 pt-4"
hasBackButton="true"
[headerTitle]="casedetail() ? 'Details of Case ' + casedetail()?.title : 'Case Details'"
headerSubtitle="On this page you can see detailed information about the case and also edit the case."
(backButtonClick)="location.back()"
></ix-content-header>

@if (casedetail(); as _case) {

<ix-button class="absolute top-20 right-32 z-50" (click)="toggleEdit()" xmlns="http://www.w3.org/1999/html">
{{ isEditing ? 'Submit changes' : 'Update Case' }}
</ix-button>
<ix-icon-button *ngIf="isEditing" class="absolute top-20 right-64 z-50 text-red-600" (click)="cancelEdit()" icon="cancel" iconColor="red">
<ix-icon-button *ngIf="isEditing" class="absolute top-20 right-64 z-50 text-red-600" (click)="cancelEdit()"
icon="cancel" iconColor="red">
Cancel
</ix-icon-button>
<ix-button class="absolute top-20 right-4 z-50" (click)="deleting()">
<ix-button class="absolute top-20 right-4 z-50" (click)="deleting()">
Delete Case
</ix-button>

<ix-content-header
class="pl-4 pt-4"
hasBackButton="true"
headerTitle="Details of Facility {{ _case.title }}"
headerSubtitle="View all facilities and their status"
(backButtonClick)="location.back()"
></ix-content-header>

<ix-content>

<div class="container">
<h1 class="text-xl mb-5">_Case {{ _case.handle }}</h1>
<form class="form-content mb-52" #caseForm="ngForm">
<div class="form-group mb-4 flex flex-col">
<label for="title" class="mb-1 font-bold">Title</label>
<input type="text" id="title" [(ngModel)]="_case.title" name="title" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
<input type="text" id="title" [(ngModel)]="_case.title" name="title" [readonly]="!isEditing"
class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group mb-4 flex flex-col">
<label for="description" class="mb-1 font-bold">Description</label>
<textarea id="description" [(ngModel)]="_case.description" name="description" rows="3" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box"></textarea>
<textarea id="description" [(ngModel)]="_case.description" name="description" rows="3"
[readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box"></textarea>
</div>
<div class="form-row flex justify-between">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="assignedTo" class="mb-1 font-bold">Assigned to</label>
<input type="email" id="assignedTo" [(ngModel)]="_case.createdBy" name="assignedTo" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
<input type="email" id="assignedTo" [(ngModel)]="_case.createdBy" name="assignedTo"
[readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="dueDate" class="mb-1 font-bold">Due date (UTC)</label>
<input type="text" id="dueDate" [(ngModel)]="_case.dueDate" name="dueDate" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
<input type="text" id="dueDate" [(ngModel)]="_case.dueDate" name="dueDate"
[readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
<label *ngIf="_case.overdue" class="text-red-500">Overdue</label>
</div>
</div>
<div class="form-row flex justify-between">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="asset" class="mb-1 font-bold">Asset</label>
<input type="text" id="asset" [(ngModel)]="_case.source" name="asset" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
<input type="text" id="asset" [(ngModel)]="_case.source" name="asset" [readonly]="!isEditing"
class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="type" class="mb-1 font-bold">Type</label>
<input type="text" id="type" [(ngModel)]="_case.type" name="type" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
<input type="text" id="type" [(ngModel)]="_case.type" name="type" [readonly]="!isEditing"
class="w-full p-2 mb-1 rounded border-box">
</div>
</div>
<div class="form-row flex justify-between">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="priority" class="mb-1 font-bold">Priority</label>
<input type="text" id="priority" [(ngModel)]="_case.priority" name="priority" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
<input type="text" id="priority" [(ngModel)]="_case.priority" name="priority"
[readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="status" class="mb-1 font-bold">Status</label>
<input type="text" id="status" [(ngModel)]="_case.status" name="status" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
<input type="text" id="status" [(ngModel)]="_case.status" name="status" [readonly]="!isEditing"
class="w-full p-2 mb-1 rounded border-box">
</div>
</div>
<div class="form-row flex justify-between">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="createdBy" class="font-normal">Created by</label>
<input type="text" id="createdBy" [(ngModel)]="_case.createdBy" name="createdBy" readonly class="w-full p-2 mb-1 rounded border-box">
<input type="text" id="createdBy" [(ngModel)]="_case.createdBy" name="createdBy" readonly
class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="modifiedBy" class="font-bold">Last modified by</label>
<input readonly *ngIf="!isEditing" type="text" id="modifiedBy" [(ngModel)]="_case.modifiedBy" name="modifiedBy" class="w-full p-2 mb-1 rounded border-box">
<input readonly *ngIf="isEditing" type="text" id="NewModifiedBy" value={{getUserMail()}} name="modifiedBy" class="w-full p-2 mb-1 rounded border-box">
<input readonly *ngIf="!isEditing" type="text" id="modifiedBy" [(ngModel)]="_case.modifiedBy"
name="modifiedBy" class="w-full p-2 mb-1 rounded border-box">
<input readonly *ngIf="isEditing" type="text" id="NewModifiedBy" value={{getUserMail()}}
name="modifiedBy" class="w-full p-2 mb-1 rounded border-box">
</div>
</div>
<div class="form-row flex justify-between">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="createdDate" class="mb-1 font-bold">Creation date</label>
<input type="text" id="createdDate" [(ngModel)]="_case.createdAt" name="createdDate" readonly class="w-full p-2 mb-1 rounded border-box">
<input type="text" id="createdDate" [(ngModel)]="_case.createdAt" name="createdDate" readonly
class="w-full p-2 mb-1 rounded border-box">
</div>
</div>
</form>
</div>
</ix-content>
} @else {
<ix-empty-state
class="mt-8"
header="No case with id {{ _caseId }} found"
subHeader="The case you are looking for does not exist"
icon="document-fail"
></ix-empty-state>
}
3 changes: 2 additions & 1 deletion libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,15 @@ import DeleteModalComponent from './delete-modal/deleteModal.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DetailCaseComponent {
protected readonly _caseId = this.route.snapshot.params['id'];
private readonly _casesFacade = inject(XdCasesFacade);
protected readonly _cases = toSignal(this._casesFacade.getAllCases());
protected readonly casedetail = computed(() => {
const _case = this._cases();
if (_case === undefined) {
return;
}
return _case.find((_case) => String(_case.id) === this.route.snapshot.params['id']);
return _case.find((_case) => String(_case.id) === this._caseId);
});

isEditing = false;
Expand Down
Loading

0 comments on commit 36ec362

Please sign in to comment.