From 66ba815f0052380df32a158ecd1f7d9d3f34e259 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 28 Sep 2023 16:19:15 +0200
Subject: [PATCH] wait #6170 @2

---
 app/Fields/QuizTheme.php                      |  22 +++
 app/Models/Quiz.php                           |   2 +-
 app/Models/QuizTheme.php                      |   5 +
 .../fields/quiz_theme_selector.blade.php      | 170 ++++++++++++++++++
 4 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 app/Fields/QuizTheme.php
 create mode 100644 resources/views/fields/quiz_theme_selector.blade.php

diff --git a/app/Fields/QuizTheme.php b/app/Fields/QuizTheme.php
new file mode 100644
index 000000000..013ff4585
--- /dev/null
+++ b/app/Fields/QuizTheme.php
@@ -0,0 +1,22 @@
+<?php
+
+
+namespace App\Fields;
+
+
+use Cubist\Backpack\Magic\Fields\SelectFromModel;
+
+class QuizTheme extends SelectFromModel
+{
+    protected $_adminType = 'quiz_theme_selector';
+    protected $_viewNamespace = 'fields';
+
+    public function __construct($attributes)
+    {
+        $attributes['optionsmodel'] = \App\Models\QuizTheme::class;
+        $attributes['attribute'] = 'nameAndId';
+        $attributes['optionsmodel_orderby'] = 'id';
+        $attributes['optionsmodel_orderby_way'] = 'desc';
+        parent::__construct($attributes);
+    }
+}
diff --git a/app/Models/Quiz.php b/app/Models/Quiz.php
index 92e7490eb..d3a68681f 100644
--- a/app/Models/Quiz.php
+++ b/app/Models/Quiz.php
@@ -183,7 +183,7 @@ class Quiz extends ToolboxModel
         ]);
 
         $this->addField('section_theme', FormBigSection::class, __('Thème graphique'));
-        $this->addField('theme', \App\Fields\FluidbookTheme::class, __('Thème'), ['non_default_tracking' => false, 'default' => 3]);
+        $this->addField('theme', \App\Fields\QuizTheme::class, __('Thème'), ['non_default_tracking' => false, 'default' => 1]);
 
         $this->addField('section_screens', FormSuperSection::class, __('Écrans'));
 
diff --git a/app/Models/QuizTheme.php b/app/Models/QuizTheme.php
index ce5b935c8..5285a643f 100644
--- a/app/Models/QuizTheme.php
+++ b/app/Models/QuizTheme.php
@@ -287,4 +287,9 @@ class QuizTheme extends ToolboxModel
     {
         dispatch(new GenerateQuizThemePreview($this))->onQueue('theme');
     }
+
+    public function getNameAndIdAttribute()
+    {
+        return $this->getAttribute('name') . ' (#' . $this->getAttribute('id') . ')';
+    }
 }
diff --git a/resources/views/fields/quiz_theme_selector.blade.php b/resources/views/fields/quiz_theme_selector.blade.php
new file mode 100644
index 000000000..caaea3cd3
--- /dev/null
+++ b/resources/views/fields/quiz_theme_selector.blade.php
@@ -0,0 +1,170 @@
+{{-- __('!! Paramètres des thèmes') --}}
+@if (!isset($seenQuizThemeSelector))
+    @php $seenQuizThemeSelector=true;@endphp
+    @push('crud_fields_scripts')
+        <script>
+            var hadThemeEditorOpen = false;
+            var selector = '.select2_from_array[name="{{$field['name']}}"]';
+            $(function () {
+                $(document).on('change', selector, function () {
+                    updateThemeSelector();
+                })
+                $(window).on('resize', resizeThemeSelector);
+                updateThemeSelector();
+                resizeThemeSelector();
+
+                function resizeThemeSelector() {
+
+                }
+
+                setInterval(function () {
+                    checkThemeEditor();
+                }, 1000);
+            });
+
+            function checkThemeEditor() {
+
+                if ($(".featherlight-content iframe").length === 0) {
+                    // No theme editor window open
+                    if (hadThemeEditorOpen) {
+                        hadThemeEditorOpen = false;
+                        // Reload theme viewer after editor has been closed
+                        var iframe = $('.themeSelector #themePreviewIframe');
+                        iframe.get(0).contentWindow.location = $(iframe).attr('src');
+                        updateThemeSelector();
+                    }
+                    return;
+                }
+                $(".featherlight-content iframe").each(function () {
+                    var c = this.contentWindow.location.pathname.toString().split('/');
+                    var idx = c.indexOf('quiz-theme');
+                    if (idx > 0 && c.indexOf('edit') >= 0) {
+                        hadThemeEditorOpen = true;
+                        var id = c[idx + 1];
+                        if (id != $(selector).val()) {
+                            if ($(selector).find('option[value="' + id + '"]').length === 0) {
+                                $(selector).append('<option value="' + id + '">Theme #' + id + '</option>');
+                                $(selector).trigger('change');
+                            }
+                            setTimeout(function () {
+                                $(selector).val(id);
+                                $(selector).trigger('change');
+                            }, 250);
+                        }
+                    }
+                });
+            }
+
+
+            function updateThemeSelector() {
+                var themeID = $(selector).val();
+                if (null === themeID || themeID === undefined) {
+                    setTimeout(updateThemeSelector, 500);
+                    return;
+                }
+
+                $(".themeSelector [data-url]").each(function () {
+                    var attr = 'href'
+                    if ($(this).is('img')) {
+                        attr = 'src';
+                    }
+                    $(this).attr(attr, $(this).data('url').replace(/\$id/, themeID));
+                });
+                $(".themeSelector .actions a").each(function () {
+                    $(this).attr('href', $(this).data('url').replace(/\$id/, themeID) + '&ajax=' + $(selector).data('ajax') + '&entry={{addcslashes(get_class($entry),'\\')}}&id={{$entry->id}}&name={{$field['name']}}');
+                });
+                var url = '{{backpack_url('/quiz-theme/$id/infos')}}'.replace(/\$id/, themeID);
+                $.ajax({
+                    url: url,
+                    dataType: 'json',
+                    success: function (data) {
+                        $(".themeSelector .actions .name").text(data.name);
+                        $(".themeSelector .actions .id").text(data.id);
+                        $(".themeSelector .actions .owner").html(htmlDecode(data.columns.owner));
+                        $(".themeSelector .actions .created_at").html(data.columns.created_at);
+                        $(".themeSelector .actions .updated_at").html(data.columns.updated_at);
+                        var optName = data.name + ' (#' + themeID + ')';
+                        $(selector).find('option[value="' + themeID + '"]').each(function () {
+                            $(this).text(optName);
+                            $(selector).trigger('change.select2');
+                        });
+                        $(selector + ' + .select2 .select2-selection__rendered').text(optName);
+                    }
+                });
+            }
+
+            function htmlDecode(input) {
+                var doc = new DOMParser().parseFromString(input, "text/html");
+                return doc.documentElement.textContent;
+            }
+
+        </script>
+    @endpush
+    @push('crud_fields_styles')
+        <style>
+            .themeSelector {
+                padding: 10px 18px 0;
+                width: 100%;
+                white-space: nowrap;
+            }
+
+            .themeSelector .preview {
+                width: 65%;
+                display: inline-block;
+                white-space: normal;
+                font-size: 0;
+            }
+
+            .themeSelector .preview a {
+                display: inline-block;
+                width: 50%;
+                border: 0;
+                border-radius: 6px;
+            }
+            .themeSelector .preview a img {
+                display: block;
+                width: 100%;
+                height: auto;
+                border: 0;
+            }
+
+            .themeSelector .actions {
+                display: inline-block;
+                width: 35%;
+                vertical-align: top;
+                padding: 0 0 0 20px;
+                white-space: normal;
+            }
+
+            .themeSelector .actions a {
+                display: block;
+                width: 100%;
+                text-align: left;
+                margin-bottom: 10px;
+            }
+        </style>
+    @endpush
+@endif
+@include('cubist_back::fields.select2_from_array')
+<div class="themeSelector">
+    <div class="preview" data-featherlight-gallery data-featherlight-filter="a">
+        @foreach(['intro','standard','draganddrop','outro'] as $v)
+            @php $url=backpack_url('quizthemepreview/$id/'.$v.'.jpg') @endphp
+            <a data-url="{{$url}}" href=""><img data-url="{{$url}}"></a>
+        @endforeach
+    </div>
+    <div class="actions">
+        <h4><span class="name"></span> <span style="font-weight: normal;font-style: italic;font-size: 80%">#<span
+                    class="id"></span></span></h4>
+        <p class="owner"></p>
+        <p>{{__('Crée le')}} <span style="font-weight: bold" class="created_at"></span><br>
+            {{__('Mise à jour le')}} <span style="font-weight: bold" class="updated_at"></span></p>
+        <a data-featherlight="iframe" data-featherlight-iframe-style="display:block;width:85vw;height:85vh;"
+           data-url="{{backpack_url('quiz-theme/$id/clone-edit')}}?embeded=1" class="btn btn-sm btn-secondary"><i
+                class="la la-clone"></i> {{__('Dupliquer et éditer')}}</a>
+        <a data-featherlight="iframe" data-featherlight-iframe-style="display:block;width:85vw;height:85vh;"
+           data-url="{{backpack_url('quiz-theme/$id/edit')}}?embeded=1" class="btn btn-sm btn-success"><i
+                class="la la-edit"></i> {{__('Éditer')}}
+        </a>
+    </div>
+</div>
-- 
2.39.5