Show all language fields.

src/Squidex/app/declarations.d.ts

@@ -10,9 +10,9 @@ declare module 'pikaday/pikaday';
 declare module 'progressbar.js';
 
 declare module 'sortablejs' {
-    export default class Sortable {
+    export class Ref {
         public destroy(): any;
-
-        public static create(element: any, options: any): Sortable;
     }
+
+    export function create(element: any, options: any): Ref;
 }

src/Squidex/app/features/assets/pages/assets-page.component.ts

@@ -37,7 +37,7 @@ export class AssetsPageComponent implements OnInit {
         private readonly localStore: LocalStoreService,
         private readonly uiState: UIState
     ) {
-        this.isListView = this.localStore.get('assetView') === 'List';
+        this.isListView = this.localStore.getBoolean('squidex.assets.list-view');
     }
 
     public ngOnInit() {
@@ -77,9 +77,9 @@ export class AssetsPageComponent implements OnInit {
     }
 
     public changeView(isListView: boolean) {
-        this.localStore.set('assetView', isListView ? 'List' : 'Grid');
-
         this.isListView = isListView;
+
+        this.localStore.setBoolean('squidex.assets.list-view', isListView);
     }
 }
 

src/Squidex/app/features/content/pages/content/content-field.component.html

@@ -1,23 +1,42 @@
 <div class="table-items-row" [class.invalid]="isInvalid | async">
-    <ng-container *ngIf="field.isLocalizable && languages.length > 1">
+    <div class="languages-buttons" *ngIf="field.isLocalizable && languages.length > 1">
-        <div class="languages-buttons" #buttonLanguages>
+        <button *ngIf="!field.properties.isComplexUI" type="button" class="btn btn-secondary btn-sm btn-link mr-1" (click)="toggleShowAll()">
-            <sqx-language-selector size="sm"
+            {{showAllControls ? 'Single Language' : 'All Languages'}}
+        </button>
+    
+        <ng-container *ngIf="field.properties.isComplexUI || !showAllControls">
+            <sqx-language-selector size="sm" #buttonLanguages
                 [selectedLanguage]="language"
                 (selectedLanguageChange)="languageChange.emit($event)"
                 [languages]="languages.values">
             </sqx-language-selector>
-        </div>
+    
+            <sqx-onboarding-tooltip helpId="languages" [for]="buttonLanguages" position="topRight" after="120000">
+                Please remember to check all languages when you see validation errors.
+            </sqx-onboarding-tooltip>
+        </ng-container> 
+    </div>
 
-        <sqx-onboarding-tooltip helpId="languages" [for]="buttonLanguages" position="topRight" after="120000">
+    <ng-container *ngIf="showAllControls; else singleControl">
-            Please remember to check all languages when you see validation errors.
+        <div class="form-group" *ngFor="let language of languages">
-        </sqx-onboarding-tooltip>
+            <sqx-field-editor
+                [displaySuffix]="'(' + language.iso2Code + ')'"
+                [form]="form"
+                [field]="field"
+                [language]="language"
+                [languages]="languages"
+                [control]="fieldForm.controls[language.iso2Code]">
+            </sqx-field-editor>
+        </div>
     </ng-container>
 
-    <sqx-field-editor
+    <ng-template #singleControl>
-        [form]="form"
+        <sqx-field-editor
-        [field]="field"
+            [form]="form"
-        [language]="language"
+            [field]="field"
-        [languages]="languages"
+            [language]="language"
-        [control]="selectedFormControl">
+            [languages]="languages"
-    </sqx-field-editor>
+            [control]="selectedFormControl">
+        </sqx-field-editor>
+    </ng-template>
 </div>

src/Squidex/app/features/content/pages/content/content-field.component.ts

@@ -15,7 +15,9 @@ import {
     EditContentForm,
     fieldInvariant,
     ImmutableArray,
+    LocalStoreService,
     RootFieldDto,
+    SchemaDto,
     Types
 } from '@app/shared';
 
@@ -34,6 +36,9 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
     @Input()
     public fieldForm: FormGroup;
 
+    @Input()
+    public schema: SchemaDto;
+
     @Input()
     public language: AppLanguageDto;
 
@@ -44,13 +49,29 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
     public languageChange = new EventEmitter<AppLanguageDto>();
 
     public selectedFormControl: AbstractControl;
+    public showAllControls = false;
 
     public isInvalid: Observable<boolean>;
 
+    constructor(
+        private readonly localStore: LocalStoreService
+    ) {
+    }
+
     public ngOnChanges(changes: SimpleChanges) {
         if (changes['fieldForm']) {
             this.isInvalid = this.fieldForm.statusChanges.pipe(startWith(this.fieldForm.invalid), map(x => this.fieldForm.invalid));
         }
+
+        if (changes['field']) {
+            this.showAllControls = this.localStore.getBoolean(this.configKey());
+        }
+    }
+
+    public toggleShowAll() {
+        this.showAllControls = !this.showAllControls;
+
+        this.localStore.setBoolean(this.configKey(), this.showAllControls);
     }
 
     public ngDoCheck() {
@@ -70,5 +91,9 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
             this.selectedFormControl = control;
         }
     }
+
+    private configKey() {
+        return `squidex.schemas.${this.schema.id}.fields.${this.field.fieldId}.show-all`;
+    }
 }
 

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -115,9 +115,10 @@
                 <sqx-content-field 
                     [form]="contentForm"
                     [field]="field"
-                    [fieldForm]="contentForm.form.get(field.name)" 
+                    [fieldForm]="contentForm.form.get(field.name)"
-                    [(language)]="language"
+                    [schema]="schema"
-                    [languages]="languages">
+                    [languages]="languages"
+                    [(language)]="language">
                 </sqx-content-field>
             </div>
         </ng-container>

src/Squidex/app/features/content/shared/assets-editor.component.ts

@@ -61,7 +61,7 @@ export class AssetsEditorComponent implements ControlValueAccessor, OnInit, OnDe
         private readonly localStore: LocalStoreService,
         private readonly messageBus: MessageBus
     ) {
-        this.isListView = this.localStore.get('assetView') === 'List';
+        this.isListView = this.localStore.getBoolean('squidex.assets.list-view');
     }
 
     public writeValue(obj: any) {
@@ -171,9 +171,9 @@ export class AssetsEditorComponent implements ControlValueAccessor, OnInit, OnDe
     }
 
     public changeView(isListView: boolean) {
-        this.localStore.set('assetView', isListView ? 'List' : 'Grid');
-
         this.isListView = isListView;
+
+        this.localStore.setBoolean('squidex.assets.list-view', isListView);
     }
 
     private updateValue() {

src/Squidex/app/features/content/shared/field-editor.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="field">
 	<label>
-		{{field.displayName}} <span class="field-required" [class.hidden]="!field.properties.isRequired">*</span>
+		{{field.displayName}} {{displaySuffix}} <span class="field-required" [class.hidden]="!field.properties.isRequired">*</span>
 	</label> 
 
 	<span class="field-disabled pl-1" *ngIf="field.isDisabled">Disabled</span>

src/Squidex/app/features/content/shared/field-editor.component.ts

@@ -35,4 +35,7 @@ export class FieldEditorComponent {
 
     @Input()
     public languages: ImmutableArray<AppLanguageDto>;
+
+    @Input()
+    public displaySuffix: string;
 }

src/Squidex/app/features/content/shared/preview-button.component.ts

@@ -44,7 +44,7 @@ export class PreviewButtonComponent implements OnInit {
     }
 
     public ngOnInit() {
-        let selectedName = this.localStore.get(`preview-button-${this.schema.id}`);
+        let selectedName = this.localStore.get(this.configKey());
 
         if (!selectedName || !this.schema.previewUrls[selectedName]) {
             selectedName = Object.keys(this.schema.previewUrls)[0];
@@ -69,6 +69,12 @@ export class PreviewButtonComponent implements OnInit {
 
             this.alternativeNames = keys.filter(x => x !== this.selectedName);
             this.alternativeNames.sort();
+
+            this.localStore.set(this.configKey(), selectedName);
         }
     }
+
+    private configKey() {
+        return `squidex.schemas.${this.schema.id}.preview-button`;
+    }
 }

src/Squidex/app/framework/angular/sorted.directive.ts

@@ -7,13 +7,13 @@
 
 import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 
-import Sortable from 'sortablejs';
+import * as Sortable from 'sortablejs';
 
 @Directive({
     selector: '[sqxSortModel]'
 })
 export class SortedDirective implements OnDestroy, OnInit {
-    private sortable: Sortable;
+    private sortable: Sortable.Ref;
 
     @Input()
     public dragHandle = '.drag-handle';

src/Squidex/app/framework/services/local-store.service.spec.ts

@@ -73,4 +73,16 @@ describe('LocalStore', () => {
 
         expect(localStoreService.get('mykey')).toBe('myval');
     });
+
+    it('should get boolean from local store', () => {
+        const localStoreService = new LocalStoreService();
+
+        localStoreService.setBoolean('key1', true);
+        localStoreService.setBoolean('key2', false);
+
+        expect(localStoreService.getBoolean('key1')).toBe(true);
+        expect(localStoreService.getBoolean('key2')).toBe(false);
+
+        expect(localStoreService.getBoolean('not_set')).toBe(false);
+    });
 });

src/Squidex/app/framework/services/local-store.service.ts

@@ -13,7 +13,7 @@ export const LocalStoreServiceFactory = () => {
 
 @Injectable()
 export class LocalStoreService {
-    private readonly fallback = {};
+    private readonly fallback: { [key: string]: string } = {};
     private store: any = localStorage;
 
     public configureStore(store: any) {
@@ -28,6 +28,12 @@ export class LocalStoreService {
         }
     }
 
+    public getBoolean(key: string): boolean {
+        const value = this.get(key);
+
+        return value === 'true';
+    }
+
     public set(key: string, value: string) {
         try {
             this.store.setItem(key, value);
@@ -35,4 +41,10 @@ export class LocalStoreService {
             this.fallback[key] = value;
         }
     }
+
+    public setBoolean(key: string, value: boolean) {
+        const converted = value ? 'true' : 'false';
+
+        this.store.setItem(key, converted);
+    }
 }

src/Squidex/app/framework/services/onboarding.service.ts

@@ -28,7 +28,7 @@ export class OnboardingService {
     }
 
     public disable(key: string) {
-        this.localStore.set(`squidex.onboarding.disable.${key}`, '1');
+        this.localStore.set(this.getConfigKey(key), '1');
     }
 
     public shouldShow(key: string) {
@@ -36,6 +36,10 @@ export class OnboardingService {
     }
 
     private shouldShowKey(key: string) {
-        return this.localStore.get(`squidex.onboarding.disable.${key}`) !== '1';
+        return this.localStore.get(this.getConfigKey(key)) !== '1';
+    }
+
+    private getConfigKey(key: string): string {
+        return `squidex.onboarding.disable.${key}`;
     }
 }

src/Squidex/app/shared/components/assets-selector.component.ts

@@ -39,7 +39,7 @@ export class AssetsSelectorComponent implements OnInit {
         public readonly state: AssetsDialogState,
         private readonly localStore: LocalStoreService
     ) {
-        this.isListView = this.localStore.get('assetView') === 'List';
+        this.isListView = this.localStore.getBoolean('squidex.assets.list-view');
     }
 
     public ngOnInit() {
@@ -77,9 +77,9 @@ export class AssetsSelectorComponent implements OnInit {
     }
 
     public changeView(isListView: boolean) {
-        this.localStore.set('assetView', isListView ? 'List' : 'Grid');
-
         this.isListView = isListView;
+
+        this.localStore.setBoolean('squidex.assets.list-view', isListView);
     }
 }
 

src/Squidex/app/shared/components/language-selector.component.html

@@ -10,7 +10,7 @@
     </button>
     <div class="dropdown-menu" *sqxModalView="dropdown;closeAlways:true" [sqxModalTarget]="button" @fade>
         <div class="dropdown-item" *ngFor="let language of languages" [class.active]="language == selectedLanguage" (click)="selectLanguage(language)">
-            <strong class="iso-code">{{language.iso2Code}}</strong> &nbsp; &nbsp; ({{language.englishName}})
+            <strong class="iso-code">{{language.iso2Code}}</strong> ({{language.englishName}})
         </div>
     </div>
 </div>

src/Squidex/app/shared/components/language-selector.component.scss

@@ -7,4 +7,7 @@
 
 .iso-code {
     font-family: monospace;
+    display: inline-block;
+    min-width: 40px;
+    max-width: 60px;
 }

src/Squidex/app/shared/components/schema-category.component.ts

@@ -64,13 +64,13 @@ export class SchemaCategoryComponent implements OnInit, OnChanges {
     }
 
     public ngOnInit() {
-        this.isOpen = this.localStore.get(`schema-category.${this.name}`) !== 'false';
+        this.isOpen = !this.localStore.getBoolean(this.configKey());
     }
 
     public toggle() {
         this.isOpen = !this.isOpen;
 
-        this.localStore.set(`schema-category.${this.name}`, this.isOpen + '');
+        this.localStore.setBoolean(this.configKey(), !this.isOpen);
     }
 
     public ngOnChanges(changes: SimpleChanges): void {
@@ -115,4 +115,8 @@ export class SchemaCategoryComponent implements OnInit, OnChanges {
     public trackBySchema(index: number, schema: SchemaDto) {
         return schema.id;
     }
+
+    private configKey(): string {
+        return `squidex.schema.category.${this.name}.closed`;
+    }
 }

src/Squidex/app/shared/services/contents.service.ts

@@ -83,7 +83,7 @@ export class ContentsService {
             if (query.indexOf('$filter') < 0 &&
                 query.indexOf('$search') < 0 &&
                 query.indexOf('$orderby') < 0) {
-                queryParts.push(`$search="${query.trim()}"`);
+                queryParts.push(`$search="${encodeURIComponent(query.trim())}"`);
             } else {
                 queryParts.push(`${query.trim()}`);
             }

src/Squidex/app/shared/services/schemas.service.ts

@@ -55,14 +55,14 @@ export class SchemaDetailsDto extends SchemaDto {
     public listFieldsEditable: RootFieldDto[];
 
     constructor(id: string, name: string, category: string,
-            properties: SchemaPropertiesDto,
+        properties: SchemaPropertiesDto,
-            isSingleton: boolean,
+        isSingleton: boolean,
-            isPublished: boolean,
+        isPublished: boolean,
-            created: DateTime,
+        created: DateTime,
-            createdBy: string,
+        createdBy: string,
-            lastModified: DateTime,
+        lastModified: DateTime,
-            lastModifiedBy: string,
+        lastModifiedBy: string,
-            version: Version,
+        version: Version,
         public readonly fields: RootFieldDto[],
         public readonly previewUrls: { [name: string]: string },
         public readonly scriptQuery?: string,

src/Squidex/app/shared/services/schemas.types.ts

@@ -126,6 +126,10 @@ export abstract class FieldPropertiesDto {
         }
     }
 
+    public get isComplexUI() {
+        return true;
+    }
+
     public abstract accept<T>(visitor: FieldPropertiesVisitor<T>): T;
 }
 
@@ -179,6 +183,10 @@ export class BooleanFieldPropertiesDto extends FieldPropertiesDto {
     public readonly inlineEditable: boolean = false;
     public readonly defaultValue?: boolean;
 
+    public get isComplexUI() {
+        return false;
+    }
+
     constructor(editor: string,
         props?: Partial<BooleanFieldPropertiesDto>
     ) {
@@ -198,6 +206,10 @@ export class DateTimeFieldPropertiesDto extends FieldPropertiesDto {
     public readonly minValue?: string;
     public readonly calculatedDefaultValue?: string;
 
+    public get isComplexUI() {
+        return false;
+    }
+
     constructor(editor: string,
         props?: Partial<DateTimeFieldPropertiesDto>
     ) {
@@ -247,6 +259,10 @@ export class NumberFieldPropertiesDto extends FieldPropertiesDto {
     public readonly minValue?: number;
     public readonly allowedValues?: number[];
 
+    public get isComplexUI() {
+        return false;
+    }
+
     constructor(editor: string,
         props?: Partial<NumberFieldPropertiesDto>
     ) {
@@ -288,6 +304,10 @@ export class StringFieldPropertiesDto extends FieldPropertiesDto {
     public readonly maxLength?: number;
     public readonly allowedValues?: string[];
 
+    public get isComplexUI() {
+        return this.editor !== 'Input' && this.editor !== 'Color' && this.editor !== 'Radio' && this.editor !== 'Slug' && this.editor !== 'TextArea';
+    }
+
     constructor(editor: string,
         props?: Partial<StringFieldPropertiesDto>
     ) {
@@ -306,6 +326,10 @@ export class TagsFieldPropertiesDto extends FieldPropertiesDto {
     public readonly maxItems?: number;
     public readonly allowedValues?: string[];
 
+    public get isComplexUI() {
+        return false;
+    }
+
     constructor(editor: string,
         props?: Partial<TagsFieldPropertiesDto>
     ) {

src/Squidex/package.json

@@ -73,7 +73,7 @@
     "karma": "3.1.4",
     "karma-chrome-launcher": "2.2.0",
     "karma-cli": "2.0.0",
-    "karma-coverage-istanbul-reporter": "^2.0.4",
+    "karma-coverage-istanbul-reporter": "2.0.4",
     "karma-htmlfile-reporter": "0.3.7",
     "karma-jasmine": "2.0.1",
     "karma-jasmine-html-reporter": "1.4.0",