From 8430ae0db0ced65f80454e2ddc784887e9865fb3 Mon Sep 17 00:00:00 2001
From: ewandor <ewandor@dorfsvald.net>
Date: Tue, 31 Jan 2023 23:51:36 +0100
Subject: [PATCH] reorderable array item in formly

---
 front/app/src/common/crud/types/array.type.ts | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/front/app/src/common/crud/types/array.type.ts b/front/app/src/common/crud/types/array.type.ts
index 7634b705..9777b951 100644
--- a/front/app/src/common/crud/types/array.type.ts
+++ b/front/app/src/common/crud/types/array.type.ts
@@ -1,36 +1,51 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import { FieldArrayType } from '@ngx-formly/core';
 
 @Component({
   selector: 'formly-array-type',
   template: `
-    <div class="mb-3">
+    <div>
       <label *ngIf="props.label" class="form-label">{{ props.label }}</label>
       <p *ngIf="props.description">{{ props.description }}</p>
-      <div class="d-flex flex-row-reverse">
-        <button class="btn btn-primary" type="button" (click)="add()">+</button>
-      </div>
 
       <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
       <div class="row">
-        <div *ngFor="let field of field.fieldGroup; let i = index" class="card col-sm-6">
+        <div *ngFor="let entry of field.fieldGroup; let i = index" class="card {{this.colSm}}">
+            <div class="card-header">
+                <div class="float-end">
+                    <button class="btn btn-primary btn-sm" [attr.disabled]="i == 0 ? 'disabled' : null" type="button" (click)="move(i, i-1)">UP</button>
+                    <button class="btn btn-primary btn-sm" [attr.disabled]="i == this.field.fieldGroup!.length-1 ? 'disabled' : null" type="button" (click)="move(i, i+1)">DOWN</button>
+                    <button class="btn btn-danger btn-sm" [attr.disabled]="field.props!['removable'] === false ? 'disabled' : null" type="button" (click)="remove(i)">-</button>
+                </div>
+            </div>
             <div class="card-body">
-                  <formly-field class="col" [field]="field"></formly-field>
-                  <div *ngIf="field.props!['removable'] !== false" class="col-2 text-right">
-                      <button class="btn btn-danger" type="button" (click)="remove(i)">-</button>
-                  </div>
+                <formly-field class="col" [field]="entry"></formly-field>
             </div>
         </div>
       </div>
+        <button class="btn btn-success col-sm-12" type="button" (click)="add()">+</button>
     </div>
   `,
 })
-export class ArrayTypeComponent extends FieldArrayType {
-  constructor() {
-    super();
-  }
+export class ArrayTypeComponent extends FieldArrayType implements OnInit {
+    colSm: string = "col-sm-6"
+    ngOnInit() {
+        if (this.field.props.hasOwnProperty('width')) {
+            this.colSm = this.field.props['width'];
+        }
+    }
+
+    move(from: number, to: number) {
+        let value_list = this.formControl.value;
+        if (to >= value_list.length) {
+            throw new Error("to value must be comprised between 0 and n - 1");
+        }
+        value_list.splice(to, 0, value_list.splice(from, 1)[0]);
+        this.formControl.setValue(value_list);
+        this.field.fieldGroup!.splice(to, 0, this.field.fieldGroup!.splice(from, 1)[0]);
+    }
 }