From d57689a11eb2b05c2592d2703a7074c6ad7d0a0f Mon Sep 17 00:00:00 2001
From: Jade Geels <a@jgw.tf>
Date: Fri, 15 Mar 2024 11:53:51 +0000
Subject: [PATCH] Inline editing (#24)

---
 .../components/button/wishlist.blade.php      |  2 +-
 resources/views/partials/item/add.blade.php   |  2 +-
 resources/views/partials/item/title.blade.php | 31 +++++++++++++++++--
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/resources/views/components/button/wishlist.blade.php b/resources/views/components/button/wishlist.blade.php
index 2e15c53..5f5b679 100644
--- a/resources/views/components/button/wishlist.blade.php
+++ b/resources/views/components/button/wishlist.blade.php
@@ -1,7 +1,7 @@
 @props(['productId' => $product->entity_id ?? null])
 
 <toggler v-slot="{ isOpen, toggle, close }" v-cloak>
-    <wishlist v-slot="{ wishlists, toggleItem, findItem, addWishlist, isWishlisted }">
+    <wishlist v-slot="{ wishlists, toggleItem, findItem, addWishlist, isWishlisted, update }">
         <div v-on-click-away="close" {{ $attributes->class('w-full') }}>
             @include('rapidez-mw::partials.item.button')
             <div v-show="isOpen" v-cloak>
diff --git a/resources/views/partials/item/add.blade.php b/resources/views/partials/item/add.blade.php
index 2644250..639b423 100644
--- a/resources/views/partials/item/add.blade.php
+++ b/resources/views/partials/item/add.blade.php
@@ -1,4 +1,4 @@
-<div class="flex flex-col">
+<div class="flex flex-col overflow-hidden">
     @include('rapidez-mw::partials.item.title')
     @include('rapidez-mw::partials.item.view')
 </div>
diff --git a/resources/views/partials/item/title.blade.php b/resources/views/partials/item/title.blade.php
index 32a4a09..572a41d 100644
--- a/resources/views/partials/item/title.blade.php
+++ b/resources/views/partials/item/title.blade.php
@@ -1,3 +1,28 @@
-<span class="text-base text-ct-primary truncate">
-    @{{ wishlist.title }}
-</span>
\ No newline at end of file
+<toggler :callback="(opened) => {
+    if (opened) {
+        $root.$nextTick(() => $root.$refs['editing_' + wishlist.id]?.[0]?.focus())
+    } else {
+        update(wishlist.id, wishlist)
+    }
+}">
+    <div class="flex items-center" slot-scope="{ toggle, close, isOpen }">
+        <template v-if="!isOpen">
+            <span class="text-base text-ct-primary truncate peer place-self-start -mt-0.5">
+                @{{ wishlist.title }}
+            </span>
+            <x-heroicon-s-pencil-square
+                class="pl-2 w-6 h-4 cursor-pointer shrink-0 opacity-0 hover:opacity-100 peer-hover:opacity-50 transition-opacity"
+                v-on:click="toggle"
+            />
+        </template>
+        <template v-else>
+            <input
+                v-bind:ref="'editing_' + wishlist.id"
+                class="!font-[inherit] text-base text-ct-primary -mt-0.5 w-full !outline-none"
+                v-model.lazy="wishlist.title"
+                v-on-click-away="close"
+                v-on:keyup.enter="close"
+            />
+        </template>
+    </div>
+</toggler>