Add the ability to rename an image (on images dashboard page).

src/uxbox/main/data/images.cljs

@@ -234,30 +234,30 @@
 
 ;; --- Image Updated
 
-(defrecord ImageUpdated [id data]
+(defrecord ImagePersisted [id data]
   rs/UpdateEvent
   (-apply-update [_ state]
     (assoc-in state [:images id] data)))
 
-(defn image-updated
+(defn image-persisted
   [{:keys [id] :as data}]
-  {:pre [(map? data)]}
-  (ImageUpdated. id data))
+  {:pre [(map? data) (uuid? id)]}
+  (ImagePersisted. id data))
 
 ;; --- Update Image
 
-(defrecord UpdateImage [id]
+(defrecord PersistImage [id]
   rs/WatchEvent
   (-apply-watch [_ state stream]
     (let [image (get-in state [:images id])]
       (->> (rp/req :update/image image)
            (rx/map :payload)
-           (rx/map image-updated)))))
+           (rx/map image-persisted)))))
 
-(defn update-image
+(defn persist-image
   [id]
   {:pre [(uuid? id)]}
-  (UpdateImage. id))
+  (PersistImage. id))
 
 ;; --- Images Fetched
 
@@ -342,6 +342,22 @@
   {:pre [(uuid? id)]}
   (DeleteImage. id))
 
+;; --- Rename Image
+
+(defrecord RenameImage [id name]
+  rs/UpdateEvent
+  (-apply-update [_ state]
+    (assoc-in state [:images id :name] name))
+
+  rs/WatchEvent
+  (-apply-watch [_ state stream]
+    (rx/of (persist-image id))))
+
+(defn rename-image
+  [id name]
+  {:pre [(uuid? id) (string? name)]}
+  (RenameImage. id name))
+
 ;; --- Select image
 
 (defrecord SelectImage [id]
@@ -407,7 +423,7 @@
     (let [selected (get-in state [:dashboard :images :selected])]
       (rx/merge
        (->> (rx/from-coll selected)
-            (rx/map update-image))
+            (rx/map persist-image))
        (->> (rx/from-coll selected)
             (rx/map deselect-image))))))
 

src/uxbox/main/ui/dashboard/images.cljs

@@ -295,15 +295,32 @@
                                    :on-select on-copy))
            i/organize]])])))
 
-(mx/defc grid-item
-  [{:keys [id created-at] :as image} selected?]
+(mx/defcs grid-item
+  {:mixins [mx/static (mx/local)]}
+  [{:keys [rum/local] :as own}
+   {:keys [id created-at] :as image} selected?]
   (letfn [(toggle-selection [event]
             (rs/emit! (di/toggle-image-selection id)))
           (toggle-selection-shifted [event]
             (when (kbd/shift? event)
-              (toggle-selection event)))]
+              (toggle-selection event)))
+          (on-key-down [event]
+            (when (kbd/enter? event)
+              (on-blur event)))
+          (on-blur [event]
+            (let [target (dom/event->target event)
+                  name (dom/get-value target)
+                  id (:id image)]
+              (swap! local assoc :edition false)
+              (rs/emit! (di/rename-image id name))))
+          (on-edit [event]
+            (dom/stop-propagation event)
+            (dom/prevent-default event)
+            (swap! local assoc :edition true))]
+
     [:div.grid-item.images-th
-     {:on-click toggle-selection-shifted}
+     {:on-click toggle-selection-shifted
+      :on-double-click on-edit}
      [:div.grid-item-th
       {:style {:background-image (str "url('" (:thumbnail image) "')")}}
       [:div.input-checkbox.check-primary
@@ -313,7 +330,14 @@
                 :checked selected?}]
        [:label {:for (:id image)}]]]
      [:div.item-info
-      [:h3 (:name image)]
+      (if (:edition @local)
+        [:input {:type "text"
+                 :auto-focus true
+                 :on-key-down on-key-down
+                 :on-blur on-blur
+                 :on-click on-edit
+                 :default-value (:name image)}]
+        [:h3 (:name image)])
       [:span.date
        (str "Uploaded at " (dt/format created-at "L"))]]]))