mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
6 years ago
committed by
GitHub
GitHub
22 changed files with 480 additions and 192 deletions
@ -0,0 +1,173 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core'; |
||||
|
import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
|
||||
|
import { |
||||
|
AppsState, |
||||
|
ContentDto, |
||||
|
ContentsService, |
||||
|
Converter, |
||||
|
getContentValue, |
||||
|
LanguageDto, |
||||
|
StatefulControlComponent, |
||||
|
TagValue, |
||||
|
UIOptions |
||||
|
} from '@app/shared/internal'; |
||||
|
|
||||
|
export const SQX_REFERENCES_TAGS_CONTROL_VALUE_ACCESSOR: any = { |
||||
|
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ReferencesTagsComponent), multi: true |
||||
|
}; |
||||
|
|
||||
|
const NO_EMIT = { emitEvent: false }; |
||||
|
|
||||
|
class TagsConverter implements Converter { |
||||
|
public suggestions: ReadonlyArray<TagValue> = []; |
||||
|
|
||||
|
constructor(language: LanguageDto, contents: ReadonlyArray<ContentDto>) { |
||||
|
this.suggestions = this.createTags(language, contents); |
||||
|
} |
||||
|
|
||||
|
public convertInput(input: string) { |
||||
|
const result = this.suggestions.find(x => x.name === input); |
||||
|
|
||||
|
return result || null; |
||||
|
} |
||||
|
|
||||
|
public convertValue(value: any) { |
||||
|
const result = this.suggestions.find(x => x.id === value); |
||||
|
|
||||
|
return result || null; |
||||
|
} |
||||
|
|
||||
|
private createTags(language: LanguageDto, contents: ReadonlyArray<ContentDto>): ReadonlyArray<TagValue> { |
||||
|
if (contents.length === 0) { |
||||
|
return []; |
||||
|
} |
||||
|
|
||||
|
const values = contents.map(content => { |
||||
|
const name = |
||||
|
content.referenceFields |
||||
|
.map(f => getContentValue(content, language, f, false)) |
||||
|
.map(v => v.formatted || 'No value') |
||||
|
.filter(v => !!v) |
||||
|
.join(', '); |
||||
|
|
||||
|
return new TagValue(content.id, name, content.id); |
||||
|
}); |
||||
|
|
||||
|
return values; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
interface State { |
||||
|
converter: TagsConverter; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-references-tags', |
||||
|
template: ` |
||||
|
<sqx-tag-editor placeholder=", to add reference" [converter]="snapshot.converter" [formControl]="selectionControl" |
||||
|
[suggestedValues]="snapshot.converter.suggestions"> |
||||
|
</sqx-tag-editor>`, |
||||
|
styles: [ |
||||
|
'.truncate { min-height: 1.5rem; }' |
||||
|
], |
||||
|
providers: [SQX_REFERENCES_TAGS_CONTROL_VALUE_ACCESSOR], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class ReferencesTagsComponent extends StatefulControlComponent<State, ReadonlyArray<string>> implements OnChanges { |
||||
|
private itemCount: number; |
||||
|
private contentItems: ReadonlyArray<ContentDto> | null = null; |
||||
|
|
||||
|
@Input() |
||||
|
public schemaId: string; |
||||
|
|
||||
|
@Input() |
||||
|
public language: LanguageDto; |
||||
|
|
||||
|
public get isValid() { |
||||
|
return !!this.schemaId && !!this.language; |
||||
|
} |
||||
|
|
||||
|
public selectionControl = new FormControl([]); |
||||
|
|
||||
|
constructor(changeDetector: ChangeDetectorRef, uiOptions: UIOptions, |
||||
|
private readonly appsState: AppsState, |
||||
|
private readonly contentsService: ContentsService |
||||
|
) { |
||||
|
super(changeDetector, { converter: new TagsConverter(null!, []) }); |
||||
|
|
||||
|
this.itemCount = uiOptions.get('referencesDropdownItemCount'); |
||||
|
|
||||
|
this.own( |
||||
|
this.selectionControl.valueChanges |
||||
|
.subscribe((value: string[]) => { |
||||
|
if (value && value.length > 0) { |
||||
|
this.callTouched(); |
||||
|
this.callChange(value); |
||||
|
} else { |
||||
|
this.callTouched(); |
||||
|
this.callChange(null); |
||||
|
} |
||||
|
})); |
||||
|
} |
||||
|
|
||||
|
public ngOnChanges(changes: SimpleChanges) { |
||||
|
if (changes['schemaId']) { |
||||
|
this.resetState(); |
||||
|
|
||||
|
if (this.isValid) { |
||||
|
this.contentsService.getContents(this.appsState.appName, this.schemaId, this.itemCount, 0) |
||||
|
.subscribe(contents => { |
||||
|
this.contentItems = contents.items; |
||||
|
|
||||
|
this.resetConverterState(); |
||||
|
}, () => { |
||||
|
this.contentItems = null; |
||||
|
|
||||
|
this.resetConverterState(); |
||||
|
}); |
||||
|
} else { |
||||
|
this.contentItems = null; |
||||
|
|
||||
|
this.resetConverterState(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public setDisabledState(isDisabled: boolean) { |
||||
|
if (isDisabled) { |
||||
|
this.selectionControl.disable(); |
||||
|
} else if (this.isValid) { |
||||
|
this.selectionControl.enable(); |
||||
|
} |
||||
|
|
||||
|
super.setDisabledState(isDisabled); |
||||
|
} |
||||
|
|
||||
|
public writeValue(obj: ReadonlyArray<string>) { |
||||
|
this.selectionControl.setValue(obj, NO_EMIT); |
||||
|
} |
||||
|
|
||||
|
private resetConverterState() { |
||||
|
let converter: TagsConverter; |
||||
|
|
||||
|
if (this.isValid && this.contentItems && this.contentItems.length > 0) { |
||||
|
converter = new TagsConverter(this.language, this.contentItems); |
||||
|
|
||||
|
this.selectionControl.enable(); |
||||
|
} else { |
||||
|
converter = new TagsConverter(null!, []); |
||||
|
|
||||
|
this.selectionControl.disable(); |
||||
|
} |
||||
|
|
||||
|
this.next({ converter }); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue