query-builder/resources/views/report-editor.blade.php at d44346543b226eb37d22c7142b2c629d0e2c18dd · ACT-Training/query-builder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<div x-data="{open: true, search: '' }" x-cloak
     class="m-4 block p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">

    @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">
            <span class="font-bold">Report Builder</span> Please select one or more columns.
        </div>
    @endif

    <div x-show="open">
        @if($this->enableColumnSearch)
            <div class="mb-4">
                <input type="text" x-model="search" placeholder="Search columns..."
                       class="w-full text-sm border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
            </div>
        @endif

        @foreach($this->availableColumns() as $section => $columns)
            <div x-show="[{!! collect($columns)->map(fn ($column) => "'" . e($column['label']) . "'")->implode(',') !!}].some(label => label.toLowerCase().includes(search.toLowerCase()))">
                <h6 class="mb-4 pb-1 text-base font-bold text-gray-600 dark:text-white border-b border-dashed">{{ $section }}</h6>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
                    @foreach($columns as $columnKey => $column)
                        <div class="flex items-center mb-4" x-show="'{{ e($column['label']) }}'.toLowerCase().includes(search.toLowerCase())">
                            <input wire:model.live.debounce.1000ms="selectedColumns" id="{{$column['key']}}" type="checkbox"
                                   value="{{ $column['key'] }}"
                                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="{{$column['key']}}"
                                   class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{$column['label']}}</label>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach

        @if($this->enableGroupBy)
            <h6 class="mb-4 pb-1 text-base font-bold text-gray-600 dark:text-white border-b border-dashed">Group By</h6>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div>
                    <label for="groupBy" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Group By Column</label>
                    <select wire:model.live="groupBy" id="groupBy"
                            class="w-full text-sm border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">None</option>
                        @foreach($this->groupableColumns() as $column)
                            <option value="{{ $column['key'] }}">{{ $column['label'] }}</option>
                        @endforeach
                    </select>
                </div>

                @if($this->groupBy)
                    <div>
                        <label for="aggregateFunction" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Function</label>
                        <select wire:model.live="aggregateFunction" id="aggregateFunction"
                                class="w-full text-sm border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            @foreach($this->aggregateFunctions() as $fn)
                                <option value="{{ $fn }}">{{ $fn }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="aggregateColumn" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Aggregate Column</label>
                        <select wire:model.live="aggregateColumn" id="aggregateColumn"
                                class="w-full text-sm border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            @foreach($this->aggregatableColumns() as $column)
                                <option value="{{ $column['key'] }}">{{ $column['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            </div>
        @endif
    </div>

    <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 type="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"
                     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 9l6 6l6 -6"/>
                </svg>
            </span>
            <span x-show="open">
                <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 15l6 -6l6 6"/>
            </svg>
            </span>
        </button>
        <div class="flex items-center">
            <button
                    type="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
                    type="button"
                    x-data
                    x-tooltip.raw="Export"
                    wire:key="export-button"
                    wire:click="exportReportBuilder"
                    class="p-2 text-gray-600 hover:bg-gray-100 rounded"
            >
                <x-tabler-table-export class="w-6 h-6"/>
            </button>

            <button
                    type="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>

            <button
                    type="button"
                    x-data
                    x-tooltip.raw="Load"
                    wire:key="load-button"
                    wire:click="loadReportBuilder" 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="M14 3v4a1 1 0 0 0 1 1h4" />
                    <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
                    <path d="M12 17v-6" />
                    <path d="M9.5 14.5l2.5 2.5l2.5 -2.5" />
                </svg>
            </button>

        </div>
    </div>
</div>