MOBILE-4035 groups: Create group selector component

src/addons/mod/assign/components/index/addon-mod-assign-index.html

@@ -20,18 +20,8 @@
     <!-- User can view all submissions (teacher). -->
     <ng-container *ngIf="assign && canViewAllSubmissions">
         <ion-list class="core-list-align-detail-right">
-            <ion-item class="ion-text-wrap core-group-selector" *ngIf="(groupInfo.separateGroups || groupInfo.visibleGroups)">
+
-                <ion-label id="addon-assign-groupslabel">
+            <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)"></core-group-selector>
-                    <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
-                    <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
-                </ion-label>
-                <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-assign-groupslabel"
-                    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>
-                </ion-select>
-            </ion-item>
 
             <ion-item class="ion-text-wrap">
                 <ion-label>

src/addons/mod/assign/pages/submission-list/submission-list.html

@@ -21,18 +21,9 @@
         </ion-refresher>
         <core-loading [hideUntil]="submissions.loaded">
             <ion-list>
-                <ion-item class="ion-text-wrap core-group-selector" *ngIf="(groupInfo.separateGroups || groupInfo.visibleGroups)">
+                <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="reloadSubmissions()">
-                    <ion-label id="addon-assign-groupslabel-list">
+                </core-group-selector>
-                        <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
+
-                        <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
-                    </ion-label>
-                    <ion-select [(ngModel)]="groupId" (ionChange)="reloadSubmissions()" aria-labelledby="addon-assign-groupslabel-list"
-                        interface="action-sheet" slot="end" [interfaceOptions]="{header: 'core.group' | translate}">
-                        <ion-select-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">
-                            {{groupOpt.name}}
-                        </ion-select-option>
-                    </ion-select>
-                </ion-item>
                 <!-- List of submissions. -->
                 <ng-container *ngFor="let submission of submissions.items">
                     <ion-item class="ion-text-wrap" (click)="submissions.select(submission)" button

src/addons/mod/bigbluebuttonbn/components/index/index.html

@@ -13,27 +13,8 @@
         [courseId]="courseId" (completionChanged)="onCompletionChange()">
     </core-course-module-info>
 
-    <ng-container *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+    <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="groupChanged()"
-        <ion-card class="core-info-card" *ngIf="groupInfo.groups && groupInfo.groups.length > 1">
+        [multipleGroupsMessage]="'addon.mod_bigbluebuttonbn.view_groups_selection_warning' | translate"></core-group-selector>
-            <ion-item>
-                <ion-icon name="fas-question-circle" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label>{{ 'addon.mod_bigbluebuttonbn.view_groups_selection_warning' | translate }}</ion-label>
-            </ion-item>
-        </ion-card>
-
-        <ion-item class="ion-text-wrap core-group-selector">
-            <ion-label id="addon-bigbluebuttonbn-groupslabel">
-                <ng-container *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ng-container>
-                <ng-container *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ng-container>
-            </ion-label>
-            <ion-select [(ngModel)]="groupId" (ionChange)="groupChanged()" aria-labelledby="addon-bigbluebuttonbn-groupslabel"
-                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>
-            </ion-select>
-        </ion-item>
-    </ng-container>
 
     <ng-container *ngIf="meetingInfo">
         <ion-item class="ion-text-wrap" *ngIf="meetingInfo.openingtime">

src/addons/mod/chat/pages/sessions/sessions.html

@@ -14,18 +14,7 @@
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
         <core-loading [hideUntil]="sessions.loaded">
-            <ion-item class="ion-text-wrap core-group-selector" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+            <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="reloadSessions()"></core-group-selector>
-                <ion-label id="addon-chat-groupslabel">
-                    <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
-                    <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
-                </ion-label>
-                <ion-select [(ngModel)]="groupId" (ionChange)="reloadSessions()" aria-labelledby="addon-chat-groupslabel"
-                    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>
-                </ion-select>
-            </ion-item>
 
             <ion-item>
                 <ion-label>{{ 'addon.mod_chat.showincompletesessions' | translate }}</ion-label>

src/addons/mod/data/components/index/addon-mod-data-index.html

@@ -25,18 +25,8 @@
         [courseId]="courseId" [hasDataToSync]="hasOffline || hasOfflineRatings" (completionChanged)="onCompletionChange()">
     </core-course-module-info>
 
-    <ion-item class="ion-text-wrap core-group-selector" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+    <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="setGroup(selectedGroup)">
-        <ion-label id="addon-data-groupslabel">
+    </core-group-selector>
-            <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
-            <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
-        </ion-label>
-        <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-data-groupslabel"
-            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>
-        </ion-select>
-    </ion-item>
 
     <ion-card class="core-info-card" *ngIf="!access?.timeavailable && timeAvailableFrom">
         <ion-item>

src/addons/mod/data/pages/edit/edit.html

@@ -18,18 +18,8 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="loaded">
-        <ion-item class="ion-text-wrap core-group-selector" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+        <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="setGroup(selectedGroup)">
-            <ion-label id="addon-data-groupslabel">
+        </core-group-selector>
-                <ng-container *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ng-container>
-                <ng-container *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ng-container>
-            </ion-label>
-            <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-data-groupslabel"
-                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>
-            </ion-select>
-        </ion-item>
 
         <div class="addon-data-contents {{cssClass}}" *ngIf="database">
             <core-style [css]="database.csstemplate" prefix=".{{cssClass}}"></core-style>

src/addons/mod/data/pages/entry/entry.html

@@ -25,18 +25,8 @@
             </ion-item>
         </ion-card>
 
-        <ion-item class="ion-text-wrap core-group-selector" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+        <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="setGroup(selectedGroup)">
-            <ion-label id="addon-data-groupslabel">
+        </core-group-selector>
-                <ng-container *ngIf="groupInfo.separateGroups">{{ 'core.groupsvisible' | translate }}</ng-container>
-                <ng-container *ngIf="groupInfo.visibleGroups">{{ 'core.groupsseparate' | translate }}</ng-container>
-            </ion-label>
-            <ion-select [(ngModel)]="selectedGroup" (ionChange)="setGroup(selectedGroup)" aria-labelledby="addon-data-groupslabel"
-                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>
-            </ion-select>
-        </ion-item>
 
         <div class="addon-data-contents addon-data-entry addon-data-entries-{{database.id}}" *ngIf="database && entry">
             <core-style [css]="database.csstemplate" prefix=".addon-data-entries-{{database.id}}"></core-style>

src/addons/mod/feedback/components/index/addon-mod-feedback-index.html

@@ -59,18 +59,8 @@
 
 <ng-template #basicInfo>
     <ion-list *ngIf="access && access.canviewanalysis && !access.isempty">
-        <ion-item class="ion-text-wrap core-group-selector" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+        <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)"></core-group-selector>
-            <ion-label id="addon-feedback-groupslabel">
+
-                <ng-container *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</ng-container>
-                <ng-container *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</ng-container>
-            </ion-label>
-            <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-feedback-groupslabel"
-                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>
-            </ion-select>
-        </ion-item>
         <ion-item class="ion-text-wrap" (click)="openAttempts()" [detail]="access.canviewreports && completedCount > 0"
             [button]="access.canviewreports && completedCount > 0">
             <ion-label>

src/addons/mod/feedback/pages/attempts/attempts.html

@@ -15,19 +15,8 @@
         </ion-refresher>
         <core-loading [hideUntil]="attempts && attempts.loaded">
             <ion-list class="ion-no-margin">
-                <ion-item class="ion-text-wrap core-group-selector"
+                <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="reloadAttempts()">
-                    *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+                </core-group-selector>
-                    <ion-label id="addon-feedback-groupslabel">
-                        <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
-                        <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
-                    </ion-label>
-                    <ion-select [(ngModel)]="selectedGroup" (ionChange)="reloadAttempts()" aria-labelledby="addon-feedback-groupslabel"
-                        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>
-                    </ion-select>
-                </ion-item>
 
                 <ng-container *ngIf="identifiableAttemptsTotal > 0">
                     <ion-item-divider>

src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html

@@ -14,19 +14,8 @@
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list class="ion-no-margin">
-            <ion-item class="ion-text-wrap core-group-selector" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+            <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="loadAttempts(selectedGroup)">
-                <ion-label id="addon-feedback-groupslabel">
+            </core-group-selector>
-                    <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
-                    <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
-                </ion-label>
-                <ion-select [(ngModel)]="selectedGroup" (ionChange)="loadAttempts(selectedGroup)"
-                    aria-labelledby="addon-feedback-groupslabel" 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>
-                </ion-select>
-            </ion-item>
 
             <ion-item-divider>
                 <ion-label>

src/addons/mod/forum/components/index/index.html

@@ -23,19 +23,8 @@
             </ion-item>
         </core-course-module-info>
 
-        <ion-item class="ion-text-wrap core-group-selector" lines="none"
+        <core-group-selector *ngIf="supportsChangeGroup" [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="groupChanged()">
-            *ngIf="supportsChangeGroup && groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+        </core-group-selector>
-            <ion-label id="addon-forum-groupslabel">
-                <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
-                <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
-            </ion-label>
-            <ion-select [(ngModel)]="groupId" (ionChange)="groupChanged()" aria-labelledby="addon-forum-groupslabel"
-                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>
-            </ion-select>
-        </ion-item>
 
         <!-- Cut-off date or due date message -->
         <ion-card class="core-info-card" *ngIf="availabilityMessage">

src/addons/mod/lesson/components/index/addon-mod-lesson-index.html

@@ -56,20 +56,8 @@
         <core-tab *ngIf="canViewReports" [title]="'addon.mod_lesson.reports' | translate" (ionSelect)="reportsSelected()">
             <ng-template>
                 <core-loading [hideUntil]="reportLoaded">
-                    <!-- Group selector if the activity uses groups. -->
+                    <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)">
-                    <ion-item class="ion-text-wrap core-group-selector"
+                    </core-group-selector>
-                        *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
-                        <ion-label id="addon-mod_lesson-groupslabel">
-                            <span *ngIf="groupInfo.separateGroups">{{ 'core.groupsseparate' | translate }}</span>
-                            <span *ngIf="groupInfo.visibleGroups">{{ 'core.groupsvisible' | translate }}</span>
-                        </ion-label>
-                        <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-mod_lesson-groupslabel"
-                            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>
-                        </ion-select>
-                    </ion-item>
 
                     <!-- No lesson retakes. -->
                     <core-empty-box *ngIf="!overview && selectedGroupName" icon="fas-chart-bar"

src/addons/mod/workshop/components/index/addon-mod-workshop-index.html

@@ -178,20 +178,7 @@
                     <h2 *ngIf="workshop!.phase > PHASE_SUBMISSION">{{ 'addon.mod_workshop.gradesreport' | translate }}</h2>
                 </ion-label>
             </ion-item-divider>
-            <ion-item class="ion-text-wrap core-group-selector" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+            <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)"></core-group-selector>
-                <ion-label id="addon-workshop-groupslabel" *ngIf="groupInfo.separateGroups">
-                    {{ 'core.groupsseparate' | translate }}
-                </ion-label>
-                <ion-label id="addon-workshop-groupslabel" *ngIf="groupInfo.visibleGroups">
-                    {{ 'core.groupsvisible' | translate }}
-                </ion-label>
-                <ion-select [(ngModel)]="group" (ionChange)="setGroup(group)" aria-labelledby="addon-workshop-groupslabel"
-                    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>
-                </ion-select>
-            </ion-item>
 
             <ng-container *ngFor="let submission of grades">
                 <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop!.course" [module]="module"

src/core/components/components.module.ts

@@ -62,6 +62,7 @@ import { CoreButtonWithSpinnerComponent } from './button-with-spinner/button-wit
 import { CoreSwipeSlidesComponent } from './swipe-slides/swipe-slides';
 import { CoreSwipeNavigationTourComponent } from './swipe-navigation-tour/swipe-navigation-tour';
 import { CoreMessageComponent } from './message/message';
+import { CoreGroupSelectorComponent } from './group-selector/group-selector';
 
 @NgModule({
     declarations: [
@@ -78,6 +79,7 @@ import { CoreMessageComponent } from './message/message';
         CoreEmptyBoxComponent,
         CoreFileComponent,
         CoreFilesComponent,
+        CoreGroupSelectorComponent,
         CoreIconComponent,
         CoreIframeComponent,
         CoreInfiniteLoadingComponent,
@@ -129,6 +131,7 @@ import { CoreMessageComponent } from './message/message';
         CoreEmptyBoxComponent,
         CoreFileComponent,
         CoreFilesComponent,
+        CoreGroupSelectorComponent,
         CoreIconComponent,
         CoreIframeComponent,
         CoreInfiniteLoadingComponent,

src/core/components/group-selector/group-selector.html

@@ -0,0 +1,22 @@
+<ng-container *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
+    <ion-card class="core-info-card" *ngIf="multipleGroupsMessage && groupInfo.groups && groupInfo.groups.length > 1">
+        <ion-item>
+            <ion-icon name="fas-question-circle" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ multipleGroupsMessage }}</ion-label>
+        </ion-item>
+    </ion-card>
+
+    <ion-item class="ion-text-wrap core-group-selector">
+        <ion-label id="core-groups-selector-groupslabel-{{id}}">
+            <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
+            <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
+        </ion-label>
+        <ion-select [(ngModel)]="selected" (ionChange)="selectedChange.emit(selected)"
+            [attr.aria-labelledby]="'core-groups-selector-groupslabel-' + id" 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>
+        </ion-select>
+    </ion-item>
+</ng-container>

src/core/components/group-selector/group-selector.ts

@@ -0,0 +1,43 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { CoreGroupInfo } from '@services/groups';
+import { CoreUtils } from '@services/utils/utils';
+
+/**
+ * Component to display a group selector.
+ */
+@Component({
+    selector: 'core-group-selector',
+    templateUrl: 'group-selector.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CoreGroupSelectorComponent implements OnInit {
+
+    @Input() groupInfo?: CoreGroupInfo;
+    @Input() multipleGroupsMessage?: string;
+    @Input() selected!: number;
+    @Output() selectedChange = new EventEmitter<number>();
+
+    id!: number;
+
+    /**
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        this.id = CoreUtils.getUniqueId('CoreGroupSelectorComponent');
+    }
+
+}