diff --git a/src/uxbox/main/data/images.cljs b/src/uxbox/main/data/images.cljs index c1d238e41..c606706ce 100644 --- a/src/uxbox/main/data/images.cljs +++ b/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)))))) diff --git a/src/uxbox/main/ui/dashboard/images.cljs b/src/uxbox/main/ui/dashboard/images.cljs index dc293ad0f..404bfc50f 100644 --- a/src/uxbox/main/ui/dashboard/images.cljs +++ b/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"))]]]))