From 9685f2c2b32677d32d232d11ca112c406ea26950 Mon Sep 17 00:00:00 2001
From: Kovah <mail@kovah.de>
Date: Thu, 28 Mar 2019 16:39:49 +0100
Subject: [PATCH] Drag n drop sorting for custom fields (#370)

* Implement custom field ordering with new handle placement

* Update reference for jslib
---
 package-lock.json                     |  15 ++++
 package.json                          |   1 +
 src/app/app.module.ts                 |   2 +
 src/app/vault/add-edit.component.html | 106 ++++++++++++++------------
 src/scss/styles.scss                  |  12 +++
 5 files changed, 86 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 53f42fd2c3..3898e5e89e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -407,6 +407,15 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/cdk": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.2.1.tgz",
+      "integrity": "sha512-oU1Pjq3JkDtkXquLxWK84A2jOCeYRf352dVGbQCxWoSOQ5KBtMAd42huGidPiOSHN6/f7xZwL3n4fq3fVIut8A==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/common": {
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.1.tgz",
@@ -8338,6 +8347,12 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
+    "parse5": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+      "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+      "optional": true
+    },
     "parseurl": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
diff --git a/package.json b/package.json
index 1804fdbd0e..de17fd3760 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
   },
   "dependencies": {
     "@angular/animations": "7.2.1",
+    "@angular/cdk": "7.2.1",
     "@angular/common": "7.2.1",
     "@angular/compiler": "7.2.1",
     "@angular/core": "7.2.1",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 63a4d71efe..7e4d943bd2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,6 +7,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { AppRoutingModule } from './app-routing.module';
 
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -228,6 +229,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         }),
         ToasterModule.forRoot(),
         InfiniteScrollModule,
+        DragDropModule,
     ],
     declarations: [
         AcceptOrganizationComponent,
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index d3b42972d1..891900ae57 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -362,60 +362,66 @@
                 </div>
                 <h3 class="mt-4">{{'customFields' | i18n}}</h3>
                 <ng-container *ngIf="cipher.hasFields">
-                    <div class="row" appBoxRow *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction">
-                        <div class="col-5 form-group">
-                            <div class="d-flex">
-                                <label for="fieldName{{i}}">{{'name' | i18n}}</label>
-                                <a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
-                                    target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
-                                    <i class="fa fa-question-circle-o"></i>
-                                </a>
+                    <div cdkDropList (cdkDropListDropped)="drop($event)">
+                        <div class="row" appBoxRow cdkDrag
+                            *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction" >
+                            <div class="col-5 form-group">
+                                <div class="d-flex">
+                                    <label for="fieldName{{i}}">{{'name' | i18n}}</label>
+                                    <a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
+                                        target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
+                                        <i class="fa fa-question-circle-o"></i>
+                                    </a>
+                                </div>
+                                <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
+                                    class="form-control" appInputVerbatim>
                             </div>
-                            <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
-                                class="form-control" appInputVerbatim>
-                        </div>
-                        <div class="col-7 form-group">
-                            <label for="fieldValue{{i}}">{{'value' | i18n}}</label>
-                            <div class="d-flex align-items-center">
-                                <div class="input-group" *ngIf="f.type === fieldType.Text">
-                                    <input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}"
-                                        [(ngModel)]="f.value" appInputVerbatim>
-                                    <div class="input-group-append">
-                                        <button type="button" class="btn btn-outline-secondary"
-                                            title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
-                                            tabindex="-1">
-                                            <i class="fa fa-lg fa-clipboard"></i>
-                                        </button>
+                            <div class="col-7 form-group">
+                                <label for="fieldValue{{i}}">{{'value' | i18n}}</label>
+                                <div class="d-flex align-items-center">
+                                    <div class="input-group" *ngIf="f.type === fieldType.Text">
+                                        <input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}"
+                                            [(ngModel)]="f.value" appInputVerbatim>
+                                        <div class="input-group-append">
+                                            <button type="button" class="btn btn-outline-secondary"
+                                                title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
+                                                tabindex="-1">
+                                                <i class="fa fa-lg fa-clipboard"></i>
+                                            </button>
+                                        </div>
                                     </div>
-                                </div>
-                                <div class="input-group" *ngIf="f.type === fieldType.Hidden">
-                                    <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
-                                        name="Field.Value{{i}}" [(ngModel)]="f.value"
-                                        class="form-control text-monospace" appInputVerbatim
-                                        autocomplete="new-password">
-                                    <div class="input-group-append">
-                                        <button type="button" class="btn btn-outline-secondary"
-                                            title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
-                                            tabindex="-1">
-                                            <i class="fa fa-lg"
-                                                [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
-                                        </button>
-                                        <button type="button" class="btn btn-outline-secondary"
-                                            title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
-                                            tabindex="-1">
-                                            <i class="fa fa-lg fa-clipboard"></i>
-                                        </button>
+                                    <div class="input-group" *ngIf="f.type === fieldType.Hidden">
+                                        <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
+                                            name="Field.Value{{i}}" [(ngModel)]="f.value"
+                                            class="form-control text-monospace" appInputVerbatim
+                                            autocomplete="new-password">
+                                        <div class="input-group-append">
+                                            <button type="button" class="btn btn-outline-secondary"
+                                                title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
+                                                tabindex="-1">
+                                                <i class="fa fa-lg"
+                                                    [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
+                                            </button>
+                                            <button type="button" class="btn btn-outline-secondary"
+                                                title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
+                                                tabindex="-1">
+                                                <i class="fa fa-lg fa-clipboard"></i>
+                                            </button>
+                                        </div>
                                     </div>
+                                    <div class="flex-fill">
+                                        <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
+                                            [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean" appTrueFalseValue
+                                            trueValue="true" falseValue="false">
+                                    </div>
+                                    <button type="button" class="btn btn-link text-danger ml-2" (click)="removeField(f)"
+                                        title="{{'remove' | i18n}}">
+                                        <i class="fa fa-minus-circle fa-lg"></i>
+                                    </button>
+                                    <span class="text-muted cursor-move" title="{{'dragToSort' | i18n}}">
+                                        <i class="fa fa-bars"></i>
+                                    </span>
                                 </div>
-                                <div class="flex-fill">
-                                    <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
-                                        [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean" appTrueFalseValue
-                                        trueValue="true" falseValue="false">
-                                </div>
-                                <button type="button" class="btn btn-link text-danger ml-2" (click)="removeField(f)"
-                                    title="{{'remove' | i18n}}">
-                                    <i class="fa fa-minus-circle fa-lg"></i>
-                                </button>
                             </div>
                         </div>
                     </div>
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 65b18595b3..2223886e75 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -785,3 +785,15 @@ img.logo {
 .overflow-hidden {
     overflow: hidden;
 }
+
+.cdk-drag-preview {
+    z-index: $zindex-tooltip !important;
+    padding: $spacer / 2;
+    opacity: .8;
+    background-color: $white;
+    border-radius: $border-radius;
+}
+
+.cursor-move {
+    cursor: move;
+}