MOBILE-3656 wiki: Migrate index page

main
Dani Palou 2021-04-06 16:20:38 +02:00
parent 0dee685130
commit a881722a50
10 changed files with 1582 additions and 0 deletions

View File

@ -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 {}

View File

@ -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>

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -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>

View File

@ -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)[];
};

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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();
}
}