(feat): Tag list

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

@@ -24,6 +24,17 @@
  </m-tooltip>
  </a>
 
+ <a
+ class="m-topbar--navigation--item"
+ [class.m-topbar--navigation--item-active]="currentTab === 'hashtags'"
+ (click)="currentTab = 'hashtags'"
+ >
+ <span i18n>Hashtags</span>
+ <m-tooltip icon="help" i18n>
+ TBD
+ </m-tooltip>
+ </a>
+
  <a
  class="m-topbar--navigation--item"
  [class.m-topbar--navigation--item-active]="currentTab === 'footer'"
@@ -110,6 +121,48 @@
  </div>
  </ng-template>
 
+ <!-- Tags -->
+
+ <ng-template ngSwitchCase="hashtags">
+ <p class="m-pro--settings--note" i18n>
+ Set up your category filter hashtags here.
+ </p>
+
+ <div class="m-pro--settings--field" *ngFor="let tag of settings.tag_list; let i = index">
+ <label for="headline" i18n>Hashtag #{{ i + 1 }}</label>
+
+ <div class="m-pro--settings--flex-inputs">
+ <input
+ type="text"
+ placeholder="Label"
+ [id]="'tag-label-' + i"
+ [name]="'tag[' + i + '][label]'"
+ [(ngModel)]="tag.label"
+ i18n-placeholder
+ >
+
+ <input
+ type="text"
+ placeholder="#hashtag"
+ [id]="'tag-tag-' + i"
+ [name]="'tag[' + i + '][tag]'"
+ [(ngModel)]="tag.tag"
+ i18n-placeholder
+ >
+ </div>
+ </div>
+
+ <div class="m-pro--settings--field">
+ <button
+ class="m-btn m-btn--slim"
+ type="button"
+ [disabled]="inProgress"
+ (click)="addBlankTag()"
+ i18n
+ >+ Add Tag</button>
+ </div>
+ </ng-template>
+
  <!-- Footer -->
 
  <ng-template ngSwitchCase="footer">

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

@@ -17,7 +17,7 @@ export class ProSettingsComponent implements OnInit {
 
  saved: boolean = false;
 
- currentTab: 'general' | 'theme' | 'footer' | 'cancel' = 'general';
+ currentTab: 'general' | 'theme' | 'hashtags' | 'footer' | 'cancel' = 'general';
 
  constructor(
  protected service: ProService,
@@ -45,6 +45,14 @@ export class ProSettingsComponent implements OnInit {
 
  this.settings = settings;
 
+ if (this.settings && this.settings.tag_list) {
+ this.settings.tag_list = this.settings.tag_list.map(({ tag, label }) => {
+ const formattedTag = `#${tag}`;
+
+ return { tag: formattedTag, label };
+ });
+ }
+
  this.title.setTitle('Pro Settings');
 
  this.inProgress = false;
@@ -62,6 +70,14 @@ export class ProSettingsComponent implements OnInit {
  this.detectChanges();
  }
 
+ addBlankTag() {
+ if (!this.settings) {
+ return;
+ }
+
+ this.settings.tag_list.push({ label: '', tag: '' });
+ }
+
  addBlankFooterLink() {
  if (!this.settings) {
  return;