MOBILE-3637 core: Add tag list and navigation bar components

src/core/components/components.module.ts

@@ -44,6 +44,7 @@ import { CoreDynamicComponent } from './dynamic-component/dynamic-component';
 import { CoreNavBarButtonsComponent } from './navbar-buttons/navbar-buttons';
 import { CoreSendMessageFormComponent } from './send-message-form/send-message-form';
 import { CoreTimerComponent } from './timer/timer';
+import { CoreNavigationBarComponent } from './navigation-bar/navigation-bar';
 
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { CorePipesModule } from '@pipes/pipes.module';
@@ -76,6 +77,7 @@ import { CorePipesModule } from '@pipes/pipes.module';
         CoreDynamicComponent,
         CoreSendMessageFormComponent,
         CoreTimerComponent,
+        CoreNavigationBarComponent,
     ],
     imports: [
         CommonModule,
@@ -112,6 +114,7 @@ import { CorePipesModule } from '@pipes/pipes.module';
         CoreDynamicComponent,
         CoreSendMessageFormComponent,
         CoreTimerComponent,
+        CoreNavigationBarComponent,
     ],
 })
 export class CoreComponentsModule {}

src/core/components/navigation-bar/core-navigation-bar.html

@@ -0,0 +1,25 @@
+<ion-grid class="ion-no-padding ion-padding-bottom" *ngIf="previous || info || next">
+    <ion-row>
+        <ion-col class="ion-text-start" size="4">
+            <ion-button *ngIf="previous" class="core-navigation-bar-arrow" color="light"
+                [title]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
+                <ion-icon name="fas-arrow-left" [slot]="previousTitle ? 'start' : 'icon-only'"></ion-icon>
+                <core-format-text *ngIf="previousTitle" [text]="previousTitle" [component]="component" [componentId]="componentId"
+                    [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text>
+            </ion-button>
+        </ion-col>
+        <ion-col class="ion-text-center ion-padding-horizontal" size="4">
+            <ion-button fill="clear" *ngIf="info" (click)="showInfo()" [title]="title">
+                <ion-icon slot="icon-only" name="fas-info-circle"></ion-icon>
+            </ion-button>
+        </ion-col>
+        <ion-col class="ion-text-end" size="4">
+            <ion-button *ngIf="next" class="core-navigation-bar-arrow" [title]="nextTitle || ('core.next' | translate)"
+                (click)="action?.emit(next)">
+                <core-format-text *ngIf="nextTitle" [text]="nextTitle" [component]="component" [componentId]="componentId"
+                    [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text>
+                <ion-icon name="fas-arrow-right" [slot]="nextTitle ? 'end' : 'icon-only'"></ion-icon>
+            </ion-button>
+        </ion-col>
+    </ion-row>
+</ion-grid>

src/core/components/navigation-bar/navigation-bar.scss

@@ -0,0 +1,12 @@
+.core-navigation-bar-arrow {
+    text-transform: none;
+    max-width: 100%;
+    ion-icon {
+        flex-shrink: 0;
+    }
+
+    core-format-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

src/core/components/navigation-bar/navigation-bar.ts

@@ -0,0 +1,59 @@
+// (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, EventEmitter, Input, Output } from '@angular/core';
+import { CoreTextUtils } from '@services/utils/text';
+
+/**
+ * Component to show a "bar" with arrows to navigate forward/backward and a "info" icon to display more data.
+ *
+ * This directive will show two arrows at the left and right of the screen to navigate to previous/next item when clicked.
+ * If no previous/next item is defined, that arrow won't be shown. It will also show a button to show more info.
+ *
+ * Example usage:
+ * <core-navigation-bar [previous]="prevItem" [next]="nextItem" (action)="goTo($event)"></core-navigation-bar>
+ */
+@Component({
+    selector: 'core-navigation-bar',
+    templateUrl: 'core-navigation-bar.html',
+    styleUrls: ['navigation-bar.scss'],
+})
+export class CoreNavigationBarComponent {
+
+    @Input() previous?: unknown; // Previous item. If not defined, the previous arrow won't be shown.
+    @Input() previousTitle?: string; // Previous item title. If not defined, only the arrow will be shown.
+    @Input() next?: unknown; // Next item. If not defined, the next arrow won't be shown.
+    @Input() nextTitle?: string; // Next item title. If not defined, only the arrow will be shown.
+    @Input() info = ''; // Info to show when clicking the info button. If not defined, the info button won't be shown.
+    @Input() title = ''; // Title to show when seeing the info (new page).
+    @Input() component?: string; // Component the bar belongs to.
+    @Input() componentId?: number; // Component ID.
+    @Input() contextLevel?: string; // The context level.
+    @Input() contextInstanceId?: number; // The instance ID related to the context.
+    @Input() courseId?: number; // Course ID the text belongs to. It can be used to improve performance with filters.
+    @Output() action?: EventEmitter<unknown> =
+        new EventEmitter<unknown>(); // Function to call when arrow is clicked. Will receive as a param the item to load.
+
+    showInfo(): void {
+        CoreTextUtils.instance.viewText(this.title, this.info, {
+            component: this.component,
+            componentId: this.componentId,
+            filter: true,
+            contextLevel: this.contextLevel,
+            instanceId: this.contextInstanceId,
+            courseId: this.courseId,
+        });
+    }
+
+}

src/core/features/tag/components/components.module.ts

@@ -19,10 +19,12 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { CoreTagFeedComponent } from './feed/feed';
 import { CoreSharedModule } from '@/core/shared.module';
+import { CoreTagListComponent } from './list/list';
 
 @NgModule({
     declarations: [
         CoreTagFeedComponent,
+        CoreTagListComponent,
     ],
     imports: [
         CommonModule,
@@ -34,6 +36,7 @@ import { CoreSharedModule } from '@/core/shared.module';
     ],
     exports: [
         CoreTagFeedComponent,
+        CoreTagListComponent,
     ],
 })
 export class CoreTagComponentsModule {}

src/core/features/tag/components/list/core-tag-list.html

@@ -0,0 +1,3 @@
+<ng-container *ngFor="let tag of tags">
+    <ion-badge (click)="openTag(tag)" class="core-tag-list-tag">{{ tag.rawname }}</ion-badge>
+</ng-container>

src/core/features/tag/components/list/list.scss

@@ -0,0 +1,7 @@
+:host {
+    line-height: 1.6;
+
+    ion-badge {
+        cursor: pointer;
+    }
+}

src/core/features/tag/components/list/list.ts

@@ -0,0 +1,47 @@
+// (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 { CoreTagItem } from '@features/tag/services/tag';
+import { Params } from '@angular/router';
+import { CoreNavigator } from '@services/navigator';
+
+/**
+ * Component that displays the list of tags of an item.
+ */
+@Component({
+    selector: 'core-tag-list',
+    templateUrl: 'core-tag-list.html',
+    styleUrls: ['list.scss'],
+})
+export class CoreTagListComponent {
+
+    @Input() tags: CoreTagItem[] = [];
+
+    /**
+     * Go to tag index page.
+     */
+    openTag(tag: CoreTagItem): void {
+        const params: Params = {
+            tagId: tag.id,
+            tagName: tag.rawname,
+            collectionId: tag.tagcollid,
+            fromContextId: tag.taginstancecontextid,
+        };
+
+        // @todo: Check split view to navigate on the outlet if any.
+        CoreNavigator.instance.navigate('/tag/index', { params });
+    }
+
+}