Custom ID in UI. (#751)

backend/i18n/frontend_en.json

@@ -424,6 +424,7 @@
   "contents.draftNew": "New Draft",
   "contents.draftStatus": "New Version",
   "contents.editPageTitle": "Edit Content",
+  "contents.idPlaceholder": "Define a custom ID or leave empty to let Squidex generate one.",
   "contents.invariantFieldDescription": "The '{fieldName}' field of the content item.",
   "contents.languageModeAll": "All Languages",
   "contents.languageModeSingle": "Single Language",

backend/i18n/frontend_it.json

@@ -424,6 +424,7 @@
   "contents.draftNew": "Nuova bozza",
   "contents.draftStatus": "Nuova versione",
   "contents.editPageTitle": "Modifica contenuto",
+  "contents.idPlaceholder": "Define a custom ID or leave empty to let Squidex generate one.",
   "contents.invariantFieldDescription": "Il campo '{fieldName}' del contenuto.",
   "contents.languageModeAll": "Tutte le lingue",
   "contents.languageModeSingle": "Una sola lingua",

backend/i18n/frontend_nl.json

@@ -424,6 +424,7 @@
   "contents.draftNew": "Nieuw concept",
   "contents.draftStatus": "Nieuwe versie",
   "contents.editPageTitle": "Inhoud bewerken",
+  "contents.idPlaceholder": "Define a custom ID or leave empty to let Squidex generate one.",
   "contents.invariantFieldDescription": "Het veld '{fieldName}' van het inhoudsitem.",
   "contents.languageModeAll": "Alle talen",
   "contents.languageModeSingle": "Enkele taal",

backend/i18n/frontend_zh.json

@@ -424,6 +424,7 @@
   "contents.draftNew": "新草稿",
   "contents.draftStatus": "新版本",
   "contents.editPageTitle": "编辑内容",
+  "contents.idPlaceholder": "Define a custom ID or leave empty to let Squidex generate one.",
   "contents.invariantFieldDescription": "内容项的 '{fieldName}' 字段。",
   "contents.languageModeAll": "所有语言",
   "contents.languageModeSingle": "单一语言",

backend/i18n/source/frontend_en.json

@@ -424,6 +424,7 @@
   "contents.draftNew": "New Draft",
   "contents.draftStatus": "New Version",
   "contents.editPageTitle": "Edit Content",
+  "contents.idPlaceholder": "Define a custom ID or leave empty to let Squidex generate one.",
   "contents.invariantFieldDescription": "The '{fieldName}' field of the content item.",
   "contents.languageModeAll": "All Languages",
   "contents.languageModeSingle": "Single Language",

frontend/app/features/content/pages/content/content-page.component.html

@@ -130,6 +130,7 @@
                     <ng-container *ngSwitchDefault>
                         <sqx-content-editor
                             [(language)]="language"
+                            [contentId]="contentId"
                             [contentForm]="contentForm"
                             [contentFormCompare]="contentFormCompare"
                             [contentVersion]="contentVersion"
@@ -144,6 +145,8 @@
             <ng-template #noContentEditor>
                 <sqx-content-editor
                     [(language)]="language"
+                    [(contentId)]="contentId"
+                    [isNew]="!content"
                     [contentForm]="contentForm"
                     [contentFormCompare]="contentFormCompare"
                     [contentVersion]="contentVersion"

frontend/app/features/content/pages/content/content-page.component.ts

@@ -33,6 +33,7 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
 
     public contentTab = this.route.queryParams.pipe(map(x => x['tab'] || 'editor'));
     public content?: ContentDto | null;
+    public contentId = '';
     public contentVersion: Version | null;
     public contentForm: EditContentForm;
     public contentFormCompare: EditContentForm | null = null;
@@ -180,7 +181,7 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
                     return;
                 }
 
-                this.contentsState.create(value, publish)
+                this.contentsState.create(value, publish, this.contentId)
                     .subscribe({
                         next: content => {
                             this.contentForm.submitCompleted({ noReset: true });
@@ -219,6 +220,10 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
         }
     }
 
+    public setContentId(id: string) {
+        this.contentId = id;
+    }
+
     public checkPendingChangesBeforePreview() {
         return this.checkPendingChanges('i18n:contents.pendingChangesTextToPreview');
     }

frontend/app/features/content/pages/content/editor/content-editor.component.html

@@ -7,6 +7,12 @@
 
             <div [innerHTML]="'contents.versionViewing' | sqxTranslate: { version: contentVersion } | sqxMarkdownInline"></div>
         </div>
+        
+        <div *ngIf="isNew">
+            <input class="form-control" placeholder="{{ 'i18n:contents.idPlaceholder' | sqxTranslate }}" 
+                [ngModel]="contentId"    
+                (ngModelChange)="contentIdChange.emit($event)" />
+        </div>
     </ng-container>
 
     <ng-container>

frontend/app/features/content/pages/content/editor/content-editor.component.scss

@@ -10,4 +10,10 @@
     border: 0;
     border-radius: 0;
     margin: 0;
+}
+
+.form-control {
+    border-radius: 0;
+    border-width: 0;
+    border-bottom-width: 1px;
 }

frontend/app/features/content/pages/content/editor/content-editor.component.ts

@@ -9,7 +9,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { AppLanguageDto, EditContentForm, FieldForm, FieldSection, RootFieldDto, SchemaDto, Version } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-editor[contentForm][formContext][language][languages][schema]',
+    selector: 'sqx-content-editor[contentId][contentForm][formContext][language][languages][schema]',
     styleUrls: ['./content-editor.component.scss'],
     templateUrl: './content-editor.component.html',
 })
@@ -20,6 +20,15 @@ export class ContentEditorComponent {
     @Output()
     public loadLatest = new EventEmitter<any>();
 
+    @Output()
+    public contentIdChange = new EventEmitter<string>();
+
+    @Input()
+    public isNew = false;
+
+    @Input()
+    public contentId: string;
+
     @Input()
     public contentForm: EditContentForm;
 

frontend/app/shared/services/contents.service.spec.ts

@@ -122,11 +122,11 @@ describe('ContentsService', () => {
 
             let content: ContentDto;
 
-            contentsService.postContent('my-app', 'my-schema', dto, true).subscribe(result => {
+            contentsService.postContent('my-app', 'my-schema', dto, true, 'my-id').subscribe(result => {
                 content = result;
             });
 
-            const req = httpMock.expectOne('http://service/p/api/content/my-app/my-schema?publish=true');
+            const req = httpMock.expectOne('http://service/p/api/content/my-app/my-schema?publish=true&id=my-id');
 
             expect(req.request.method).toEqual('POST');
             expect(req.request.headers.get('If-Match')).toBeNull();

frontend/app/shared/services/contents.service.ts

@@ -225,10 +225,10 @@ export class ContentsService {
             pretifyError('i18n:contents.loadDataFailed'));
     }
 
-    public postContent(appName: string, schemaName: string, dto: any, publish: boolean): Observable<ContentDto> {
-        const url = this.apiUrl.buildUrl(`/api/content/${appName}/${schemaName}?publish=${publish}`);
+    public postContent(appName: string, schemaName: string, data: any, publish: boolean, id?: string): Observable<ContentDto> {
+        const url = this.apiUrl.buildUrl(`/api/content/${appName}/${schemaName}?publish=${publish}&id=${id}`);
 
-        return HTTP.postVersioned(this.http, url, dto).pipe(
+        return HTTP.postVersioned(this.http, url, data).pipe(
             map(({ payload }) => {
                 return parseContent(payload.body);
             }),

frontend/app/shared/state/contents.state.ts

@@ -219,8 +219,8 @@ export abstract class ContentsStateBase extends State<Snapshot> {
             shareSubscribed(this.dialogs));
     }
 
-    public create(request: any, publish: boolean): Observable<ContentDto> {
-        return this.contentsService.postContent(this.appName, this.schemaName, request, publish).pipe(
+    public create(data: any, publish: boolean, id?: string): Observable<ContentDto> {
+        return this.contentsService.postContent(this.appName, this.schemaName, data, publish, id).pipe(
             tap(payload => {
                 this.dialogs.notifyInfo('i18n:contents.created');