feat: done button

saade · Aug 21, 2023 · 7fd0c6d · 7fd0c6d
1 parent f68cca3
commit 7fd0c6d
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -68,14 +68,21 @@ SignaturePad::make('signature')
     ->downloadActionDropdownPlacement('center-end')     // Dropdown placement of the download action (defaults to 'bottom-end')
 ```
 
-### Disabling clear, download and undo actions.
+### Disabling clear, download, undo and done actions.
 ```php
 use Saade\FilamentAutograph\Forms\Components\SignaturePad;
 
 SignaturePad::make('signature')
     ->clearable(false)
     ->downloadable(false)
     ->undoable(false)
+    ->confirmable(false)
+```
+
+### Requiring confirmation (Done button).
+```php
+SignaturePad::make('signature')
+    ->confirmable()                 // Requires user to click on 'Done' (defaults to false)
 ```
 
 ### Customizing actions
@@ -87,6 +94,7 @@ SignaturePad::make('signature')
     ->clearAction(fn (Action $action) => $action->button())
     ->downloadAction(fn (Action $action) => $action->color('primary'))
     ->undoAction(fn (Action $action) => $action->icon('heroicon-o-ctrl-z'))
+    ->confirmAction(fn (Action $action) => $action->iconButton()->icon('heroicon-o-thumbs-up'))
 ```
 ## Changelog
 

diff --git a/resources/dist/filament-autograph.js b/resources/dist/filament-autograph.js
diff --git a/resources/js/index.js b/resources/js/index.js
@@ -3,6 +3,7 @@ import SignaturePad from "signature_pad";
 export default ({
     backgroundColor,
     backgroundColorOnDark,
+    confirmable,
     disabled,
     dotSize,
     exportBackgroundColor,
@@ -19,6 +20,8 @@ export default ({
 }) => ({
     state,
     previousState: state,
+    dirty: false,
+    confirmed: false,
 
     /** @type {SignaturePad} */
     signaturePad: null,
@@ -54,14 +57,42 @@ export default ({
 
     clear() {
         this.signaturePad.clear();
+        this.state = null;
+        this.confirmed = false;
+        this.dirty = false;
+        this.signaturePad.on();
     },
 
     undo() {
         const data = this.signaturePad.toData();
-        if (data) {
+        if (data.length) {
             data.pop();
             this.signaturePad.fromData(data);
         }
+
+        if (!data.length) {
+            this.state = null;
+        }
+
+        this.confirmed = false;
+        this.dirty = data.length > 0;
+        this.signaturePad.on();
+    },
+
+    done() {
+        const { data: exportedData, canvasBackgroundColor, canvasPenColor } = this.prepareToExport()
+        this.signaturePad.fromData(exportedData)
+
+        this.previousState = this.state;
+        this.state = this.signaturePad.toDataURL();
+
+        if (confirmable) {
+            this.confirmed = true;
+            this.signaturePad.off();
+        }
+
+        const { data: restoredData } = this.restoreFromExport(exportedData, canvasBackgroundColor, canvasPenColor)
+        this.signaturePad.fromData(restoredData)
     },
 
     downloadAs(type, extension) {
@@ -78,16 +109,21 @@ export default ({
     },
 
     watchState() {
-        this.signaturePad.addEventListener("afterUpdateStroke", (e) => {
-            const { data: exportedData, canvasBackgroundColor, canvasPenColor } = this.prepareToExport()
-            this.signaturePad.fromData(exportedData)
+        this.signaturePad.addEventListener("endStroke", (e) => {
+            this.dirty = true;
 
-            this.previousState = this.state;
-            this.state = this.signaturePad.toDataURL();
+            if (confirmable) {
+                return;
+            }
 
-            const { data: restoredData } = this.restoreFromExport(exportedData, canvasBackgroundColor, canvasPenColor)
-            this.signaturePad.fromData(restoredData)
+            this.done();
         }, { once: false });
+
+        this.$watch("confirmed", (confirmed) => {
+            if (confirmable && !confirmed) {
+                this.state = null
+            }
+        })
     },
 
     watchResize() {

diff --git a/resources/lang/en/filament-autograph.php b/resources/lang/en/filament-autograph.php
@@ -19,5 +19,9 @@
                 'svg' => 'SVG',
             ]
         ],
+
+        'done' => [
+            'label' => 'Done',
+        ],
     ]
 ];
diff --git a/resources/lang/pt_BR/filament-autograph.php b/resources/lang/pt_BR/filament-autograph.php
@@ -19,5 +19,9 @@
                 'svg' => 'SVG',
             ]
         ],
+
+        'done' => [
+            'label' => 'Concluir',
+        ],
     ]
 ];
diff --git a/resources/views/signature-pad.blade.php b/resources/views/signature-pad.blade.php
@@ -20,10 +20,12 @@ class="filament-autograph"
         $downloadableFormats = $getDownloadableFormats();
         $downloadActionDropdownPlacement = $getDownloadActionDropdownPlacement() ?? 'bottom-start';
         $isUndoable = $isUndoable();
+        $isConfirmable = $isConfirmable();
         
         $clearAction = $getAction('clear');
         $downloadAction = $getAction('download');
         $undoAction = $getAction('undo');
+        $doneAction = $getAction('done');
     @endphp
 
     <div
@@ -33,6 +35,7 @@ class="filament-autograph"
         x-data="signaturePad({
             backgroundColor: @js($getBackgroundColor()),
             backgroundColorOnDark: @js($getBackgroundColorOnDark()),
+            confirmable: @js($isConfirmable),
             disabled: @js($isDisabled),
             dotSize: {{ $getDotSize() }},
             exportBackgroundColor: @js($getExportBackgroundColor()),
@@ -50,6 +53,7 @@ class="filament-autograph"
     >
         <canvas
             x-ref="canvas"
+            wire:ignore
             @class([
                 'w-full h-36 rounded-lg border border-gray-300',
                 'dark:bg-gray-900 dark:border-white/10',
@@ -99,6 +103,10 @@ class="filament-autograph"
                     </x-filament::dropdown.list>
                 </x-filament::dropdown>
             @endif
+
+            @if ($isConfirmable)
+                {{ $doneAction }}
+            @endif
         </div>
     </div>
 </x-filament-forms::field-wrapper>
diff --git a/src/Forms/Components/Actions/DoneAction.php b/src/Forms/Components/Actions/DoneAction.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Saade\FilamentAutograph\Forms\Components\Actions;
+
+use Filament\Forms\Components\Actions\Action;
+use Filament\Support\Enums\ActionSize;
+use Saade\FilamentAutograph\Forms\Components\SignaturePad;
+
+class DoneAction extends Action
+{
+    public static function getDefaultName(): ?string
+    {
+        return 'done';
+    }
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->link()->icon('heroicon-o-check')->color('primary');
+
+        $this->label(fn (): string => __('filament-autograph::filament-autograph.actions.done.label'));
+
+        $this->livewireClickHandlerEnabled(false);
+
+        $this->size(ActionSize::Small);
+
+        $this->visible(
+            fn (SignaturePad $component): bool => $component->isConfirmable()
+        );
+    }
+}
diff --git a/src/Forms/Components/Concerns/HasActions.php b/src/Forms/Components/Concerns/HasActions.php
@@ -4,7 +4,9 @@
 
 use Closure;
 use Filament\Forms\Components\Actions\Action;
+use Illuminate\Support\HtmlString;
 use Saade\FilamentAutograph\Forms\Components\Actions\ClearAction;
+use Saade\FilamentAutograph\Forms\Components\Actions\DoneAction;
 use Saade\FilamentAutograph\Forms\Components\Actions\DownloadAction;
 use Saade\FilamentAutograph\Forms\Components\Actions\UndoAction;
 use Saade\FilamentAutograph\Forms\Components\Enums\DownloadableFormat;
@@ -25,12 +27,16 @@ trait HasActions
 
     protected bool | Closure $isUndoable = true;
 
+    protected bool | Closure $isConfirmable = false;
+
     protected ?Closure $modifyClearActionUsing = null;
 
     protected ?Closure $modifyDownloadActionUsing = null;
 
     protected ?Closure $modifyUndoActionUsing = null;
 
+    protected ?Closure $modifyDoneActionUsing = null;
+
     public function getClearAction(): Action
     {
         $action = ClearAction::make();
@@ -101,6 +107,33 @@ public function undoAction(?Closure $callback): static
         return $this;
     }
 
+    public function getDoneAction(): Action
+    {
+        $action = DoneAction::make();
+
+        if ($this->modifyDoneActionUsing) {
+            $action = $this->evaluate($this->modifyDoneActionUsing, [
+                'action' => $action,
+            ]) ?? $action;
+        }
+
+        $action->extraAttributes([
+            'x-on:click' => 'done',
+            'x-cloak' => '',
+            'x-show' => new HtmlString('dirty && !confirmed'),
+            ...$action->getExtraAttributes(),
+        ]);
+
+        return $action;
+    }
+
+    public function doneAction(?Closure $callback): static
+    {
+        $this->modifyDoneActionUsing = $callback;
+
+        return $this;
+    }
+
     public function clearable(bool | Closure $condition = true): static
     {
         $this->isClearable = $condition;
@@ -136,6 +169,13 @@ public function undoable(bool | Closure $condition = true): static
         return $this;
     }
 
+    public function confirmable(bool | Closure $condition = true): static
+    {
+        $this->isConfirmable = $condition;
+
+        return $this;
+    }
+
     public function isClearable(): bool
     {
         if ($this->isDisabled()) {
@@ -172,4 +212,13 @@ public function isUndoable(): bool
 
         return (bool) $this->evaluate($this->isUndoable);
     }
+
+    public function isConfirmable(): bool
+    {
+        if ($this->isDisabled()) {
+            return false;
+        }
+
+        return (bool) $this->evaluate($this->isConfirmable);
+    }
 }
diff --git a/src/Forms/Components/SignaturePad.php b/src/Forms/Components/SignaturePad.php
@@ -23,6 +23,7 @@ protected function setUp(): void
             fn (SignaturePad $component): Action => $component->getClearAction(),
             fn (SignaturePad $component): Action => $component->getDownloadAction(),
             fn (SignaturePad $component): Action => $component->getUndoAction(),
+            fn (SignaturePad $component): Action => $component->getDoneAction(),
         ]);
     }
 }