Commit 72fc1167 authored by Marcelo Rivera's avatar Marcelo Rivera

(fix): draggable list now works as intended

1 merge request!528WIP: (feat): Minds Pro
Pipeline #80762799 failed with stages
in 4 minutes and 58 seconds
This diff is collapsed.
@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;
......
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);
}
}
}
......@@ -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>
......
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);
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment