Merge pull request #263 from harunurhan/fix-169

add sortable config for lists

Author: jmartinm

example/app/app.config.ts

@@ -30,6 +30,7 @@ export class AppConfig {
         disabled: true
       },
       '/references': {
+        sortable: true,
         longListNavigatorConfig: {
           findSingle: (value, expression) => {
             return value.getIn(['reference', 'number']) === parseInt(expression, 10);

src/abstract-list-field/abstract-list-field.component.ts

@@ -83,4 +83,8 @@ export abstract class AbstractListFieldComponent extends AbstractFieldComponent
     return this.pathCache[valuePathString];
   }
 
+  get sortableClass() {
+    return this.schema.sortable ? 'sortable' : '';
+  }
+
 }

src/add-field-dropdown/add-field-dropdown.component.html

@@ -1,6 +1,8 @@
 <div *ngIf="!disabled" class="btn-group add-field-dropdown-container" dropdown keyboardNav="true" (onShown)="onDropdownShown()">
-  <button id="simple-btn-keyboard-nav" type="button" class="btn-add-field-dropdown" dropdownToggle><ng-content></ng-content> <span class="caret"></span></button>
-  <ul class="dropdown-menu" *dropdownMenu aria-labelledby="simple-btn-keyboard-nav">
+  <button type="button" class="btn-add-field-dropdown" dropdownToggle>
+    <ng-content></ng-content> <i class="fa fa-caret-down"></i>
+  </button>
+  <ul class="dropdown-menu" *dropdownMenu>
     <li class="dropdown-filter-container">
       <input [(ngModel)]="expression" placeholder="filter" (click)="$event.stopPropagation()">
     </li>

src/add-field-dropdown/add-field-dropdown.component.scss

@@ -1,6 +1,6 @@
 .btn-add-field-dropdown {
   padding: 0 5px 0 0;
-  font-size: 21px;
+  font-size: 11px;
   opacity: 0.4;
   border: 0;
   background: transparent;

src/complex-list-field/complex-list-field.component.html

@@ -42,7 +42,7 @@
   <div *ngFor="let pIndex of paginatedIndices; let i = index; trackBy:trackByIndex">
     <div class="complex-list-field-wrapper">
       <object-field [value]="values.get(pIndex)" [schema]="schema.items" [path]="getElementPath(pIndex)">
-        <list-action-group (onMove)="moveElement(i, $event)" (onDelete)="deleteElement(i)"></list-action-group>
+        <list-action-group (onMove)="moveElement(i, $event)" (onDelete)="deleteElement(i)" [canMove]="schema.sortable"></list-action-group>
       </object-field>
     </div>
   </div>

src/json-editor.component.scss

@@ -1,5 +1,4 @@
 $text-button-font-size: 13px;
-$button-font-size: 16px;
 $table-editable-rows-background: #edf6fd;
 $label-color: #c1c1c1;
 $error-color: #f2968d;
@@ -108,7 +107,6 @@ bs-dropdown-container {
 }
 
 .editor-btn-delete {
-  font-size: $button-font-size;
   font-weight: bold;
   line-height: 1;
   text-shadow: 0 1px 0 #fff;
@@ -150,7 +148,11 @@ ul.pagination-top {
 }
 
 td.button-holder, th.button-holder {
-  width: 46px;
+  width: 26.33px;
+
+  &.sortable {
+    width: 46px;
+  }
 }
 
 div.error {
@@ -227,13 +229,6 @@ button.btn-toggle {
 
 .list-action-group-container {
 	text-align: right;
-	button {
-		font-size: 21px !important;
-	}
-
-	i {
-		font-size: 15px !important;
-	}
 }
 
 .max-height-90-vh {

src/list-action-group/list-action-group.component.html

@@ -1,11 +1,11 @@
 <div>
   <button type="button" class="editor-btn-delete" (click)="onDelete.emit()">
-    &times;
+    <i class="fa fa-times"></i>
   </button>
-  <button type="button" class="editor-btn-move-up" (click)="onMove.emit(-1)">
+  <button *ngIf="canMove" type="button" class="editor-btn-move-up" (click)="onMove.emit(-1)">
     <i class="fa fa-chevron-up"></i>
   </button>
-  <button type="button" class="editor-btn-move-down" (click)="onMove.emit(1)">
+  <button *ngIf="canMove" type="button" class="editor-btn-move-down" (click)="onMove.emit(1)">
     <i class="fa fa-chevron-down"></i>
   </button>
 </div>

src/list-action-group/list-action-group.component.ts

@@ -22,6 +22,7 @@
 
 import {
   Component,
+  Input,
   Output,
   EventEmitter,
   OnInit,
@@ -41,6 +42,7 @@ import {
 })
 export class ListActionGroupComponent {
 
+  @Input() canMove: boolean;
   @Output() onDelete = new EventEmitter<void>();
   @Output() onMove = new EventEmitter<number>();
 

src/object-field/object-field.component.html

@@ -21,7 +21,9 @@
   <!-- ADD SUB FIELD FROM SCHEMA DROPDOWN -->
   <tr>
     <td class="button-holder">
-      <add-field-dropdown [fields]="keys" [pathString]="pathString" (onFieldAdd)="onFieldAdd($event)" [schema]="schema">+</add-field-dropdown>
+      <add-field-dropdown [fields]="keys" [pathString]="pathString" (onFieldAdd)="onFieldAdd($event)" [schema]="schema">
+        <i class="fa fa-plus"></i>
+      </add-field-dropdown>
     </td>
     <td class="button-holder list-action-group-container">
       <!-- list-action-group (up/down and delete buttons), Set only if it's an element of an list (complex-list) -->

src/primitive-list-field/primitive-list-field.component.html

@@ -5,8 +5,8 @@
         <td>
           <primitive-field [value]="value" [schema]="schema.items" [path]="getElementPath(i)"></primitive-field>
         </td>
-        <td *ngIf="values.size > 0" class="button-holder">
-          <list-action-group (onMove)="moveElement(i, $event)" (onDelete)="deleteElement(i)"></list-action-group>
+        <td *ngIf="values.size > 0" class="button-holder" [ngClass]="sortableClass">
+          <list-action-group (onMove)="moveElement(i, $event)" (onDelete)="deleteElement(i)" [canMove]="schema.sortable"></list-action-group>
         </td>
       </tr>
     </table>