package.json

@@ -41,6 +41,7 @@
     "material-design-icons": "~3.0.1",
     "material-design-lite": "~1.3.0",
     "medium-editor": "^5.23.2",
+    "ngx-drag-drop": "^2.0.0",
     "plotly.js": "^1.47.4",
     "rxjs": "~6.5.2",
     "socket.io-client": "^2.2.0",

src/app/common/common.module.ts

@@ -102,10 +102,13 @@ import { ThemeService } from "./services/theme.service";
 import { HorizontalInfiniteScroll } from "./components/infinite-scroll/horizontal-infinite-scroll.component";
 import { ReferralsLinksComponent } from '../modules/wallet/tokens/referrals/links/links.component';
 import { ShareModalComponent } from '../modules/modals/share/share';
+import { DraggableListComponent } from "./components/draggable-list/list.component";
+import { DndModule } from "ngx-drag-drop";
 
 @NgModule({
   imports: [
     NgCommonModule,
+    DndModule,
     RouterModule,
     FormsModule,
     ReactiveFormsModule,
@@ -195,6 +198,7 @@ import { ShareModalComponent } from '../modules/modals/share/share';
     SwitchComponent,
 
     FeaturedContentComponent,
+    DraggableListComponent,
   ],
   exports: [
     MINDS_PIPES,
@@ -278,17 +282,20 @@ import { ShareModalComponent } from '../modules/modals/share/share';
     SwitchComponent,
     NSFWSelectorComponent,
     FeaturedContentComponent,
+    DraggableListComponent,
   ],
   providers: [
     {
       provide: AttachmentService,
       useFactory: AttachmentService._,
-      deps: [Session, Client, Upload, HttpClient ]
+      deps: [Session, Client, Upload, HttpClient]
     },
     {
       provide: UpdateMarkersService,
-      useFactory: (_http, _session, _sockets) => { return new UpdateMarkersService(_http, _session, _sockets); },
-      deps: [ MindsHttpClient, Session, SocketsService ],
+      useFactory: (_http, _session, _sockets) => {
+        return new UpdateMarkersService(_http, _session, _sockets);
+      },
+      deps: [MindsHttpClient, Session, SocketsService],
     },
     {
       provide: MindsHttpClient,
@@ -298,22 +305,22 @@ import { ShareModalComponent } from '../modules/modals/share/share';
     {
       provide: NSFWSelectorCreatorService,
       useFactory: (_storage) => new NSFWSelectorCreatorService(_storage),
-      deps: [ Storage ],
+      deps: [Storage],
     },
     {
       provide: NSFWSelectorConsumerService,
       useFactory: (_storage) => new NSFWSelectorConsumerService(_storage),
-      deps: [ Storage ],
+      deps: [Storage],
     },
     {
       provide: BoostedContentService,
       useFactory: (client, session, entitiesService, blockListService, settingsService) => new BoostedContentService(client, session, entitiesService, blockListService, settingsService),
-      deps: [ Client, Session, EntitiesService, BlockListService, SettingsService ]
+      deps: [Client, Session, EntitiesService, BlockListService, SettingsService]
     },
     {
       provide: FeaturedContentService,
       useFactory: boostedContentService => new FeaturedContentService(boostedContentService),
-      deps: [ FeedsService ],
+      deps: [FeedsService],
     }
   ],
   entryComponents: [

src/app/common/components/draggable-list/list.component.scss

+@import 'themes';
+
+m-draggable-list {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      padding: 8px;
+      border: 1px solid #ddd;
+
+      display: flex;
+      align-items: center;
+
+      .handle {
+        @include m-theme() {
+          color: themed($grey-600);
+        }
+      }
+    }
+  }
+}

src/app/common/components/draggable-list/list.component.ts

+import { ChangeDetectorRef, Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { DndDropEvent, DropEffect, EffectAllowed } from 'ngx-drag-drop';
+
+@Component({
+  selector: 'm-draggable-list',
+  template: `
+    <ul
+      dndDropzone
+      [dndHorizontal]="false"
+      [dndEffectAllowed]="dndEffectAllowed"
+      (dndDrop)="onDrop($event, data)"
+    >
+
+      <div class="dndPlaceholder" dndPlaceholderRef
+           style="min-height:72px;border:1px dashed green;background-color:rgba(0, 0, 0, 0.1)"></div>
+
+      <li
+        *ngFor="let item of data; let i = index; trackBy: trackByFunction"
+        [dndDraggable]="item"
+        [dndEffectAllowed]="'move'"
+        (dndCopied)="onDragged(item, data, 'copy')"
+        (dndLinked)="onDragged(item, data, 'link')"
+        (dndMoved)="onDragged(item, data, 'move')"
+        (dndEnd)="onDragEnd(item, data, $event)"
+        (dndCanceled)="onDragged(item, data, 'none')"
+      >
+        <i class="handle material-icons" dndHandle>reorder</i>
+        <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{item: item, i: i}"></ng-container>
+      </li>
+
+    </ul>
+  `,
+})
+
+export class DraggableListComponent {
+  @Input() data: Array<any>;
+  @Input() dndEffectAllowed: EffectAllowed = 'move';
+  @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
+
+  trackByFunction(index, item) {
+    return item.tag + index;
+  }
+
+  onDragged(item: any, list: any[], effect: DropEffect) {
+    // const index = list.indexOf(item);
+    // list.splice(index, 1);
+  }
+
+  onDragEnd(item: any, list: any[], event: DragEvent) {
+    const index = list.indexOf(item);
+    list.splice(index, 1);
+    console.warn('drag ended');
+  }
+
+  onDrop(event: DndDropEvent, list?: any[]) {
+    if (list
+      && (event.dropEffect === "copy"
+        || event.dropEffect === "move")) {
+
+      let index = event.index;
+
+      if (typeof index === "undefined") {
+
+        index = list.length;
+      }
+
+      list.splice(index, 0, event.data);
+    }
+  }
+}

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

@@ -138,6 +138,7 @@
                 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>
 
@@ -162,6 +163,36 @@
                 </div>
               </div>
 
+              <!--<m-draggable-list
+                [data]="settings.tag_list">
+                <ng-template let-tag="item" let-i="i">
+
+                  <div class="m-pro&#45;&#45;settings&#45;&#45;field">
+                    <label for="headline" i18n>Hashtag #{{ i + 1 }}</label>
+
+                    <div class="m-pro&#45;&#45;settings&#45;&#45;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>
+                </ng-template>
+              </m-draggable-list>-->
+
               <div class="m-pro--settings--field">
                 <button
                   class="m-btn m-btn--slim"
@@ -169,7 +200,8 @@
                   [disabled]="inProgress"
                   (click)="addBlankTag()"
                   i18n
-                >+ Add Tag</button>
+                >+ Add Tag
+                </button>
               </div>
             </ng-template>
 

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

@@ -3,6 +3,7 @@ import { ProService } from '../pro.service';
 import { Session } from '../../../services/session';
 import { Router } from '@angular/router';
 import { MindsTitle } from '../../../services/ux/title';
+import { DndDropEvent, DropEffect } from 'ngx-drag-drop';
 
 @Component({
   selector: 'm-pro--settings',
@@ -19,6 +20,9 @@ export class ProSettingsComponent implements OnInit {
 
   currentTab: 'general' | 'theme' | 'hashtags' | 'footer' | 'cancel' = 'general';
 
+  private currentDraggableEvent: DragEvent;
+  private currentDragEffectMsg: string;
+
   constructor(
     protected service: ProService,
     protected session: Session,
@@ -86,4 +90,43 @@ export class ProSettingsComponent implements OnInit {
   get previewRoute() {
     return ['/pro', this.session.getLoggedInUser().username];
   }
+
+  onDragStart(event: DragEvent) {
+
+    this.currentDragEffectMsg = "";
+    this.currentDraggableEvent = event;
+
+  }
+
+  onDragged(item: any, list: any[], effect: DropEffect) {
+
+    this.currentDragEffectMsg = `Drag ended with effect "${effect}"!`;
+
+    if (effect === "move") {
+
+      const index = list.indexOf(item);
+      list.splice(index, 1);
+    }
+  }
+
+  onDragEnd(event: DragEvent) {
+    this.currentDraggableEvent = event;
+  }
+
+  onDrop(event: DndDropEvent, list?: any[]) {
+
+    if (list
+      && (event.dropEffect === "copy"
+        || event.dropEffect === "move")) {
+
+      let index = event.index;
+
+      if (typeof index === "undefined") {
+
+        index = list.length;
+      }
+
+      list.splice(index, 0, event.data);
+    }
+  }
 }