MOBILE-4288 multilang: Fix in group selector

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>

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;
 }