MOBILE-3656 wiki: Migrate index page

src/addons/mod/wiki/components/components.module.ts

@@ -0,0 +1,40 @@
+// (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 { CoreSharedModule } from '@/core/shared.module';
+import { NgModule } from '@angular/core';
+import { CoreCourseComponentsModule } from '@features/course/components/components.module';
+import { CoreTagComponentsModule } from '@features/tag/components/components.module';
+import { AddonModWikiIndexComponent } from './index/index';
+import { AddonModWikiMapModalComponent } from './map/map';
+import { AddonModWikiSubwikiPickerComponent } from './subwiki-picker/subwiki-picker';
+
+@NgModule({
+    declarations: [
+        AddonModWikiIndexComponent,
+        AddonModWikiSubwikiPickerComponent,
+        AddonModWikiMapModalComponent,
+    ],
+    imports: [
+        CoreSharedModule,
+        CoreCourseComponentsModule,
+        CoreTagComponentsModule,
+    ],
+    exports: [
+        AddonModWikiIndexComponent,
+        AddonModWikiSubwikiPickerComponent,
+        AddonModWikiMapModalComponent,
+    ],
+})
+export class AddonModWikiComponentsModule {}

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

@@ -0,0 +1,95 @@
+<!-- Buttons to add to the header. -->
+<core-navbar-buttons slot="end">
+    <!-- Select subwiki. -->
+    <ion-button slot="icon-only //TODO: mode to icon" *ngIf="subwikiData.count > 1" (click)="showSubwikiPicker($event)" [attr.aria-label]="'addon.mod_wiki.subwiki' | translate">
+        <ion-icon *ngIf="!groupWiki" name="person"></ion-icon>
+        <ion-icon *ngIf="groupWiki" name="people"></ion-icon>
+    </ion-button>
+
+    <ion-button *ngIf="loaded && currentPageObj" slot="icon-only //TODO: mode to icon" (click)="openMap($event)"[attr.aria-label]="'addon.mod_wiki.map' | translate" aria-haspopup="true">
+        <ion-icon name="map"></ion-icon>
+    </ion-button>
+
+    <core-context-menu>
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
+            [href]="externalUrl" iconAction="fas-external-link-alt">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
+            (action)="expandDescription()" iconAction="fas-arrow-right">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
+            iconAction="far-newspaper" (action)="gotoBlog()">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline && !pageIsOffline" [priority]="700"
+            [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon"
+            [closeOnClick]="false">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="loaded && isOnline && (hasOffline || pageIsOffline)" [priority]="600"
+            [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon"
+            [closeOnClick]="false">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="canEdit && (isOnline || pageIsOffline)" [priority]="590" [content]="'core.edit' | translate"
+            iconAction="fas-edit" (action)="goToEditPage()">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="canEdit" [priority]="580" [content]="'addon.mod_wiki.createpage' | translate"
+            iconAction="fas-plus" (action)="goToNewPage()">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="500" [content]="prefetchText" (action)="prefetch($event)"
+            [iconAction]="prefetchStatusIcon" [closeOnClick]="false">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="size" [priority]="400" [content]="'core.clearstoreddata' | translate:{$a: size}"
+            iconDescription="fas-archive" (action)="removeFiles($event)" iconAction="fas-trash" [closeOnClick]="false">
+        </core-context-menu-item>
+    </core-context-menu>
+</core-navbar-buttons>
+
+<!-- Content. -->
+<ion-content>
+    <core-loading [hideUntil]="loaded" class="core-loading-center">
+        <div class="ion-padding" *ngIf="description || pageIsOffline || hasOffline || pageWarning">
+            <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
+                contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+            </core-course-module-description>
+
+            <!-- Wiki has something offline. -->
+            <ion-card class="core-warning-card" *ngIf="pageIsOffline || hasOffline">
+                <ion-item>
+                    <ion-icon name="fas-exclamation-triangle" slot="start"></ion-icon>
+                    <ion-label>
+                        <span *ngIf="pageIsOffline">{{ 'core.hasdatatosync' | translate:{$a: pageStr} }}</span>
+                        <span *ngIf="!pageIsOffline">{{ 'core.hasdatatosync' | translate:{$a: moduleName} }}</span>
+                    </ion-label>
+                </ion-item>
+            </ion-card>
+
+            <!-- Page warning. -->
+            <ion-card class="core-warning-card" *ngIf="pageWarning">
+                <ion-item>
+                    <ion-icon name="fas-exclamation-triangle" slot="start"></ion-icon>
+                    <ion-label>{{ pageWarning }}</ion-label>
+                </ion-item>
+            </ion-card>
+        </div>
+        <div class="ion-padding addon-mod_wiki-page-content">
+            <article [ngClass]="{'addon-mod_wiki-noedit': !canEdit}">
+                <core-format-text *ngIf="pageContent" [component]="component" [componentId]="componentId" [text]="pageContent"
+                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                </core-format-text>
+                <core-empty-box *ngIf="!pageContent" icon="fas-file-alt" [message]="'addon.mod_wiki.nocontent' | translate"
+                    [inline]="true">
+                </core-empty-box>
+            </article>
+
+            <div class="ion-margin-top" *ngIf="tagsEnabled && currentPageObj && currentPageObj.tags && currentPageObj.tags.length > 0">
+                <b>{{ 'core.tag.tags' | translate }}:</b>
+                <core-tag-list [tags]="currentPageObj.tags"></core-tag-list>
+            </div>
+        </div>
+    </core-loading>
+
+    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canEdit">
+        <ion-fab-button (click)="goToNewPage()" [attr.aria-label]="'addon.mod_wiki.createpage' | translate">
+            <ion-icon name="fas-plus"></ion-icon>
+        </ion-fab-button>
+    </ion-fab>
+</ion-content>

src/addons/mod/wiki/components/index/index.scss

@@ -0,0 +1,63 @@
+@import "~theme/globals";
+
+$addon-mod-wiki-toc-level-padding:    12px !default;
+
+:host {
+    --addon-mod-wiki-newentry-link-color: var(--red);
+    --addon-mod-wiki-toc-border-color: var(--gray-dark);
+    --addon-mod-wiki-toc-background-color: var(--gray-light);
+
+    background-color: var(--ion-item-background);
+
+    .addon-mod_wiki-page-content {
+        background-color: var(--ion-item-background);
+        border-top: 1px solid var(--gray);
+        padding-bottom: 10px;
+    }
+
+    .addon-mod_wiki-page-content core-format-text ::ng-deep {
+        .wiki-toc {
+            margin: 16px;
+            padding: 8px;
+            border: 1px solid var(--addon-mod-wiki-toc-border-color);
+            background: var(--addon-mod-wiki-toc-background-color);
+            p {
+                color: var(--ion-text-color);
+            }
+        }
+
+        .wiki-toc-title {
+            font-size: 1.1em;
+            font-variant: small-caps;
+            text-align: center;
+        }
+
+        .wiki-toc-section {
+            padding: 0;
+            margin: 2px 8px;
+        }
+
+        .wiki-toc-section-2 {
+            @include padding-horizontal($addon-mod-wiki-toc-level-padding, null);
+        }
+
+        .wiki-toc-section-3 {
+            @include padding-horizontal($addon-mod-wiki-toc-level-padding * 2, null);
+        }
+
+        .wiki_newentry {
+            color: var(--addon-mod-wiki-newentry-link-color);
+            font-style: italic;
+        }
+
+        /* Hide edit section links */
+        .addon-mod_wiki-noedit a.wiki_edit_section {
+            display: none;
+        }
+    }
+}
+
+:host-context(body.dark) {
+    --addon-mod-wiki-newentry-link-color: var(--red-light);
+    --addon-mod-wiki-toc-background-color: var(--gray-darker);
+}

src/addons/mod/wiki/components/map/map.html

@@ -0,0 +1,39 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-title>{{ 'addon.mod_wiki.map' | translate }}</ion-title>
+        <ion-buttons slot="end">
+            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon name="close" slot="icon-only"></ion-icon>
+            </ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content>
+    <nav>
+        <ion-list>
+            <!-- Go to "home". -->
+            <ion-item class="ion-text-wrap" *ngIf="homeView" (click)="goToWikiHome()">
+                <ion-icon name="fas-home" slot="start"></ion-icon>
+                <ion-label>{{ 'addon.mod_wiki.gowikihome' | translate }}</ion-label>
+            </ion-item>
+            <ng-container *ngFor="let letter of map">
+                <ion-item-divider *ngIf="letter.label">
+                    <ion-label>{{ letter.label }}</ion-label>
+                </ion-item-divider>
+                <ion-item class="ion-text-wrap" *ngFor="let page of letter.pages" (click)="goToPage(page)"
+                    [class.core-selected-item]="selected == page.id">
+                    <ion-icon name="fas-home" slot="start" *ngIf="page.firstpage"></ion-icon>
+                    <ion-label>
+                        <core-format-text [text]="page.title" contextLevel="module" [contextInstanceId]="moduleId"
+                            [courseId]="courseId">
+                        </core-format-text>
+                        <ion-note *ngIf="!page.id" slot="end">
+                            <ion-icon name="time"></ion-icon>
+                            <span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
+                        </ion-note>
+                    </ion-label>
+                </ion-item>
+            </ng-container>
+        </ion-list>
+    </nav>
+</ion-content>

src/addons/mod/wiki/components/map/map.ts

@@ -0,0 +1,105 @@
+// (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, OnInit } from '@angular/core';
+import { ModalController } from '@singletons';
+import { AddonModWikiPageDBRecord } from '../../services/database/wiki';
+import { AddonModWikiSubwikiPage } from '../../services/wiki';
+
+/**
+ * Modal to display the map of a Wiki.
+ */
+@Component({
+    selector: 'page-addon-mod-wiki-map',
+    templateUrl: 'map.html',
+})
+export class AddonModWikiMapModalComponent implements OnInit {
+
+    @Input() pages: (AddonModWikiSubwikiPage | AddonModWikiPageDBRecord)[] = [];
+    @Input() selected?: number;
+    @Input() moduleId?: number;
+    @Input() courseId?: number;
+    @Input() homeView: unknown; // @todo
+
+    map: AddonModWikiPagesMapLetter[] = []; // Map of pages, categorized by letter.
+
+    /**
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        this.constructMap();
+    }
+
+    /**
+     * Function called when a page is clicked.
+     *
+     * @param page Clicked page.
+     */
+    goToPage(page: AddonModWikiSubwikiPage | AddonModWikiPageDBRecord): void {
+        ModalController.dismiss({ type: 'page', goto: page });
+    }
+
+    /**
+     * Go back to the initial page of the wiki.
+     */
+    goToWikiHome(): void {
+        // @todo ModalController.dismiss({ type: 'home', goto: this.homeView });
+    }
+
+    /**
+     * Construct the map of pages.
+     *
+     * @param pages List of pages.
+     */
+    protected constructMap(): void {
+        let letter: AddonModWikiPagesMapLetter;
+        let initialLetter: string;
+
+        this.map = [];
+        this.pages.sort((a, b) => {
+            const compareA = a.title.toLowerCase().trim();
+            const compareB = b.title.toLowerCase().trim();
+
+            return compareA.localeCompare(compareB);
+        });
+
+        this.pages.forEach((page) => {
+            const letterCandidate = page.title.charAt(0).toLocaleUpperCase();
+
+            // Should we create a new grouping?
+            if (letterCandidate !== initialLetter) {
+                initialLetter = letterCandidate;
+                letter = { label: letterCandidate, pages: [] };
+
+                this.map.push(letter);
+            }
+
+            // Add the subwiki to the currently active grouping.
+            letter.pages.push(page);
+        });
+    }
+
+    /**
+     * Close modal.
+     */
+    closeModal(): void {
+        ModalController.dismiss();
+    }
+
+}
+
+type AddonModWikiPagesMapLetter = {
+    label: string;
+    pages: (AddonModWikiSubwikiPage | AddonModWikiPageDBRecord)[];
+};

src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html

@@ -0,0 +1,13 @@
+<ion-list>
+    <ng-container *ngFor="let group of subwikis">
+        <ion-item-divider *ngIf="group.label">
+            <ion-label><strong>{{ group.label }}</strong></ion-label>
+        </ion-item-divider>
+        <ion-item class="ion-text-wrap" *ngFor="let subwiki of group.subwikis" (click)="openSubwiki(subwiki)"
+            [attr.disabled]="!subwiki.canedit && subwiki.id <= 0 ? true : null" tappable
+            [class.core-selected-item]="isSubwikiSelected(subwiki)" detail="false">
+            <ion-label>{{ subwiki.name }}</ion-label>
+            <ion-icon *ngIf="isSubwikiSelected(subwiki)" name="checkmark" slot="end"></ion-icon>
+        </ion-item>
+    </ng-container>
+</ion-list>

src/addons/mod/wiki/components/subwiki-picker/subwiki-picker.ts

@@ -0,0 +1,61 @@
+// (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 } from '@angular/core';
+import { PopoverController } from '@singletons';
+import { AddonModWikiSubwiki, AddonModWikiSubwikiListGrouping } from '../../services/wiki';
+
+/**
+ * Component to display the a list of subwikis in a wiki.
+ */
+@Component({
+    selector: 'addon-mod-wiki-subwiki-picker',
+    templateUrl: 'addon-mod-wiki-subwiki-picker.html',
+})
+export class AddonModWikiSubwikiPickerComponent {
+
+    @Input() subwikis: AddonModWikiSubwikiListGrouping[] = [];
+    @Input() currentSubwiki!: AddonModWikiSubwiki;
+
+    /**
+     * Checks if the given subwiki is the one currently selected.
+     *
+     * @param subwiki Subwiki to check.
+     * @return Whether it's the selected subwiki.
+     */
+    protected isSubwikiSelected(subwiki: AddonModWikiSubwiki): boolean {
+
+        if (subwiki.id > 0 && this.currentSubwiki.id > 0) {
+            return subwiki.id == this.currentSubwiki.id;
+        }
+
+        return subwiki.userid == this.currentSubwiki.userid && subwiki.groupid == this.currentSubwiki.groupid;
+    }
+
+    /**
+     * Function called when a subwiki is clicked.
+     *
+     * @param subwiki The subwiki to open.
+     */
+    openSubwiki(subwiki: AddonModWikiSubwiki): void {
+        // Check if the subwiki is disabled.
+        if (subwiki.id > 0 || subwiki.canedit) {
+            // Check if it isn't current subwiki.
+            if (subwiki != this.currentSubwiki) {
+                PopoverController.dismiss(subwiki);
+            }
+        }
+    }
+
+}

src/addons/mod/wiki/pages/index/index.html

@@ -0,0 +1,24 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
+        </ion-buttons>
+        <ion-title>
+            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+            </core-format-text>
+        </ion-title>
+
+        <ion-buttons slot="end">
+            <!-- The buttons defined by the component will be added in here. -->
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content>
+    <ion-refresher slot="fixed" [disabled]="!activityComponent?.loaded" (ionRefresh)="activityComponent?.doRefresh($event.target)">
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+    </ion-refresher>
+
+    <addon-mod-wiki-index [module]="module" [courseId]="courseId" [action]="action" [pageId]="pageId" [pageTitle]="pageTitle"
+        [subwikiId]="subwikiId" [userId]="userId" [groupId]="groupId" (dataRetrieved)="updateData($event)">
+    </addon-mod-wiki-index>
+</ion-content>

src/addons/mod/wiki/pages/index/index.ts

@@ -0,0 +1,83 @@
+// (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, OnInit, ViewChild } from '@angular/core';
+import { CoreCourseModuleMainActivityPage } from '@features/course/classes/main-activity-page';
+import { CoreNavigator } from '@services/navigator';
+import { AddonModWikiIndexComponent } from '../../components/index/index';
+
+/**
+ * Page that displays a wiki page.
+ */
+@Component({
+    selector: 'page-addon-mod-wiki-index',
+    templateUrl: 'index.html',
+})
+export class AddonModWikiIndexPage extends CoreCourseModuleMainActivityPage<AddonModWikiIndexComponent> implements OnInit {
+
+    @ViewChild(AddonModWikiIndexComponent) activityComponent?: AddonModWikiIndexComponent;
+
+    action?: string;
+    pageId?: number;
+    pageTitle?: string;
+    subwikiId?: number;
+    userId?: number;
+    groupId?: number;
+
+    /**
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        super.ngOnInit();
+
+        this.action = CoreNavigator.getRouteParam('action') || 'page';
+        this.pageId = CoreNavigator.getRouteNumberParam('pageId');
+        this.pageTitle = CoreNavigator.getRouteParam('pageTitle');
+        this.subwikiId = CoreNavigator.getRouteNumberParam('subwikiId');
+        this.userId = CoreNavigator.getRouteNumberParam('userId');
+        this.groupId = CoreNavigator.getRouteNumberParam('groupId');
+
+        this.title = this.pageTitle || this.module.name;
+    }
+
+    /**
+     * Update some data based on the data received.
+     *
+     * @param data The data received.
+     */
+    updateData(data: { name: string } | string): void {
+        if (typeof data == 'string') {
+            // We received the title to display.
+            this.title = data;
+        } else {
+            // We received a wiki instance.
+            this.title = this.pageTitle || data.name || this.title;
+        }
+    }
+
+    /**
+     * User entered the page.
+     */
+    ionViewDidEnter(): void {
+        this.activityComponent?.ionViewDidEnter();
+    }
+
+    /**
+     * User left the page.
+     */
+    ionViewDidLeave(): void {
+        this.activityComponent?.ionViewDidLeave();
+    }
+
+}