Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added empty states everywhere and adjusted the content headers #256

Merged
merged 3 commits into from
Jul 15, 2024
Merged

feat: added empty states everywhere and adjusted the content headers #256

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
46ecc9e
feat: added empty states everywhere and adjusted the content headers
PatrickSchm1dt Jul 13, 2024
adb83f1
refactor: moved the content headers outside of the if; fixed the faci…
PatrickSchm1dt Jul 15, 2024
ed94d05
Merge branch 'develop' into feat/xd-244
PatrickSchm1dt Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 52 additions & 41 deletions libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html
View file
Open in desktop
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
Open in desktop
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 { ICaseResponse } from 'cases-shared-models';
Expand All @@ -29,7 +29,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 @@ -90,6 +90,7 @@ export class CaseBrowseComponent {
protected location: Location,
protected localStorage: LocalStorageService,
private _casesFacade: XdCasesFacade,
private router: Router
) {}

getStatusClasses(_case: ICaseResponse) {
Expand Down Expand Up @@ -127,4 +128,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
Open in desktop
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>
62 changes: 45 additions & 17 deletions libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
@if(casedetail(); as _case){
@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"
headerTitle="Details of Case {{ _case.title }}"
headerSubtitle="On this page you can see detailed information about the case and also edit the case."
(backButtonClick)="location.back()"
></ix-content-header>

Expand All @@ -25,61 +26,88 @@ <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-content-header
class="pl-4 pt-4"
hasBackButton="true"
headerTitle="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>
PatrickSchm1dt marked this conversation as resolved.
Show resolved Hide resolved

<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
Open in desktop
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