Created settable universal table. Settings store in localStorage of browser. Changed styles.

resources/sass/app.scss

@@ -30,15 +30,20 @@
 
 
 
-.tbl {
-  .row:nth-child(even) {
-    background-color: #f7f7f7;
+.table {
+  tr th {
+    background-color: #0dcaf0;
+    vertical-align: middle;
   }
-  .tbl-item {
+
+  tr:nth-child(even) td {
+    background-color: #e5e5e5;
+  }
+  td {
     cursor: pointer;
   }
 
-  .tbl-item:hover {
+  tr:hover td {
     background-color: #fff8ca;
   }
 
@@ -46,4 +51,8 @@
 
 .pagination .text-muted {
   padding-right: 1rem;
+}
+
+.cursor-pointer {
+  cursor: pointer;
 }

resources/views/catalog/index.blade.php

@@ -13,52 +13,30 @@
         </div>
     </div>
 
-    <div class="tbl">
-        <div class="row d-none d-md-flex header px-2 py-3 fw-bold bg-primary-subtle">
-            <div class="col-xl-1">Год, ном. номер, артикул</div>
-            <div class="col-xl-2">Производитель, наименование ТЗ</div>
-            <div class="col-xl-3">Типы</div>
-            <div class="col-xl-1">Размеры, ед.изм.</div>
-            <div class="col-xl-1">Прайс</div>
-            <div class="col-xl-4">Примечания</div>
-        </div>
-
-        @foreach($products as $product)
-            <div class="row px-2 py-2 align-items-center tbl-item" onclick="location.href='{{ route('catalog.show', $product->id) }}'">
-                <div class="col-xl-1">
-                    {{ $product->year }}<br>
-                    {{ $product->nomenclature_number }}<br>
-                    {{ $product->article }}<br>
-                </div>
-                <div class="col-xl-2">
-                    {{ $product->manufacturer }}<br>
-                    {{ $product->name_tz }}<br>
-                </div>
-                <div class="col-xl-3">
-                    {{ $product->type_tz }}<br>
-                    {{ $product->type }}<br>
-                    {{ $product->manufacturer_name }}
-                </div>
-                <div class="col-xl-1">
-                    {{ $product->sizes }}<br>
-                    {{ $product->unit }}<br>
-                </div>
-
-                <div class="col-xl-1">
-                    {{ $product->price_status }}<br>
-                    {{ $product->product_price_txt }}<br>
-                    {{ $product->installation_price_txt }}<br>
-                    {{ $product->service_price_txt }}<br>
-                    {{ $product->total_price_txt }}
-                </div>
-                <div class="col-xl-4" title="{!! nl2br($product->note) !!}">
-                    {!! Str::words(nl2br($product->note), 15) !!}
-                </div>
 
-            </div>
-        @endforeach
+    @include('partials.table', [
+        'id'        => 'products',
+        'header'    => [
+            'id'                        => 'ID',
+            'year'                      => 'Год',
+            'nomenclature_number'       => 'Номер номенклатуры',
+            'article'                   => 'Артикул',
+            'manufacturer'              => 'Производитель',
+            'name_tz'                   => 'Наименование ТЗ',
+            'type_tz'                   => 'Тип по ТЗ',
+            'type'                      => 'Тип',
+            'manufacturer_name'         => 'Наименование производителя',
+            'sizes'                     => 'Размеры',
+            'price_status'              => 'Статус цены',
+            'product_price_txt'         => 'Цена товара',
+            'installation_price_txt'    => 'Цена установки',
+            'service_price_txt'         => 'Цена обслуживания',
+            'total_price_txt'           => 'Итоговая цена',
+            'note'                      => 'Примечания',
+        ],
+        'data'  => $products
+    ])
 
-    </div>
     <div class="row pt-3 px-3">
         <div class="col-12 pagination">
             {{ $products->links() }}
@@ -66,12 +44,9 @@
     </div>
 
 
-
-
-
     <!-- Модальное окно -->
     <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
+        <div class="modal-dialog modal-fullscreen-sm-down">
             <div class="modal-content">
                 <div class="modal-header">
                     <h1 class="modal-title fs-5" id="exampleModalLabel">Выберите год и файл для импорта</h1>

resources/views/partials/table.blade.php

@@ -0,0 +1,98 @@
+
+<div class="table-responsive">
+    <div class="py-2 bg-primary rounded-start" style="position: absolute; right: 0">
+        <button type="button" class="btn btn-sm btn-primary " data-bs-toggle="modal" data-bs-target="#table_{{ $id }}_modal">
+            <i class="bi bi-gear-fill"></i>
+        </button>
+    </div>
+    <table class="table" id="tbl" data-table-name="{{ $id }}">
+        <thead>
+            <tr>
+                @foreach($header as $headerName => $headerTitle)
+                    <th scope="col" class="column_{{ $headerName }} hrader_{{ $headerName }}">{{ $headerTitle }}</th>
+                @endforeach
+
+            </tr>
+        </thead>
+        <tbody>
+        @foreach($products as $product)
+            <tr>
+                @foreach($header as $headerName => $headerTitle)
+                    <td class="column_{{$headerName}}">{!! $product->$headerName !!}</td>
+                @endforeach
+            </tr>
+        @endforeach
+        </tbody>
+    </table>
+</div>
+
+<!-- Модальное окно настроек таблицы -->
+<div class="modal fade" id="table_{{ $id }}_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen-sm-down">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="exampleModalLabel">Выбор отображаемых колонок</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+            </div>
+            <div class="modal-body">
+                @foreach($header as $headerName => $headerTitle)
+                <div>
+                    <label class="me-3"><input type="checkbox" checked="checked" data-name="{{ $headerName }}" class="toggle-column checkbox-{{ $headerName }}"> {{ $headerTitle }}</label>
+                </div>
+                @endforeach
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+@push('scripts')
+    <script type="module">
+        // on page load set column visible
+        let tableName = $('#tbl').attr('data-table-name');
+        let tables = JSON.parse(localStorage.getItem('table_'+tableName));
+
+        // on first load create tables object
+        if(!tables) {
+            tables = {};
+        }
+
+        $.each(tables, function (colName, colStatus) {
+            if(!colStatus) {
+                $('.checkbox-'+colName).attr('checked', false);
+                $('.column_'+colName).hide();
+            }
+        });
+
+        $('.toggle-column').on('change', function () {
+            let columnName = $(this).attr('data-name');
+            let columnStatus = $(this).is(':checked');
+
+            // save column status
+            tables[columnName] = columnStatus;
+            localStorage.setItem('table_'+tableName, JSON.stringify(tables));
+
+            // show or hide column
+            if(columnStatus) {
+                $('.column_'+columnName).show('fast');
+            } else {
+                $('.column_'+columnName).hide('fast');
+            }
+        });
+
+
+
+
+
+        $('#table-settings').on('click', function () {
+
+        });
+
+
+
+
+    </script>
+@endpush