Skip to content

Commit

Permalink
Merge pull request #184 from amosproj/feat/xd-80
Browse files Browse the repository at this point in the history 
Feat/xd 80
  • Loading branch information
@PatrickSchm1dt
PatrickSchm1dt authored Jun 19, 2024
2 parents 9a7e444 + c2db0f1 commit 1e5c61b
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 68 deletions.
136 changes: 82 additions & 54 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
@@ -1,74 +1,102 @@
<ix-content>
<div class="grid grid-cols-[auto_250px] gap-10">
<form
class="needs-validation m-3 flex flex-col gap-y-10 w-5/6"
[ngClass]="{ 'was-validated': wasValidated }"
novalidate
#caseForm="ngForm"
(submit)="onSubmit(caseForm)"
>
<ix-select
i18nPlaceholder="Select a Facility"
i18nSelectListHeader="Please select a facility"
name="selectFacility"
[(ngModel)]="createCaseForm.selectFacility"
required
>
@for (facility of facilities(); track facility.id) {
<ix-select-item
[label]="facility.heading"
[value]="facility.id"
></ix-select-item>
}
</ix-select>
<div class="invalid-feedback">Please select a facility</div>
<div class="grid grid-cols-[auto_250px] gap-10">
<form
class="needs-validation m-3 flex flex-col gap-y-10 w-5/6 "
[ngClass]="{ 'was-validated': wasValidated }"
novalidate
#caseForm="ngForm"
(submit)="onSubmit(caseForm)"
>

<ix-input-group>
<span slot="input-start">Title:</span>
<input type="text" name="title" [(ngModel)]="createCaseForm.title" required/>
<div class="invalid-feedback">Please insert a title</div>
</ix-input-group>
<ix-select
id="facilitySelection"
(valueChange)="onFacilityChange($event)"
(inputChange)="onFacilityInputChange($event)"
>
@for (facility of facilities(); track facility.id) {
<ix-select-item
[label]="facility.heading"
[value]="facility.id"
></ix-select-item>
}
</ix-select>
<ix-input-group class="absolute pointer-events-none" id="input-facilitySelection">
<input
[(ngModel)]="createCaseForm.selectFacility"
placeholder="{{facilityPlaceholder()}}"
name="selectFacility"
required
/>
<span slot="input-end"><ix-icon name="chevron-down" size="16"></ix-icon></span>
</ix-input-group>

<ix-input-group>
<span slot="input-start">Title:</span>
<input type="text" name="title" [(ngModel)]="createCaseForm.title" required />
<div class="invalid-feedback">Please insert a title</div>
</ix-input-group>

<textarea
class="pl-2"
placeholder="Enter your Description"
name="text"
[(ngModel)]="createCaseForm.text"
required
></textarea>

<div class="flex flex-row gap-4">

<lib-date-dropdown-wrapper
[(ngModel)]="createCaseForm.dueDate"
name="dueDate"
required
></lib-date-dropdown-wrapper>

<ix-select
name="selectType"
i18nPlaceholder="Type"
i18nSelectListHeader="Select type"
[(ngModel)]="createCaseForm.selectType"
required
>
<ix-select-item label="Planned" [value]="caseType.PLANNED"></ix-select-item>
<ix-select-item label="Incident" [value]="caseType.INCIDENT"></ix-select-item>
<ix-select-item label="Annotation" [value]="caseType.ANNOTATION"></ix-select-item>
</ix-select>
<div class="flex flex-col">
<ix-select
id="typeSelection"
(valueChange)="onTypeChange($event)"
(inputChange)="onTypeInputChange($event)"
>
<ix-select-item label="PLANNED" [value]="caseType.PLANNED"></ix-select-item>
<ix-select-item label="INCIDENT" [value]="caseType.INCIDENT"></ix-select-item>
<ix-select-item label="ANNOTATION" [value]="caseType.ANNOTATION"></ix-select-item>
</ix-select>

<ix-select
name="selectPriority"
i18nPlaceholder="Priority"
i18nSelectListHeader="Select the priority"
[(ngModel)]="createCaseForm.selectPriority"
required
>
<ix-select-item label="Low" [value]="casePriority.LOW"></ix-select-item>
<ix-select-item label="Medium" [value]="casePriority.MEDIUM"></ix-select-item>
<ix-select-item label="High" [value]="casePriority.HIGH"></ix-select-item>
<ix-select-item label="Emergency" [value]="casePriority.EMERGENCY"></ix-select-item>
</ix-select>
<ix-input-group class="absolute pointer-events-none" id="input-typeSelection">
<input
[(ngModel)]="createCaseForm.selectType"
placeholder="{{typePlaceholder()}}"
name="selectType"
required
/>
<span slot="input-end"><ix-icon name="chevron-down" size="16"></ix-icon></span>
</ix-input-group>
</div>

<div class="flex flex-col">
<ix-select
id="prioritySelection"
(valueChange)="onPriorityChange($event)"
(inputChange)="onPriorityInputChange($event)"
>
<ix-select-item label="LOW" [value]="casePriority.LOW"></ix-select-item>
<ix-select-item label="MEDIUM" [value]="casePriority.MEDIUM"></ix-select-item>
<ix-select-item label="HIGH" [value]="casePriority.HIGH"></ix-select-item>
<ix-select-item label="EMERGENCY" [value]="casePriority.EMERGENCY"></ix-select-item>
</ix-select>
<ix-input-group class="absolute pointer-events-none" id="input-prioritySelection">
<input
[(ngModel)]="createCaseForm.selectPriority"
placeholder="{{priorityPlaceholder()}}"
name="selectPriority"
required
/>
<span slot="input-end"><ix-icon name="chevron-down" size="16"></ix-icon></span>
</ix-input-group>
</div>
</div>


<ix-input-group>
<span slot="input-start">Email:</span>
<input
Expand All @@ -82,8 +110,8 @@
<div class="invalid-feedback">Please provide a valid email address</div>
</ix-input-group>

<ix-button type="submit">Create Case</ix-button>
</form>
<ix-button type="submit">Create Case</ix-button>
</form>

<div *ngIf="getFacility() as facility">
<ix-tile size="big" class="mr-1">
Expand Down
87 changes: 74 additions & 13 deletions libs/cases/frontend/view/src/lib/components/create-case/create-case.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
inject, OnInit,
signal,
ViewEncapsulation,
} from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { FormsModule, NG_VALUE_ACCESSOR, NgForm } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { faker } from '@faker-js/faker';
import { XdBrowseFacadesService } from '@frontend/cases/frontend/domain';
import { ECasePriority, ECaseStatus, ECaseType } from '@frontend/cases/shared/models';
import { XdBrowseFacade } from '@frontend/facilities/frontend/domain';
import { IxModule, ToastService } from '@siemens/ix-angular';
import { IxModule, IxSelectCustomEvent, ToastService } from '@siemens/ix-angular';

import { CaseFormData } from '../interfaces/case-form-data.interface';
import { DateDropdownWrapperComponent } from './date-dropdown-accessor';
Expand All @@ -28,30 +34,38 @@ import { DateDropdownWrapperComponent } from './date-dropdown-accessor';
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CreateCaseComponent {
export class CreateCaseComponent implements OnInit {
private readonly _browseFacade = inject(XdBrowseFacade);
protected readonly _browseFacade2 = inject(XdBrowseFacadesService);
protected readonly facilities = toSignal(this._browseFacade.getAllFacilities());

facilityPlaceholder = signal('Select Facility');
typePlaceholder = signal('Select Type');
priorityPlaceholder = signal('Select Priority');

constructor(private readonly toastService: ToastService) {
}

casePriority = ECasePriority;
caseType = ECaseType;
wasValidated = false;
value = '1';

createCaseForm = {
selectFacility: '',
title: '',
dueDate: '',
selectPriority: '',
selectType: '',
phone: '',
email: '',
text: '',
};

ngOnInit(){
this.resizeObserver('input-facilitySelection', 'facilitySelection');
this.resizeObserver('input-typeSelection', 'typeSelection');
this.resizeObserver('input-prioritySelection', 'prioritySelection');
}

/**
* called when the user presses the Create Case Button
*/
Expand Down Expand Up @@ -87,14 +101,6 @@ export class CreateCaseComponent {
return this.createCaseForm.selectFacility;
}

public set phoneValue(value: string) {
this.createCaseForm.phone = value;
}

public get phoneValue() {
return this.createCaseForm.phone;
}

public set emailValue(value: string) {
this.createCaseForm.email = value;
}
Expand All @@ -109,6 +115,61 @@ export class CreateCaseComponent {
);
}

private resizeObserver(inputElement: string, selectElement: string) {
const input = document.getElementById(inputElement);
const select = document.getElementById(selectElement)
if (input && select) {
new ResizeObserver(entries => {
entries.forEach(entry => {
const width = entry.contentRect.width;
const height = entry.contentRect.height;
const xPos = entry.contentRect.x;
const yPos = entry.contentRect.y;
if (input && input.style) {
input.style.width = `${width}px`;
input.style.height = `${height}px`;
input.style.x = `${xPos}`;
input.style.y = `${yPos}`;
}
})
}).observe(select);
}
}


onFacilityChange(event: IxSelectCustomEvent<string | string[]>) {
if (event.target.value !== undefined) {
this.createCaseForm.selectFacility = event.target.value.toString();
}
}

onFacilityInputChange(event: CustomEvent<string>) {
this.createCaseForm.selectFacility = '';
this.facilityPlaceholder.set(event.detail);
}

onTypeChange(event: IxSelectCustomEvent<string | string[]>) {
if (event.target.value !== undefined) {
this.createCaseForm.selectType = event.target.value.toString();
}
}

onTypeInputChange(event: CustomEvent<string>) {
this.createCaseForm.selectType = '';
this.typePlaceholder.set(event.detail);
}

onPriorityChange(event: IxSelectCustomEvent<string | string[]>) {
if (event.target.value !== undefined) {
this.createCaseForm.selectPriority = event.target.value.toString();
}
}

onPriorityInputChange(event: CustomEvent<string>) {
this.createCaseForm.selectPriority = '';
this.priorityPlaceholder.set(event.detail);
}

/**
*
* @param formData case data in the form filled in by the user
Expand Down
1 change: 0 additions & 1 deletion libs/cases/frontend/view/src/lib/components/interfaces/case-form-data.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ export interface CaseFormData {
dueDate: Date;
selectPriority: ECasePriority;
selectType: ECaseType;
phone: string;
email: string;
text: string;
}

0 comments on commit 1e5c61b

Please sign in to comment.