Custom validation is not working for Selector inputs #4936

enonic · Aug 16, 2022 · 708ab96 · 708ab96
1 parent 4fc1aa1
commit 708ab96
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 107 deletions.
diff --git a/modules/lib/src/main/resources/assets/js/app/inputtype/customselector/CustomSelector.ts b/modules/lib/src/main/resources/assets/js/app/inputtype/customselector/CustomSelector.ts
@@ -38,13 +38,12 @@ export class CustomSelector
     private comboBox: RichComboBox<CustomSelectorItem>;
 
     constructor(context: ContentInputTypeViewContext) {
-        super('custom-selector');
+        super(context, 'custom-selector');
 
         if (CustomSelector.debug) {
             console.debug('CustomSelector: config', context.inputConfig);
         }
 
-        this.readConfig(context);
         this.subscribeToContentUpdates();
     }
 
@@ -64,8 +63,8 @@ export class CustomSelector
         }
     }
 
-    private readConfig(context: ContentInputTypeViewContext): void {
-        const cfg = context.inputConfig;
+    protected readInputConfig(): void {
+        const cfg = this.context.inputConfig;
         const serviceCfg = cfg['service'];
         let serviceUrl;
         if (serviceCfg) {
@@ -78,7 +77,7 @@ export class CustomSelector
             return prev;
         }, {});
 
-        this.content = context.content;
+        this.content = (<ContentInputTypeViewContext>this.context).content;
 
         if (serviceUrl) {
             this.requestPath = CustomSelector.portalUrl + UriHelper.appendUrlParams(serviceUrl, params);
@@ -164,7 +163,7 @@ export class CustomSelector
 
             this.ignorePropertyChange(false);
 
-            this.validate(false);
+            this.handleValueChanged(false);
             this.fireFocusSwitchEvent(event);
         });
 
@@ -175,12 +174,12 @@ export class CustomSelector
 
             this.refreshSortable();
             this.ignorePropertyChange(false);
-            this.validate(false);
+            this.handleValueChanged(false);
         });
 
         comboBox.onOptionMoved((moved: SelectedOption<any>, fromIndex: number) => this.handleMove(moved, fromIndex));
 
-        comboBox.onValueLoaded(() => this.validate(false));
+        comboBox.onValueLoaded(() => this.handleValueChanged(false));
 
         return comboBox;
     }

diff --git a/modules/lib/src/main/resources/assets/js/app/inputtype/schema/ContentTypeFilter.ts b/modules/lib/src/main/resources/assets/js/app/inputtype/schema/ContentTypeFilter.ts
@@ -21,24 +21,23 @@ import {Class} from '@enonic/lib-admin-ui/Class';
 export class ContentTypeFilter
     extends BaseInputTypeManagingAdd {
 
-    private combobox: ContentTypeComboBox;
+    protected context: ContentInputTypeViewContext;
 
-    private context: ContentInputTypeViewContext;
+    private combobox: ContentTypeComboBox;
 
-    private onContentTypesLoadedHandler: (contentTypeArray: ContentTypeSummary[]) => void;
+    private readonly onContentTypesLoadedHandler: (contentTypeArray: ContentTypeSummary[]) => void;
 
     private isContextDependent: boolean;
 
     constructor(context: ContentInputTypeViewContext) {
-        super('content-type-filter');
-        this.context = context;
+        super(context, 'content-type-filter');
         this.onContentTypesLoadedHandler = this.onContentTypesLoaded.bind(this);
-        this.readConfig(context.inputConfig);
     }
 
-    protected readConfig(inputConfig: { [element: string]: { [name: string]: string }[]; }): void {
-        const isContextDependentConfig = inputConfig['context'] ? inputConfig['context'][0] : {};
-        const value = isContextDependentConfig['value'] || '';
+    protected readInputConfig(): void {
+        const contextDependentProp: { [name: string]: string } =
+            this.context.inputConfig['context'] ? this.context.inputConfig['context'][0] : {};
+        const value: string = contextDependentProp['value'] || '';
         this.isContextDependent = value.toLowerCase() === 'true';
     }
 
@@ -105,14 +104,14 @@ export class ContentTypeFilter
             this.getPropertyArray().add(value);
         }
 
-        this.validate(false);
+        this.handleValueChanged(false);
         this.ignorePropertyChange(false);
     }
 
     private onContentTypeDeselected(option: SelectedOption<ContentTypeSummary>): void {
         this.ignorePropertyChange(true);
         this.getPropertyArray().remove(option.getIndex());
-        this.validate(false);
+        this.handleValueChanged(false);
         this.ignorePropertyChange(false);
     }
 

diff --git a/modules/lib/src/main/resources/assets/js/app/inputtype/selector/ContentSelector.ts b/modules/lib/src/main/resources/assets/js/app/inputtype/selector/ContentSelector.ts
@@ -47,13 +47,13 @@ export class ContentSelector
 
     protected static loadSummaries: () => void = AppHelper.debounce(ContentSelector.doFetchSummaries, 10, false);
 
-    constructor(config?: ContentInputTypeViewContext) {
-        super('content-selector', config);
+    constructor(config: ContentInputTypeViewContext) {
+        super(config, 'content-selector');
         this.initEventsListeners();
     }
 
     private initEventsListeners() {
-        const contentId: string = this.config.content.getId();
+        const contentId: string = this.context.content.getId();
 
         ContentServerEventsHandler.getInstance().onContentRenamed((data: ContentSummaryAndCompareStatus[]) => {
             const isCurrentContentRenamed: boolean = data.some((item: ContentSummaryAndCompareStatus) => item.getId() === contentId);
@@ -81,16 +81,16 @@ export class ContentSelector
         return new ContentTreeSelectorItem(content);
     }
 
-    protected readConfig(): void {
-        const inputConfig: { [element: string]: { [name: string]: string }[]; } = this.config.inputConfig;
+    protected readInputConfig(): void {
+        const inputConfig: { [element: string]: { [name: string]: string }[]; } = this.context.inputConfig;
         const isTreeModeConfig = inputConfig['treeMode'] ? inputConfig['treeMode'][0] : {};
         this.treeMode = !StringHelper.isBlank(isTreeModeConfig['value']) ? isTreeModeConfig['value'].toLowerCase() === 'true' : false;
 
         const hideToggleIconConfig = inputConfig['hideToggleIcon'] ? inputConfig['hideToggleIcon'][0] : {};
         this.hideToggleIcon =
             !StringHelper.isBlank(hideToggleIconConfig['value']) ? hideToggleIconConfig['value'].toLowerCase() === 'true' : false;
 
-        super.readConfig();
+        super.readInputConfig();
     }
 
     protected getDefaultAllowPath(): string {
@@ -173,7 +173,7 @@ export class ContentSelector
             .setAllowedContentPaths(this.allowedContentPaths)
             .setContentTypeNames(this.allowedContentTypes)
             .setRelationshipType(this.relationshipType)
-            .setContent(this.config.content);
+            .setContent(this.context.content);
     }
 
     protected doCreateContentComboBoxBuilder(): ContentComboBoxBuilder<ContentTreeSelectorItem> {
@@ -205,7 +205,7 @@ export class ContentSelector
     protected initEvents(contentComboBox: ContentComboBox<ContentTreeSelectorItem>) {
         contentComboBox.getComboBox().onContentMissing((ids: string[]) => {
             ids.forEach(id => this.removePropertyWithId(id));
-            this.validate(false);
+            this.handleValueChanged(false);
         });
 
         contentComboBox.onOptionSelected((event: SelectedOptionEvent<ContentTreeSelectorItem>) => {
@@ -219,7 +219,7 @@ export class ContentSelector
                 this.updateSelectedOptionIsEditable(event.getSelectedOption());
                 this.getSelectedOptionsView().refreshSortable();
                 this.updateSelectedOptionStyle();
-                this.validate(false);
+                this.handleValueChanged(false);
                 this.contentComboBox.getComboBox().setIgnoreNextFocus(true);
             }
 
@@ -228,7 +228,7 @@ export class ContentSelector
         contentComboBox.onOptionDeselected((event: SelectedOptionEvent<ContentTreeSelectorItem>) => {
             this.handleDeselected(event.getSelectedOption().getIndex());
             this.updateSelectedOptionStyle();
-            this.validate(false);
+            this.handleValueChanged(false);
         });
 
         contentComboBox.onOptionMoved(this.handleMoved.bind(this));
@@ -384,7 +384,7 @@ export class ContentSelector
 
     protected updateSelectedOptionIsEditable(selectedOption: SelectedOption<ContentTreeSelectorItem>) {
         const selectedContentId: ContentId = selectedOption.getOption().getDisplayValue().getContentId();
-        const refersToItself: boolean = selectedContentId.toString() === this.config.content.getId();
+        const refersToItself: boolean = selectedContentId.toString() === this.context.content.getId();
         selectedOption.getOptionView().toggleClass('non-editable', refersToItself);
     }
 

diff --git a/modules/lib/src/main/resources/assets/js/app/inputtype/selector/ImageSelector.ts b/modules/lib/src/main/resources/assets/js/app/inputtype/selector/ImageSelector.ts
@@ -32,8 +32,8 @@ export class ImageSelector
 
     private isPendingPreload: boolean = true;
 
-    constructor(config: ContentInputTypeViewContext) {
-        super(config);
+    constructor(context: ContentInputTypeViewContext) {
+        super(context);
 
         this.addClass('image-selector');
 
@@ -78,7 +78,7 @@ export class ImageSelector
                 }
 
             });
-            this.validate(false);
+            this.handleValueChanged(false);
         });
 
         return selectedOptionsView;
@@ -110,7 +110,7 @@ export class ImageSelector
             });
             this.isPendingPreload = false;
             if (data.length > 0) {
-                this.validate(false);
+                this.handleValueChanged(false);
             }
             loader.unPreloadedData(onPreloadedData);
         };
@@ -123,7 +123,7 @@ export class ImageSelector
             if (option.getOption().getDisplayValue().getContentSummary()) {
                 this.handleDeselected(option.getIndex());
             }
-            this.validate(false);
+            this.handleValueChanged(false);
         });
 
         comboBox.onOptionSelected((event: SelectedOptionEvent<MediaTreeSelectorItem>) => {
@@ -137,12 +137,12 @@ export class ImageSelector
 
                 this.setContentIdProperty(contentId);
             }
-            this.validate(false);
+            this.handleValueChanged(false);
         });
 
         comboBox.onOptionMoved((moved: SelectedOption<MediaTreeSelectorItem>, fromIndex: number) => {
             this.handleMoved(moved, fromIndex);
-            this.validate(false);
+            this.handleValueChanged(false);
         });
     }
 
@@ -221,23 +221,6 @@ export class ImageSelector
             super.validate(silent);
         }
     }
-/*
-    onEditContentRequest(listener: (content: ContentSummary) => void) {
-        this.editContentRequestListeners.push(listener);
-    }
-
-    unEditContentRequest(listener: (content: ContentSummary) => void) {
-        this.editContentRequestListeners = this.editContentRequestListeners
-            .filter(function (curr: (content: ContentSummary) => void) {
-                return curr !== listener;
-            });
-    }
-
-    private notifyEditContentRequested(content: ContentSummary) {
-        this.editContentRequestListeners.forEach((listener) => {
-            listener(content);
-        });
-    }*/
 }
 
 InputTypeManager.register(new Class('ImageSelector', ImageSelector));
diff --git a/modules/lib/src/main/resources/assets/js/app/inputtype/selector/MediaSelector.ts b/modules/lib/src/main/resources/assets/js/app/inputtype/selector/MediaSelector.ts
@@ -24,16 +24,15 @@ export class MediaSelector
 
     protected uploader: MediaUploaderEl;
 
-    constructor(config?: ContentInputTypeViewContext) {
-        super(config);
+    constructor(context: ContentInputTypeViewContext) {
+        super(context);
         this.addClass('media-selector');
     }
 
     layout(input: Input, propertyArray: PropertyArray): Q.Promise<void> {
-
         return super.layout(input, propertyArray).then(() => {
-            if (this.config.content) {
-                return this.createUploader().then((mediaUploader) => {
+            if (this.context.content) {
+                return this.createUploader().then((mediaUploader: MediaUploaderEl) => {
                     this.comboBoxWrapper.appendChild(this.uploader = mediaUploader);
 
                     if (!this.contentComboBox.getComboBox().isVisible()) {
@@ -48,8 +47,8 @@ export class MediaSelector
         return ContentTypeName.getMediaTypes();
     }
 
-    protected readConfig(): void {
-        super.readConfig();
+    protected readInputConfig(): void {
+        super.readInputConfig();
 
         const allowedContentTypes: string[] = this.getDefaultContentTypes().map(type => type.toString());
         let allowedMediaTypes: string[] = this.allowedContentTypes.filter(value => allowedContentTypes.indexOf(value) >= 0);
@@ -86,7 +85,7 @@ export class MediaSelector
 
         return {
             params: {
-                parent: this.config.content.getContentId().toString()
+                parent: this.context.content.getContentId().toString()
             },
             operation: MediaUploaderElOperation.create,
             name: 'media-selector-upload-el',

diff --git a/modules/lib/src/main/resources/assets/js/app/inputtype/siteconfigurator/SiteConfigurator.ts b/modules/lib/src/main/resources/assets/js/app/inputtype/siteconfigurator/SiteConfigurator.ts
@@ -32,13 +32,10 @@ export class SiteConfigurator
 
     private siteConfigProvider: ApplicationConfigProvider;
 
-    private formContext: ContentFormContext;
-
     private readOnlyPromise: Q.Promise<boolean>;
 
-    constructor(config: ContentInputTypeViewContext) {
-        super('application-configurator');
-        this.formContext = config.formContext;
+    constructor(context: ContentInputTypeViewContext) {
+        super(context, 'application-configurator');
 
         this.readOnlyPromise = this.isReadOnly();
     }
@@ -180,7 +177,7 @@ export class SiteConfigurator
         const value = this.getValueFromPropertyArray(this.getPropertyArray());
         const siteConfigFormsToDisplay = value.split(';');
         const maximum = input.getOccurrences().getMaximum() || 0;
-        const comboBox = new SiteConfiguratorComboBox(maximum, siteConfigProvider, this.formContext, value);
+        const comboBox = new SiteConfiguratorComboBox(maximum, siteConfigProvider, <ContentFormContext>this.context.formContext, value);
 
         const forcedValidate = () => {
             this.ignorePropertyChange(false);

diff --git a/modules/lib/src/main/resources/assets/js/app/inputtype/tag/Tag.ts b/modules/lib/src/main/resources/assets/js/app/inputtype/tag/Tag.ts
@@ -18,31 +18,24 @@ import {BaseInputTypeManagingAdd} from '@enonic/lib-admin-ui/form/inputtype/supp
 export class Tag
     extends BaseInputTypeManagingAdd {
 
-    private context: ContentInputTypeViewContext;
-
     private tags: Tags;
 
     private allowedContentPaths: string[];
 
     private tagSuggester: ContentTagSuggester;
 
     constructor(context: ContentInputTypeViewContext) {
-        super('tag');
-        this.addClass('input-type-view');
-
-        this.context = context;
-        this.readConfig(this.context.inputConfig);
+        super(context, 'tag');
 
         this.tagSuggester = new ContentTagSuggesterBuilder()
-            .setDataPath(Tag.resolveDataPath(this.context))
-            .setContent(this.context.content)
+            .setDataPath(Tag.resolveDataPath(context))
+            .setContent(context.content)
             .setAllowedContentPaths(this.allowedContentPaths)
             .build();
     }
 
-    protected readConfig(inputConfig: { [element: string]: { [name: string]: string }[]; }): void {
-
-        const allowContentPathConfig = inputConfig['allowPath'] || [];
+    protected readInputConfig(): void {
+        const allowContentPathConfig: { [name: string]: string }[] = this.context.inputConfig['allowPath'] || [];
 
         this.allowedContentPaths =
             allowContentPathConfig.length > 0
@@ -85,14 +78,14 @@ export class Tag
                 } else {
                     this.getPropertyArray().add(value);
                 }
-                this.validate(false);
+                this.handleValueChanged(false);
                 this.ignorePropertyChange(false);
             });
 
             this.tags.onTagRemoved((event: TagRemovedEvent) => {
                 this.ignorePropertyChange(true);
                 this.getPropertyArray().remove(event.getIndex());
-                this.validate(false);
+                this.handleValueChanged(false);
                 this.ignorePropertyChange(false);
             });