@contrail/document-generation 1.0.10 → 1.0.12

package/lib/components/component-generator.d.ts

@@ -1,6 +1,5 @@
 import { DocumentElement } from "@contrail/documents";
-import { ComponentPropertyDefinition, ComponentPropertyTemplate, ComponentTemplate } from "../interfaces";
-import { PropertyValueFormatter } from "@contrail/types";
+import { ComponentPropertyTemplate, ComponentTemplate } from "../interfaces";
 export declare class ComponentGenerator {
     static generateComponent(data: any, options: DocumentElement, template: ComponentTemplate): any;
     static generatedModelBindings(data: any): {
@@ -9,6 +8,4 @@ export declare class ComponentGenerator {
         viewable: string;
     };
     static generateComponentFromPropertyTemplate(data: any, options: DocumentElement, template: ComponentPropertyTemplate): DocumentElement;
-    static generatePropertyTextElements(data: any, properties: Array<ComponentPropertyDefinition>, options: DocumentElement, yPosition: number): Array<DocumentElement>;
-    static generatePropertyTextElement(data: any, property: ComponentPropertyDefinition, options: DocumentElement, formatter: PropertyValueFormatter, yPosition: number): DocumentElement;
 }

package/lib/components/component-generator.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentGenerator = void 0;
 const documents_1 = require("@contrail/documents");
 const nanoid_1 = require("nanoid");
-const types_1 = require("@contrail/types");
 const util_1 = require("@contrail/util");
+const document_property_util_1 = require("../util/document-property-util");
 class ComponentGenerator {
     static generateComponent(data, options, template) {
         let component;
@@ -51,7 +51,7 @@ class ComponentGenerator {
                 width: imageWidth
             }
         };
-        elements.push(...this.generatePropertyTextElements(data, template.properties, textOptions, yPosition));
+        elements.push(...document_property_util_1.DocumentPropertyUtil.generatePropertyTextElements(data, template.properties, textOptions, { y: yPosition }, true));
         const modelBindings = this.generatedModelBindings(data);
         componentElement.elements = elements;
         componentElement.modelBindings = modelBindings;
@@ -63,39 +63,5 @@ class ComponentGenerator {
         }
         return componentElement;
     }
-    static generatePropertyTextElements(data, properties, options, yPosition) {
-        const elements = [];
-        const formatter = new types_1.PropertyValueFormatter();
-        for (let property of properties) {
-            let element = this.generatePropertyTextElement(data, property, options, formatter, yPosition);
-            elements.push(element);
-        }
-        return elements;
-    }
-    static generatePropertyTextElement(data, property, options, formatter, yPosition) {
-        var _a, _b, _c;
-        const key = `${util_1.StringUtil.convertToCamelCase(property.typeRootSlug)}.${property.propertyDefinition.slug}`;
-        let style = property.style || {
-            font: {
-                size: 8,
-            },
-            color: 'rgba(0,0,0,.5)',
-        };
-        if ((_a = options === null || options === void 0 ? void 0 : options.style) === null || _a === void 0 ? void 0 : _a.text) {
-            style.text = options.style.text;
-        }
-        let element = Object.assign({
-            label: property.includeLabel ? (_b = property.propertyDefinition) === null || _b === void 0 ? void 0 : _b.label : null,
-            type: "text",
-            position: { x: 0, y: yPosition },
-            size: { height: 25, width: ((_c = options === null || options === void 0 ? void 0 : options.size) === null || _c === void 0 ? void 0 : _c.width) || 125 },
-            style,
-            propertyBindings: { text: key }
-        });
-        const value = util_1.ObjectUtil.getByPath(data, key);
-        const display = formatter.formatValueForProperty(value, property.propertyDefinition);
-        element.text = display;
-        return element;
-    }
 }
 exports.ComponentGenerator = ComponentGenerator;

package/lib/components/component-grid-generator.js

@@ -69,7 +69,6 @@ class ComponentGridGenerator {
         };
         const requiredHeightAdjustment = (idealSize.height - requiredSize.height) / template.gridDimensions.rows;
         const requiredWidthAdjustment = (idealSize.width - requiredSize.width) / template.gridDimensions.cols;
-        console.log("requiredHeightAdjustment: ", requiredHeightAdjustment, " requiredWidthAdjustment: ", requiredWidthAdjustment);
         if (requiredHeightAdjustment < 0 && requiredHeightAdjustment < requiredWidthAdjustment) {
             adjustedTemplate.componentTemplate.propertyTemplate.imageDimension.width += requiredHeightAdjustment;
         }

package/lib/frame-generator.d.ts

@@ -4,5 +4,6 @@ import { DocumentTemplate } from "./interfaces";
 export declare class FrameGenerator {
     static generateFrameForDataGroup(dataGroup: DataGroup, framePosition: PositionDefinition, template: DocumentTemplate): any[];
     static generateFrameHeaderForDataGroup(dataGroup: DataGroup, position: PositionDefinition, template: DocumentTemplate, headerSize: SizeDefinition): DocumentElement[];
+    static generateFrameInfoPanelForDataGroup(dataGroup: DataGroup, position: PositionDefinition, template: DocumentTemplate, panelSize: SizeDefinition): DocumentElement[];
     static generateFrame(options: DocumentElement): DocumentElement;
 }

package/lib/frame-generator.js

@@ -5,8 +5,10 @@ const documents_1 = require("@contrail/documents");
 const component_grid_generator_1 = require("./components/component-grid-generator");
 const util_1 = require("@contrail/util");
 const document_util_1 = require("./util/document-util");
+const info_panel_generator_1 = require("./info-panel/info-panel-generator");
 class FrameGenerator {
     static generateFrameForDataGroup(dataGroup, framePosition, template) {
+        var _a, _b;
         const elements = [];
         const frame = this.generateFrame({
             position: util_1.ObjectUtil.cloneDeep(framePosition),
@@ -18,18 +20,41 @@ class FrameGenerator {
         const headerPosition = util_1.ObjectUtil.cloneDeep(framePosition);
         headerPosition.y = headerPosition.y + FRAME_PADDING;
         headerPosition.x = headerPosition.x + FRAME_PADDING;
-        const frameHeaderDimensions = { height: 50, width: template.frameSize.width - 50 };
-        const HEADER_MARGIN = 20;
-        const gridPosition = util_1.ObjectUtil.cloneDeep(headerPosition);
-        gridPosition.y = gridPosition.y + frameHeaderDimensions.height + HEADER_MARGIN;
+        const panelPosition = util_1.ObjectUtil.cloneDeep(framePosition);
+        panelPosition.y = panelPosition.y + FRAME_PADDING;
+        panelPosition.x = panelPosition.x + FRAME_PADDING;
+        let frameHeaderDimensions = { height: 0, width: 0 };
+        let framePanelDimensions = { height: 0, width: 0 };
+        let hasPanel = false;
+        let hasHeader = false;
+        elements.push(util_1.ObjectUtil.cloneDeep(frame));
+        if (template.frameHeaderTemplate) {
+            hasHeader = true;
+            frameHeaderDimensions = { height: 50, width: template.frameSize.width - 50 };
+            elements.push(...this.generateFrameHeaderForDataGroup(dataGroup, headerPosition, template, frameHeaderDimensions));
+        }
+        if (template.frameInfoPanelTemplate) {
+            hasPanel = true;
+            framePanelDimensions = { width: ((_b = (_a = template.frameInfoPanelTemplate.panelDocumentTemplate) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.width) || 300 };
+            framePanelDimensions.height = template.frameSize.height - (2 * FRAME_PADDING);
+            elements.push(...this.generateFrameInfoPanelForDataGroup(dataGroup, panelPosition, template, framePanelDimensions));
+        }
+        const GRID_MARGIN = 20;
+        let gridPosition = util_1.ObjectUtil.cloneDeep(framePosition);
+        if (hasHeader) {
+            gridPosition = util_1.ObjectUtil.cloneDeep(headerPosition);
+            gridPosition.y = gridPosition.y + frameHeaderDimensions.height + GRID_MARGIN;
+        }
+        if (hasPanel) {
+            gridPosition = util_1.ObjectUtil.cloneDeep(panelPosition);
+            gridPosition.x = gridPosition.x + framePanelDimensions.width + GRID_MARGIN;
+        }
         const relativeGridPosition = document_util_1.DocumentUtil.getRelativePosition(framePosition, gridPosition);
         const frameSize = template.frameSize;
         const idealGridSize = {
             width: frameSize.width - relativeGridPosition.x - FRAME_PADDING,
             height: frameSize.height - relativeGridPosition.y - FRAME_PADDING
         };
-        elements.push(util_1.ObjectUtil.cloneDeep(frame));
-        elements.push(...this.generateFrameHeaderForDataGroup(dataGroup, headerPosition, template, frameHeaderDimensions));
         elements.push(...component_grid_generator_1.ComponentGridGenerator.generateComponentGrid(dataGroup.data, gridPosition, template.componentGridTemplate, idealGridSize));
         return elements;
     }
@@ -41,6 +66,9 @@ class FrameGenerator {
         heading.position = util_1.ObjectUtil.cloneDeep(position);
         return [heading];
     }
+    static generateFrameInfoPanelForDataGroup(dataGroup, position, template, panelSize) {
+        return info_panel_generator_1.InfoPanelGenerator.generatePanelFromTemplate(dataGroup.propertyValues, template.frameInfoPanelTemplate, position, panelSize);
+    }
     static generateFrame(options) {
         const frame = documents_1.DocumentElementFactory.createFrameElement(options);
         return frame;

package/lib/info-panel/info-panel-generator.d.ts

@@ -0,0 +1,5 @@
+import { DocumentElement, PositionDefinition, SizeDefinition } from "@contrail/documents";
+import { FrameInfoPanelTemplate } from "../interfaces";
+export declare class InfoPanelGenerator {
+    static generatePanelFromTemplate(data: any, template: FrameInfoPanelTemplate, position: PositionDefinition, panelSize: SizeDefinition): Array<DocumentElement>;
+}

package/lib/info-panel/info-panel-generator.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoPanelGenerator = void 0;
+const documents_1 = require("@contrail/documents");
+const util_1 = require("@contrail/util");
+const document_property_util_1 = require("../util/document-property-util");
+class InfoPanelGenerator {
+    static generatePanelFromTemplate(data, template, position, panelSize) {
+        var _a;
+        if (!template.propertyTemplate) {
+            throw Error("No panel property template defined");
+        }
+        const elements = [];
+        const panel = documents_1.DocumentElementFactory.createShapeElement('rectangle', {});
+        panel.style = ((_a = template.panelDocumentTemplate) === null || _a === void 0 ? void 0 : _a.style) || {};
+        panel.size = util_1.ObjectUtil.cloneDeep(panelSize) || {};
+        panel.position = util_1.ObjectUtil.cloneDeep(position);
+        elements.push(panel);
+        const textOptions = {
+            style: {
+                text: {
+                    align: template.propertyTemplate.textHorizontalAlignment
+                }
+            },
+            size: {
+                width: panelSize.width - 10
+            }
+        };
+        const textElements = document_property_util_1.DocumentPropertyUtil.generatePropertyTextElements(data, template.propertyTemplate.properties, textOptions, { x: panel.position.x, y: panel.position.y }, false);
+        elements.push(...textElements);
+        return elements;
+    }
+}
+exports.InfoPanelGenerator = InfoPanelGenerator;

package/lib/interfaces.d.ts

@@ -18,9 +18,18 @@ export interface DocumentTemplate {
     frameSize: SizeDefinition;
     framePadding?: number;
     frameGroupHeaderTemplate: DocumentElement;
-    frameHeaderTemplate: DocumentElement;
+    frameHeaderTemplate?: DocumentElement;
+    frameInfoPanelTemplate?: FrameInfoPanelTemplate;
     componentGridTemplate: ComponentGridTemplate;
 }
+export interface FrameInfoPanelTemplate {
+    panelDocumentTemplate: DocumentElement;
+    propertyTemplate: PanelPropertyTemplate;
+}
+export interface PanelPropertyTemplate {
+    textHorizontalAlignment?: 'center' | 'right' | 'left';
+    properties: Array<DocumentPropertyDefinition>;
+}
 export interface ComponentGridTemplate {
     componentTemplate: ComponentTemplate;
     componentPadding?: number;
@@ -36,9 +45,9 @@ export interface ComponentPropertyTemplate {
     imageDimension?: SizeDefinition;
     imageLocation?: 'top' | 'right' | 'left' | 'bottom';
     textHorizontalAlignment?: 'center' | 'right' | 'left';
-    properties: Array<ComponentPropertyDefinition>;
+    properties: Array<DocumentPropertyDefinition>;
 }
-export interface ComponentPropertyDefinition {
+export interface DocumentPropertyDefinition {
     style?: StyleDefinition;
     propertyDefinition: TypeProperty;
     slug: string;

package/lib/scripts/test.js

@@ -17,7 +17,6 @@ const nanoid_1 = require("nanoid");
 const data_grouping_1 = require("@contrail/data-grouping");
 function run() {
     return __awaiter(this, void 0, void 0, function* () {
-        const generator = new document_generator_1.DocumentGenerator();
         const orgSlug = 'converse-prod';
         yield loginSDK(orgSlug);
         const assortmentId = 'Z7nTOauGtuuiU9UC';
@@ -63,53 +62,104 @@ function run() {
                     propertyDefinition: itemType.typeProperties.find(p => p.slug === 'baseStyleNumber'),
                     typeRootSlug: 'item',
                     slug: "baseStyleNumber",
+                }]
+        };
+        const PANEL_PROPERTY_TEMPLATE = {
+            properties: [{
+                    propertyDefinition: itemType.typeProperties.find(p => p.slug === 'name'),
+                    typeRootSlug: 'item',
+                    slug: "name",
+                    includeLabel: false,
+                    style: {
+                        font: {
+                            size: 25,
+                            weight: 'bold'
+                        },
+                        color: 'white',
+                    }
                 }, {
-                    propertyDefinition: itemType.typeProperties.find(p => p.slug === 'closureType'),
+                    propertyDefinition: itemType.typeProperties.find(p => p.slug === 'segment'),
                     typeRootSlug: 'item',
-                    slug: "closureType",
+                    slug: "segment",
                     includeLabel: true,
+                    style: {
+                        font: {
+                            size: 14,
+                        },
+                        color: 'white',
+                    }
                 }, {
-                    propertyDefinition: itemType.typeProperties.find(p => p.slug === 'colorFamily'),
+                    propertyDefinition: itemType.typeProperties.find(p => p.slug === 'familyName'),
                     typeRootSlug: 'item',
-                    slug: "colorFamily",
+                    slug: "familyName",
                     includeLabel: true,
+                    style: {
+                        font: {
+                            size: 14,
+                        },
+                        color: 'white',
+                    }
+                }, {
+                    propertyDefinition: itemType.typeProperties.find(p => p.slug === 'ageGroup'),
+                    typeRootSlug: 'item',
+                    slug: "ageGroup",
+                    includeLabel: true,
+                    style: {
+                        font: {
+                            size: 14,
+                        },
+                        color: 'white',
+                    }
                 }, {
-                    propertyDefinition: projectItemType.typeProperties.find(p => p.slug === 'colorwayStatus'),
-                    slug: "colorwayStatus",
-                    typeRootSlug: 'project-item',
+                    propertyDefinition: itemType.typeProperties.find(p => p.slug === 'planningLevel1'),
+                    typeRootSlug: 'item',
+                    slug: "planningLevel1",
                     includeLabel: true,
+                    style: {
+                        font: {
+                            size: 14,
+                        },
+                        color: 'white',
+                    }
                 }]
         };
         const documentTemplateDefinition = {
             frameOrientation: interfaces_1.Orientation.VERTICAL,
             frameSize: { width: 1200, height: 675 },
             framePadding: 30,
-            frameHeaderTemplate: {
+            frameGroupHeaderTemplate: {
                 style: {
-                    color: '#000000',
+                    color: '#ffffff',
                     font: {
                         size: 20
                     },
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                 },
                 size: {
                     height: 60,
                 }
             },
-            frameGroupHeaderTemplate: {
-                style: {
-                    color: '#ffffff',
-                    font: {
-                        size: 20
+            frameInfoPanelTemplate: {
+                panelDocumentTemplate: {
+                    style: {
+                        color: '#ffffff',
+                        font: {
+                            size: 20
+                        },
+                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                        border: {
+                            radius: 4,
+                        }
                     },
-                    backgroundColor: 'black',
+                    size: {
+                        width: 250,
+                        height: 400,
+                    }
                 },
-                size: {
-                    height: 60,
-                }
+                propertyTemplate: PANEL_PROPERTY_TEMPLATE
             },
             componentGridTemplate: {
-                gridDimensions: { cols: 8, rows: 2 },
+                gridDimensions: { cols: 4, rows: 2 },
                 componentPadding: 5,
                 componentTemplate: {
                     propertyTemplate: PROPERTY_COMPONENT_TEMPLATE
@@ -118,17 +168,12 @@ function run() {
         };
         const groupingProperties = [
             {
-                property: itemType.typeProperties.find(p => p.slug === 'designPack'),
-                scope: 'item',
-                sort: sdk_1.SortOrderOptions.ASC,
-                values: null,
-            }, {
                 property: itemType.typeProperties.find(p => p.slug === 'category'),
                 scope: 'item',
                 sort: sdk_1.SortOrderOptions.ASC,
                 values: null,
             }, {
-                property: itemType.typeProperties.find(p => p.slug === 'class'),
+                property: itemType.typeProperties.find(p => p.slug === 'name'),
                 scope: 'item',
                 sort: sdk_1.SortOrderOptions.ASC,
                 values: null,
@@ -158,11 +203,12 @@ function run() {
 }
 function loginSDK(orgSlug) {
     return __awaiter(this, void 0, void 0, function* () {
-        yield (0, sdk_1.login)({
+        const config = {
             email: 'brian@vibeiq.com',
             password: process.env.CONTRAIL_PW,
             orgSlug: orgSlug,
-        });
+        };
+        yield (0, sdk_1.login)(config);
     });
 }
 function getAssortmentItems(assortmentId) {

package/lib/util/document-property-util.d.ts

@@ -0,0 +1,8 @@
+import { DocumentPropertyDefinition } from "../interfaces";
+import { DocumentElement, PositionDefinition } from "@contrail/documents";
+import { PropertyValueFormatter } from "@contrail/types";
+export declare class DocumentPropertyUtil {
+    static generatePropertyTextElements(data: any, properties: Array<DocumentPropertyDefinition>, options: DocumentElement, startingPosition: PositionDefinition, isComponent: boolean): Array<DocumentElement>;
+    static generatePropertyTextElement(model: any, property: DocumentPropertyDefinition, options: DocumentElement, formatter: PropertyValueFormatter, position: PositionDefinition, isComponent: boolean): DocumentElement;
+    private static generateTextElement;
+}

package/lib/util/document-property-util.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentPropertyUtil = void 0;
+const util_1 = require("@contrail/util");
+const documents_1 = require("@contrail/documents");
+const types_1 = require("@contrail/types");
+class DocumentPropertyUtil {
+    static generatePropertyTextElements(data, properties, options, startingPosition, isComponent) {
+        var _a, _b;
+        let yPosition = startingPosition.y || 0;
+        const xPosition = startingPosition.x || 0;
+        const elements = [];
+        const formatter = new types_1.PropertyValueFormatter();
+        for (let property of properties) {
+            const fontSize = ((_b = (_a = property.style) === null || _a === void 0 ? void 0 : _a.font) === null || _b === void 0 ? void 0 : _b.size) || 12;
+            let height = fontSize + 12;
+            options.size = options.size || {};
+            options.size.height = height;
+            let element = DocumentPropertyUtil.generatePropertyTextElement(data, property, options, formatter, { x: xPosition, y: yPosition }, isComponent);
+            yPosition += height;
+            elements.push(element);
+        }
+        return elements;
+    }
+    static generatePropertyTextElement(model, property, options, formatter, position, isComponent) {
+        var _a;
+        const modelKey = `${util_1.StringUtil.convertToCamelCase(property.typeRootSlug)}.${property.propertyDefinition.slug}`;
+        const value = util_1.ObjectUtil.getByPath(model, modelKey);
+        let display = formatter.formatValueForProperty(value, property.propertyDefinition);
+        const mergedOptions = util_1.ObjectUtil.mergeDeep(util_1.ObjectUtil.cloneDeep(options), { style: property.style || {} });
+        let element = this.generateTextElement(display, mergedOptions, position);
+        if (isComponent && property.includeLabel) {
+            element.label = (_a = property.propertyDefinition) === null || _a === void 0 ? void 0 : _a.label;
+        }
+        else if (!isComponent && property.includeLabel) {
+            display = property.propertyDefinition.label + ': ' + display;
+        }
+        element.text = display;
+        element.propertyBindings = { text: modelKey };
+        return element;
+    }
+    static generateTextElement(textValue, options, position) {
+        var _a, _b, _c;
+        const yPosition = position.y || 0;
+        const xPosition = position.x || 0;
+        const defaultStyle = {
+            font: {
+                size: 8,
+            },
+            color: 'rgba(0,0,0,.5)',
+        };
+        let style = options.style || defaultStyle;
+        if ((_a = options === null || options === void 0 ? void 0 : options.style) === null || _a === void 0 ? void 0 : _a.text) {
+            style.text = options.style.text;
+        }
+        let element = documents_1.DocumentElementFactory.createTextElement(textValue);
+        const height = ((_b = options.size) === null || _b === void 0 ? void 0 : _b.height) || 25;
+        const width = ((_c = options === null || options === void 0 ? void 0 : options.size) === null || _c === void 0 ? void 0 : _c.width) || 125;
+        element = Object.assign(element, {
+            position: { x: xPosition, y: yPosition },
+            size: { height, width },
+            style,
+        });
+        return element;
+    }
+}
+exports.DocumentPropertyUtil = DocumentPropertyUtil;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contrail/document-generation",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Utilities for automatic generation of documents.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -42,7 +42,7 @@
     "testEnvironment": "node"
   },
   "dependencies": {
-    "@contrail/data-grouping": "^1.0.15",
+    "@contrail/data-grouping": "^1.0.18",
     "@contrail/documents": "^1.0.44",
     "@contrail/types": "^3.0.27",
     "@contrail/util": "^1.0.27"