Merge pull request #75 from ACT-Training/71-add-save-button-to-report-editor

71 add save button to report editor

Author: SimonBarrettACT

resources/views/report-editor.blade.php

@@ -3,7 +3,7 @@ class="m-4 block p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-g
 
     @if(!$selectedColumns)
         <div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
-            Please select one or more columns.
+            <span class="font-bold">Report Builder</span> Please select one or more columns.
         </div>
     @endif
 
@@ -24,9 +24,19 @@ class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{$column['lab
         @endforeach
     </div>
 
-    <div class="flex items-center gap-2 p-1 px-2 bg-gray-50 -mx-6 -mb-6 rounded-b-lg">
-        <span class="text-sm text-gray-600">Columns</span>
-        <button @click="open = !open">
+    <div wire:ignore class="flex items-center gap-2 justify-between p-1 px-2 bg-gray-50 -mx-6 -mb-6 rounded-b-lg border-t border-gray-200">
+        <button @click="open = !open" class="p-2 flex items-center gap-2 text-gray-600 hover:bg-gray-100 rounded">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M4 6l5.5 0" />
+                <path d="M4 10l5.5 0" />
+                <path d="M4 14l5.5 0" />
+                <path d="M4 18l5.5 0" />
+                <path d="M14.5 6l5.5 0" />
+                <path d="M14.5 10l5.5 0" />
+                <path d="M14.5 14l5.5 0" />
+                <path d="M14.5 18l5.5 0" />
+            </svg>
             <span x-show="!open">
                 <svg xmlns="http://www.w3.org/2000/svg"
                      class="w-6 h-6"
@@ -45,6 +55,56 @@ class="w-6 h-6"
             </svg>
             </span>
         </button>
+        <div class="flex items-center">
+            <button
+                    x-data
+                    x-tooltip.raw="Reset"
+                    wire:key="reset-button"
+                    wire:click="resetReportBuilder" class="p-2 text-gray-600 hover:bg-gray-100 rounded">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                    <path d="M15 4.55a8 8 0 0 0 -6 14.9m0 -4.45v5h-5" />
+                    <path d="M18.37 7.16l0 .01" />
+                    <path d="M13 19.94l0 .01" />
+                    <path d="M16.84 18.37l0 .01" />
+                    <path d="M19.37 15.1l0 .01" />
+                    <path d="M19.94 11l0 .01" />
+                </svg>
+            </button>
+            <button
+                    x-data
+                    x-tooltip.raw="Save"
+                    wire:key="save-button"
+                    wire:click="saveReportBuilder" class="p-2 text-gray-600 hover:bg-gray-100 rounded">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                    <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
+                    <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+                    <path d="M14 4l0 4l-6 0l0 -4" />
+                </svg>
+            </button>
+
+            <x-popover wire:key="load-button">
+                <x-slot name="trigger">
+                    <div
+                            x-data
+                            x-tooltip.raw="Reports"
+                            class="mt-2 p-2 text-gray-600 hover:bg-gray-100 rounded"
+                    >
+                        <x-tabler-file-download/>
+                    </div>
+                </x-slot>
+
+                <x-slot name="panel">
+                    @foreach($this->reports as $report)
+                        <x-popover.menu-item wire:click="loadReportBuilder('{{ $report->uuid }}')">
+                            {{ $report->name }}
+                        </x-popover.menu-item>
+                    @endforeach
+                </x-slot>
+            </x-popover>
+
+        </div>
     </div>
 </div>
 

src/Support/Concerns/WithReportBuilder.php

@@ -9,9 +9,11 @@
 use ACTTraining\QueryBuilder\Support\Conditions\DateCondition;
 use ACTTraining\QueryBuilder\Support\Conditions\NumberCondition;
 use ACTTraining\QueryBuilder\Support\Conditions\TextCondition;
+use Livewire\Attributes\Validate;
 
 trait WithReportBuilder
 {
+    #[Validate('required|array')]
     public array $selectedColumns = [];
 
     private function findElementByKey(array $array, $targetValue): ?array
@@ -106,4 +108,19 @@ public function buildConditions(): array
         return $conditions;
     }
 
+    public function resetReportBuilder(): void
+    {
+        $this->criteria = [];
+        $this->selectedColumns = [];
+    }
+
+    public function saveReportBuilder(): void
+    {
+        //
+    }
+
+    public function loadReportBuilder($id): void
+    {
+        //
+    }
 }