refactor: Added authoring compatibility for list view

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

@@ -34,11 +34,11 @@
 }
 
 .background-image-style {
-  height: calc(20rem);
   position: sticky;
   top: var(--mat-toolbar-standard-height, 64px);
   background: var(--mat-toolbar-container-background-color, var(--mat-sys-surface));
   z-index: 10;
+  padding-bottom: 2rem;
 }
 
 .background-style {

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

@@ -0,0 +1,220 @@
+const LOCALIZATON_ANNOTATION = '@L ';
+const PROPERTY_ANNOTATION = '@P .';
+const USER_ANNOTATION = '@USER .';
+const ASSOCIATED_ANNOTATION = '@ASSOCIATED .';
+const ASSOCIATION_ANNOTATION = '@CA ';
+
+const getDefaultConfig = (fieldMeta, classID, show) => {
+  const {
+    name,
+    label,
+    fieldID,
+    fieldType,
+    dataType,
+    type,
+    classID: fieldMetaClassID,
+    displayAs,
+    displayAsLink,
+    category,
+    associationClassID,
+    associationID
+  } = fieldMeta;
+  return {
+    value: (associationClassID ? ASSOCIATION_ANNOTATION : PROPERTY_ANNOTATION).concat(fieldID),
+    label: LOCALIZATON_ANNOTATION.concat(name || label),
+    fieldType,
+    propertyType: dataType || type,
+    classID: classID || fieldMetaClassID,
+    displayAs,
+    displayAsLink,
+    category,
+    show,
+    ...(associationClassID ? { associationLabel: LOCALIZATON_ANNOTATION.concat(category) } : {}),
+    associationID
+  };
+};
+
+export function getDefaultViewMeta(fieldMeta, classID, showField) {
+  const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } = fieldMeta;
+  const mapperKey = type && displayAs ? type.concat(':').concat(displayAs) : type;
+  const defaultConfig = getDefaultConfig(fieldMeta, classID, showField);
+  let viewMeta;
+  switch (mapperKey) {
+    case 'True-False:pxCheckbox':
+      viewMeta = {
+        type: 'Checkbox',
+        config: {
+          ...defaultConfig,
+          trueLabel: '@L Yes',
+          falseLabel: '@L No',
+          caption: LOCALIZATON_ANNOTATION.concat(name || label),
+          label: undefined
+        }
+      };
+      break;
+    case 'Decimal:pxCurrency':
+      viewMeta = {
+        type: 'Currency',
+        config: defaultConfig
+      };
+      break;
+    case 'Date Time:pxDateTime':
+    case 'Date & time:pxDateTime':
+      viewMeta = {
+        type: 'DateTime',
+        config: defaultConfig
+      };
+      break;
+    case 'Date:pxDateTime':
+    case 'Date only:pxDateTime':
+      viewMeta = {
+        type: 'Date',
+        config: defaultConfig
+      };
+      break;
+    case 'Decimal:pxNumber':
+      viewMeta = {
+        type: 'Decimal',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxEmail':
+      viewMeta = {
+        type: 'Email',
+        config: defaultConfig
+      };
+      break;
+    case 'Integer:pxInteger':
+      viewMeta = {
+        type: 'Integer',
+        config: defaultConfig
+      };
+      break;
+    case 'Decimal:pxPercentage':
+      viewMeta = {
+        type: 'Percentage',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxPhone':
+      viewMeta = {
+        type: 'Phone',
+        config: {
+          ...defaultConfig,
+          datasource: {
+            source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+            fields: {
+              value: '@P .pyCallingCode'
+            }
+          }
+        }
+      };
+      break;
+    case 'TimeOfDay:pxDateTime':
+      viewMeta = {
+        type: 'Time',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxURL':
+    case 'Text:pxUrl':
+      viewMeta = {
+        type: 'URL',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxTextArea':
+      viewMeta = {
+        type: 'TextArea',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxRichTextEditor':
+      viewMeta = {
+        type: 'RichText',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxAutoComplete':
+      if (isUserReference || fieldType === 'User reference') {
+        viewMeta = {
+          type: 'UserReference',
+          config: {
+            ...defaultConfig,
+            value: USER_ANNOTATION.concat(fieldID),
+            placeholder: 'Select...',
+            displayAs: 'Search box',
+            associationID,
+            associationLabel: undefined
+          }
+        };
+      } else {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'AutoComplete',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxDropdown':
+      if (isUserReference || fieldType === 'User reference') {
+        viewMeta = {
+          type: 'UserReference',
+          config: {
+            ...defaultConfig,
+            value: USER_ANNOTATION.concat(fieldID),
+            placeholder: 'Select...',
+            displayAs: 'Drop-down list',
+            associationID,
+            associationLabel: undefined
+          }
+        };
+      } else {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'Dropdown',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxRadioButtons':
+      {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'RadioButtons',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxTextInput':
+      viewMeta = {
+        type: 'TextInput',
+        config: defaultConfig
+      };
+      break;
+    default:
+      viewMeta = {
+        type,
+        config: defaultConfig
+      };
+  }
+  return viewMeta;
+}

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

@@ -7,6 +7,8 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 
+import { init } from './listViewHelpers';
+
 interface ListViewProps {
   inheritedProps: any;
   title: string | undefined;
@@ -46,6 +48,14 @@ export class ListViewComponent implements OnInit {
   referenceDataPage: string;
   caseTypeToActivityMap: any;
   title: string;
+  payload: any;
+  listContext: any = {};
+  ref: any = {};
+  showDynamicFields: boolean | undefined;
+  cosmosTableRef: any;
+  selectionMode: string | undefined;
+  fieldDefs: any;
+  columns: any[];
 
   constructor(
     public utils: Utils,
@@ -65,11 +75,35 @@ export class ListViewComponent implements OnInit {
     this.configProps$ = this.pConn$.getConfigProps() as ListViewProps;
     this.template = this.configProps$.presets[0]?.template;
     this.title = this.configProps$.title || '';
-    this.getListData();
+    this.showDynamicFields = this.configProps$?.showDynamicFields;
+    this.selectionMode = this.configProps$.selectionMode;
+
+    if (this.configProps$) {
+      if (!this.payload) {
+        this.payload = { referenceList: this.configProps$.referenceList };
+      }
+      init({
+        pConn$: this.pConn$,
+        bInForm$: this.bInForm$,
+        ...this.payload,
+        listContext: this.listContext,
+        ref: this.ref,
+        showDynamicFields: this.showDynamicFields,
+        cosmosTableRef: this.cosmosTableRef,
+        selectionMode: this.selectionMode
+      }).then(response => {
+        this.listContext = response;
+        this.getListData();
+      });
+    }
   }
 
   getListData() {
+    this.fieldDefs = this.listContext.meta.fieldDefs;
     this.referenceDataPage = this.configProps$.referenceList;
+    const componentConfig = this.pConn$.getComponentConfig();
+    const columnFields = componentConfig.presets[0].children[0].children;
+    this.columns = this.getHeaderCells(columnFields, this.fieldDefs);
     PCore.getDataPageUtils()
       .getDataAsync(this.referenceDataPage, this.pConn$.getContextName())
       .then(({ data }) => {
@@ -83,9 +117,9 @@ export class ListViewComponent implements OnInit {
         const caseType = this.caseTypeToActivityMap[item.ActivityType];
         return {
           icon: this.utils.getImageSrc(this.getIcon(caseType), this.utils.getSDKStaticContentUrl()),
-          title: item.ActivityType,
-          title_subtext: this.timeSince(new Date(item.pxUpdateDateTime || item.pxCreateDateTime)),
-          description: item.Description
+          title: this.columns[0] ? item[this.columns[0]?.id] : undefined,
+          title_subtext: this.columns[2] ? this.timeSince(new Date(item[this.columns[2]?.id] || item.pxCreateDateTime)) : undefined,
+          description: this.columns[1] ? item[this.columns[1]?.id] : undefined
         };
       });
       return;
@@ -94,10 +128,10 @@ export class ListViewComponent implements OnInit {
       this.sourceList = data.map((item, index) => {
         return {
           number: index + 1,
-          title: item.Name,
-          description: item.Genere,
-          description_subtext: item.Views + ' views',
-          rating: item.Rating
+          title: this.columns[0] ? item[this.columns[0]?.id] : undefined,
+          description: this.columns[1] ? item[this.columns[1]?.id] : undefined,
+          description_subtext: this.columns[2] ? item[this.columns[2]?.id] + ' views' : undefined,
+          rating: item[this.columns[3]?.id]
         };
       });
       return;
@@ -174,4 +208,33 @@ export class ListViewComponent implements OnInit {
       }
     });
   }
+
+  private getHeaderCells(colFields, fields) {
+    const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
+    return colFields.map((field: any, index) => {
+      let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
+      if (theField.indexOf('.') === 0) {
+        theField = theField.substring(1);
+      }
+      const colIndex = fields.findIndex(ele => ele.name === theField);
+      const displayAsLink = field.config.displayAsLink;
+      const headerRow: any = {};
+      headerRow.id = fields[index].id;
+      headerRow.type = field.type;
+      headerRow.displayAsLink = displayAsLink;
+      headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false;
+      headerRow.disablePadding = false;
+      headerRow.label = fields[index].label;
+      if (colIndex > -1) {
+        headerRow.classID = fields[colIndex].classID;
+      }
+      if (displayAsLink) {
+        headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID);
+        if (field.config.value?.startsWith('@CA')) {
+          headerRow.isAssociation = true;
+        }
+      }
+      return headerRow;
+    });
+  }
 }