Skip to content

Commit 1fa4c58

Browse files
tammy-a11ytumms2021389
tammy-a11y
and
tumms2021389
authored
refactor: Added authoring compatibility for list view (#645)
* refactor: Added authoring compatibility for list view * refactor: Update styles for banner and MediaCo components --------- Co-authored-by: Siva Rama Krishna <[email protected]>
1 parent e5a23bd commit 1fa4c58

File tree

6 files changed

+1151
-11
lines changed

6 files changed

+1151
-11
lines changed

‎src/app/_samples/mediaco/components/banner/banner.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@
3434
}
3535

3636
.background-image-style {
37-
height: calc(20rem);
3837
position: sticky;
3938
top: var(--mat-toolbar-standard-height, 64px);
4039
background: var(--mat-toolbar-container-background-color, var(--mat-sys-surface));
4140
z-index: 10;
41+
padding-bottom: 2rem;
4242
}
4343

4444
.background-style {

‎src/app/_samples/mediaco/components/list-view/DefaultViewMeta.ts‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
const LOCALIZATON_ANNOTATION = '@L ';
2+
const PROPERTY_ANNOTATION = '@P .';
3+
const USER_ANNOTATION = '@USER .';
4+
const ASSOCIATED_ANNOTATION = '@ASSOCIATED .';
5+
const ASSOCIATION_ANNOTATION = '@CA ';
6+
7+
const getDefaultConfig = (fieldMeta, classID, show) => {
8+
const {
9+
name,
10+
label,
11+
fieldID,
12+
fieldType,
13+
dataType,
14+
type,
15+
classID: fieldMetaClassID,
16+
displayAs,
17+
displayAsLink,
18+
category,
19+
associationClassID,
20+
associationID
21+
} = fieldMeta;
22+
return {
23+
value: (associationClassID ? ASSOCIATION_ANNOTATION : PROPERTY_ANNOTATION).concat(fieldID),
24+
label: LOCALIZATON_ANNOTATION.concat(name || label),
25+
fieldType,
26+
propertyType: dataType || type,
27+
classID: classID || fieldMetaClassID,
28+
displayAs,
29+
displayAsLink,
30+
category,
31+
show,
32+
...(associationClassID ? { associationLabel: LOCALIZATON_ANNOTATION.concat(category) } : {}),
33+
associationID
34+
};
35+
};
36+
37+
export function getDefaultViewMeta(fieldMeta, classID, showField) {
38+
const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } = fieldMeta;
39+
const mapperKey = type && displayAs ? type.concat(':').concat(displayAs) : type;
40+
const defaultConfig = getDefaultConfig(fieldMeta, classID, showField);
41+
let viewMeta;
42+
switch (mapperKey) {
43+
case 'True-False:pxCheckbox':
44+
viewMeta = {
45+
type: 'Checkbox',
46+
config: {
47+
...defaultConfig,
48+
trueLabel: '@L Yes',
49+
falseLabel: '@L No',
50+
caption: LOCALIZATON_ANNOTATION.concat(name || label),
51+
label: undefined
52+
}
53+
};
54+
break;
55+
case 'Decimal:pxCurrency':
56+
viewMeta = {
57+
type: 'Currency',
58+
config: defaultConfig
59+
};
60+
break;
61+
case 'Date Time:pxDateTime':
62+
case 'Date & time:pxDateTime':
63+
viewMeta = {
64+
type: 'DateTime',
65+
config: defaultConfig
66+
};
67+
break;
68+
case 'Date:pxDateTime':
69+
case 'Date only:pxDateTime':
70+
viewMeta = {
71+
type: 'Date',
72+
config: defaultConfig
73+
};
74+
break;
75+
case 'Decimal:pxNumber':
76+
viewMeta = {
77+
type: 'Decimal',
78+
config: defaultConfig
79+
};
80+
break;
81+
case 'Text:pxEmail':
82+
viewMeta = {
83+
type: 'Email',
84+
config: defaultConfig
85+
};
86+
break;
87+
case 'Integer:pxInteger':
88+
viewMeta = {
89+
type: 'Integer',
90+
config: defaultConfig
91+
};
92+
break;
93+
case 'Decimal:pxPercentage':
94+
viewMeta = {
95+
type: 'Percentage',
96+
config: defaultConfig
97+
};
98+
break;
99+
case 'Text:pxPhone':
100+
viewMeta = {
101+
type: 'Phone',
102+
config: {
103+
...defaultConfig,
104+
datasource: {
105+
source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
106+
fields: {
107+
value: '@P .pyCallingCode'
108+
}
109+
}
110+
}
111+
};
112+
break;
113+
case 'TimeOfDay:pxDateTime':
114+
viewMeta = {
115+
type: 'Time',
116+
config: defaultConfig
117+
};
118+
break;
119+
case 'Text:pxURL':
120+
case 'Text:pxUrl':
121+
viewMeta = {
122+
type: 'URL',
123+
config: defaultConfig
124+
};
125+
break;
126+
case 'Text:pxTextArea':
127+
viewMeta = {
128+
type: 'TextArea',
129+
config: defaultConfig
130+
};
131+
break;
132+
case 'Text:pxRichTextEditor':
133+
viewMeta = {
134+
type: 'RichText',
135+
config: defaultConfig
136+
};
137+
break;
138+
case 'Text:pxAutoComplete':
139+
if (isUserReference || fieldType === 'User reference') {
140+
viewMeta = {
141+
type: 'UserReference',
142+
config: {
143+
...defaultConfig,
144+
value: USER_ANNOTATION.concat(fieldID),
145+
placeholder: 'Select...',
146+
displayAs: 'Search box',
147+
associationID,
148+
associationLabel: undefined
149+
}
150+
};
151+
} else {
152+
const { tableType = '' } = datasource || {};
153+
viewMeta = {
154+
type: 'AutoComplete',
155+
config: {
156+
...defaultConfig,
157+
placeholder: 'Select...',
158+
listType: 'associated',
159+
datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
160+
deferDatasource: tableType === 'DataPage'
161+
}
162+
};
163+
}
164+
break;
165+
case 'Text:pxDropdown':
166+
if (isUserReference || fieldType === 'User reference') {
167+
viewMeta = {
168+
type: 'UserReference',
169+
config: {
170+
...defaultConfig,
171+
value: USER_ANNOTATION.concat(fieldID),
172+
placeholder: 'Select...',
173+
displayAs: 'Drop-down list',
174+
associationID,
175+
associationLabel: undefined
176+
}
177+
};
178+
} else {
179+
const { tableType = '' } = datasource || {};
180+
viewMeta = {
181+
type: 'Dropdown',
182+
config: {
183+
...defaultConfig,
184+
placeholder: 'Select...',
185+
listType: 'associated',
186+
datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
187+
deferDatasource: tableType === 'DataPage'
188+
}
189+
};
190+
}
191+
break;
192+
case 'Text:pxRadioButtons':
193+
{
194+
const { tableType = '' } = datasource || {};
195+
viewMeta = {
196+
type: 'RadioButtons',
197+
config: {
198+
...defaultConfig,
199+
placeholder: 'Select...',
200+
listType: 'associated',
201+
datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
202+
deferDatasource: tableType === 'DataPage'
203+
}
204+
};
205+
}
206+
break;
207+
case 'Text:pxTextInput':
208+
viewMeta = {
209+
type: 'TextInput',
210+
config: defaultConfig
211+
};
212+
break;
213+
default:
214+
viewMeta = {
215+
type,
216+
config: defaultConfig
217+
};
218+
}
219+
return viewMeta;
220+
}

‎src/app/_samples/mediaco/components/list-view/list-view.component.ts‎

Lines changed: 71 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { MatDialog } from '@angular/material/dialog';
77
import { MatIconButton } from '@angular/material/button';
88
import { MatIcon } from '@angular/material/icon';
99

10+
import { init } from './listViewHelpers';
11+
1012
interface ListViewProps {
1113
inheritedProps: any;
1214
title: string | undefined;
@@ -46,6 +48,14 @@ export class ListViewComponent implements OnInit {
4648
referenceDataPage: string;
4749
caseTypeToActivityMap: any;
4850
title: string;
51+
payload: any;
52+
listContext: any = {};
53+
ref: any = {};
54+
showDynamicFields: boolean | undefined;
55+
cosmosTableRef: any;
56+
selectionMode: string | undefined;
57+
fieldDefs: any;
58+
columns: any[];
4959

5060
constructor(
5161
public utils: Utils,
@@ -65,11 +75,35 @@ export class ListViewComponent implements OnInit {
6575
this.configProps$ = this.pConn$.getConfigProps() as ListViewProps;
6676
this.template = this.configProps$.presets[0]?.template;
6777
this.title = this.configProps$.title || '';
68-
this.getListData();
78+
this.showDynamicFields = this.configProps$?.showDynamicFields;
79+
this.selectionMode = this.configProps$.selectionMode;
80+
81+
if (this.configProps$) {
82+
if (!this.payload) {
83+
this.payload = { referenceList: this.configProps$.referenceList };
84+
}
85+
init({
86+
pConn$: this.pConn$,
87+
bInForm$: this.bInForm$,
88+
...this.payload,
89+
listContext: this.listContext,
90+
ref: this.ref,
91+
showDynamicFields: this.showDynamicFields,
92+
cosmosTableRef: this.cosmosTableRef,
93+
selectionMode: this.selectionMode
94+
}).then(response => {
95+
this.listContext = response;
96+
this.getListData();
97+
});
98+
}
6999
}
70100

71101
getListData() {
102+
this.fieldDefs = this.listContext.meta.fieldDefs;
72103
this.referenceDataPage = this.configProps$.referenceList;
104+
const componentConfig = this.pConn$.getComponentConfig();
105+
const columnFields = componentConfig.presets[0].children[0].children;
106+
this.columns = this.getHeaderCells(columnFields, this.fieldDefs);
73107
PCore.getDataPageUtils()
74108
.getDataAsync(this.referenceDataPage, this.pConn$.getContextName())
75109
.then(({ data }) => {
@@ -83,9 +117,9 @@ export class ListViewComponent implements OnInit {
83117
const caseType = this.caseTypeToActivityMap[item.ActivityType];
84118
return {
85119
icon: this.utils.getImageSrc(this.getIcon(caseType), this.utils.getSDKStaticContentUrl()),
86-
title: item.ActivityType,
87-
title_subtext: this.timeSince(new Date(item.pxUpdateDateTime || item.pxCreateDateTime)),
88-
description: item.Description
120+
title: this.columns[0] ? item[this.columns[0]?.id] : undefined,
121+
title_subtext: this.columns[2] ? this.timeSince(new Date(item[this.columns[2]?.id] || item.pxCreateDateTime)) : undefined,
122+
description: this.columns[1] ? item[this.columns[1]?.id] : undefined
89123
};
90124
});
91125
return;
@@ -94,10 +128,10 @@ export class ListViewComponent implements OnInit {
94128
this.sourceList = data.map((item, index) => {
95129
return {
96130
number: index + 1,
97-
title: item.Name,
98-
description: item.Genere,
99-
description_subtext: item.Views + ' views',
100-
rating: item.Rating
131+
title: this.columns[0] ? item[this.columns[0]?.id] : undefined,
132+
description: this.columns[1] ? item[this.columns[1]?.id] : undefined,
133+
description_subtext: this.columns[2] ? item[this.columns[2]?.id] + ' views' : undefined,
134+
rating: item[this.columns[3]?.id]
101135
};
102136
});
103137
return;
@@ -174,4 +208,33 @@ export class ListViewComponent implements OnInit {
174208
}
175209
});
176210
}
211+
212+
private getHeaderCells(colFields, fields) {
213+
const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
214+
return colFields.map((field: any, index) => {
215+
let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
216+
if (theField.indexOf('.') === 0) {
217+
theField = theField.substring(1);
218+
}
219+
const colIndex = fields.findIndex(ele => ele.name === theField);
220+
const displayAsLink = field.config.displayAsLink;
221+
const headerRow: any = {};
222+
headerRow.id = fields[index].id;
223+
headerRow.type = field.type;
224+
headerRow.displayAsLink = displayAsLink;
225+
headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false;
226+
headerRow.disablePadding = false;
227+
headerRow.label = fields[index].label;
228+
if (colIndex > -1) {
229+
headerRow.classID = fields[colIndex].classID;
230+
}
231+
if (displayAsLink) {
232+
headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID);
233+
if (field.config.value?.startsWith('@CA')) {
234+
headerRow.isAssociation = true;
235+
}
236+
}
237+
return headerRow;
238+
});
239+
}
177240
}

0 commit comments

Comments
 (0)