@sap-ux/fe-fpm-writer 0.19.1 → 0.20.0

package/dist/common/event-handler.d.ts

@@ -26,7 +26,8 @@ export declare const contextParameter: EventHandlerTypescriptParameters;
  * @param controllerSuffix - append controller suffix to new file
  * @param typescript - create Typescript file instead of Javascript
  * @param parameters - parameter configurations for the event handler
+ * @param templatePath - path to the template without the extension
  * @returns {string} full namespace path to method
  */
-export declare function applyEventHandlerConfiguration(fs: Editor, config: Partial<InternalCustomElement>, eventHandler: EventHandlerConfiguration | true | string, controllerSuffix?: boolean, typescript?: boolean, parameters?: EventHandlerTypescriptParameters): string;
+export declare function applyEventHandlerConfiguration(fs: Editor, config: Partial<InternalCustomElement>, eventHandler: EventHandlerConfiguration | true | string, controllerSuffix?: boolean, typescript?: boolean, parameters?: EventHandlerTypescriptParameters, templatePath?: string): string;
 //# sourceMappingURL=event-handler.d.ts.map

package/dist/common/event-handler.js

@@ -31,9 +31,10 @@ exports.contextParameter = {
  * @param controllerSuffix - append controller suffix to new file
  * @param typescript - create Typescript file instead of Javascript
  * @param parameters - parameter configurations for the event handler
+ * @param templatePath - path to the template without the extension
  * @returns {string} full namespace path to method
  */
-function applyEventHandlerConfiguration(fs, config, eventHandler, controllerSuffix = false, typescript, parameters = exports.defaultParameter) {
+function applyEventHandlerConfiguration(fs, config, eventHandler, controllerSuffix = false, typescript, parameters = exports.defaultParameter, templatePath = 'common/EventHandler') {
     if (typeof eventHandler === 'string') {
         // Existing event handler is passed - no need for file creation/update
         return eventHandler;
@@ -41,8 +42,8 @@ function applyEventHandlerConfiguration(fs, config, eventHandler, controllerSuff
     // New event handler function name - 'onPress' is default
     let eventHandlerFnName = 'onPress';
     let insertScript;
-    // By default - use config name for js file name
-    let fileName = `${config.name}`;
+    // By default - use config name for created file name
+    let fileName = config.name;
     if (typeof eventHandler === 'object') {
         if (eventHandler.fnName) {
             eventHandlerFnName = eventHandler.fnName;
@@ -56,10 +57,8 @@ function applyEventHandlerConfiguration(fs, config, eventHandler, controllerSuff
     const ext = typescript ? 'ts' : 'js';
     const controllerPath = (0, path_1.join)(config.path || '', `${fileName}${controllerSuffix ? '.controller' : ''}.${ext}`);
     if (!fs.exists(controllerPath)) {
-        fs.copyTpl((0, templates_1.getTemplatePath)(`common/EventHandler.${ext}`), controllerPath, {
-            eventHandlerFnName,
-            parameters
-        });
+        fs.copyTpl((0, templates_1.getTemplatePath)(`${templatePath}.${ext}`), controllerPath, Object.assign({ eventHandlerFnName,
+            parameters }, config));
     }
     else if (insertScript) {
         // Read current file content

package/dist/filter/index.d.ts

@@ -0,0 +1,12 @@
+import type { Editor } from 'mem-fs-editor';
+import type { CustomFilter } from './types';
+/**
+ * Add a custom filter to the filter bar of an existing UI5 application.
+ *
+ * @param {string} basePath - the base path
+ * @param {CustomFilter} filterConfig - the custom filter configuration
+ * @param {Editor} [fs] - the memfs editor instance
+ * @returns {Promise<Editor>} the updated memfs editor instance
+ */
+export declare function generateCustomFilter(basePath: string, filterConfig: CustomFilter, fs?: Editor): Editor;
+//# sourceMappingURL=index.d.ts.map

package/dist/filter/index.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCustomFilter = void 0;
+const mem_fs_1 = require("mem-fs");
+const mem_fs_editor_1 = require("mem-fs-editor");
+const path_1 = require("path");
+const ejs_1 = require("ejs");
+const validate_1 = require("../common/validate");
+const defaults_1 = require("../common/defaults");
+const templates_1 = require("../templates");
+const file_1 = require("../common/file");
+const event_handler_1 = require("../common/event-handler");
+/**
+ * Enhances the provided custom filter configuration with default data.
+ *
+ * @param {CustomFilter} data - a custom filter configuration object
+ * @param {string} manifestPath - path to the project's manifest.json
+ * @param {Manifest} manifest - the application manifest
+ * @returns enhanced configuration
+ */
+function enhanceConfig(data, manifestPath, manifest) {
+    var _a, _b;
+    // clone input
+    const config = data;
+    (0, defaults_1.setCommonDefaults)(config, manifestPath, manifest);
+    // set default values for requirement, language, the fragment file name
+    config.required = (_a = config.required) !== null && _a !== void 0 ? _a : false;
+    config.typescript = !!config.typescript;
+    config.fragmentFile = (_b = config.fragmentFile) !== null && _b !== void 0 ? _b : config.name;
+    if (config.eventHandler === true) {
+        config.eventHandler = {};
+    }
+    if (typeof config.eventHandler === 'object' && !config.eventHandler.fnName) {
+        config.eventHandler.fnName = 'filterItems';
+    }
+    return config;
+}
+/**
+ * Add a custom filter to the filter bar of an existing UI5 application.
+ *
+ * @param {string} basePath - the base path
+ * @param {CustomFilter} filterConfig - the custom filter configuration
+ * @param {Editor} [fs] - the memfs editor instance
+ * @returns {Promise<Editor>} the updated memfs editor instance
+ */
+function generateCustomFilter(basePath, filterConfig, fs) {
+    if (!fs) {
+        fs = (0, mem_fs_editor_1.create)((0, mem_fs_1.create)());
+    }
+    (0, validate_1.validateBasePath)(basePath, fs);
+    const manifestPath = (0, path_1.join)(basePath, 'webapp/manifest.json');
+    const manifest = fs.readJSON(manifestPath);
+    const config = enhanceConfig(filterConfig, manifestPath, manifest);
+    // Apply event handler
+    if (config.eventHandler) {
+        config.eventHandler = (0, event_handler_1.applyEventHandlerConfiguration)(fs, config, config.eventHandler, false, config.typescript, event_handler_1.contextParameter, 'filter/Controller');
+    }
+    // enhance manifest with the filter definition and controller reference
+    const filters = enhanceManifestAndGetFiltersReference(manifest);
+    Object.assign(filters, JSON.parse((0, ejs_1.render)(fs.read((0, templates_1.getTemplatePath)(`filter/manifest.json`)), config, {})));
+    fs.writeJSON(manifestPath, manifest, undefined, (0, file_1.getJsonSpace)(fs, manifestPath, filterConfig.tabInfo));
+    // create a fragment file
+    const fragmentPath = (0, path_1.join)(config.path, `${config.fragmentFile}.fragment.xml`);
+    fs.copyTpl((0, templates_1.getTemplatePath)(`filter/fragment.xml`), fragmentPath, config);
+    return fs;
+}
+exports.generateCustomFilter = generateCustomFilter;
+/**
+ * Enhance the target object in the manifest with the required nested objects and return a reference to it.
+ *
+ * @param {Manifest} manifest - the application manifest
+ * @returns Filters object of the first page
+ */
+function enhanceManifestAndGetFiltersReference(manifest) {
+    var _a, _b;
+    var _c, _d, _e, _f;
+    if ((_b = (_a = manifest['sap.ui5']) === null || _a === void 0 ? void 0 : _a.routing) === null || _b === void 0 ? void 0 : _b.targets) {
+        const pages = manifest['sap.ui5'].routing.targets;
+        const lrPage = Object.values(pages)[0];
+        lrPage.options || (lrPage.options = {});
+        (_c = lrPage.options).settings || (_c.settings = {});
+        (_d = lrPage.options.settings).controlConfiguration || (_d.controlConfiguration = {});
+        (_e = lrPage.options.settings.controlConfiguration)['@com.sap.vocabularies.UI.v1.SelectionFields'] || (_e['@com.sap.vocabularies.UI.v1.SelectionFields'] = {});
+        (_f = lrPage.options.settings.controlConfiguration['@com.sap.vocabularies.UI.v1.SelectionFields']).filterFields || (_f.filterFields = {});
+        return lrPage.options.settings.controlConfiguration['@com.sap.vocabularies.UI.v1.SelectionFields'].filterFields;
+    }
+    return {};
+}
+//# sourceMappingURL=index.js.map

package/dist/filter/types.d.ts

@@ -0,0 +1,52 @@
+import type { FilterField } from '../building-block/types';
+import type { CustomElement, InternalCustomElement, Position, EventHandler } from '../common/types';
+/**
+ * Properties to create a custom filter.
+ */
+export interface CustomFilter extends CustomElement, EventHandler {
+    /**
+     * Filter label in the application.
+     */
+    label: string;
+    /**
+     * Property used to filter by.
+     */
+    property: string;
+    /**
+     * ID of the filter comboBox in the embedded filter XML view.
+     */
+    controlID: string;
+    /**
+     * Existing filter XML fragment file name without '.fragment.xml' suffix.
+     * If not set, is equal to the name specified in the config.
+     */
+    fragmentFile?: string;
+    /**
+     * Sets the required property of the custom filter.
+     */
+    required?: boolean;
+    /**
+     * Position of a custom filter relative to an anchor element.
+     */
+    position?: Position;
+    /**
+     * Specifies whether the controller file is generated in Typescript instead of Javascript.
+     */
+    typescript?: boolean;
+}
+/**
+ * Represents options available to a page in the manifest.json
+ */
+export interface PageOptions {
+    options?: {
+        settings?: {
+            controlConfiguration?: {
+                ['@com.sap.vocabularies.UI.v1.SelectionFields']?: {
+                    filterFields?: FilterField | {};
+                };
+            };
+        };
+    };
+}
+export type InternalCustomFilter = CustomFilter & InternalCustomElement;
+//# sourceMappingURL=types.d.ts.map

package/dist/filter/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { CustomTableColumn } from './column/types';
 export { generateCustomColumn } from './column';
 export { CustomSection, CustomSubSection } from './section/types';
 export { generateCustomSection, generateCustomSubSection } from './section';
+export { CustomFilter } from './filter/types';
+export { generateCustomFilter } from './filter';
 export { CustomView } from './view/types';
 export { generateCustomView } from './view';
 export { enableFPM, FPMConfig } from './app';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateControllerExtension = exports.ControllerExtensionPageType = exports.generateBuildingBlock = exports.BuildingBlockType = exports.validateVersion = exports.validateBasePath = exports.enableFPM = exports.generateCustomView = exports.generateCustomSubSection = exports.generateCustomSection = exports.generateCustomColumn = exports.generateCustomAction = exports.TargetControl = exports.generateListReport = exports.generateObjectPage = exports.generateCustomPage = void 0;
+exports.generateControllerExtension = exports.ControllerExtensionPageType = exports.generateBuildingBlock = exports.BuildingBlockType = exports.validateVersion = exports.validateBasePath = exports.enableFPM = exports.generateCustomView = exports.generateCustomFilter = exports.generateCustomSubSection = exports.generateCustomSection = exports.generateCustomColumn = exports.generateCustomAction = exports.TargetControl = exports.generateListReport = exports.generateObjectPage = exports.generateCustomPage = void 0;
 var page_1 = require("./page");
 Object.defineProperty(exports, "generateCustomPage", { enumerable: true, get: function () { return page_1.generateCustomPage; } });
 Object.defineProperty(exports, "generateObjectPage", { enumerable: true, get: function () { return page_1.generateObjectPage; } });
@@ -14,6 +14,8 @@ Object.defineProperty(exports, "generateCustomColumn", { enumerable: true, get:
 var section_1 = require("./section");
 Object.defineProperty(exports, "generateCustomSection", { enumerable: true, get: function () { return section_1.generateCustomSection; } });
 Object.defineProperty(exports, "generateCustomSubSection", { enumerable: true, get: function () { return section_1.generateCustomSubSection; } });
+var filter_1 = require("./filter");
+Object.defineProperty(exports, "generateCustomFilter", { enumerable: true, get: function () { return filter_1.generateCustomFilter; } });
 var view_1 = require("./view");
 Object.defineProperty(exports, "generateCustomView", { enumerable: true, get: function () { return view_1.generateCustomView; } });
 var app_1 = require("./app");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sap-ux/fe-fpm-writer",
   "description": "SAP Fiori elements flexible programming model writer",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/SAP/open-ux-tools.git",

package/templates/filter/Controller.js

@@ -0,0 +1,21 @@
+sap.ui.define(["sap/ui/model/Filter", "sap/ui/model/FilterOperator"], function(Filter, FilterOperator) {
+    "use strict";
+    return {
+        <%- eventHandlerFnName %>: function(sValue) {
+            switch (sValue) {
+                case "0":
+                        return new Filter({ path: "<%- property %>", operator: FilterOperator.LT, value1: 100 });
+                case "1":
+                        return new Filter({
+                        filters: [
+                            new Filter({ path: "<%- property %>", operator: FilterOperator.GT, value1: 100 }),
+                            new Filter({ path: "<%- property %>", operator: FilterOperator.LT, value1: 500 })
+                        ],
+                        and: true
+                    });
+                case "2":
+                        return new Filter({ path: "<%- property %>", operator: FilterOperator.GT, value1: 500 });
+            }
+        }
+    };
+});

package/templates/filter/Controller.ts

@@ -0,0 +1,24 @@
+import Filter from 'sap/ui/model/Filter';
+import FilterOperator from 'sap/ui/model/FilterOperator';
+
+/**
+ * Custom filter
+ * @param sValue selected filter item
+ * @returns new Filter
+ */
+export function <%- eventHandlerFnName %>(value: string) {
+    switch (value) {
+        case "0":
+            return new Filter({ path: "<%- property %>", operator: FilterOperator.LT, value1: 100 });
+        case "1":
+            return new Filter({
+                filters: [
+                    new Filter({ path: "<%- property %>", operator: FilterOperator.GT, value1: 100 }),
+                    new Filter({ path: "<%- property %>", operator: FilterOperator.LT, value1: 500 })
+                ],
+                and: true
+            });
+        case "2":
+            return new Filter({ path: "<%- property %>", operator: FilterOperator.GT, value1: 500 });
+    }
+}

package/templates/filter/fragment.xml

@@ -0,0 +1,13 @@
+<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
+        <ComboBox
+            id="<%- controlID %>"
+            core:require="{handler: '<%- ns.split('.').join('/') %>/<%- name %>'}"
+            selectedKey="{path: 'filterValues>', type: 'sap.fe.macros.filter.type.Value', formatOptions: { operator: '<%- (typeof eventHandler === 'string' ? eventHandler : `${ns}.${name}.${locals.eventHandler?.fnName ?? 'filterItems'}`) %>' }}"
+        >
+            <items>
+                <core:Item key="0" text="Item1"/>
+                <core:Item key="1" text="Item2"/>
+                <core:Item key="2" text="Item3"/>
+            </items>
+        </ComboBox>
+</core:FragmentDefinition>

package/templates/filter/manifest.json

@@ -0,0 +1,12 @@
+{
+    "<%- name %>": {
+        "label": "<%- label %>",
+        "property": "<%- property %>",
+        "template": "<%- `${ns}.${fragmentFile}` %>",
+        "required": <%- required -%><%if (typeof position !== 'undefined') {%>,
+        "position": {
+            "placement": "<%- position.placement %>"<%if (position.anchor !== undefined) {%>,
+            "anchor": "<%- position.anchor %>"<% } %>
+        }<% } %>
+    }
+}