Drag n drop sorting for custom fields (#370)

* Implement custom field ordering with new handle placement

* Update reference for jslib

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",

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",

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,

src/app/vault/add-edit.component.html

@@ -362,7 +362,9 @@
                 </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 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>
@@ -416,6 +418,10 @@
                                         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>
                         </div>
                     </div>

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