MOBILE-2658 login: Do site selector scalable

scripts/langindex.json

@@ -1269,6 +1269,7 @@
   "core.fileuploader.uploading": "local_moodlemobileapp",
   "core.fileuploader.uploadingperc": "local_moodlemobileapp",
   "core.fileuploader.video": "local_moodlemobileapp",
+  "core.login.findyoursite": "local_moodlemobileapp",
   "core.folder": "moodle",
   "core.forcepasswordchangenotice": "moodle",
   "core.fulllistofcourses": "moodle",

src/assets/lang/en.json

@@ -1328,6 +1328,7 @@
     "core.login.erroraccesscontrolalloworigin": "The cross-origin call you're trying to perform has been rejected. Please check https://docs.moodle.org/dev/Moodle_Mobile_development_using_Chrome_or_Chromium",
     "core.login.errordeletesite": "An error occurred while deleting this site. Please try again.",
     "core.login.errorupdatesite": "An error occurred while updating the site's token.",
+    "core.login.findyoursite": "Find your site",
     "core.login.firsttime": "Is this your first time here?",
     "core.login.forgotten": "Forgotten your username or password?",
     "core.login.getanothercaptcha": "Get another CAPTCHA",

src/core/login/lang/en.json

@@ -17,6 +17,7 @@
     "erroraccesscontrolalloworigin": "The cross-origin call you're trying to perform has been rejected. Please check https://docs.moodle.org/dev/Moodle_Mobile_development_using_Chrome_or_Chromium",
     "errordeletesite": "An error occurred while deleting this site. Please try again.",
     "errorupdatesite": "An error occurred while updating the site's token.",
+    "findyoursite": "Find your site",
     "firsttime": "Is this your first time here?",
     "forgotten": "Forgotten your username or password?",
     "getanothercaptcha": "Get another CAPTCHA",

src/core/login/pages/site/site.html

@@ -17,33 +17,39 @@
         <div text-center padding>
             <img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation">
         </div>
-        <form ion-list [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)">
+        <form ion-list [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)" *ngIf="!fixedSites || fixedDisplay == 'select'">
             <!-- Form to input the site URL if there are no fixed sites. -->
-            <div *ngIf="!fixedSites">
+            <ng-container *ngIf="!fixedSites">
                 <p padding>{{ 'core.login.newsitedescription' | translate }}</p>
                 <ion-item>
                     <ion-input type="url" name="url" placeholder="{{ 'core.login.siteaddress' | translate }}" formControlName="siteUrl" [core-auto-focus]="showKeyboard"></ion-input>
                 </ion-item>
-            </div>
+            </ng-container>
 
-            <!-- Pick the site from a list of fixed sites. -->
+            <ion-item *ngIf="fixedSites && fixedDisplay == 'select'" margin-vertical text-wrap>
-            <div *ngIf="fixedSites" text-wrap>
-                <!-- Display them using a select. -->
-                <ion-item *ngIf="!displayAsButtons" margin-vertical>
                 <ion-label stacked for="siteSelect">{{ 'core.login.selectsite' | translate }}</ion-label>
                 <ion-select formControlName="siteUrl" name="url" placeholder="{{ 'core.login.siteaddress' | translate }}" interface="popover">
                     <ion-option *ngFor="let site of fixedSites" [value]="site.url">{{site.name}}</ion-option>
                 </ion-select>
             </ion-item>
 
-                <!-- Display them using buttons. -->
+            <button ion-button block [disabled]="!siteForm.valid">{{ 'core.login.connect' | translate }}</button>
-                <div *ngIf="displayAsButtons">
-                    <p class="padding no-padding-bottom">{{ 'core.login.selectsite' | translate }}</p>
-                    <a *ngFor="let site of fixedSites" ion-button block (click)="connect(site.url)" title="{{site.name}}" margin-bottom>{{site.name}}</a>
-                </div>
-            </div>
-
-            <button *ngIf="!fixedSites || !displayAsButtons" ion-button block [disabled]="!siteForm.valid">{{ 'core.login.connect' | translate }}</button>
         </form>
+        <!-- Pick the site from a list of fixed sites. -->
+        <ion-list *ngIf="fixedSites && fixedDisplay == 'list'">
+            <p class="padding no-padding-bottom">{{ 'core.login.selectsite' | translate }}</p>
+
+            <ion-searchbar *ngIf="fixedSites.length > 4" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.login.findyoursite' | translate"></ion-searchbar>
+            <ion-item *ngFor="let site of filteredSites" (click)="connect(site.url)" [title]="site.name" detail-push text-wrap>
+                <h2>{{site.name}}</h2>
+                <p>{{site.url}}</p>
+            </ion-item>
+        </ion-list>
+
+        <!-- Display them using buttons. -->
+        <div *ngIf="fixedSites && fixedDisplay == 'buttons'">
+            <p class="padding no-padding-bottom">{{ 'core.login.selectsite' | translate }}</p>
+            <a *ngFor="let site of fixedSites" ion-button block (click)="connect(site.url)" [title]="site.name" margin-bottom>{{site.name}}</a>
+        </div>
     </div>
 </ion-content>

src/core/login/pages/site/site.scss

@@ -36,4 +36,12 @@ ion-app.app-root page-core-login-site {
     .item-input:last-child {
         margin-bottom: 20px;
     }
+
+    .searchbar-ios {
+        background: transparent;
+
+        .searchbar-input {
+            background-color: $searchbar-ios-toolbar-input-background
+        }
+    }
 }

src/core/login/pages/site/site.ts

@@ -32,8 +32,10 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 export class CoreLoginSitePage {
     siteForm: FormGroup;
     fixedSites: any[];
-    displayAsButtons = false;
+    filteredSites: any[];
+    fixedDisplay = 'buttons';
     showKeyboard = false;
+    filter = '';
 
     constructor(navParams: NavParams, private navCtrl: NavController, fb: FormBuilder, private appProvider: CoreAppProvider,
             private sitesProvider: CoreSitesProvider, private loginHelper: CoreLoginHelperProvider,
@@ -46,7 +48,12 @@ export class CoreLoginSitePage {
         // Load fixed sites if they're set.
         if (this.loginHelper.hasSeveralFixedSites()) {
             this.fixedSites = <any[]> this.loginHelper.getFixedSites();
-            this.displayAsButtons = CoreConfigConstants.multisitesdisplay == 'buttons';
+            this.fixedDisplay = CoreConfigConstants.multisitesdisplay;
+            // Autoselect if not defined.
+            if (['list', 'select', 'buttons'].indexOf(this.fixedDisplay) < 0) {
+                this.fixedDisplay = this.fixedSites.length > 8 ? 'list' : (this.fixedSites.length > 3 ? 'select' : 'buttons');
+            }
+            this.filteredSites = this.fixedSites;
             url = this.fixedSites[0].url;
         }
 
@@ -113,6 +120,22 @@ export class CoreLoginSitePage {
         }
     }
 
+    /**
+     * The filter has changed.
+     *
+     * @param {any} Received Event.
+     */
+    filterChanged(event: any): void {
+        const newValue = event.target.value && event.target.value.trim().toLowerCase();
+        if (!newValue || !this.fixedSites) {
+            this.filteredSites = this.fixedSites;
+        } else {
+            this.filteredSites = this.fixedSites.filter((site) => {
+                return site.name.toLowerCase().indexOf(newValue) > -1 || site.url.toLowerCase().indexOf(newValue) > -1;
+            });
+        }
+    }
+
     /**
      * Show a help modal.
      */