From 2aa712d6f3b0cf29afdff448379055b0e109e403 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 28 Sep 2022 17:54:44 +0200
Subject: [PATCH] Add input to show or hide custom ID.

---
 .../pages/content/content-page.component.html        |  6 ++++++
 .../pages/content/content-page.component.scss        | 12 ++++++++++++
 .../content/pages/content/content-page.component.ts  | 10 ++++++++++
 .../content/editor/content-editor.component.html     |  2 +-
 .../pages/content/editor/content-editor.component.ts |  3 +++
 frontend/src/app/shared/state/settings.ts            |  1 +
 6 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/features/content/pages/content/content-page.component.html b/frontend/src/app/features/content/pages/content/content-page.component.html
index 29ee03077..342e23bca 100644
--- a/frontend/src/app/features/content/pages/content/content-page.component.html
+++ b/frontend/src/app/features/content/pages/content/content-page.component.html
@@ -96,6 +96,11 @@
                 </ng-container>
 
                 <ng-template #noContentMenu>
+                    <button type="button" class="btn btn-more btn-outline-secondary btn-sm me-2" (click)="changeShowIdInput(!showIdInput)">
+                        <span [class.hidden]="showIdInput">+</span>
+                        <span [class.hidden]="!showIdInput">-</span>
+                    </button>
+
                     <sqx-language-selector class="languages-buttons" 
                         (languageChange)="changeLanguage($event)"
                         [language]="language" 
@@ -160,6 +165,7 @@
                     [formContext]="formContext"
                     [languages]="languages"
                     [schema]="schema"
+                    [showIdInput]="showIdInput"
                     [(contentId)]="contentId">
                 </sqx-content-editor>
             </ng-container>
diff --git a/frontend/src/app/features/content/pages/content/content-page.component.scss b/frontend/src/app/features/content/pages/content/content-page.component.scss
index 8e5faa5ed..769323a89 100644
--- a/frontend/src/app/features/content/pages/content/content-page.component.scss
+++ b/frontend/src/app/features/content/pages/content/content-page.component.scss
@@ -9,6 +9,18 @@
     color: $color-text;
 }
 
+.btn-more {
+    @include absolute(null, null, -.6125rem, 0);
+    @include force-width(1.25rem);
+    @include force-height(1.25rem);
+    background-color: $color-white;
+    line-height: 1;
+    padding: 0;
+    text-align: center;
+    text-decoration: none;
+    z-index: 600;
+}
+
 .nav-tabs2 {
     @include absolute(auto, auto, 0, 5rem);
     flex-wrap: nowrap;
diff --git a/frontend/src/app/features/content/pages/content/content-page.component.ts b/frontend/src/app/features/content/pages/content/content-page.component.ts
index 3aa6cb175..017804b15 100644
--- a/frontend/src/app/features/content/pages/content/content-page.component.ts
+++ b/frontend/src/app/features/content/pages/content/content-page.component.ts
@@ -40,6 +40,8 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     public language!: AppLanguageDto;
     public languages!: ReadonlyArray<AppLanguageDto>;
 
+    public showIdInput = true;
+
     public confirmPreview = () => {
         return this.checkPendingChangesBeforePreview();
     };
@@ -65,6 +67,8 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
             appName: contentsState.appName,
             user: { role, ...authService.user?.export() },
         };
+
+        this.showIdInput = !localStore.getBoolean(Settings.Local.HIDE_CONTENT_ID_INPUT);
     }
 
     public ngOnInit() {
@@ -292,6 +296,12 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
         this.contentForm.setEnabled(!this.content || this.content.canUpdate);
     }
 
+    public changeShowIdInput(value: boolean) {
+        this.localStore.setBoolean(Settings.Local.HIDE_CONTENT_ID_INPUT, !value);
+
+        this.showIdInput = value;
+    }
+
     private languageKey(): any {
         return Settings.Local.CONTENT_LANGUAGE(this.schema.id);
     }
diff --git a/frontend/src/app/features/content/pages/content/editor/content-editor.component.html b/frontend/src/app/features/content/pages/content/editor/content-editor.component.html
index d296ab077..a42419e30 100644
--- a/frontend/src/app/features/content/pages/content/editor/content-editor.component.html
+++ b/frontend/src/app/features/content/pages/content/editor/content-editor.component.html
@@ -10,7 +10,7 @@
             <div [innerHTML]="'contents.versionViewing' | sqxTranslate: { version: contentVersion } | sqxMarkdownInline | sqxSafeHtml"></div>
         </div>
         
-        <div *ngIf="isNew">
+        <div *ngIf="isNew && showIdInput">
             <input class="form-control" placeholder="{{ 'contents.idPlaceholder' | sqxTranslate }}" 
                 [ngModel]="contentId"    
                 (ngModelChange)="contentIdChange.emit($event)" />
diff --git a/frontend/src/app/features/content/pages/content/editor/content-editor.component.ts b/frontend/src/app/features/content/pages/content/editor/content-editor.component.ts
index 452b0bf00..c37e584ad 100644
--- a/frontend/src/app/features/content/pages/content/editor/content-editor.component.ts
+++ b/frontend/src/app/features/content/pages/content/editor/content-editor.component.ts
@@ -26,6 +26,9 @@ export class ContentEditorComponent {
     @Input()
     public isNew = false;
 
+    @Input()
+    public showIdInput = false;
+
     @Input()
     public contentId!: string;
 
diff --git a/frontend/src/app/shared/state/settings.ts b/frontend/src/app/shared/state/settings.ts
index 6cd7ae382..227ff35a8 100644
--- a/frontend/src/app/shared/state/settings.ts
+++ b/frontend/src/app/shared/state/settings.ts
@@ -16,6 +16,7 @@ export const Settings = {
     Local: {
         ASSETS_MODE: 'squidex.assets.list-view',
         CONTENT_LANGUAGE: (schema: any) => `squidex.schemas.${schema}.language`,
+        HIDE_CONTENT_ID_INPUT: 'squidex.contents.idField',
         DASHBOARD_CHART_STACKED: 'dashboard.charts.stacked',
         DISABLE_ONBOARDING: (key: any) => `squidex.onboarding.disable.${key}`,
         FIELD_ALL: (schema: any, field: any) => `squidex.schemas.${schema}.fields.${field}.show-all`,