✨ Rename graphic assets

backend/src/app/services/mutations/media.clj

@@ -47,20 +47,20 @@
 
 (s/def ::add-media-object-from-url
   (s/keys :req-un [::profile-id ::file-id ::is-local ::url]
-          :opt-un [::id]))
+          :opt-un [::id ::name]))
 
 (s/def ::upload-media-object
   (s/keys :req-un [::profile-id ::file-id ::is-local ::name ::content]
           :opt-un [::id]))
 
 (sm/defmutation ::add-media-object-from-url
-  [{:keys [profile-id file-id url] :as params}]
+  [{:keys [profile-id file-id url name] :as params}]
   (db/with-atomic [conn db/pool]
     (let [file (select-file-for-update conn file-id)]
       (teams/check-edition-permissions! conn profile-id (:team-id file))
       (let [content (media/download-media-object url)
             params' (merge params {:content content
-                                   :name (:filename content)})]
+                                   :name (or name (:filename content))})]
         (create-media-object conn params')))))
 
 (sm/defmutation ::upload-media-object

common/app/common/pages.cljc

@@ -416,6 +416,15 @@
                    :internal.media-object/mtype
                    :internal.media-object/thumb-path]))
 
+(s/def ::media-object-update
+  (s/keys :req-un  [::id]
+          :req-opt [::name
+                    :internal.media-object/name
+                    :internal.media-object/path
+                    :internal.media-object/width
+                    :internal.media-object/height
+                    :internal.media-object/mtype
+                    :internal.media-object/thumb-path]))
 
 (s/def :internal.file/colors
   (s/map-of ::uuid ::color))
@@ -576,8 +585,10 @@
 (defmethod change-spec :add-media [_]
   (s/keys :req-un [:internal.changes.media/object]))
 
+(s/def :internal.changes.media.mod/object ::media-object-update)
+
 (defmethod change-spec :mod-media [_]
-  (s/keys :req-un [:internal.changes.media/object]))
+  (s/keys :req-un [:internal.changes.media.mod/object]))
 
 (defmethod change-spec :del-media [_]
   (s/keys :req-un [::id]))

frontend/src/app/main/data/workspace/libraries.cljs

@@ -115,6 +115,24 @@
                   :id id}]
         (rx/of (dwc/commit-changes [rchg] [uchg] {:commit-local? true}))))))
 
+(defn rename-media
+  [id new-name]
+  (us/assert ::us/uuid id)
+  (us/assert ::us/string new-name)
+  (ptk/reify ::rename-media
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (let [object (get-in state [:workspace-data :media id])
+
+            rchanges [{:type :mod-media
+                       :object {:id id
+                                :name new-name}}]
+
+            uchanges [{:type :mod-media
+                       :object {:id id
+                                :name (:name object)}}]]
+
+        (rx/of (dwc/commit-changes rchanges uchanges {:commit-local? true}))))))
 
 (defn delete-media
   [{:keys [id] :as params}]

frontend/src/app/main/data/workspace/persistence.cljs

@@ -350,7 +350,7 @@
           :opt-un [::uri ::di/js-files]))
 
 (defn upload-media-objects
-  [{:keys [file-id local? js-files uri] :as params}]
+  [{:keys [file-id local? js-files uri name] :as params}]
   (us/assert ::upload-media-objects-params params)
    (ptk/reify ::upload-media-objects
      ptk/WatchEvent
@@ -370,7 +370,8 @@
              (fn [uri]
                {:file-id file-id
                 :is-local local?
-                :url uri})]
+                :url uri
+                :name name})]
 
          (rx/concat
           (rx/of (dm/show {:content (tr "media.loading")

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -143,6 +143,7 @@
   [{:keys [file-id local? objects open? on-open on-close] :as props}]
   (let [input-ref  (mf/use-ref nil)
         state      (mf/use-state {:menu-open false
+                                  :renaming nil
                                   :top nil
                                   :left nil
                                   :object-id nil})
@@ -176,6 +177,25 @@
            (let [params {:id (:object-id @state)}]
              (st/emit! (dwl/delete-media params)))))
 
+        on-rename
+        (mf/use-callback
+          (mf/deps state)
+          (fn []
+            (swap! state assoc :renaming (:object-id @state))))
+
+        cancel-rename
+        (mf/use-callback
+          (mf/deps state)
+          (fn []
+            (swap! state assoc :renaming nil)))
+
+        do-rename
+        (mf/use-callback
+          (mf/deps state)
+          (fn [new-name]
+            (st/emit! (dwl/rename-media (:renaming @state) new-name))
+            (swap! state assoc :renaming nil)))
+
         on-context-menu
         (mf/use-callback
          (fn [object-id]
@@ -192,8 +212,9 @@
 
         on-drag-start
         (mf/use-callback
-         (fn [path event]
+         (fn [path name event]
            (dnd/set-data! event "text/uri-list" (cfg/resolve-media-path path))
+           (dnd/set-data! event "text/asset-name" name)
            (dnd/set-allowed-effect! event "move")))]
 
     [:div.asset-group
@@ -213,10 +234,21 @@
           [:div.grid-cell {:key (:id object)
                            :draggable true
                            :on-context-menu (on-context-menu (:id object))
-                           :on-drag-start (partial on-drag-start (:path object))}
+                           :on-drag-start (partial on-drag-start (:path object) (:name object))}
            [:img {:src (cfg/resolve-media-path (:thumb-path object))
                   :draggable false}] ;; Also need to add css pointer-events: none
-           [:div.cell-name (:name object)]])
+
+           #_[:div.cell-name (:name object)]
+           (let [renaming? (= (:renaming @state) (:id object))]
+             [:& editable-label
+              {:class-name (dom/classnames
+                            :cell-name true
+                            :editing renaming?)
+               :value (:name object)
+               :editing? renaming?
+               :disable-dbl-click? true
+               :on-change do-rename
+               :on-cancel cancel-rename}])])
 
         (when local?
           [:& context-menu
@@ -225,7 +257,8 @@
             :on-close #(swap! state assoc :menu-open false)
             :top (:top @state)
             :left (:left @state)
-            :options [[(tr "workspace.assets.delete") on-delete]]}])])]))
+            :options [[(tr "workspace.assets.rename") on-rename]
+                      [(tr "workspace.assets.delete") on-delete]]}])])]))
 
 (mf/defc color-item
   [{:keys [color local? locale] :as props}]

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -452,6 +452,7 @@
 
               (dnd/has-type? event "text/uri-list")
               (let [data (dnd/get-data event "text/uri-list")
+                    name (dnd/get-data event "text/asset-name")
                     lines (str/lines data)
                     urls (filter #(and (not (str/blank? %))
                                        (not (str/starts-with? % "#")))
@@ -460,7 +461,8 @@
                      (map (fn [uri]
                             (with-meta {:file-id (:id file)
                                         :local? true
-                                        :uri uri}
+                                        :uri uri
+                                        :name name}
                               {:on-success #(on-uploaded % viewport-coord)})))
                      (map dw/upload-media-objects)
                      (apply st/emit!)))