change path to JSON pointer

Author: LukasBoll

packages/angular-material/src/library/layouts/array-layout.renderer.ts

@@ -233,7 +233,7 @@ export class ArrayLayoutRenderer
     }
     return {
       schema: this.scopedSchema,
-      path: Paths.compose(this.propsPath, `${index}`),
+      path: Paths.compose(this.propsPath, `/${index}`),
       uischema,
     };
   }

packages/angular-material/src/library/other/master-detail/master.ts

@@ -91,7 +91,7 @@ export const removeSchemaKeywords = (path: string) => {
             <button
               mat-icon-button
               class="button item-button hide"
-              (click)="onDeleteClick(i)"
+              (click)="onDeleteClick($event, i)"
               [ngClass]="{ show: highlightedIdx == i }"
               *ngIf="isEnabled()"
             >
@@ -224,7 +224,7 @@ export class MasterListComponent
           ? d.toString()
           : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
         data: d,
-        path: `${path}.${index}`,
+        path: `${path}/${index}`,
         schema,
         uischema: detailUISchema,
       };
@@ -278,7 +278,8 @@ export class MasterListComponent
     )();
   }
 
-  onDeleteClick(item: number) {
+  onDeleteClick(e: any, item: number) {
+    e.stopPropagation();
     this.removeItems(this.propsPath, [item])();
   }
 

packages/angular-material/src/library/other/table.renderer.ts

@@ -273,7 +273,7 @@ export const controlWithoutLabel = (scope: string): ControlElement => ({
 @Pipe({ name: 'getProps' })
 export class GetProps implements PipeTransform {
   transform(index: number, props: OwnPropsOfRenderer) {
-    const rowPath = Paths.compose(props.path, `${index}`);
+    const rowPath = Paths.compose(props.path, `/${index}`);
     return {
       schema: props.schema,
       uischema: props.uischema,

packages/angular-material/test/master-detail.spec.ts

@@ -223,7 +223,7 @@ describe('Master detail', () => {
     // delete 1st item
     spyOn(component, 'removeItems').and.callFake(() => () => {
       getJsonFormsService(component).updateCore(
-        Actions.update('orders', () => moreData.orders.slice(1))
+        Actions.update('/orders', () => moreData.orders.slice(1))
       );
       fixture.detectChanges();
     });
@@ -267,7 +267,7 @@ describe('Master detail', () => {
       const copy = moreData.orders.slice();
       copy.splice(1, 1);
       getJsonFormsService(component).updateCore(
-        Actions.update('orders', () => copy)
+        Actions.update('/orders', () => copy)
       );
       fixture.detectChanges();
     });
@@ -382,7 +382,7 @@ describe('Master detail', () => {
               customer: { name: 'ACME' },
               title: 'Carrots',
             },
-            path: 'orders.0',
+            path: '/orders/0',
             schema: schema.definitions.order,
             uischema: {
               type: 'VerticalLayout',

packages/core/src/i18n/i18nUtil.ts

@@ -13,6 +13,7 @@ import {
   formatErrorMessage,
   getControlPath,
   isInternationalized,
+  toLodashPath,
 } from '../util';
 
 export const getI18nKeyPrefixBySchema = (
@@ -31,7 +32,7 @@ export const getI18nKeyPrefixBySchema = (
  */
 export const transformPathToI18nPrefix = (path: string): string => {
   return (
-    path
+    toLodashPath(path)
       ?.split('.')
       .filter((segment) => !/^\d+$/.test(segment))
       .join('.') || 'root'

packages/core/src/reducers/core.ts

@@ -45,7 +45,14 @@ import {
 import { JsonFormsCore, Reducer, ValidationMode } from '../store';
 import Ajv, { ErrorObject } from 'ajv';
 import { isFunction } from 'lodash';
-import { createAjv, validate } from '../util';
+import {
+  composePaths,
+  createAjv,
+  isOneOfEnumSchema,
+  Reducer,
+  toLodashSegments,
+  validate,
+} from '../util';
 
 export const initState: JsonFormsCore = {
   data: {},
@@ -237,18 +244,19 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
           errors,
         };
       } else {
-        const oldData: any = get(state.data, action.path);
+        const lodashDataPathSegments = toLodashSegments(action.path);
+        const oldData: any = get(state.data, lodashDataPathSegments);
         const newData = action.updater(cloneDeep(oldData));
         let newState: any;
         if (newData !== undefined) {
           newState = setFp(
-            action.path,
+            lodashDataPathSegments,
             newData,
             state.data === undefined ? {} : state.data
           );
         } else {
           newState = unsetFp(
-            action.path,
+            lodashDataPathSegments,
             state.data === undefined ? {} : state.data
           );
         }

packages/core/src/reducers/i18n.ts

@@ -23,7 +23,13 @@
   THE SOFTWARE.
 */
 
-import { defaultErrorTranslator, defaultTranslator } from '../i18n';
+import {
+  defaultErrorTranslator,
+  defaultTranslator,
+  ErrorTranslator,
+  JsonFormsI18nState,
+  Translator,
+} from '../i18n';
 import {
   I18nActions,
   SET_LOCALE,
@@ -32,6 +38,7 @@ import {
 } from '../actions';
 import { Reducer } from '../store/type';
 import { JsonFormsI18nState } from '../store';
+import { UISchemaElement } from '../models';
 
 export const defaultJsonFormsI18nState: Required<JsonFormsI18nState> = {
   locale: 'en',
@@ -50,7 +57,6 @@ export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (
         action.translator ?? defaultJsonFormsI18nState.translate;
       const translateError =
         action.errorTranslator ?? defaultJsonFormsI18nState.translateError;
-
       if (
         locale !== state.locale ||
         translate !== state.translate ||
@@ -80,3 +86,19 @@ export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (
       return state;
   }
 };
+
+export const wrapTranslateFunction = (translator: Translator): Translator => {
+  return (id: string, defaultMessage?: string | undefined, values?: any) => {
+    return translator(toLodashPath(id), defaultMessage, values);
+  };
+};
+
+export const wrapErrorTranslateFunction = (
+  translator: ErrorTranslator
+): ErrorTranslator => {
+  return (
+    error: ErrorObject,
+    translate: Translator,
+    uischema?: UISchemaElement
+  ) => translator(error, wrapTranslateFunction(translate), uischema);
+};

packages/core/src/store/jsonFormsCore.ts

@@ -34,7 +34,7 @@ export const errorAt = (instancePath: string, schema: JsonSchema) =>
   getErrorsAt(instancePath, schema, (path) => path === instancePath);
 export const subErrorsAt = (instancePath: string, schema: JsonSchema) =>
   getErrorsAt(instancePath, schema, (path) =>
-    path.startsWith(instancePath + '.')
+    path.startsWith(instancePath + '/')
   );
 
 export const getErrorAt =

packages/core/src/util/errors.ts

@@ -24,7 +24,7 @@
 */
 
 import { ErrorObject } from 'ajv';
-import { decode } from './path';
+import { composePaths } from './path';
 import { JsonSchema } from '../models';
 import { isOneOfEnumSchema } from './schema';
 import filter from 'lodash/filter';
@@ -47,19 +47,11 @@ export const getControlPath = (error: ErrorObject) => {
   // With AJV v8 the property was renamed to 'instancePath'
   let controlPath = (error as any).dataPath || error.instancePath || '';
 
-  // change '/' chars to '.'
-  controlPath = controlPath.replace(/\//g, '.');
-
   const invalidProperty = getInvalidProperty(error);
   if (invalidProperty !== undefined && !controlPath.endsWith(invalidProperty)) {
-    controlPath = `${controlPath}.${invalidProperty}`;
+    controlPath = composePaths(controlPath, invalidProperty);
   }
 
-  // remove '.' chars at the beginning of paths
-  controlPath = controlPath.replace(/^./, '');
-
-  // decode JSON Pointer escape sequences
-  controlPath = decode(controlPath);
   return controlPath;
 };
 

packages/core/src/util/path.ts

@@ -26,18 +26,26 @@
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 
-export const compose = (path1: string, path2: string) => {
-  let p1 = path1;
-  if (!isEmpty(path1) && !isEmpty(path2) && !path2.startsWith('[')) {
-    p1 = path1 + '.';
+/**
+ * Composes two JSON pointer. Pointer1 is appended to pointer2.
+ * JSON pointer is seperated and start with '/' e.g: /foo/0
+ *
+ * @param {string} pointer1 JSON pointer
+ * @param {string} pointer2 JSON pointer
+ * @returns {string} resulting JSON pointer
+ */
+export const compose = (pointer1: string, pointer2: string) => {
+  let p2 = pointer2;
+  if (!isEmpty(pointer2) && !pointer2.startsWith('/')) {
+    p2 = '/' + pointer2;
   }
 
-  if (isEmpty(p1)) {
-    return path2;
-  } else if (isEmpty(path2)) {
-    return p1;
+  if (isEmpty(pointer1)) {
+    return p2;
+  } else if (isEmpty(pointer2)) {
+    return pointer1;
   } else {
-    return `${p1}${path2}`;
+    return `${pointer1}${p2}`;
   }
 };
 
@@ -75,13 +83,25 @@ export const toDataPathSegments = (schemaPath: string): string[] => {
  * Data paths can be used in field change event handlers like handleChange.
  *
  * @example
- * toDataPath('#/properties/foo/properties/bar') === 'foo.bar')
+ * toDataPath('#/properties/foo/properties/bar') === '/foo/bar')
  *
  * @param {string} schemaPath the schema path to be converted
  * @returns {string} the data path
  */
 export const toDataPath = (schemaPath: string): string => {
-  return toDataPathSegments(schemaPath).join('.');
+  return '/' + toDataPathSegments(schemaPath).join('/');
+};
+
+export const toLodashSegments = (jsonPointer: string): string[] => {
+  let path = jsonPointer;
+  if (jsonPointer && jsonPointer.startsWith('/')) {
+    path = jsonPointer.substring(1);
+  }
+  return path ? path.split('/').map(decode) : [];
+};
+
+export const toLodashPath = (jsonPointer: string) => {
+  return toLodashSegments(jsonPointer).join('.');
 };
 
 /**