create-ui5-freestyle-lr 0.2.0

package/src/render/buildContext.js

@@ -0,0 +1,67 @@
+import {
+  cellControlFor,
+  columnHAlignFor,
+  columnImportanceFor,
+  columnWidthFor,
+  exportTypeFor,
+  filterControlFor,
+  filterOperatorFor,
+  isStringType,
+} from "./controlForType.js";
+
+function slugify(s) {
+  return s.replace(/[^a-zA-Z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+}
+
+function sortDelegateFor(field) {
+  if (!field) return null;
+  return field;
+}
+
+function detectHighlightField(columns) {
+  // Prefer plain "Status" / "TechStatus" over *Txt fields
+  for (const col of columns) {
+    if (/^(tech)?status$/i.test(col.name)) return col.name;
+  }
+  for (const col of columns) {
+    if (/status/i.test(col.name) && !/txt$/i.test(col.name)) return col.name;
+  }
+  return null;
+}
+
+export function buildContext(answers) {
+  const namespacePath = answers.appId.replace(/\./g, "/");
+  const appName = answers.appId.split(".").pop();
+  const primaryKey = answers.keyFields[0] || null;
+
+  const i18nLabels = new Map();
+  for (const col of answers.columns) {
+    i18nLabels.set(`col.${col.name}`, col.label || col.name);
+  }
+  for (const f of answers.filters) {
+    i18nLabels.set(`filter.${f.fieldName}`, f.label || f.fieldName);
+  }
+
+  const highlightField = detectHighlightField(answers.columns);
+
+  return {
+    ...answers,
+    namespacePath,
+    appName,
+    primaryKey,
+    highlightField,
+    i18nLabels,
+    helpers: {
+      cellControlFor,
+      columnHAlignFor,
+      columnImportanceFor,
+      columnWidthFor,
+      exportTypeFor,
+      filterControlFor,
+      filterOperatorFor,
+      isStringType,
+      slugify,
+      sortDelegateFor,
+    },
+  };
+}

package/src/render/controlForType.js

@@ -0,0 +1,136 @@
+const DATE_TYPES = new Set(["Edm.DateTime", "Edm.DateTimeOffset"]);
+const NUMBER_TYPES = new Set([
+  "Edm.Decimal",
+  "Edm.Double",
+  "Edm.Single",
+  "Edm.Int16",
+  "Edm.Int32",
+  "Edm.Int64",
+  "Edm.Byte",
+  "Edm.SByte",
+]);
+const STATUS_RE = /Status$/i;
+const GUID_RE = /GUID/i;
+const ID_SUFFIX_RE = /Id$/;
+const KEY_UUID_RE = /(Uuid|Key$)/i;
+const MODEL = "worklistView";
+
+function p(field) {
+  return "{" + MODEL + ">" + field + "}";
+}
+
+function pf(field, formatter) {
+  return `{path:'${MODEL}>${field}', formatter:'.formatter.${formatter}'}`;
+}
+
+export function cellControlFor(prop, { isFirstColumn }) {
+  const name = prop.name;
+
+  // First key column → ObjectIdentifier (most prominent)
+  if (isFirstColumn && prop.isKey) {
+    return `<m:ObjectIdentifier title="${p(name)}"/>`;
+  }
+
+  // Date / DateTime → ObjectIdentifier with date as title and time as text
+  if (DATE_TYPES.has(prop.type)) {
+    return `<m:ObjectIdentifier title="${pf(name, "formatDateOnly")}" text="${pf(name, "formatTimeOnly")}"/>`;
+  }
+
+  // Edm.Time → just time
+  if (prop.type === "Edm.Time") {
+    return `<m:Text text="${pf(name, "formatTimeOnly")}"/>`;
+  }
+
+  // Boolean → accept/decline icon
+  if (prop.type === "Edm.Boolean") {
+    return `<core:Icon src="{= \${${MODEL}>${name}} ? 'sap-icon://accept' : 'sap-icon://decline'}"/>`;
+  }
+
+  // Numeric → right-aligned with 2-decimal formatter
+  if (NUMBER_TYPES.has(prop.type)) {
+    return `<m:Text text="${pf(name, "numberUnit")}"/>`;
+  }
+
+  // Status-looking field → GenericTag with state mapped from value
+  if (STATUS_RE.test(name)) {
+    return `<m:GenericTag text="${p(name)}" status="${pf(name, "formatStatusState")}"/>`;
+  }
+
+  // ID-like fields → FormattedText with different styles per pattern
+  // for visual variety between primary / secondary / reference IDs
+  if (GUID_RE.test(name)) {
+    // Primary identifiers: bold monospace
+    return `<m:FormattedText htmlText="${pf(name, "formatStrongCode")}"/>`;
+  }
+  if (ID_SUFFIX_RE.test(name)) {
+    // Secondary identifiers: plain monospace
+    return `<m:FormattedText htmlText="${pf(name, "formatCode")}"/>`;
+  }
+  if (KEY_UUID_RE.test(name)) {
+    // References / UUIDs: italic
+    return `<m:FormattedText htmlText="${pf(name, "formatCite")}"/>`;
+  }
+
+  // Default → plain Text
+  return `<m:Text text="${p(name)}"/>`;
+}
+
+export function columnHAlignFor(prop) {
+  if (NUMBER_TYPES.has(prop.type)) return "End";
+  if (prop.type === "Edm.Boolean") return "Center";
+  if (DATE_TYPES.has(prop.type)) return "Center";
+  return "Begin";
+}
+
+export function columnImportanceFor(prop, idx, total) {
+  if (idx === 0) return "High";
+  if (idx >= total - 3) return "Low";
+  return "Medium";
+}
+
+/**
+ * Default per-column width based on the Edm type and field name. These keep
+ * the table readable without forcing the user to set widths manually. The
+ * ColumnResizer plugin (added in the view) lets the user drag-resize at runtime.
+ */
+export function columnWidthFor(prop, isFirstColumn) {
+  if (isFirstColumn && prop.isKey) return "12rem";
+  if (DATE_TYPES.has(prop.type)) return "10rem";
+  if (prop.type === "Edm.Time") return "6rem";
+  if (prop.type === "Edm.Boolean") return "4rem";
+  if (NUMBER_TYPES.has(prop.type)) return "7rem";
+  if (STATUS_RE.test(prop.name)) return "8rem";
+  if (GUID_RE.test(prop.name)) return "10rem";
+  if (ID_SUFFIX_RE.test(prop.name) || KEY_UUID_RE.test(prop.name)) return "10rem";
+  return "10rem";
+}
+
+export function filterControlFor(filter) {
+  const id = filter.fieldName;
+  if (filter.inputType === "dateRange") {
+    return `<m:DateRangeSelection id="${id}" displayFormat="dd.MM.yyyy"/>`;
+  }
+  if (filter.inputType === "valueHelp") {
+    return `<m:MultiInput id="${id}" width="100%" showValueHelp="true" valueHelpIconSrc="sap-icon://multiselect-all" valueHelpOnly="true" valueHelpRequest=".on${id}VH"/>`;
+  }
+  return `<m:MultiInput id="${id}" width="100%"/>`;
+}
+
+export function filterOperatorFor(filter) {
+  if (filter.inputType === "dateRange") return "BT";
+  if (filter.inputType === "valueHelp") return "EQ";
+  return "Contains";
+}
+
+export function isStringType(type) {
+  return type === "Edm.String" || type === "Edm.Guid";
+}
+
+export function exportTypeFor(prop) {
+  if (DATE_TYPES.has(prop.type)) return "DateTime";
+  if (prop.type === "Edm.Date") return "Date";
+  if (prop.type === "Edm.Time") return "Time";
+  if (prop.type === "Edm.Boolean") return "Boolean";
+  if (NUMBER_TYPES.has(prop.type)) return "Number";
+  return "String";
+}

package/src/render/engine.js

@@ -0,0 +1,81 @@
+import { readFile, writeFile, mkdir, readdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import ejs from "ejs";
+import { buildContext } from "./buildContext.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const TEMPLATES_DIR = path.resolve(__dirname, "../templates");
+const PER_FILTER_VH_TEMPLATE = path.resolve(TEMPLATES_DIR, "_valueHelp.fragment.xml.ejs");
+
+async function* walk(dir) {
+  const entries = await readdir(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      yield* walk(full);
+    } else if (entry.isFile()) {
+      yield full;
+    }
+  }
+}
+
+function shouldSkip(relPath, ctx) {
+  const normalized = relPath.replace(/\\/g, "/");
+  const basename = path.basename(normalized);
+  if (basename.startsWith("_")) return true;
+  if (!ctx.hasGerman && normalized.includes("i18n_de.")) return true;
+  return false;
+}
+
+function outputPathFor(relPath, targetDir) {
+  const stripped = relPath.endsWith(".ejs") ? relPath.slice(0, -4) : relPath;
+  return path.join(targetDir, stripped);
+}
+
+async function renderEjsTo(tmplPath, outPath, ctx) {
+  const tmpl = await readFile(tmplPath, "utf8");
+  const rendered = ejs.render(tmpl, ctx, { filename: tmplPath });
+  await mkdir(path.dirname(outPath), { recursive: true });
+  await writeFile(outPath, rendered, "utf8");
+}
+
+async function renderStaticTo(tmplPath, outPath, ctx) {
+  const raw = await readFile(tmplPath, "utf8");
+  const replaced = raw
+    .replace(/__APP_ID__/g, ctx.appId)
+    .replace(/__NAMESPACE_PATH__/g, ctx.namespacePath)
+    .replace(/__APP_NAME__/g, ctx.appName);
+  await mkdir(path.dirname(outPath), { recursive: true });
+  await writeFile(outPath, replaced, "utf8");
+}
+
+export async function render(answers, targetDir) {
+  const ctx = buildContext(answers);
+
+  for await (const tmplPath of walk(TEMPLATES_DIR)) {
+    const relPath = path.relative(TEMPLATES_DIR, tmplPath);
+    if (shouldSkip(relPath, ctx)) continue;
+
+    const outPath = outputPathFor(relPath, targetDir);
+    if (tmplPath.endsWith(".ejs")) {
+      await renderEjsTo(tmplPath, outPath, ctx);
+    } else {
+      await renderStaticTo(tmplPath, outPath, ctx);
+    }
+  }
+
+  for (const filter of ctx.filters.filter((f) => f.valueHelp)) {
+    const subCtx = { ...ctx, filter };
+    const outName = `${filter.fieldName}VH.fragment.xml`;
+    const outPath = path.join(targetDir, "webapp", "view", "fragments", outName);
+    await renderEjsTo(PER_FILTER_VH_TEMPLATE, outPath, subCtx);
+  }
+
+  if (answers.rawMetadataXml) {
+    const metaPath = path.join(targetDir, "webapp", "localService", "metadata.xml");
+    await mkdir(path.dirname(metaPath), { recursive: true });
+    await writeFile(metaPath, answers.rawMetadataXml, "utf8");
+  }
+}

package/src/templates/README.md.ejs

@@ -0,0 +1,62 @@
+# <%= appTitle %>
+
+<% if (appDescription) { %><%= appDescription %><% } else { %>Freestyle SAPUI5 List Report app.<% } %>
+
+Generated with [create-ui5-freestyle-lr](https://www.npmjs.com/package/create-ui5-freestyle-lr).
+
+## Develop
+
+    npm install
+    npm start
+
+The app opens in your browser. `ui5 serve` proxies OData requests via `<%= serviceUrl %>`.
+If the backend requires auth, the browser will prompt (basic auth).
+
+## Build
+
+    npm run build       # dev build into dist/
+    npm run build:prod  # prod build with cachebuster
+
+## Layout
+
+    webapp/
+    ├── Component.js, manifest.json, index.html
+    ├── view/
+    │   ├── App.view.xml
+    │   ├── Worklist.view.xml          Main list view with FilterBar + Table + Footer pagination
+    │   ├── NotFound.view.xml
+    │   └── fragments/                 Value-help dialogs, sort/group dialogs, info popover
+    ├── controller/
+    │   ├── BaseController.js          Shared helpers (getRouter, getModel, ...)
+    │   ├── Worklist.controller.js     Main list controller (pagination, filters, sorting, grouping)
+    │   ├── ErrorHandler.js            Central OData error handling
+    │   └── App.controller.js, NotFound.controller.js
+    ├── model/
+    │   ├── formatter.js               Value formatters used in bindings
+    │   └── models.js                  Device + FLP model factories
+    ├── i18n/                          Translations (<% if (hasGerman) { %>en + de<% } else { %>en<% } %>)
+    ├── css/style.css
+    └── localService/metadata.xml      Snapshot of the OData $metadata
+
+## Adding a filter field manually
+
+1. Open `webapp/view/Worklist.view.xml` → find the `<fb:FilterBar>` block.
+2. Copy an existing `<fb:FilterGroupItem>`, change `name` / `label` / control `id`.
+3. (If it needs a value help) Copy an existing `*VH.fragment.xml` in `webapp/view/fragments/`
+   and rename. Add its handlers (`on<Field>VH`, `on<Field>VHOkPress`, `on<Field>VHCancelPress`,
+   `on<Field>VHAfterClose`) to `Worklist.controller.js` by copying an existing block.
+4. Add the i18n key `filter.<Field>=<label>` in `i18n/i18n.properties`
+   (and `i18n_de.properties` if German is enabled).
+5. In `Worklist.controller.js` → `onSearch`, add a block that reads tokens from the new
+   MultiInput and builds a `Filter` — copy an existing block.
+
+## Adding a column
+
+1. In `Worklist.view.xml` → `<m:columns>` add a new `<m:Column>` with `<m:Text text="{i18n>col.<Field>}"/>`.
+2. In `<m:items>` → `<m:ColumnListItem>` → `<m:cells>` add a cell control bound to the new field.
+3. Add `col.<Field>=<label>` in the i18n files.
+
+## OData metadata snapshot
+
+`webapp/localService/metadata.xml` is a snapshot taken at scaffold time. If the service schema changes,
+replace this file (or refetch via `ui5 serve`'s proxy).

package/src/templates/_valueHelp.fragment.xml.ejs

@@ -0,0 +1,17 @@
+<core:FragmentDefinition
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core">
+    <SelectDialog
+        id="<%= filter.fieldName %>VHDialog"
+        title="{i18n>filter.<%= filter.fieldName %>}"
+        multiSelect="true"
+        rememberSelections="true"
+        confirm=".on<%= filter.fieldName %>VHOkPress"
+        cancel=".on<%= filter.fieldName %>VHCancelPress"
+        search=".on<%= filter.fieldName %>VHSearch"
+        items="{worklistView>/<%= filter.valueHelp.entitySet %>}">
+        <StandardListItem
+            title="{worklistView><%= filter.valueHelp.textField %>}"
+            description="{worklistView><%= filter.valueHelp.keyField %>}"/>
+    </SelectDialog>
+</core:FragmentDefinition>

package/src/templates/package.json.ejs

@@ -0,0 +1,14 @@
+{
+  "name": "<%= appName %>",
+  "version": "1.0.0",
+  "description": "<%= appDescription || appTitle %>",
+  "private": true,
+  "scripts": {
+    "start": "ui5 serve --open index.html",
+    "build": "ui5 build --clean-dest --include-task=generateManifestBundle",
+    "build:prod": "ui5 build --clean-dest --include-task=generateManifestBundle --include-task=generateCachebusterInfo"
+  },
+  "devDependencies": {
+    "@ui5/cli": "^4.0.0"
+  }
+}

package/src/templates/ui5.yaml.ejs

@@ -0,0 +1,28 @@
+specVersion: "4.0"
+metadata:
+  name: <%= appName %>
+type: application
+framework:
+  name: SAPUI5
+  version: "<%= minUI5Version %>"
+  libraries:
+    - name: sap.ui.core
+    - name: sap.m
+    - name: sap.f
+    - name: sap.ui.comp
+    - name: sap.ui.layout
+    - name: sap.uxap
+    - name: sap.ui.export
+    - name: sap.ui.fl
+    - name: themelib_sap_horizon
+#
+# To call a real backend during development, uncomment the proxy block below
+# after running:  npm install ui5-middleware-simpleproxy --save-dev
+#
+# server:
+#   customMiddleware:
+#     - name: ui5-middleware-simpleproxy
+#       mountPath: <%= serviceUrl.replace(/\/+$/, '') %>
+#       afterMiddleware: compression
+#       configuration:
+#         baseUri: https://your-backend-host:port<%= serviceUrl %>

package/src/templates/webapp/Component.js.ejs

@@ -0,0 +1,47 @@
+sap.ui.define([
+    "sap/ui/core/UIComponent",
+    "sap/ui/Device",
+    "./model/models",
+    "./controller/ErrorHandler"
+], function (UIComponent, Device, models, ErrorHandler) {
+    "use strict";
+
+    return UIComponent.extend("<%= appId %>.Component", {
+
+        metadata: {
+            manifest: "json"
+        },
+
+        init: function () {
+            UIComponent.prototype.init.apply(this, arguments);
+
+            this._oErrorHandler = new ErrorHandler(this);
+
+            this.setModel(models.createDeviceModel(), "device");
+            this.setModel(models.createFLPModel(), "FLP");
+
+            this.getRouter().initialize();
+        },
+
+        destroy: function () {
+            if (this._oErrorHandler && this._oErrorHandler.destroy) {
+                this._oErrorHandler.destroy();
+            }
+            UIComponent.prototype.destroy.apply(this, arguments);
+        },
+
+        getContentDensityClass: function () {
+            if (this._sContentDensityClass === undefined) {
+                if (document.body.classList.contains("sapUiSizeCozy") ||
+                    document.body.classList.contains("sapUiSizeCompact")) {
+                    this._sContentDensityClass = "";
+                } else if (!Device.support.touch) {
+                    this._sContentDensityClass = "sapUiSizeCompact";
+                } else {
+                    this._sContentDensityClass = "sapUiSizeCozy";
+                }
+            }
+            return this._sContentDensityClass;
+        }
+    });
+});

package/src/templates/webapp/controller/App.controller.js

@@ -0,0 +1,29 @@
+sap.ui.define([
+    "./BaseController",
+    "sap/ui/model/json/JSONModel"
+], function (BaseController, JSONModel) {
+    "use strict";
+
+    return BaseController.extend("__APP_ID__.controller.App", {
+
+        onInit: function () {
+            const oViewModel = new JSONModel({
+                busy: true,
+                delay: 0
+            });
+            this.setModel(oViewModel, "appView");
+
+            const iOriginalBusyDelay = this.getView().getBusyIndicatorDelay();
+            const fnNotBusy = function () {
+                oViewModel.setProperty("/busy", false);
+                oViewModel.setProperty("/delay", iOriginalBusyDelay);
+            };
+
+            const oModel = this.getOwnerComponent().getModel();
+            oModel.metadataLoaded().then(fnNotBusy);
+            oModel.attachMetadataFailed(fnNotBusy);
+
+            this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());
+        }
+    });
+});

package/src/templates/webapp/controller/BaseController.js

@@ -0,0 +1,35 @@
+sap.ui.define([
+    "sap/ui/core/mvc/Controller",
+    "sap/ui/core/UIComponent"
+], function (Controller, UIComponent) {
+    "use strict";
+
+    return Controller.extend("__APP_ID__.controller.BaseController", {
+
+        getRouter: function () {
+            return UIComponent.getRouterFor(this);
+        },
+
+        getModel: function (sName) {
+            return this.getView().getModel(sName);
+        },
+
+        setModel: function (oModel, sName) {
+            return this.getView().setModel(oModel, sName);
+        },
+
+        getResourceBundle: function () {
+            return this.getOwnerComponent().getModel("i18n").getResourceBundle();
+        },
+
+        onNavBack: function () {
+            const oHistory = sap.ui.core.routing.History.getInstance();
+            const sPreviousHash = oHistory.getPreviousHash();
+            if (sPreviousHash !== undefined) {
+                window.history.go(-1);
+            } else {
+                this.getRouter().navTo("worklist", {}, true);
+            }
+        }
+    });
+});

package/src/templates/webapp/controller/ErrorHandler.js

@@ -0,0 +1,71 @@
+sap.ui.define([
+    "sap/ui/base/Object",
+    "sap/m/MessageBox"
+], function (UI5Object, MessageBox) {
+    "use strict";
+
+    return UI5Object.extend("__APP_ID__.controller.ErrorHandler", {
+
+        constructor: function (oComponent) {
+            this._oResourceBundle = oComponent.getModel("i18n").getResourceBundle();
+            this._oComponent = oComponent;
+            this._oModel = oComponent.getModel();
+            this._bMessageOpen = false;
+            this._sErrorText = this._oResourceBundle.getText("errorText");
+
+            this._oModel.attachMetadataFailed(function (oEvent) {
+                this._showServiceError(oEvent.getParameters().response);
+            }, this);
+
+            this._oModel.attachRequestFailed(function (oEvent) {
+                const oParams = oEvent.getParameters();
+                const oResponse = oParams.response;
+                const sCode = String(oResponse.statusCode);
+
+                // Ignore typical transient 404s that libraries retry (e.g. "Cannot POST" pre-flight)
+                if (sCode === "404" && oResponse.responseText && oResponse.responseText.indexOf("Cannot POST") === 0) {
+                    return;
+                }
+                if (this._bMessageOpen) {
+                    return;
+                }
+                this._bMessageOpen = true;
+                MessageBox.error(this._extractMessage(oResponse), {
+                    onClose: function () {
+                        this._bMessageOpen = false;
+                    }.bind(this)
+                });
+            }, this);
+        },
+
+        _extractMessage: function (oResponse) {
+            try {
+                if (oResponse && oResponse.responseText) {
+                    const o = JSON.parse(oResponse.responseText);
+                    if (o.error && o.error.message && o.error.message.value) {
+                        return o.error.message.value;
+                    }
+                }
+            } catch (e) {
+                // fall through to default
+            }
+            return this._sErrorText;
+        },
+
+        _showServiceError: function (sDetails) {
+            if (this._bMessageOpen) {
+                return;
+            }
+            this._bMessageOpen = true;
+            MessageBox.error(this._sErrorText, {
+                id: "serviceErrorMessageBox",
+                details: sDetails,
+                styleClass: this._oComponent.getContentDensityClass(),
+                actions: [MessageBox.Action.CLOSE],
+                onClose: function () {
+                    this._bMessageOpen = false;
+                }.bind(this)
+            });
+        }
+    });
+});

package/src/templates/webapp/controller/NotFound.controller.js

@@ -0,0 +1,12 @@
+sap.ui.define([
+    "./BaseController"
+], function (BaseController) {
+    "use strict";
+
+    return BaseController.extend("__APP_ID__.controller.NotFound", {
+
+        onNavBack: function () {
+            this.getRouter().navTo("worklist", {}, true);
+        }
+    });
+});