Skip to content

Commit 91fc95c

Browse files
renemadsenrenemadsen
committed
Improving the styling of some tables.
1 parent 3cb9fd8 commit 91fc95c

File tree

6 files changed

+94
-15
lines changed

6 files changed

+94
-15
lines changed

‎eform-client/src/app/plugins/modules/backend-configuration-pn/models/device-users/device-user.model.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export class DeviceUserModel {
33
siteId: number;
44
siteUid: number;
55
siteName: string;
6-
propertyNames: string;
6+
propertyNames: string | string[];
77
propertyIds: number[];
88
userFirstName: string;
99
userLastName: string;

‎eform-client/src/app/plugins/modules/backend-configuration-pn/modules/property-workers/components/property-worker-table/property-worker-table.component.html‎

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
[columns]="tableHeaders"
44
[cellTemplate]="{
55
siteId: deviceUserIdTpl,
6+
propertyNames: propertyNamesTpl,
67
siteName: fullNameTpl,
78
workerEmail: workerEmailTpl,
89
phoneNumber: phoneNumberTpl,
@@ -46,6 +47,14 @@
4647
</div>
4748
</ng-template>
4849

50+
<ng-template #propertyNamesTpl let-row>
51+
<div class="d-flex flex-wrap">
52+
<mat-chip color="primary" *ngFor="let name of row.propertyNames">
53+
<span>{{name}}</span>
54+
</mat-chip>
55+
</div>
56+
</ng-template>
57+
4958
<!--<ng-template #deviceUserIdTpl let-row let-i="index">-->
5059
<!-- <div class="deviceUserId" id="deviceUserId-{{i}}">{{row.siteId}}</div>-->
5160
<!--</ng-template>-->
@@ -60,6 +69,16 @@
6069
</ng-container></div>
6170
</ng-template>
6271

72+
<!--<ng-template #propertyNamesTpl let-row>-->
73+
<!-- <div class="d-flex flex-column">-->
74+
<!-- <div *ngFor="let bla of row.propertyNames">-->
75+
<!-- <mat-chip color="primary">-->
76+
<!-- <span>{{bla}}</span>-->
77+
<!-- </mat-chip>-->
78+
<!-- </div>-->
79+
<!-- </div>-->
80+
<!--</ng-template>-->
81+
6382
<ng-template #fullNameTpl let-row let-i="index">
6483
<div class="deviceUserFullName" id="deviceUserFullName-{{i}}">{{row.siteName}}</div>
6584
</ng-template>
@@ -132,16 +151,43 @@
132151

133152
<ng-template #manufacturerTpl let-row>
134153
<ng-container *ngIf="row.osVersion !== null">
135-
<div class="manufacturer" id="manufacturer-{{row.id}}">
136-
{{row.model}} ({{row.osVersion}})
137-
</div>
154+
<ng-container *ngIf="row['manufacturer'] === 'iOS' ">
155+
<div class="manufacturer" id="manufacturer-{{row.id}}">
156+
<span [matTooltip]="row['deviceModel']" class="neutral-icon">
157+
<mat-icon>phone_iphone</mat-icon>
158+
</span>
159+
{{row.model}} ({{row.osVersion}})
160+
</div>
161+
</ng-container>
162+
<ng-container *ngIf="row['manufacturer'] === 'Android' ">
163+
<div class="manufacturer" id="manufacturer-{{row.id}}">
164+
<span [matTooltip]="row['deviceModel']" class="neutral-icon">
165+
<mat-icon>android</mat-icon>
166+
</span>
167+
{{row.model}} ({{row.osVersion}})
168+
</div>
169+
</ng-container>
138170
</ng-container>
139171
</ng-template>
140172

141173
<ng-template #taskManagementEnabledTpl let-row>
142-
<span title="{{TaskWizardStatusesEnum[row.taskManagementEnabled ? 1 : 2] | translate}}">{{TaskWizardStatusesEnum[row.taskManagementEnabled ? 1 : 2] | translate}}</span>
174+
<mat-chip
175+
[ngClass]="{
176+
'status-active': TaskWizardStatusesEnum[row.taskManagementEnabled ? 1 : 2] === 'Active',
177+
'status-inactive': TaskWizardStatusesEnum[row.taskManagementEnabled ? 1 : 2] !== 'Active'
178+
}"
179+
>
180+
<span title="{{TaskWizardStatusesEnum[row.taskManagementEnabled ? 1 : 2] | translate}}">{{TaskWizardStatusesEnum[row.taskManagementEnabled ? 1 : 2] | translate}}</span>
181+
</mat-chip>
143182
</ng-template>
144183

145184
<ng-template #timeRegistrationEnabledTpl let-row>
146-
<span title="{{TaskWizardStatusesEnum[row.timeRegistrationEnabled ? 1 : 2] | translate}}">{{TaskWizardStatusesEnum[row.timeRegistrationEnabled ? 1 : 2] | translate}}</span>
185+
<mat-chip
186+
[ngClass]="{
187+
'status-active': TaskWizardStatusesEnum[row.timeRegistrationEnabled ? 1 : 2] === 'Active',
188+
'status-inactive': TaskWizardStatusesEnum[row.timeRegistrationEnabled ? 1 : 2] !== 'Active'
189+
}"
190+
>
191+
<span title="{{TaskWizardStatusesEnum[row.timeRegistrationEnabled ? 1 : 2] | translate}}">{{TaskWizardStatusesEnum[row.timeRegistrationEnabled ? 1 : 2] | translate}}</span>
192+
</mat-chip>
147193
</ng-template>

‎eform-client/src/app/plugins/modules/backend-configuration-pn/modules/property-workers/components/property-worker-table/property-worker-table.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export class PropertyWorkerTableComponent implements OnInit, OnDestroy {
9696
{
9797
header: this.translateService.stream('Property'),
9898
field: 'propertyNames',
99-
formatter: (rowData: DeviceUserModel) => rowData.propertyNames.replace(',', '<br>'),
99+
// formatter: (rowData: DeviceUserModel) => rowData.propertyNames
100100
},
101101
{
102102
header: this.translateService.stream('Name'),

‎eform-client/src/app/plugins/modules/backend-configuration-pn/modules/property-workers/components/property-workers-page/property-workers-page.component.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,15 @@ export class PropertyWorkersPageComponent implements OnInit, OnDestroy {
201201
.getDeviceUsersFiltered()
202202
.subscribe((data) => {
203203
if (data && data.model) {
204-
this.sitesDto = data.model;
204+
// const result = data.model;
205+
this.sitesDto = data.model.map(site => ({
206+
...site,
207+
propertyNames: Array.isArray(site.propertyNames)
208+
? site.propertyNames
209+
: (typeof site.propertyNames === 'string' && site.propertyNames.length > 0
210+
? site.propertyNames.split(',').map((name: string) => name.trim())
211+
: [])
212+
}));
205213
//this.getWorkerPropertiesAssignments();
206214
}
207215
});

‎eform-client/src/app/plugins/modules/backend-configuration-pn/modules/property-workers/property-workers.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {MatMenuModule} from '@angular/material/menu';
2323
import {
2424
PropertyWorkerFiltersComponent
2525
} from 'src/app/plugins/modules/backend-configuration-pn/modules/property-workers/components/property-worker-filters/property-worker-filters.component';
26+
import {MatChip} from "@angular/material/chips";
2627

2728
@NgModule({
2829
imports: [
@@ -42,6 +43,7 @@ import {
4243
MatCheckboxModule,
4344
MatMenuModule,
4445
ReactiveFormsModule,
46+
MatChip,
4547
],
4648
declarations: [
4749
PropertyWorkersPageComponent,

‎eform-client/src/app/plugins/modules/backend-configuration-pn/modules/task-wizard/components/task-wizard-table/task-wizard-table.component.html‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<mtx-grid
22
[data]="tasks"
33
[columns]="tableHeaders"
4-
[cellTemplate]="{id: idTpl, tags: tagsTpl, tagReport: reportTagsTpl, startDate: startDateTpl, repeat: repeatTpl, status: statusTpl}"
4+
[cellTemplate]="{id: idTpl, tags: tagsTpl, tagReport: reportTagsTpl, startDate: startDateTpl, repeat: repeatTpl, status: statusTpl, assignedTo: assignedToTpl}"
55
[showPaginator]="false"
66
[pageOnFront]="false"
77
[rowStriped]="true"
@@ -43,17 +43,17 @@
4343

4444
<ng-template #repeatTpl let-row>
4545
<ng-container *ngIf="row.repeatEvery === 0 && row.repeatType === RepeatTypeEnum.Day; else elseRepeatEveryTpl">
46-
<span title="{{RepeatTypeEnum[0] | translate}}">{{RepeatTypeEnum[0] | translate}}</span>
46+
<mat-chip color="primary">
47+
<span title="{{RepeatTypeEnum[0] | translate}}">{{RepeatTypeEnum[0] | translate}}</span>
48+
</mat-chip>
4749
</ng-container>
4850
<ng-template #elseRepeatEveryTpl>
49-
<span title="{{ row.repeatEvery }} {{RepeatTypeEnum[row.repeatType] | translate}}">{{ row.repeatEvery }} {{RepeatTypeEnum[row.repeatType] | translate}}</span>
51+
<mat-chip color="primary">
52+
<span title="{{ row.repeatEvery }} {{RepeatTypeEnum[row.repeatType] | translate}}">{{ row.repeatEvery }} {{RepeatTypeEnum[row.repeatType] | translate}}</span>
53+
</mat-chip>
5054
</ng-template>
5155
</ng-template>
5256

53-
<ng-template #statusTpl let-row>
54-
<span title="{{TaskWizardStatusesEnum[row.status] | translate}}">{{TaskWizardStatusesEnum[row.status] | translate}}</span>
55-
</ng-template>
56-
5757
<ng-template #idTpl let-row>
5858
<ng-container *ngIf="selectAuthIsAdmin$ | async;">
5959
<span title="{{getFormattedDate(row.createdAt)}} / {{getFormattedDate(row.updatedAt)}}">{{row.id}}<small class="microting-uid"> ({{row.planningId}})</small></span>
@@ -62,3 +62,26 @@
6262
<span>{{row.id}}<small class="microting-uid"> ({{row.planningId}})</small></span>
6363
</ng-container>
6464
</ng-template>
65+
66+
<ng-template #statusTpl let-row>
67+
<mat-chip
68+
[ngClass]="{
69+
'status-active': TaskWizardStatusesEnum[row.status] === 'Active',
70+
'status-inactive': TaskWizardStatusesEnum[row.status] !== 'Active'
71+
}"
72+
>
73+
<span title="{{TaskWizardStatusesEnum[row.status] | translate}}">
74+
{{TaskWizardStatusesEnum[row.status] | translate}}
75+
</span>
76+
</mat-chip>
77+
</ng-template>
78+
79+
<ng-template #assignedToTpl let-row>
80+
<div class="d-flex flex-column">
81+
<div *ngFor="let worker of row.assignedTo">
82+
<mat-chip color="primary">
83+
<span>{{worker}}</span>
84+
</mat-chip>
85+
</div>
86+
</div>
87+
</ng-template>

0 commit comments

Comments
 (0)