(feat): added tags list

src/app/interfaces/entities.ts

@@ -38,6 +38,12 @@ export interface KeyVal {
 	value: any;
 }
 
+export interface Tag {
+ tag: string,
+ label: string,
+ selected?: boolean
+}
+
 export interface MindsUser {
 	guid : string;
 	name : string;
@@ -69,7 +75,16 @@ export interface MindsUser {
  tags?: Array<string>;
  toaster_notifications?: boolean;
  pro?: boolean;
- pro_settings?: { styles?: { [key: string]: string }, [key: string]: string | { [key: string]: string } };
+ pro_settings?: {
+ tag_list?: Tag[],
+ background_image: string,
+ title: string,
+ headline: string,
+ footer_text: string,
+ footer_links: { href: string, title: string }[],
+
+ styles?: { [key: string]: string },
+ };
 }
 
 export interface MindsGroup {

src/app/modules/pro/channel/channel.component.html

@@ -21,7 +21,7 @@
  (keyup.enter)="search()"
  >
  <ng-container *ngIf="searchedText">
- <i class="material-icons clear" (click)="clearSearch()" >close</i>
+ <i class="material-icons clear" (click)="clearSearch()">close</i>
  </ng-container>
  <label class="mdl-textfield__label" for="search"></label>
  </div>
@@ -67,7 +67,19 @@
  >Donate</a>
  </ng-container>
 
- <m-pro-user-menu [channelName]="channel.username" [showNavItems]="collapseNavItems" [query]="searchedText"></m-pro-user-menu>
+ <m-pro-user-menu [channelName]="channel.username" [showNavItems]="collapseNavItems"
+ [query]="searchedText"></m-pro-user-menu>
+ </div>
+
+ <div class="m-proChannel__categories">
+ <div
+ class="m-proChannel__category"
+ [class.m-proChannel__selectedCategory]="!!tag.selected"
+ (click)="selectTag(tag)"
+ *ngFor="let tag of channel.pro_settings.tag_list"
+ >
+ {{tag.label}}
+ </div>
  </div>
 
  <div class="m-proChannel__body">

src/app/modules/pro/channel/channel.component.scss

@@ -105,6 +105,26 @@ m-pro--channel {
  font-size: 18px;
  }
 
+ .m-proChannel__categories {
+ grid-row: 2 / span 1;
+ grid-column: 2 / span 10;
+
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-around;
+
+ .m-proChannel__category {
+ cursor: pointer;
+ color: var(--text-color);
+ padding: 0 8px;
+
+ &.m-proChannel__selectedCategory {
+ color: var(--primary-color);
+ }
+ }
+ }
+
  .m-proChannel__body {
  grid-row: 3 / span 1;
  grid-column: 1 / span 12;

src/app/modules/pro/channel/channel.component.ts

@@ -11,7 +11,7 @@ import {
 import { ActivatedRoute, Router, NavigationEnd, NavigationStart } from "@angular/router";
 import { Session } from "../../../services/session";
 import { Subscription } from "rxjs";
-import { MindsUser } from "../../../interfaces/entities";
+import { MindsUser, Tag } from "../../../interfaces/entities";
 import { Client } from "../../../services/api/client";
 import { MindsTitle } from '../../../services/ux/title';
 import { ProChannelService } from './channel.service';
@@ -44,6 +44,10 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
  currentURL: string;
 
+ query: string;
+
+ selectedTag: Tag = null;
+
  constructor(
  protected element: ElementRef,
  protected session: Session,
@@ -206,4 +210,14 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  get linkTo() {
  return this.channelService.linkTo.bind(this.channelService);
  }
+
+ selectTag(clickedTag: any) {
+ this.selectedTag = clickedTag;
+
+ for (let tag of this.channel.pro_settings.tag_list) {
+ tag.selected = tag.tag == clickedTag.tag;
+ }
+
+ this.detectChanges();
+ }
 }