MOBILE-4081 settings: Add toggle from settings delegate

src/core/features/settings/classes/settings-handlers-source.ts

@@ -14,31 +14,41 @@
 
 import { Params } from '@angular/router';
 import { CoreRoutedItemsManagerSource } from '@classes/items-management/routed-items-manager-source';
-import { CoreSettingsDelegate, CoreSettingsHandlerToDisplay } from '../services/settings-delegate';
+import {
+    CoreSettingsDelegate,
+    CoreSettingsHandlerToDisplay,
+    CoreSettingsPageHandlerToDisplay,
+} from '../services/settings-delegate';
 
 /**
  * Provides a collection of site settings.
  */
-export class CoreSettingsHandlersSource extends CoreRoutedItemsManagerSource<CoreSettingsHandlerToDisplay> {
+export class CoreSettingsHandlersSource extends CoreRoutedItemsManagerSource<CoreSettingsPageHandlerToDisplay> {
+
+    handlers: CoreSettingsHandlerToDisplay[] = [];
 
     /**
      * @inheritdoc
      */
-    protected async loadPageItems(): Promise<{ items: CoreSettingsHandlerToDisplay[] }> {
+    protected async loadPageItems(): Promise<{ items: CoreSettingsPageHandlerToDisplay[] }> {
-        return { items: CoreSettingsDelegate.getHandlers() };
+        this.handlers = CoreSettingsDelegate.getHandlers();
+
+        return {
+            items: this.handlers.filter((handler): handler is CoreSettingsPageHandlerToDisplay => 'page' in handler),
+        };
     }
 
     /**
      * @inheritdoc
      */
-    getItemPath(handler: CoreSettingsHandlerToDisplay): string {
+    getItemPath(handler: CoreSettingsPageHandlerToDisplay): string {
         return handler.page;
     }
 
     /**
      * @inheritdoc
      */
-    getItemQueryParams(handler: CoreSettingsHandlerToDisplay): Params {
+    getItemQueryParams(handler: CoreSettingsPageHandlerToDisplay): Params {
         return handler.params || {};
     }
 

src/core/features/settings/pages/site/site.html

@@ -17,14 +17,17 @@
         </ion-refresher>
         <core-loading [hideUntil]="handlers.loaded">
             <ion-list>
-                <ion-item *ngFor="let handler of handlers.items" [ngClass]="['core-settings-handler', handler.class]"
+                <ion-item *ngFor="let handler of handlerItems" [ngClass]="['core-settings-handler', handler.class]"
-                    [attr.aria-label]="handler.title | translate" detail="true" (click)="handlers.select(handler)" button
+                    [attr.aria-label]="handler.title | translate" (click)="handlers.select(handler)" [button]="!handler.toggle"
-                    [attr.aria-current]="handlers.getItemAriaCurrent(handler)">
+                    [detail]="!handler.toggle" [attr.aria-current]="handlers.getItemAriaCurrent(handler)">
                     <ion-icon [name]="handler.icon" slot="start" *ngIf="handler.icon" aria-hidden="true">
                     </ion-icon>
                     <ion-label>
                         <p class="item-heading">{{ handler.title | translate}}</p>
                     </ion-label>
+                    <ion-toggle *ngIf="handler.toggle" [(ngModel)]="handler.toggleChecked"
+                        (ionChange)="handler.toggle($event.detail.checked)">
+                    </ion-toggle>
                 </ion-item>
             </ion-list>
 

src/core/features/settings/pages/site/site.ts

@@ -15,14 +15,13 @@
 import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
 import { IonRefresher } from '@ionic/angular';
 
-import { CoreSettingsHandlerToDisplay } from '../../services/settings-delegate';
+import { CoreSettingsHandlerToDisplay, CoreSettingsPageHandlerToDisplay } from '../../services/settings-delegate';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreSites } from '@services/sites';
 import { CoreNavigator } from '@services/navigator';
 import { CoreSplitViewComponent } from '@components/split-view/split-view';
 import { CoreListItemsManager } from '@classes/items-management/list-items-manager';
 import { CoreRoutedItemsManagerSourcesTracker } from '@classes/items-management/routed-items-manager-sources-tracker';
-import { CoreSettingsHandlersSource } from '@features/settings/classes/settings-handlers-source';
 import { CoreSettingsHelper } from '@features/settings/services/settings-helper';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreNetwork } from '@services/network';
@@ -30,6 +29,7 @@ import { Subscription } from 'rxjs';
 import { NgZone } from '@singletons';
 import { CoreConstants } from '@/core/constants';
 import { CoreConfig } from '@services/config';
+import { CoreSettingsHandlersSource } from '@features/settings/classes/settings-handlers-source';
 
 /**
  * Page that displays the list of site settings pages.
@@ -42,7 +42,7 @@ export class CoreSitePreferencesPage implements AfterViewInit, OnDestroy {
 
     @ViewChild(CoreSplitViewComponent) splitView!: CoreSplitViewComponent;
 
-    handlers: CoreListItemsManager<CoreSettingsHandlerToDisplay>;
+    handlers: CoreListItemsManager<CoreSettingsPageHandlerToDisplay, CoreSettingsHandlersSource>;
 
     dataSaver = false;
     limitedConnection = false;
@@ -53,6 +53,10 @@ export class CoreSitePreferencesPage implements AfterViewInit, OnDestroy {
     protected networkObserver: Subscription;
     protected isDestroyed = false;
 
+    get handlerItems(): CoreSettingsHandlerToDisplay[] {
+        return this.handlers.getSource().handlers;
+    }
+
     constructor() {
         this.siteId = CoreSites.getCurrentSiteId();
 

src/core/features/settings/services/settings-delegate.ts

@@ -25,19 +25,9 @@ import { makeSingleton } from '@singletons';
 export type CoreSettingsHandler = CoreDelegateDisplayHandler<CoreSettingsHandlerToDisplay>;
 
 /**
- * Data needed to render a setting handler. It's returned by the handler.
+ * Main data returned by the handler.
  */
-export interface CoreSettingsHandlerData {
+interface CoreSettingsHandlerBaseData {
-    /**
-     * Name of the page to load for the handler.
-     */
-    page: string;
-
-    /**
-     * Params list of the page to load for the handler.
-     */
-    params?: Params;
-
     /**
      * Title to display for the handler.
      */
@@ -54,11 +44,45 @@ export interface CoreSettingsHandlerData {
     class?: string;
 }
 
+interface CoreSettingsToggleHandlerData extends CoreSettingsHandlerBaseData {
+    /**
+     * Toggle checked.
+     */
+    toggleChecked?: boolean;
+
+    /**
+     * Method for emit events to the handler.
+     */
+    toggle(checked: boolean): void;
+}
+
+interface CoreSettingsPageHandlerData extends CoreSettingsHandlerBaseData {
+    /**
+     * Name of the page to load for the handler.
+     */
+    page: string;
+
+    /**
+     * Params list of the page to load for the handler.
+     */
+    params?: Params;
+}
+
+/**
+ * Data needed to render a setting handler. It's returned by the handler.
+ */
+export type CoreSettingsHandlerData = CoreSettingsPageHandlerData | CoreSettingsToggleHandlerData;
+
 /**
  * Data returned by the delegate for each handler.
  */
 export type CoreSettingsHandlerToDisplay = CoreDelegateToDisplay & CoreSettingsHandlerData;
 
+/**
+ * Data returned by the delegate for each handler to be displayed in pages.
+ */
+export type CoreSettingsPageHandlerToDisplay = CoreDelegateToDisplay & CoreSettingsPageHandlerData;
+
 /**
  * Service to interact with addons to be shown in app settings. Provides functions to register a plugin
  * and notify an update in the data.