Added an inline editing component

Author: Gustavinho

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-## [2.2.3] - 2021-06-26
+## [2.4.0] - Not released
+
+### Added
+- Inline editing component
+## [2.3.0] - 2021-06-26
 ### Added
 - Default value for filters
 - Sortable list and grid views

doc/table-view.md

@@ -26,9 +26,11 @@ This view creates a dynamic data table with some features like filters, paginati
     - [Showing feedback messages](#showing-feedback-messages)
     - [Hiding actions](#hiding-actions)
     - [Confirmation message](#confirmation-message)
+- [Inline editing](#inline-editing)
 - [Showing UI components](#showing-ui-components)
     - [Avatar](#avatar)
     - [Badges](#badges)
+    - [Icons](#icons)
 
 ## Table View example
 
@@ -412,6 +414,53 @@ public function getConfirmationMessage($item = null)
 }
 ```
 
+# Inline editing
+It is possible to edit a field on the data table inline using an `editable` component instead of plain text in the `row` method.
+
+```php
+use LaravelViews\Facades\UI;
+
+public function row(User $user)
+    {
+        return [
+            // ...Other fields
+            UI::editable($user, 'email'),
+        ];
+    }
+```
+
+This component will show the current value and if if you clic on it, you will be able to edit it. To update the new value you should define a new method on the table view.
+
+```php
+/**
+ * Method fired by the `editable` component, it
+ * gets the model instance and a key value array
+ * with the modified
+ */
+public function update(User $user, $data)
+{
+}
+```
+
+The `update` method gets the model instance, and a key-value array with the modified data so you can save it directly on the model.
+
+```php
+use LaravelViews\Views\Traits\WithAlerts;
+
+/**
+ * Method fired by the `editable` component, it
+ * gets the model instance and a key-value array
+ * with the modified
+ */
+public function update(User $user, $data)
+{
+    $user->update($data);
+    $this->success();
+}
+```
+
+Notice that you can fire a success or error alert as the actions with the `WithAlerts` trait.
+
 # Showing UI components
 You can display some UI components instead of plain text like avatars, badges or icons, some of these components has different variants, you can customize these varians with the `laravel-views.php` config file.
 

resources/views/components/editable.blade.php

@@ -1,39 +1,29 @@
 {{-- components.editable
 
-Render an editable input field
+Render an editable input field --}}
 
---}}
-
-<div
-        x-data="{
-            field: '{{ $field }}',
-            id: {{ $model->id }},
-            value: {{ json_encode($model->$field) }},
-            original: {{ json_encode($model->$field) }},
-            editing: false
-        }"
-        @click.away="editing = false; value = original;"
->
-        <input
-                x-cloak
-                x-ref="input"
-                x-show="editing"
-                x-model="value"
-                @keydown.enter="
-                    $wire.update({
-                    id: id,
-                    value: value,
-                    field: field
-                }); editing = false;"
-                @keydown.escape="editing = false; value = original;"
-                class="bg-green-100 text-black-700 border border-green-200 rounded py-2 px-4 leading-tight outline-none w-full"
-        >
-    <div
-            x-show="!editing"
-            @click="editing = true; $nextTick(() => {$refs.input.focus();$refs.input.setSelectionRange(-1, -1);});"
-            x-html="value"
-            class='transition-all duration-300 ease-in-out inline-block cursor-pointer border-b-2 border-dotted border-gray-400 hover:bg-gray-100 p-1'>
-        {!! $model->$field !!}
-    </div>
+<div x-data="{
+    field: '{{ $field }}',
+    id: {{ $model->id }},
+    value: {{ json_encode($model->$field) }},
+    original: {{ json_encode($model->$field) }},
+    editing: false
+  }"
+  @click.away="editing = false; value = original;">
+  <input x-cloak
+    x-ref="input"
+    x-show="editing"
+    x-model="value"
+    @keydown.enter="$wire.update(id, {
+      [field]: value
+    }); editing = false;"
+    @keydown.escape="editing = false; value = original;"
+    class="block appearance-none w-full bg-white border-gray-300 hover:border-gray-500 px-2 py-1 rounded focus:outline-none focus:bg-white focus:border-blue-600 focus:border-2 border">
+  <div x-show="!editing"
+    @click="editing = true; $nextTick(() => {$refs.input.focus()})"
+    x-html="value"
+    class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
+    {!! $model->$field !!}
+  </div>
 
 </div>

resources/views/list-view/list-item.blade.php

@@ -7,10 +7,10 @@
     </div>
     <div class="flex-1">
       <div class="text-sm font-medium text-gray-900">
-        {{ $title }}
+        {!! $title !!}
       </div>
       <div class="text-sm">
-        {{ $subtitle }}
+        {!! $subtitle !!}
       </div>
     </div>
     <x-lv-actions :actions="$actions" :model="$model" />

src/UI/UI.php

@@ -8,10 +8,10 @@ class UI
 {
     public function editable($model, $field)
     {
-        return view('laravel-views::components.editable', [
+        return $this->component('laravel-views::components.editable', [
             'model' => $model,
             'field' => $field
-        ])->render();
+        ]);
     }
 
     public function badge($title, $type = 'default')

src/Views/Traits/WithAlerts.php

@@ -2,6 +2,8 @@
 
 namespace LaravelViews\Views\Traits;
 
+use LaravelViews\Views\View;
+
 trait WithAlerts
 {
     public function success($message = null)
@@ -16,7 +18,7 @@ public function error($message = null)
 
     private function setMessage($type = 'success', $message = null)
     {
-        $view = $this->view ? $this->view : $view;
+        $view = $this->view && $this->view instanceof View ? $this->view : $this;
 
         $messages = [
             'success' => __('Action was executed successfully'),