From 50a0d07d56a7d313d0fec80729095fb70cb0c4ee Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 18 Jul 2022 17:48:07 +0200
Subject: [PATCH] wip #4209 @5

---
 app/Fields/FluidbookChapters.php              | 10 +-
 .../CompositionOperation.php                  |  5 -
 app/Models/FluidbookPublication.php           | 14 +++
 .../fields/fluidbook_composition.blade.php    | 96 ++++++++++++++++++-
 4 files changed, 116 insertions(+), 9 deletions(-)

diff --git a/app/Fields/FluidbookChapters.php b/app/Fields/FluidbookChapters.php
index 1f2966bd5..6a8f057c6 100644
--- a/app/Fields/FluidbookChapters.php
+++ b/app/Fields/FluidbookChapters.php
@@ -22,12 +22,16 @@ class FluidbookChapters extends BunchOfFieldsMultiple
         if (!$value) {
             return $value;
         }
-        $v = json_decode($value, true);
+        if (is_string($value)) {
+            $v = json_decode($value, true);
+        } else {
+            $v = $value;
+        }
         if (!$v) {
             return $value;
         }
         $res = [];
-        foreach ($v as $k=>$chapter) {
+        foreach ($v as $k => $chapter) {
             $chapter['type'] = 'regular';
             $chapter['label'] = trim($chapter['label']);
             if ($chapter['label'] === '----') {
@@ -43,7 +47,7 @@ class FluidbookChapters extends BunchOfFieldsMultiple
                 $chapter['label'] = substr($chapter['label'], 3);
                 $chapter['type'] = 'column_head';
             }
-            $res[$k]=$chapter;
+            $res[$k] = $chapter;
         }
 
 
diff --git a/app/Http/Controllers/Admin/Operations/FluidbookPublication/CompositionOperation.php b/app/Http/Controllers/Admin/Operations/FluidbookPublication/CompositionOperation.php
index 2ba979823..a01d8d848 100644
--- a/app/Http/Controllers/Admin/Operations/FluidbookPublication/CompositionOperation.php
+++ b/app/Http/Controllers/Admin/Operations/FluidbookPublication/CompositionOperation.php
@@ -25,9 +25,4 @@ trait CompositionOperation
         $path = $doc->getFile($doc_page, 'jpg', 'thumb', true, true, '');
         return response(null)->header('Content-Type', Files::_getMimeType($path))->header('X-Sendfile', $path);
     }
-
-    protected function getComposition()
-    {
-        $res = [];
-    }
 }
diff --git a/app/Models/FluidbookPublication.php b/app/Models/FluidbookPublication.php
index fe18c7507..adbb93657 100644
--- a/app/Models/FluidbookPublication.php
+++ b/app/Models/FluidbookPublication.php
@@ -12,6 +12,8 @@ use App\Http\Controllers\Admin\Operations\FluidbookPublication\CompositionOperat
 use App\Models\Base\ToolboxModel;
 use App\Models\Traits\PublicationSettings;
 use App\Models\Traits\SCORMVersionTrait;
+use App\Widgets;
+use Backpack\CRUD\app\Library\Widget;
 use Cubist\Backpack\Magic\Fields\Datetime;
 use Cubist\Backpack\Magic\Fields\FormBigSection;
 use Cubist\Backpack\Magic\Fields\FormSuperSection;
@@ -178,4 +180,16 @@ class FluidbookPublication extends ToolboxModel
         $compo = $this->composition[$page];
         return self::_getDocument($compo[0])->getFile($compo[1], $format, $resolution, $withText, $withGraphics, $version, $force);
     }
+
+    public function addWidgets()
+    {
+        Widget::add([
+            'type' => 'alert',
+            'class' => 'alert alert-danger mb-2',
+            'heading' => __('En cours de développement'),
+            'content' => __('Les données et interfaces présentées dans cette section ne sont pas synchronisées avec les données en production. Toutes les modifications effectuées ici peuvent dont disparaître à tout moment.') . ' <p><a class="btn btn-warning" href="https://workshop.fluidbook.com/publications">' . __('Retour en production') . '</a></p>',
+            'close_button' => false, // show close button or not
+        ]);
+
+    }
 }
diff --git a/resources/views/fields/fluidbook_composition.blade.php b/resources/views/fields/fluidbook_composition.blade.php
index be3104764..996a11e77 100644
--- a/resources/views/fields/fluidbook_composition.blade.php
+++ b/resources/views/fields/fluidbook_composition.blade.php
@@ -1,6 +1,7 @@
 @if (!isset($seenFluidbookComposition))
     @php $seenFluidbookComposition=true;@endphp
     @push('crud_fields_scripts')
+
         <script>
             $(function () {
                 function initPages() {
@@ -9,20 +10,113 @@
                     $.each(data, function (pageNr, page) {
                         addPage(page[0], page[1], numbers[pageNr - 1]);
                     });
+
+                    var composition = $('#composition_pages').get(0);
+
+                    window.compositionSortable = new Sortable(composition, {
+                        multiDrag: true,
+                        selectedClass: 'selected',
+                        fallbackTolerance: 3,
+                        animation: 150,
+                        multiDragKey: 'CTRL',
+                        onSort: function (e) {
+                            updateComposition();
+                        }
+                    });
+
+                    var listener = new window.keypress.Listener();
+                    listener.simple_combo("meta a", function () {
+                        if (!compositionIsActive()) {
+                            return true;
+                        }
+                        $(composition).find('.page').each(function () {
+                            Sortable.utils.select(this);
+                        });
+                        return false;
+                    });
+
+                    listener.simple_combo("delete", function () {
+                        if (!compositionIsActive()) {
+                            return true;
+                        }
+                        $(composition).find('.page.selected').remove();
+                        return false;
+                    });
+                }
+
+                function updateComposition() {
+                    var res = {};
+                    var numbers = [];
+                    var i = 1;
+                    $("#composition_pages .page").each(function () {
+                        res[i] = $(this).data('id');
+                        numbers.push($(this).find('span').text());
+                        i++;
+                    });
+                    $("#compositionField").val(JSON.stringify(res));
+                    $('input[name="page_numbers"]').val(numbers.join(','));
+                }
+
+                function compositionIsActive() {
+                    return $("#composition_pages .page.selected").length > 0;
                 }
 
                 function addPage(document_id, document_page, pageNumber) {
-                    $("#composition_pages").append('<div class="page"><img src="/fluidbook-publication/docs/' + document_id + '/thumb_' + document_page + '.jpg" /><span>' + pageNumber + '</span></div>');
+                    $("#composition_pages").append('<div class="page" data-id="[' + document_id + ',' + document_page + ']"><img src="/fluidbook-publication/docs/' + document_id + '/thumb_' + document_page + '.jpg" /><span>' + pageNumber + '</span></div>');
                 }
 
                 initPages();
             });
         </script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"
+                integrity="sha512-Eezs+g9Lq4TCCq0wae01s9PuNWzHYoCMkE97e2qdkYthpI0pzC3UGB03lgEHn2XM85hDOUF6qgqqszs+iXU4UA=="
+                crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/keypress/2.1.5/keypress.min.js"
+                integrity="sha512-JjqUcblrwIZTQBPL/azOhVHwq5uaeXkKzq7da3JZEP14Zg926vZZVhRhBBi+L2pWYquZ6r5P8OZYDYgOChtkOw=="
+                crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     @endpush
 
     @push('crud_fields_styles')
         <style>
+            #composition {
+                padding: 0 10px;
+            }
+
+            #composition_pages .page {
+                display: inline-block;
+                width: 100px;
+                padding: 8px;
+                margin: 5px;
+                vertical-align: top;
+                border: 1px solid transparent;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+
+            #composition_pages .page:hover, #composition_pages .page.selected {
+                border-color: #467fcf;
+            }
+
+            #composition_pages .page.selected {
+                background-color: #b5cbf5;
+            }
+
+            #composition_pages .page span {
+                display: block;
+                text-align: center;
+                font-size: 12px;
+                cursor: text;
+                min-width: 20px;
+                height: 20px;
+                margin-top: 2px;
+            }
+
+            #composition_pages .page img {
+                width: 100%;
+                height: auto;
+                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
 
+            }
         </style>
     @endpush
 @endif
-- 
2.39.5