Drag n drop sorting for custom fields (#237)

* Implement sorting for custom fields

Adds angular/cdk to sources and makes DragDropModule globally available.
Updates the add-edit component with necessary tags.
Restructures and updates the box styling for drag 'n drop handling.

* Set the correct Angular CDK version

* Remove unused class for drag handle

* Add missing locale entry for drag handle

* Fix styling of the drag handle

* Move drag handle to right side of custom fields

* Revert changes in package-lock.json

* Update reference for jslib

package-lock.json

@@ -413,6 +413,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",
@@ -9278,6 +9287,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
+    },
     "pascalcase": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",

package.json

@@ -232,6 +232,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

@@ -9,6 +9,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { AppRoutingModule } from './app-routing.module';
 import { ServicesModule } from './services.module';
 
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -138,6 +139,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         }),
         ToasterModule.forRoot(),
         InfiniteScrollModule,
+        DragDropModule,
     ],
     declarations: [
         AddEditComponent,

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

@@ -261,11 +261,13 @@
                     {{'customFields' | i18n}}
                 </div>
                 <div class="box-content">
+                    <div cdkDropList (cdkDropListDropped)="drop($event)">
                         <ng-container *ngIf="cipher.hasFields">
-                        <div class="box-content-row box-content-row-multi" appBoxRow
+                            <div class="box-content-row box-content-row-multi box-draggable-row" cdkDrag
                                 *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
                                 [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
-                            <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
+                                <a href="#" appStopClick (click)="removeField(f)"
+                                    title="{{'remove' | i18n}}">
                                     <i class="fa fa-minus-circle fa-lg"></i>
                                 </a>
                                 <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
@@ -289,8 +291,12 @@
                                             [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
                                     </a>
                                 </div>
+                                <span class="box-drag-handle" title="{{'dragToSort' | i18n}}" cdkDragHandle>
+                                    <i class="fa fa-bars"></i>
+                                </span>
                             </div>
                         </ng-container>
+                    </div>
                     <div class="box-content-row" appBoxRow>
                         <a href="#" appStopClick (click)="addField()">
                             <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}}

src/locales/en/messages.json

@@ -297,6 +297,9 @@
   "value": {
     "message": "Value"
   },
+  "dragToSort": {
+    "message": "Drag to sort"
+  },
   "cfTypeText": {
     "message": "Text"
   },

src/scss/box.scss

@@ -1,6 +1,7 @@
 @import "variables.scss";
 
 .box {
+    position: relative;
     width: 100%;
 
     .box-header {
@@ -34,7 +35,29 @@
             padding: 10px 15px;
         }
 
-        .box-content-row {
+        &.condensed .box-content-row, .box-content-row.condensed {
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+
+        &.no-hover .box-content-row, .box-content-row.no-hover {
+            &:hover, &:focus {
+                background-color: initial;
+            }
+        }
+    }
+
+    .box-footer {
+        margin: 5px 10px;
+        font-size: $font-size-small;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
+    }
+}
+
+.box-content-row {
     display: block;
     padding: 10px 15px;
     position: relative;
@@ -326,26 +349,25 @@
             background-color: $brand-primary;
         }
     }
-        }
+}
 
-        &.condensed .box-content-row, .box-content-row.condensed {
-            padding-top: 5px;
-            padding-bottom: 5px;
-        }
-
-        &.no-hover .box-content-row, .box-content-row.no-hover {
-            &:hover, &:focus {
-                background-color: initial;
-            }
-        }
-    }
-
-    .box-footer {
-        margin: 5px 10px;
-        font-size: $font-size-small;
+.box-drag-handle {
+    cursor: move;
+    margin-left: 5px;
+    user-select: none;
 
     @include themify($themes) {
         color: themed('mutedColor');
     }
+}
+
+.cdk-drag-preview {
+    position: relative;
+    display: flex;
+    align-items: center;
+    opacity: .8;
+
+    @include themify($themes) {
+        background-color: themed('boxBackgroundColor');
     }
 }