diff --git a/src/core/components/group-selector/group-selector.html b/src/core/components/group-selector/group-selector.html index 3337ff5c3..d7308072e 100644 --- a/src/core/components/group-selector/group-selector.html +++ b/src/core/components/group-selector/group-selector.html @@ -13,8 +13,8 @@ </ion-label> <ion-select [(ngModel)]="selected" (ionChange)="selectedChange.emit(selected)" interface="action-sheet" [interfaceOptions]="{header: 'core.group' | translate}"> - <ion-select-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id"> - {{groupOpt.name}} + <ion-select-option *ngFor="let option of options" [value]="option.value"> + {{ option.text }} </ion-select-option> </ion-select> </ion-item> diff --git a/src/core/components/group-selector/group-selector.ts b/src/core/components/group-selector/group-selector.ts index 2365e3ffe..74254c084 100644 --- a/src/core/components/group-selector/group-selector.ts +++ b/src/core/components/group-selector/group-selector.ts @@ -12,8 +12,18 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'; +import { + Component, + Input, + Output, + EventEmitter, + ChangeDetectionStrategy, + OnChanges, + SimpleChanges, + ChangeDetectorRef, +} from '@angular/core'; import { CoreGroupInfo } from '@services/groups'; +import { CoreLang } from '@services/lang'; /** * Component to display a group selector. @@ -23,11 +33,51 @@ import { CoreGroupInfo } from '@services/groups'; templateUrl: 'group-selector.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class CoreGroupSelectorComponent { +export class CoreGroupSelectorComponent implements OnChanges { @Input() groupInfo?: CoreGroupInfo; @Input() multipleGroupsMessage?: string; @Input() selected!: number; @Output() selectedChange = new EventEmitter<number>(); + options: GroupOption[] = []; + + constructor(protected changeDetectorRef: ChangeDetectorRef) {} + + /** + * @inheritdoc + */ + async ngOnChanges(changes: SimpleChanges): Promise<void> { + if ('groupInfo' in changes) { + this.options = await this.getOptions(); + + this.changeDetectorRef.markForCheck(); + } + } + + /** + * Get options array. + * + * @returns Options. + */ + protected async getOptions(): Promise<GroupOption[]> { + const options = await Promise.all( + (this.groupInfo?.groups ?? []).map(async group => { + const text = await CoreLang.filterMultilang(group.name); + + return { value: group.id, text }; + }), + ); + + return options; + } + +} + +/** + * Group display info. + */ +interface GroupOption { + value: number; + text: string; }