thedevdojo · JdSeus · Jul 4, 2024 · Jul 4, 2024 · Jul 4, 2024 · Jul 4, 2024
diff --git a/publishable/lang/en/generic.php b/publishable/lang/en/generic.php
@@ -5,6 +5,7 @@
     'action'                 => 'Action',
     'actions'                => 'Actions',
     'add'                    => 'Add',
+    'add_element'            => 'Add Element',
     'add_folder'             => 'Add Folder',
     'add_new'                => 'Add New',
     'all_done'               => 'All done',
@@ -37,6 +38,7 @@
     'download'               => 'Download',
     'drag_drop_info'         => 'Drag and drop the Items below to re-arrange them.',
     'edit'                   => 'Edit',
+    'element'                => 'Element',
     'email'                  => 'E-mail',
     'error_deleting'         => 'Sorry it appears there was a problem deleting this',
     'error_restoring'        => 'Sorry it appears there was a problem restoring this',

diff --git a/publishable/lang/pt/generic.php b/publishable/lang/pt/generic.php
@@ -5,6 +5,7 @@
     'action'                 => 'Ação',
     'actions'                => 'Ações',
     'add'                    => 'Adicionar',
+    'add_element'            => 'Adicionar Elemento',
     'add_folder'             => 'Adicionar Pasta',
     'add_new'                => 'Adicionar',
     'all_done'               => 'Concluído',
@@ -30,6 +31,7 @@
     'deselect_all'           => 'Desmarcar todos',
     'download'               => 'Descarregar',
     'edit'                   => 'Editar',
+    'element'                => 'Elemento',
     'email'                  => 'E-mail',
     'error_deleting'         => 'Oops, ocorreu um problema ao remover',
     'exception'              => 'Exceção',

diff --git a/publishable/lang/pt_br/generic.php b/publishable/lang/pt_br/generic.php
@@ -5,6 +5,7 @@
     'action'                 => 'Ação',
     'actions'                => 'Ações',
     'add'                    => 'Adicionar',
+    'add_element'            => 'Adicionar Elemento',
     'add_folder'             => 'Adicionar Pasta',
     'add_new'                => 'Adicionar',
     'all_done'               => 'Concluído',
@@ -37,6 +38,7 @@
     'download'               => 'Baixar',
     'drag_drop_info'         => 'Arraste e solte os itens abaixo para reorganizá-los.',
     'edit'                   => 'Editar',
+    'element'                => 'Elemento',
     'email'                  => 'E-mail',
     'error_deleting'         => 'Oops, ocorreu um problema ao remover',
     'error_restoring'        => 'Oops, ocorreu um erro ao restaurar',

diff --git a/resources/views/bread/browse.blade.php b/resources/views/bread/browse.blade.php
@@ -161,6 +161,18 @@
 
                                                     {!! $row->details->options->{$data->{$row->field}} ?? '' !!}
 
+                                                @elseif($row->type == 'simple_list')
+                                                    @php 
+                                                        $currentSimpleList = isset($data->{$row->field}) ? $data->{$row->field} : '{}';
+                                                        $currentSimpleList = json_decode($currentSimpleList, true);
+                                                    @endphp
+                                                    @if(isset($currentSimpleList) && (count($currentSimpleList)))
+                                                        <ul>
+                                                            @foreach($currentSimpleList as $value)
+                                                                <li>{{ $value }}</li>
+                                                            @endforeach
+                                                        </ul>
+                                                    @endif
                                                 @elseif($row->type == 'date' || $row->type == 'timestamp')
                                                     @if ( property_exists($row->details, 'format') && !is_null($data->{$row->field}) )
                                                         {{ \Carbon\Carbon::parse($data->{$row->field})->formatLocalized($row->details->format) }}

diff --git a/resources/views/bread/read.blade.php b/resources/views/bread/read.blade.php
@@ -90,6 +90,18 @@
                                         {{ __('voyager::generic.none') }}
                                     @endif
                                 @endif
+                            @elseif($row->type == 'simple_list')
+                                @php 
+                                    $currentSimpleList = isset($dataTypeContent->{$row->field}) ? $dataTypeContent->{$row->field} : '{}';
+                                    $currentSimpleList = json_decode($currentSimpleList, true);
+                                @endphp
+                                @if(isset($currentSimpleList) && (count($currentSimpleList)))
+                                    <ul>
+                                        @foreach($currentSimpleList as $value)
+                                            <li>{{ $value }}</li>
+                                        @endforeach
+                                    </ul>
+                                @endif
                             @elseif($row->type == 'date' || $row->type == 'timestamp')
                                 @if ( property_exists($row->details, 'format') && !is_null($dataTypeContent->{$row->field}) )
                                     {{ \Carbon\Carbon::parse($dataTypeContent->{$row->field})->formatLocalized($row->details->format) }}

diff --git a/resources/views/formfields/simple_list.blade.php b/resources/views/formfields/simple_list.blade.php
@@ -0,0 +1,138 @@
+<br>
+@php 
+    $currentSimpleList = isset($dataTypeContent->{$row->field}) ? $dataTypeContent->{$row->field} : '{}';
+    $currentSimpleList = json_decode($currentSimpleList, true);
+@endphp
+<div>
+    <div id="simpleList-{{ $row->field }}">
+        <input type="hidden" id="simple-list-{{ $row->field }}" name="{{ $row->field }}" data-name="{{ $row->display_name }}">
+        <div id="simpleListContainer-{{ $row->field }}">
+            <table class="table table-bordered simple-list-table">
+                <thead>
+                    <tr>
+                        <th>{{ __('voyager::generic.element') }}</th>
+                        <th>{{ __('voyager::generic.action') }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @if(isset($currentSimpleList) && (count($currentSimpleList)))
+                        @foreach($currentSimpleList as $value)
+                            <tr>
+                                <td contenteditable="true">{{ $value }}</td>
+                                <td>
+                                    <button type="button" class="btn btn-warning btn-sm simple-list-move-up-{{ $row->field }}">&uarr;</button>
+                                    <button type="button" class="btn btn-warning btn-sm simple-list-move-down-{{ $row->field }}">&darr;</button>
+                                    <button type="button" class="btn btn-danger btn-sm simple-list-delete-row-{{ $row->field }}">{{ __('voyager::generic.delete') }}</button>
+                                </td>
+                            </tr>
+                        @endforeach
+                    @else
+                        <tr>
+                            <td contenteditable="true"></td>
+                            <td>
+                                <button type="button" class="btn btn-warning btn-sm simple-list-move-up-{{ $row->field }}" disabled>&uarr;</button>
+                                <button type="button" class="btn btn-warning btn-sm simple-list-move-down-{{ $row->field }}" disabled>&darr;</button>
+                                <button type="button" class="btn btn-danger btn-sm simple-list-delete-row-{{ $row->field }}">{{ __('voyager::generic.delete') }}</button>
+                            </td>
+                        </tr>
+                    @endif
+                </tbody>
+            </table>
+        </div>
+        <button type="button" class="btn btn-success" onclick="simpleListAddRow{{ $row->field }}()">{{ __('voyager::generic.add_element') }}</button>
+    </div>
+</div>
+
+<script>
+    // Function to add a new row
+    function simpleListAddRow{{ $row->field }}() {
+        const table = document.querySelector('#simpleListContainer-{{ $row->field }} .simple-list-table tbody');
+        const newRow = table.insertRow();
+        newRow.innerHTML = `
+            <td contenteditable="true"></td>
+            <td>
+                <button type="button" class="btn btn-warning btn-sm simple-list-move-up-{{ $row->field }}">&uarr;</button>
+                <button type="button" class="btn btn-warning btn-sm simple-list-move-down-{{ $row->field }}">&darr;</button>
+                <button type="button" class="btn btn-danger btn-sm simple-list-delete-row-{{ $row->field }}">{{ __('voyager::generic.delete') }}</button>
+            </td>
+        `;
+        attachCellEventListeners{{ $row->field }}(newRow.cells[0]); // Attach event listener to the new value cell
+        updateJson{{ $row->field }}(); // Update JSON immediately after adding a row
+        updateMoveButtons{{ $row->field }}(); // Update move buttons state
+    }
+
+    // Function to update JSON data
+    function updateJson{{ $row->field }}() {
+        const json = {};
+        const table = document.querySelector('#simpleListContainer-{{ $row->field }} .simple-list-table tbody');
+
+        // Iterate through rows to construct JSON object
+        table.querySelectorAll('tr').forEach((row, index) => {
+            const value = row.cells[0].innerText.trim();
+            if (value !== '') {
+                json[index] = value;
+            }
+        });
+
+        // Update hidden input value with JSON string
+        document.getElementById('simple-list-{{ $row->field }}').value = JSON.stringify(json, null, 2);
+    }
+
+    // Function to attach event listeners to editable cells
+    function attachCellEventListeners{{ $row->field }}(cell) {
+        cell.addEventListener('input', updateJson{{ $row->field }});
+    }
+
+    // Function to move a row up
+    function moveRowUp{{ $row->field }}(row) {
+        const prevRow = row.previousElementSibling;
+        if (prevRow) {
+            row.parentNode.insertBefore(row, prevRow);
+            updateJson{{ $row->field }}();
+            updateMoveButtons{{ $row->field }}();
+        }
+    }
+
+    // Function to move a row down
+    function moveRowDown{{ $row->field }}(row) {
+        const nextRow = row.nextElementSibling;
+        if (nextRow) {
+            row.parentNode.insertBefore(nextRow, row);
+            updateJson{{ $row->field }}();
+            updateMoveButtons{{ $row->field }}();
+        }
+    }
+
+    // Function to update the state of move buttons
+    function updateMoveButtons{{ $row->field }}() {
+        const rows = document.querySelectorAll('#simpleListContainer-{{ $row->field }} .simple-list-table tbody tr');
+        rows.forEach((row, index) => {
+            const moveUpButton = row.querySelector('.simple-list-move-up-{{ $row->field }}');
+            const moveDownButton = row.querySelector('.simple-list-move-down-{{ $row->field }}');
+            moveUpButton.disabled = index === 0;
+            moveDownButton.disabled = index === rows.length - 1;
+        });
+    }
+
+    // Event listener for dynamically added delete buttons and move buttons
+    document.addEventListener('click', function (event) {
+        if (event.target.classList.contains('simple-list-delete-row-{{ $row->field }}')) {
+            const row = event.target.closest('tr');
+            row.parentNode.removeChild(row);
+            updateJson{{ $row->field }}();
+            updateMoveButtons{{ $row->field }}();
+        } else if (event.target.classList.contains('simple-list-move-up-{{ $row->field }}')) {
+            moveRowUp{{ $row->field }}(event.target.closest('tr'));
+        } else if (event.target.classList.contains('simple-list-move-down-{{ $row->field }}')) {
+            moveRowDown{{ $row->field }}(event.target.closest('tr'));
+        }
+    });
+
+    // Attach initial event listeners to existing cells and update move buttons
+    document.querySelectorAll('#simpleListContainer-{{ $row->field }} .simple-list-table tbody tr').forEach(row => {
+        attachCellEventListeners{{ $row->field }}(row.cells[0]);
+    });
+    updateMoveButtons{{ $row->field }}();
+
+    updateJson{{ $row->field }}();
+</script>
diff --git a/src/FormFields/SimpleListHandler.php b/src/FormFields/SimpleListHandler.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace TCG\Voyager\FormFields;
+
+class SimpleListHandler extends AbstractHandler
+{
+    protected $codename = 'simple_list';
+
+    public function createContent($row, $dataType, $dataTypeContent, $options)
+    {
+        return view('voyager::formfields.simple_list', [
+            'row'             => $row,
+            'options'         => $options,
+            'dataType'        => $dataType,
+            'dataTypeContent' => $dataTypeContent,
+        ]);
+    }
+}
diff --git a/src/Http/Controllers/ContentTypes/SimpleList.php b/src/Http/Controllers/ContentTypes/SimpleList.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace TCG\Voyager\Http\Controllers\ContentTypes;
+
+class SimpleList extends BaseType
+{
+    /**
+     * @return string
+     */
+    public function handle()
+    {
+        return $this->request->input($this->row->field) ?? '{}';
+    }
+}
diff --git a/src/Http/Controllers/Controller.php b/src/Http/Controllers/Controller.php
@@ -19,6 +19,7 @@
 use TCG\Voyager\Http\Controllers\ContentTypes\Password;
 use TCG\Voyager\Http\Controllers\ContentTypes\Relationship;
 use TCG\Voyager\Http\Controllers\ContentTypes\SelectMultiple;
+use TCG\Voyager\Http\Controllers\ContentTypes\SimpleList;
 use TCG\Voyager\Http\Controllers\ContentTypes\Text;
 use TCG\Voyager\Http\Controllers\ContentTypes\Timestamp;
 use TCG\Voyager\Traits\AlertsMessages;
@@ -273,6 +274,9 @@ public function getContentBasedOnType(Request $request, $slug, $row, $options =
             /********** MULTIPLE IMAGES TYPE **********/
             case 'multiple_images':
                 return (new MultipleImage($request, $slug, $row, $options))->handle();
+            /********** SIMPLE LIST TYPE **********/
+            case 'simple_list':
+                return (new SimpleList($request, $slug, $row, $options))->handle();
             /********** SELECT MULTIPLE TYPE **********/
             case 'select_multiple':
                 return (new SelectMultiple($request, $slug, $row, $options))->handle();

diff --git a/src/VoyagerServiceProvider.php b/src/VoyagerServiceProvider.php
@@ -328,6 +328,7 @@ protected function registerFormFields()
             'markdown_editor',
             'select_dropdown',
             'select_multiple',
+            'simple_list',
             'text',
             'text_area',
             'time',