multiselect-delete-with-alpinejs feature added

Author: Anuj

public/app.css

@@ -106,7 +106,8 @@ Alpine.store('fileViewer', {
                 }
             })
     },
-
+    checkBoxesVisibility:false,
+    filesChecked: [],
     foldersOpen: [],
     foldersInView: [],
     folderTops: {},
@@ -162,6 +163,23 @@ Alpine.store('fileViewer', {
         const container = document.getElementById('file-list-container');
         this.containerTop = container.getBoundingClientRect().top;
         container.scrollTo(0, 0);
+    },
+    isChecked(file) {
+        return this.filesChecked.includes(file);
+    },
+    checkBoxToggle(file){
+        if (this.isChecked(file)) {
+            this.filesChecked = this.filesChecked.filter(f => f !== file);
+        } else {
+            this.filesChecked.push(file);
+        }
+    },
+    showCheckBoxes(){
+        this.checkBoxesVisibility = !this.checkBoxesVisibility;
+    },
+    resetChecks(){
+        this.filesChecked = [];
+        this.checkBoxesVisibility = false;
     }
 });
 

public/app.js

@@ -25,6 +25,7 @@
             this.$dispatch('file-selected', this.selectedFileIdentifier);
         }
     }"
+    @files-deleted.window = "$store.fileViewer.resetChecks()"
     @scan-files.window="$store.fileViewer.initScanCheck('{{ route('blv.is-scan-required') }}', '{{ route('blv.scan-files') }}')"
     x-init="$nextTick(() => {
         $store.fileViewer.reset();

resources/js/app.js

@@ -98,9 +98,17 @@ class="dropdown w-48"
             </div>
 
             <div class="folder-files pl-3 ml-1 border-l border-gray-200 dark:border-gray-800" x-show="$store.fileViewer.isOpen(folder)">
-            @foreach($folder->files() as $logFile)
-                @include('log-viewer::partials.file-list-item', ['logFile' => $logFile])
-            @endforeach
+                <div class="grid grid-flow-col gap-x-32" x-show="$store.fileViewer.filesChecked.length">
+                    <button x-on:click.stop="if (confirm('Are you sure you want to delete selected log files? THIS ACTION CANNOT BE UNDONE.')) { $wire.call('deleteMultipleFiles', $store.fileViewer.filesChecked) }" class="pt-4 pb-3 inline-flex" >
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-5" fill="currentColor"><use href="#icon-trashcan" /></svg>&nbsp;<small>Delete Selected Files</small>
+                    </button>
+                    <button class="inline-flex pt-4 pb-3" x-on:click.stop="$store.fileViewer.showCheckBoxes(), $store.fileViewer.resetChecks()">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-5" fill="currentColor"><use href="#icon-cross" /></svg>
+                    </button>
+                </div>
+                @foreach($folder->files() as $logFile)
+                    @include('log-viewer::partials.file-list-item', ['logFile' => $logFile])
+                @endforeach
             </div>
         </div>
     @endforeach

resources/views/index.blade.php

@@ -1,4 +1,4 @@
-<div class="file-item-container"
+<div class="file-item-container flex"
     x-bind:class="[selectedFileIdentifier && selectedFileIdentifier === '{{ $logFile->identifier }}' ? 'active' : '']"
     wire:key="log-file-{{$logFile->identifier}}"
     wire:click="selectFile('{{ $logFile->identifier }}')"
@@ -8,7 +8,18 @@
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
 >
-    <div class="file-item">
+    @can('deleteLogFile', $logFile)
+    <div class="my-auto px-2" x-show="$store.fileViewer.checkBoxesVisibility">
+        <input 
+            type="checkbox"
+            x-init="$watch(`$store.fileViewer.isChecked('{{$logFile->identifier}}')`, (value) => {
+                $el.checked = value;
+            })"
+            x-on:click.stop="$store.fileViewer.checkBoxToggle('{{$logFile->identifier}}')"
+            value="{{$logFile->identifier}}" />
+    </div>
+    @endcan
+    <div class="file-item grow">
         <p class="file-name">{{ $logFile->name }}</p>
         <span class="file-size">{{ $logFile->sizeFormatted() }}</span>
         <button type="button" class="file-dropdown-toggle"
@@ -49,6 +60,10 @@ class="dropdown w-48"
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><use href="#icon-trashcan" /></svg>
                 Delete
             </button>
+            <button x-on:click.stop="$store.fileViewer.showCheckBoxes()">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><use href="#icon-trashcan" /></svg>
+                Delete Multiple
+            </button>
             @endcan
         </div>
     </div>

resources/views/livewire/file-list.blade.php

@@ -78,6 +78,14 @@ public function deleteFile(string $fileIdentifier)
         }
     }
 
+    public function deleteMultipleFiles(array $selectedFilesArray)
+    {
+        foreach($selectedFilesArray as $fileIdentifier){
+            $this->deleteFile($fileIdentifier);
+        }
+        $this->dispatchBrowserEvent('files-deleted');
+    }
+
     public function deleteFolder(string $folderIdentifier)
     {
         $folder = LogViewer::getFolder($folderIdentifier);