(fix): draggable list now works as intended

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

 @import 'themes';
 
 m-draggable-list {
- ul {
+ ul.m-draggableList__list {
  list-style: none;
  padding: 0;
  margin: 0;
+ display: flex;
+ flex-direction: column;
+ transition: all ease 300ms;
 
- li {
+ &.dndDragover {
+ padding-top: 16px;
+ padding-bottom: 16px;
+ }
+
+ li.m-draggableList__listItem {
  padding: 8px;
  border: 1px solid #ddd;
 

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';
+import { Component, ContentChild, Input, TemplateRef, } from '@angular/core';
+import { DndDropEvent, EffectAllowed } from 'ngx-drag-drop';
 
 @Component({
  selector: 'm-draggable-list',
@@ -14,23 +8,20 @@ import { DndDropEvent, DropEffect, EffectAllowed } from 'ngx-drag-drop';
  dndDropzone
  [dndHorizontal]="false"
  [dndEffectAllowed]="dndEffectAllowed"
- (dndDrop)="onDrop($event, data)"
+ (dndDrop)="onDrop($event)"
+ class="m-draggableList__list"
  >
  <div
  class="dndPlaceholder"
  dndPlaceholderRef
- style="min-height:72px;border:1px dashed green;background-color:rgba(0, 0, 0, 0.1)"
+ style="min-height:100px;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')"
+ class="m-draggableList__listItem"
  >
  <i class="handle material-icons" dndHandle>reorder</i>
  <ng-container
@@ -43,33 +34,28 @@ import { DndDropEvent, DropEffect, EffectAllowed } from 'ngx-drag-drop';
 })
 export class DraggableListComponent {
  @Input() data: Array<any>;
- @Input() dndEffectAllowed: EffectAllowed = 'move';
+ @Input() dndEffectAllowed: EffectAllowed = 'copyMove';
+ @Input() id: string;
  @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
 
  trackByFunction(index, item) {
- return item.tag + index;
+ return this.id ? item[this.id] + index : 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) {
+ if (this.data && (event.dropEffect === 'copy' || event.dropEffect === 'move')) {
+ let dragIndex = this.data.findIndex(item => event.data[this.id] === item[this.id]);
+ let dropIndex = event.index || this.data.length;
+ // remove element
+ this.data.splice(dragIndex, 1);
 
- onDrop(event: DndDropEvent, list?: any[]) {
- if (list && (event.dropEffect === 'copy' || event.dropEffect === 'move')) {
- let index = event.index;
-
- if (typeof index === 'undefined') {
- index = list.length;
+ // add it back to new index
+ if (dragIndex < dropIndex) {
+ dropIndex--;
  }
 
- list.splice(index, 0, event.data);
+ this.data.splice(dropIndex, 0, event.data);
+
  }
  }
 }

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

@@ -136,9 +136,9 @@
  </div>
 
  <div class="m-pro--settings--field">
- <label for="plain_background_color" i18n
- >Plain Background Color</label
- >
+ <label for="plain_background_color" i18n>
+ Plain Background Color
+ </label>
  <input
  type="color"
  id="plain_background_color"
@@ -148,7 +148,9 @@
  </div>
 
  <div class="m-pro--settings--field">
- <label i18n>Color Schema</label>
+ <label i18n>
+ Color Schema
+ </label>
 
  <input
  type="radio"
@@ -157,9 +159,9 @@
  value="light"
  [(ngModel)]="settings.scheme"
  />
- <label for="scheme_light" class="m-pro--settings--inline-label"
- >Light</label
- >
+ <label for="scheme_light" class="m-pro--settings--inline-label">
+ Light
+ </label>
 
  <input
  type="radio"
@@ -168,9 +170,9 @@
  value="dark"
  [(ngModel)]="settings.scheme"
  />
- <label for="scheme_dark" class="m-pro--settings--inline-label"
- >Dark</label
- >
+ <label for="scheme_dark" class="m-pro--settings--inline-label">
+ Dark
+ </label>
  </div>
 
  <div class="m-pro--settings--field">
@@ -187,8 +189,9 @@
  <label
  [for]="'tile_ratio_' + ratio"
  class="m-pro--settings--inline-label"
- >{{ ratio }}</label
  >
+ {{ ratio }}
+ </label>
  </ng-container>
  </div>
 
@@ -210,52 +213,24 @@
  Set up your category filter hashtags here.
  </p>
 
- <div
- class="m-pro--settings--field"
- *ngFor="let tag of settings.tag_list; let i = index"
+ <m-draggable-list
+ [data]="settings.tag_list"
+ [id]="'tag'"
  >
- <label [for]="'tag-label-' + i" 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
- />
-
- <i class="material-icons" (click)="removeTag(i)">clear</i>
- </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--settings--field">
+ <label i18n>
+ Hashtag #{{ i + 1 }}
+ </label>
 
- <div class="m-pro&#45;&#45;settings&#45;&#45;flex-inputs">
+ <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
@@ -264,12 +239,15 @@
  [id]="'tag-tag-' + i"
  [name]="'tag[' + i + '][tag]'"
  [(ngModel)]="tag.tag"
- i18n-placeholder
  >
+
+ <i class="material-icons" (click)="removeTag(i)">
+ clear
+ </i>
  </div>
  </div>
  </ng-template>
- </m-draggable-list>-->
+ </m-draggable-list>
 
  <div class="m-pro--settings--field">
  <button
@@ -301,38 +279,41 @@
  />
  </div>
 
- <div
- class="m-pro--settings--field"
- *ngFor="let link of settings.footer_links; let i = index"
+ <m-draggable-list
+ [data]="settings.footer_links"
+ [id]="'title'"
  >
- <label [for]="'footer-link-title-' + i" i18n
- >Link #{{ i + 1 }}</label
- >
+ <ng-template let-link="item" let-i="i">
 
- <div class="m-pro--settings--flex-inputs">
- <input
- type="text"
- placeholder="Title"
- [id]="'footer-link-title-' + i"
- [name]="'footer_link[' + i + '][title]'"
- [(ngModel)]="link.title"
- i18n-placeholder
- />
+ <div class="m-pro--settings--field">
+ <label i18n>
+ Link #{{ i + 1 }}
+ </label>
 
- <input
- type="text"
- placeholder="https://example.com/"
- [id]="'footer-link-href-' + i"
- [name]="'footer_link[' + i + '][href]'"
- [(ngModel)]="link.href"
- i18n-placeholder
- />
+  <div class="m-pro--settings--flex-inputs">
+  <input
+  type="text"
+  placeholder="Title"
+  [id]="'footer_link-title-' + i"
+  [name]="'footer_link[' + i + '][title]'"
+  [(ngModel)]="link.title"
+  >
 
- <i class="material-icons" (click)="removeFooterLink(i)"
- >clear</i
- >
- </div>
- </div>
+ <input
+ type="text"
+ placeholder="https://example.com/"
+ [id]="'footer_link-href-' + i"
+ [name]="'footer_link[' + i + '][href]'"
+ [(ngModel)]="link.href"
+ >
+
+ <i class="material-icons" (click)="removeFooterLink(i)">
+ clear
+ </i>
+ </div>
+ </div>
+ </ng-template>
+ </m-draggable-list>
 
  <div class="m-pro--settings--field">
  <button
@@ -377,7 +358,7 @@
  <a
  class="m-btn m-link-btn m-btn--slim m-btn--destructive"
  routerLink="/pro"
-  >Cancel Pro</a
+ >Cancel Pro</a
  >
  </div>
  </ng-template>
@@ -404,7 +385,7 @@
  class="m-btn m-link-btn m-btn--slim m-pro--settings--preview-btn"
  [routerLink]="previewRoute"
  i18n
-  >View your Pro channel</a
+ >View your Pro channel</a
  >
  </div>
  </form>

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

-import {
- ChangeDetectionStrategy,
- ChangeDetectorRef,
- Component,
- OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, } from '@angular/core';
 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',
@@ -30,9 +24,6 @@ export class ProSettingsComponent implements OnInit {
  | 'domain'
  | 'cancel' = 'general';
 
- private currentDraggableEvent: DragEvent;
- private currentDragEffectMsg: string;
-
  constructor(
  protected service: ProService,
  protected session: Session,
@@ -111,34 +102,4 @@ export class ProSettingsComponent implements OnInit {
  get ratios() {
  return this.service.ratios;
  }
-
- 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);
- }
- }
 }