From a022146c0fa798c46bd78059eabebe0111ee836c Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 19 May 2022 17:30:09 +0200
Subject: [PATCH] wip #4285 @1.5

---
 .../Fields/KeyValueBunchOfFieldsMultiple.php  |  2 +-
 src/public/bunchmultiple/bunchmultiple.css    | 27 ++++++
 .../bunchmultiple/bunchmultiple.css.map       |  2 +-
 src/public/bunchmultiple/bunchmultiple.js     | 31 ++++++-
 src/public/bunchmultiple/bunchmultiple.less   | 45 ++++++++-
 .../fields/bunch_keyvalue_multiple.blade.php  | 92 +++++++++++++++++++
 .../views/fields/bunch_multiple.blade.php     |  2 +-
 .../views/inc/show_bunch_fields.blade.php     | 15 ++-
 8 files changed, 203 insertions(+), 13 deletions(-)
 create mode 100644 src/resources/views/fields/bunch_keyvalue_multiple.blade.php

diff --git a/src/app/Magic/Fields/KeyValueBunchOfFieldsMultiple.php b/src/app/Magic/Fields/KeyValueBunchOfFieldsMultiple.php
index f288c29..4bd3ce2 100644
--- a/src/app/Magic/Fields/KeyValueBunchOfFieldsMultiple.php
+++ b/src/app/Magic/Fields/KeyValueBunchOfFieldsMultiple.php
@@ -4,5 +4,5 @@ namespace Cubist\Backpack\Magic\Fields;
 
 class KeyValueBunchOfFieldsMultiple extends BunchOfFieldsMultiple
 {
-
+    protected $_adminType = 'bunch_keyvalue_multiple';
 }
diff --git a/src/public/bunchmultiple/bunchmultiple.css b/src/public/bunchmultiple/bunchmultiple.css
index ed8e486..8984ddb 100644
--- a/src/public/bunchmultiple/bunchmultiple.css
+++ b/src/public/bunchmultiple/bunchmultiple.css
@@ -1,6 +1,33 @@
 .bunchmultiple {
   margin: 0 15px;
 }
+.bunchmultiple.bunchmultiple_keyvalue .bunchmultiple__wrapper .item .legend a.action {
+  position: relative;
+  top: 13px;
+}
+.bunchmultiple.bunchmultiple_keyvalue .bunchmultiple__wrapper .item .legend a.action.sort-handle {
+  top: 6px;
+  padding-right: 10px;
+}
+.bunchmultiple.bunchmultiple_keyvalue .bunchmultiple__wrapper .legendsize {
+  display: inline-block;
+  white-space: nowrap;
+}
+.bunchmultiple.bunchmultiple_keyvalue .bunchmultiple__wrapper .legendsize label {
+  display: none;
+}
+.bunchmultiple.bunchmultiple_keyvalue .bunchmultiple__wrapper .legendsize .form-group {
+  width: 50%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: 0;
+  padding: 0 10px;
+  position: relative;
+  top: -1px;
+}
+.bunchmultiple.bunchmultiple_keyvalue .bunchmultiple__wrapper .legendsize input.form-control {
+  height: 34px;
+}
 .bunchmultiple.bunchmultiple_root {
   width: 100%;
 }
diff --git a/src/public/bunchmultiple/bunchmultiple.css.map b/src/public/bunchmultiple/bunchmultiple.css.map
index 4c90c7c..d649d5b 100644
--- a/src/public/bunchmultiple/bunchmultiple.css.map
+++ b/src/public/bunchmultiple/bunchmultiple.css.map
@@ -1 +1 @@
-{"version":3,"sources":["bunchmultiple.less"],"names":[],"mappings":"AAAA;EACI,cAAA;;AAEA,cAAC;EACG,WAAA;;AAJR,cAOI;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;;AAEA,cANJ,wBAMK;EACG,aAAA;;AAGJ,cAVJ,wBAUK;EACG,UAAA;EACA,SAAA;EACA,gBAAA;EACA,gBAAA;;AArBZ,cAOI,wBAkBI;EACI,UAAA;;AA1BZ,cAOI,wBAkBI,cAGI;EACI,gBAAA;EACA,mBAAA;;AA9BhB,cAOI,wBA2BI;EACI,mBAAA;;AAEA,cA9BR,wBA2BI,MAGK;EACG,uBAAA;EACA,sBAAA;;AAFJ,cA9BR,wBA2BI,MAGK,MAIG;EACI,UAAA;;AALR,cA9BR,wBA2BI,MAGK,MAQG;EACI,UAAA;;AA9CpB,cAOI,wBA2BI,MAgBI;EACI,yBAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;EACA,eAAA;;AAvDhB,cAOI,wBA2BI,MAgBI,QAOI;EACI,qBAAA;EACA,gBAAA;EACA,yBAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;;AAjEpB,cAOI,wBA2BI,MAgBI,QAkBI,EAAC;EACG,WAAA;EACA,gBAAA;EACA,qBAAA;;AAEA,cAlEhB,wBA2BI,MAgBI,QAkBI,EAAC,OAKI;EACG,mBAAA;EACA,YAAA;;AAGJ,cAvEhB,wBA2BI,MAgBI,QAkBI,EAAC,OAUI;EACG,kBAAA;EACA,WAAA;EACA,eAAA;;AAGJ,cA7EhB,wBA2BI,MAgBI,QAkBI,EAAC,OAgBI;EACG,kBAAA;EACA,WAAA;EACA,eAAA;;AAvFxB,cAOI,wBA2BI,MA0DI;EACI,gBAAA;EACA,iEAAA;EACA,yBAAA;EACA,eAAA;;AAGJ,cA5FR,wBA2BI,MAiEK;EACG,aAAA;;AAGJ,cAhGR,wBA2BI,MAqEK,UACG;EACI,oBAAA;EACA,UAAA","file":"bunchmultiple.css"}
\ No newline at end of file
+{"version":3,"sources":["bunchmultiple.less"],"names":[],"mappings":"AAAA;EACI,cAAA;;AAEA,cAAC,uBACG,wBACI,MACI,QACI,EAAC;EACG,kBAAA;EACA,SAAA;;AAEA,cARnB,uBACG,wBACI,MACI,QACI,EAAC,OAII;EACG,QAAA;EACA,mBAAA;;AAVxB,cAAC,uBACG,wBAeI;EAKI,qBAAA;EACA,mBAAA;;AAtBZ,cAAC,uBACG,wBAeI,YACI;EACI,aAAA;;AAlBhB,cAAC,uBACG,wBAeI,YAQI;EACI,UAAA;EACA,qBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,SAAA;;AA/BhB,cAAC,uBACG,wBAeI,YAkBI,MAAK;EACD,YAAA;;AAQhB,cAAC;EACG,WAAA;;AA/CR,cAkDI;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;;AAEA,cANJ,wBAMK;EACG,aAAA;;AAGJ,cAVJ,wBAUK;EACG,UAAA;EACA,SAAA;EACA,gBAAA;EACA,gBAAA;;AAhEZ,cAkDI,wBAkBI;EACI,UAAA;;AArEZ,cAkDI,wBAkBI,cAGI;EACI,gBAAA;EACA,mBAAA;;AAzEhB,cAkDI,wBA2BI;EACI,mBAAA;;AAEA,cA9BR,wBA2BI,MAGK;EACG,uBAAA;EACA,sBAAA;;AAFJ,cA9BR,wBA2BI,MAGK,MAIG;EACI,UAAA;;AALR,cA9BR,wBA2BI,MAGK,MAQG;EACI,UAAA;;AAzFpB,cAkDI,wBA2BI,MAgBI;EACI,yBAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;EACA,eAAA;;AAlGhB,cAkDI,wBA2BI,MAgBI,QAOI;EACI,qBAAA;EACA,gBAAA;EACA,yBAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;;AA5GpB,cAkDI,wBA2BI,MAgBI,QAkBI,EAAC;EACG,WAAA;EACA,gBAAA;EACA,qBAAA;;AAEA,cAlEhB,wBA2BI,MAgBI,QAkBI,EAAC,OAKI;EACG,mBAAA;EACA,YAAA;;AAGJ,cAvEhB,wBA2BI,MAgBI,QAkBI,EAAC,OAUI;EACG,kBAAA;EACA,WAAA;EACA,eAAA;;AAGJ,cA7EhB,wBA2BI,MAgBI,QAkBI,EAAC,OAgBI;EACG,kBAAA;EACA,WAAA;EACA,eAAA;;AAlIxB,cAkDI,wBA2BI,MA0DI;EACI,gBAAA;EACA,iEAAA;EACA,yBAAA;EACA,eAAA;;AAGJ,cA5FR,wBA2BI,MAiEK;EACG,aAAA;;AAGJ,cAhGR,wBA2BI,MAqEK,UACG;EACI,oBAAA;EACA,UAAA","file":"bunchmultiple.css"}
\ No newline at end of file
diff --git a/src/public/bunchmultiple/bunchmultiple.js b/src/public/bunchmultiple/bunchmultiple.js
index 8666248..058e082 100644
--- a/src/public/bunchmultiple/bunchmultiple.js
+++ b/src/public/bunchmultiple/bunchmultiple.js
@@ -23,6 +23,11 @@
                 });
             }
 
+            $(window).on('resize', function () {
+                $this.resize();
+            });
+
+
             this.element.on('click', '.additem' + this.bmidselector, function () {
                 $this.initItem();
                 return false;
@@ -75,7 +80,9 @@
             setTimeout(function () {
                 $this.inited = true;
                 $this.updateAndChange();
+
             }, 1000);
+            this.resize();
         },
 
         cleanTemplate: function () {
@@ -88,15 +95,24 @@
             }
             this.serialize();
             this.updateLegends();
+            this.resize();
+        },
+
+        resize: function () {
+            this.element.find('.legendsize').each(function () {
+                var parent = $(this).closest('.legend');
+                var aw = $(parent).innerWidth() - 130;
+                $(this).css({width: aw, maxWidth: aw, minWidth: aw});
+            });
         },
 
         serialize: function () {
-            console.log('serialize');
+
+
             var val = [];
             var $this = this;
             var id = this.element.attr('id');
-            $.each(this.element.find('.item' + this.bmidselector + ':not(.sample) .subform' + this.bmidselector), function () {
-
+            $.each(this.element.find('.item' + this.bmidselector + ':not(.sample) .bunchfields' + this.bmidselector), function () {
                 $(this).find('.bunchmultiple').each(function () {
                     try {
                         $(this).data('bunchmultiple').serialize();
@@ -120,11 +136,18 @@
 
                 val.push(filteredData);
             });
+            if (this.element.is('.bunchmultiple_keyvalue')) {
+                var kvval = {};
+
+                $.each(val, function (k, v) {
+                    kvval[v.key] = v.value;
+                });
+                val = kvval;
+            }
             this.element.find('.hiddenfield' + this.bmidselector).val(JSON.stringify(val));
         },
 
         updateLegends: function () {
-            console.log('update legends');
             $('[data-legend]' + this.bmidselector).each(function () {
                 var item = $(this).closest('.item');
                 var form = item.find('.subform');
diff --git a/src/public/bunchmultiple/bunchmultiple.less b/src/public/bunchmultiple/bunchmultiple.less
index d898a31..46519cf 100644
--- a/src/public/bunchmultiple/bunchmultiple.less
+++ b/src/public/bunchmultiple/bunchmultiple.less
@@ -1,6 +1,49 @@
 .bunchmultiple {
     margin: 0 15px;
 
+    &.bunchmultiple_keyvalue {
+        .bunchmultiple__wrapper {
+            .item {
+                .legend {
+                    a.action {
+                        position: relative;
+                        top: 13px;
+
+                        &.sort-handle {
+                            top: 6px;
+                            padding-right: 10px;
+                        }
+                    }
+                }
+            }
+
+            .legendsize {
+                label {
+                    display: none;
+                }
+
+                display: inline-block;
+                white-space: nowrap;
+
+                .form-group {
+                    width: 50%;
+                    display: inline-block;
+                    vertical-align: top;
+                    margin-bottom: 0;
+                    padding:0 10px;
+                    position: relative;
+                    top:-1px;
+                }
+
+                input.form-control {
+                    height: 34px;
+                }
+
+
+            }
+        }
+    }
+
     &.bunchmultiple_root {
         width: 100%;
     }
@@ -11,7 +54,7 @@
         background: #fafafa;
         margin-bottom: 15px;
 
-        &:empty{
+        &:empty {
             display: none;
         }
 
diff --git a/src/resources/views/fields/bunch_keyvalue_multiple.blade.php b/src/resources/views/fields/bunch_keyvalue_multiple.blade.php
new file mode 100644
index 0000000..ff7e735
--- /dev/null
+++ b/src/resources/views/fields/bunch_keyvalue_multiple.blade.php
@@ -0,0 +1,92 @@
+<!-- Bunch -->
+
+<?php
+$empty = [];
+$value = old(square_brackets_to_dots($field['name'])) ?? $field['value'] ?? $field['default'] ?? $empty;
+if ($value == '') {
+    $value = $empty;
+}
+
+if (is_array($value)) {
+    $normalizedValue = [];
+    foreach ($value as $k => $v) {
+        if (!is_array($v) && !is_object($v)) {
+            $normalizedValue[] = ['key' => $k, 'value' => $v];
+        } else {
+            $normalizedValue[$k] = $v;
+        }
+    }
+    $value = $normalizedValue;
+}
+
+if (!is_string($value)) {
+    $value = json_encode($value);
+}
+
+?>
+<div class="bunchmultiple bunchmultiple_keyvalue" id="{!! $field['rand'] !!}" data-values="{{ $value }}">
+    <input type="hidden" class="hiddenfield" name="{{$field['name']}}" value="{{ $value }}"
+           data-bmid="{!! $field['rand'] !!}"/>
+    <div class="bunchmultiple__wrapper" data-bmid="{!! $field['rand'] !!}">
+        @include('crud::fields.inc.wrapper_start')
+        <label>{!! $field['label'] !!}</label>
+        @include('crud::fields.inc.translatable_icon')
+        <div class="clearfix"></div>
+
+        <div class="bunchmultiple__items" data-bmid="{!! $field['rand'] !!}">
+            <div class="item sample" data-bmid="{!! $field['rand'] !!}">
+                <div class="legend" data-bmid="{!! $field['rand'] !!}">
+                    <a href="#" class="action sort-handle" data-bmid="{!! $field['rand'] !!}"><i class="la la-sort"
+                                                                                                 role="presentation"
+                                                                                                 aria-hidden="true"></i></a>
+                    <div class="legendsize">
+                        @include('cubist_back::inc.show_bunch_fields', array('bunchfields'=>$field['bunchfields'],'bmid'=>$field['rand'],'keyvalue'=>true))
+                    </div>
+                    <a href="#" class="action edit" data-bmid="{!! $field['rand'] !!}"><i class="la la-pencil"
+                                                                                          role="presentation"
+                                                                                          aria-hidden="true"></i></a>
+                    <a href="#" class="action remove" data-bmid="{!! $field['rand'] !!}"><i class="la la-trash"
+                                                                                            role="presentation"
+                                                                                            aria-hidden="true"></i></a>
+
+                </div>
+
+            </div>
+        </div>
+
+        <div class="btn-group m-t-10">
+            <button class="btn btn-sm btn-default additem" data-bmid="{!! $field['rand'] !!}" type="button"><i
+                    class="la la-plus"></i> {{$field['add_label']}}</button>
+        </div>
+
+        <div class="clearfix"></div>
+
+        {{-- HINT --}}
+        @if (isset($field['hint']))
+            <p class="help-block">{!! $field['hint'] !!}</p>
+        @endif
+        @include('crud::fields.inc.wrapper_end')
+    </div>
+</div>
+
+
+{{-- ########################################## --}}
+{{-- Extra CSS and JS for this particular field --}}
+{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
+@if ($crud->checkIfFieldIsFirstOfItsType($field))
+
+    {{-- FIELD CSS - will be loaded in the after_styles section --}}
+    @push('crud_fields_styles')
+        <link rel="stylesheet" type="text/css"
+              href="{{ vendor_asset('vendor/cubist/cms-back/bunchmultiple/bunchmultiple.css') }}">
+    @endpush
+
+    {{-- FIELD JS - will be loaded in the after_scripts section --}}
+    @push('crud_fields_scripts')
+        <script src="{{ vendor_asset('vendor/cubist/cms-back/sortable/sortable.js') }}"></script>
+        <script src="{{ vendor_asset('vendor/cubist/cms-back/bunchmultiple/bunchmultiple.js') }}"></script>
+    @endpush
+
+@endif
+{{-- End of Extra CSS and JS --}}
+{{-- ########################################## --}}
diff --git a/src/resources/views/fields/bunch_multiple.blade.php b/src/resources/views/fields/bunch_multiple.blade.php
index 121bc45..5d1a5ec 100644
--- a/src/resources/views/fields/bunch_multiple.blade.php
+++ b/src/resources/views/fields/bunch_multiple.blade.php
@@ -26,7 +26,7 @@ if (!is_string($value)) {
                         <a href="#" class="action sort-handle" data-bmid="{!! $field['rand'] !!}"><i class="la la-sort"
                                                                                                      role="presentation"
                                                                                                      aria-hidden="true"></i></a>
-                        <span data-legend="{{$field['edit_label']}}" data-bmid="{!! $field['rand'] !!}"></span>
+                        <span class="legendsize" data-legend="{{$field['edit_label']}}" data-bmid="{!! $field['rand'] !!}"></span>
                         <a href="#" class="action edit" data-bmid="{!! $field['rand'] !!}"><i class="la la-pencil"
                                                                                               role="presentation"
                                                                                               aria-hidden="true"></i></a>
diff --git a/src/resources/views/inc/show_bunch_fields.blade.php b/src/resources/views/inc/show_bunch_fields.blade.php
index 68509f2..854cb9d 100644
--- a/src/resources/views/inc/show_bunch_fields.blade.php
+++ b/src/resources/views/inc/show_bunch_fields.blade.php
@@ -1,9 +1,14 @@
 {{-- Show the inputs --}}
+<div class="bunchfields" data-bmid="{{$bmid}}">
 @foreach ($bunchfields as $field)
-    <!-- load the view from type and view_namespace attribute if set -->
-    @php
-        $fieldsViewNamespace = $field['view_namespace'] ?? 'crud::fields';
-    @endphp
+@if(isset($keyvalue) && $keyvalue && !stristr($field['name'],'___key') && !stristr($field['name'],'___value'))
+@continue
+@endif
 
-    @include($fieldsViewNamespace.'.'.$field['type'], ['field' => $field])
+@php
+    $fieldsViewNamespace = $field['view_namespace'] ?? 'crud::fields';
+@endphp
+
+@include($fieldsViewNamespace.'.'.$field['type'], ['field' => $field])
 @endforeach
+</div>
-- 
2.39.5