Custom ui configurations

abap-api-tools/README.md

@@ -230,17 +230,17 @@ Using two configuration files, ABAP data types can be mapped to custom ui compon
 To modify existing ui configuration, first copy that configuration to local config folder:
 
 ```shell
-abap cp ui5-react
+abap cp ui5-react my-ui5
 
 tree config
 config
-├── ui5-react-abap.yaml
-└── ui5-react.yaml
+├── my-ui5-abap.yaml
+└── my-ui5.yaml
 ```
 
 The file with `-abap` suffix defines mapping of ABAP data types to ui components:
 
-`ui5-react-abap.yaml`
+`my-ui5-abap.yaml`
 
 ```yaml
 # Date field (YYYYMMDD) stored as char(8)
@@ -257,7 +257,7 @@ ABAP `DATS` datatype is here mapped to `datepicker` ui component.
 
 The ui component layout is defined in the ui config file without `abap` suffix:
 
-`ui5-react.yaml`
+`my-ui5.yaml`
 
 ```yaml
 datepicker: >-
@@ -266,24 +266,18 @@ datepicker: >-
   </FormItem>
 ```
 
-Elements with tilde prefix `~` are placeholders for texts, data binding and value input helps, documented in `yaml` files.
-
-Custom configuration in local config folder, if present, is used instead of the standard configuration. To go back to standard, remove it from `config` folder or run:
+You can edit both config files and use them with `make` command:
 
 ```shell
-abap rm ui5-react
+abap make my-ui5 -c planned_order_api
 ```
 
-To create new ui configuration, use the `custom` configuration template:
-
-```shell
-abap cp custom
-```
+Elements with tilde prefix `~` are placeholders for texts, data binding and value input helps, described in standard ui configuration `yaml` file.
 
-and remove it when no more needed:
+Custom configuration with the same name as standard one, if present in local folder, is used instead of the standard configuration. To go back to standard, remove it from `config` folder or run:
 
 ```shell
-abap rm custom
+abap rm my-ui5
 ```
 
 ## Known Issues

abap-api-tools/src/ts/abap.ts

@@ -7,7 +7,13 @@
 import fs from "fs";
 import path from "path";
 import yargs from "yargs";
-import { UIFrameworks, Languages, DefaultFolder } from "./constants";
+import {
+  UIFrameworks,
+  UIFrameworksAll,
+  UIFrameworksLocal,
+  Languages,
+  DefaultFolder,
+} from "./constants";
 import { AbapObject, Backend } from "./backend";
 import { Frontend } from "./frontend";
 import { yamlLoad, log, makeDir, deleteFile, getTimestamp } from "./utils";
@@ -101,19 +107,22 @@ class CliHandler {
     log.info(`Local configuration removed: ${ui}`);
   }
 
-  copyConfiguration(ui: string) {
+  copyConfiguration(source: string, target = "") {
     makeDir(DefaultFolder.userConfig);
-    for (const fn of [`${ui}-abap`, `${ui}`]) {
-      const source = path.join(DefaultFolder.configuration, "ui", `${fn}.yaml`);
-      const target = path.join(DefaultFolder.userConfig, path.basename(source));
+    if (target.length === 0) target = source;
+    for (const suffix of ["", "-abap"]) {
+      const sname = `${source}${suffix}.yaml`;
+      const tname = `${target}${suffix}.yaml`;
+      const sourcePath = path.join(DefaultFolder.configuration, "ui", sname);
+      const targetPath = path.join(DefaultFolder.userConfig, tname);
       try {
-        fs.copyFileSync(source, target, fs.constants.COPYFILE_EXCL);
+        fs.copyFileSync(sourcePath, targetPath, fs.constants.COPYFILE_EXCL);
       } catch (ex) {
         if (ex.code !== "EEXIST") throw ex; // ignore already exists error
-        throw new Error(`Remove local configuration first: ${target}`);
+        throw new Error(`Remove local configuration first: ${tname}`);
       }
     }
-    log.info(`Local configuration set: ${ui}`);
+    log.info(`Local configuration set: ${target}`);
   }
 }
 
@@ -210,7 +219,7 @@ export const argv = yargs(process.argv.slice(2))
     builder: (y) => {
       return y
         .positional("ui", {
-          choices: UIFrameworks,
+          choices: UIFrameworksAll,
           describe: `ui framework`,
         })
         .positional("rfm", {
@@ -243,13 +252,17 @@ export const argv = yargs(process.argv.slice(2))
     },
   })
   .command({
-    command: `${Command.set} <ui>`,
+    command: `${Command.set} <ui> [to]`,
     describe: `Copy ui configuration to local folder ${DefaultFolder.userConfig}`,
     builder: (y) => {
       return y
         .positional("ui", {
           choices: UIFrameworks,
-          describe: "ui framework",
+          describe: "ui framework name",
+        })
+        .positional("to", {
+          default: "",
+          describe: "New name for custom configuration",
         })
         .option("d", {
           alias: "debug",
@@ -259,7 +272,10 @@ export const argv = yargs(process.argv.slice(2))
         });
     },
     handler: (argv) => {
-      new CliHandler(argv as Arguments).copyConfiguration(argv.ui as string);
+      new CliHandler(argv as Arguments).copyConfiguration(
+        argv.ui as string,
+        argv.to as string
+      );
     },
   })
   .command({
@@ -268,7 +284,7 @@ export const argv = yargs(process.argv.slice(2))
     builder: (y) => {
       return y
         .positional("ui", {
-          choices: UIFrameworks,
+          choices: UIFrameworksLocal,
           describe: "ui framework",
         })
         .option("d", {

abap-api-tools/src/ts/constants.ts

@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import fs from "fs";
 import path from "path";
 
 export const UIFrameworks: readonly string[] = [
@@ -13,7 +14,6 @@ export const UIFrameworks: readonly string[] = [
   "fundamental-react",
   "fundamental-vue",
   "ui5-react",
-  "custom",
 ];
 
 // T002
@@ -138,3 +138,15 @@ export const DefaultFolder = Object.freeze({
   userConfig: "./config",
   output: "./api",
 });
+
+const localFrameworks: string[] = [];
+for (const fileName of fs.readdirSync(DefaultFolder.userConfig)) {
+  const m = fileName.match(/-abap.yaml$/);
+  if (m !== null) {
+    localFrameworks.push(fileName.substring(0, m.index));
+  }
+}
+export const UIFrameworksLocal = Object.freeze(localFrameworks);
+export const UIFrameworksAll = Object.freeze(
+  Array.from(new Set(UIFrameworks.concat(UIFrameworksLocal)))
+);