Merge pull request #3032 from dpalou/MOBILE-3944

MOBILE-3944 user: Link interests with tags page

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

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

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

@@ -1,7 +1,10 @@
+@import "~theme/globals";
+
 :host {
     line-height: 1.6;
 
     ion-badge {
         cursor: pointer;
+        @include margin-horizontal(4px, 4px);
     }
 }

src/core/features/user/pages/about/about.html

@@ -94,10 +94,12 @@
                             </a></p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="user.interests">
+                <ion-item class="ion-text-wrap" *ngIf="interests" class="core-user-profile-interests">
                     <ion-label>
                         <h2>{{ 'core.user.interests' | translate}}</h2>
-                        <p>{{ user.interests }}</p>
+                        <ion-badge *ngFor="let interest of interests" role="link" (click)="openInterest(interest)">
+                            {{ interest }}
+                        </ion-badge>
                     </ion-label>
                 </ion-item>
                 <core-user-profile-field *ngFor="let field of user.customfields" [field]="field" contextLevel="course"

src/core/features/user/pages/about/about.page.ts

@@ -49,6 +49,7 @@ export class CoreUserAboutPage implements OnInit, OnDestroy {
     formattedAddress?: string;
     encodedAddress?: SafeUrl;
     canChangeProfilePicture = false;
+    interests?: string[];
 
     protected userId!: number;
     protected site!: CoreSite;
@@ -107,6 +108,10 @@ export class CoreUserAboutPage implements OnInit, OnDestroy {
                 this.encodedAddress = CoreTextUtils.buildAddressURL(this.formattedAddress);
             }
 
+            this.interests = user.interests ?
+                user.interests.split(',').map(interest => interest.trim()) :
+                undefined;
+
             this.hasContact = !!(user.email || user.phone1 || user.phone2 || user.city || user.country || user.address);
             this.hasDetails = !!(user.url || user.interests || (user.customfields && user.customfields.length > 0));
 
@@ -250,6 +255,17 @@ export class CoreUserAboutPage implements OnInit, OnDestroy {
         return avatarUrl;
     }
 
+    /**
+     * Open a user interest.
+     *
+     * @param interest Interest name.
+     */
+    openInterest(interest: string): void {
+        CoreNavigator.navigateToSitePath('/tag/index', { params: {
+            tagName: interest,
+        } });
+    }
+
     /**
      * @inheritdoc
      */

src/core/features/user/pages/about/about.scss

@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 :host {
 
     .core-user-profile-maininfo::part(native) {
@@ -36,6 +38,13 @@
         }
     }
 
+    .core-user-profile-interests {
+        ion-badge {
+            cursor: pointer;
+            @include margin-horizontal(3px, 3px);
+        }
+    }
+
 }
 
 :host-context([dir="rtl"]) ::ng-deep core-user-avatar .edit-avatar {

src/core/features/user/services/handlers/tag-area.ts

@@ -68,6 +68,7 @@ export class CoreUserTagAreaHandlerService implements CoreTagAreaHandler {
                 avatarUrl,
                 heading: userbox.innerText,
                 details: [],
+                url: profileUrl,
                 user: {
                     id: Number(match[1]),
                     profileimageurl: avatarUrl || '',