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);
+ }
+ }
 }