Merge pull request #133 from tokens-studio/editing-tokens

:feat editing tokens

frontend/src/app/main/ui/workspace/tokens/context_menu.cljs

@@ -10,6 +10,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.data.events :as ev]
+   [app.main.data.modal :as modal]
    [app.main.data.shortcuts :as scd]
    [app.main.data.tokens :as dt]
    [app.main.data.workspace :as dw]
@@ -27,10 +28,20 @@
   (l/derived :token-context-menu refs/workspace-local))
 
 (mf/defc token-pill-context-menu
-  [{:keys [token-id]}]
-  (let [do-delete #(st/emit! (dt/delete-token token-id))
+  [{:keys [token-id token-type-props]}]
+  (let [{:keys [modal attributes title]} token-type-props
+        do-delete #(st/emit! (dt/delete-token token-id))
         do-duplicate #(st/emit! (dt/duplicate-token token-id))
-        do-edit #(js/console.log "Editing")]
+        do-edit (fn [event]
+                  (let [{:keys [key fields]} modal
+                        token (dt/get-token-data-from-token-id token-id)]
+                    (st/emit! dt/hide-token-context-menu)
+                    (dom/stop-propagation event)
+                    (modal/show! key {:x (.-clientX ^js event)
+                                      :y (.-clientY ^js event)
+                                      :position :right
+                                      :fields fields
+                                      :token token})))]
     [:*
      [:& menu-entry {:title "Delete Token" :on-click do-delete}]
      [:& menu-entry {:title "Duplicate Token" :on-click do-duplicate}]
@@ -64,4 +75,5 @@
             :on-context-menu prevent-default}
       (when  (= :token (:type mdata))
         [:ul {:class (stl/css :context-list)}
-         [:& token-pill-context-menu {:token-id (:token-id mdata)}]])]]))
+         [:& token-pill-context-menu {:token-id (:token-id mdata)
+                                      :token-type-props (:token-type-props mdata)}]])]]))

frontend/src/app/main/ui/workspace/tokens/modal.cljs

@@ -43,18 +43,24 @@
 
 (mf/defc tokens-properties-form
   {::mf/wrap-props false}
-  [{:keys [token-type x y position fields]}]
+  [{:keys [token-type x y position fields token]}]
   (let [vport (mf/deref viewport)
         style (calculate-position vport position x y)
 
-        name (mf/use-var nil)
+        name (mf/use-var (or (:name token) ""))
         on-update-name #(reset! name (dom/get-target-val %))
         name-ref (mf/use-ref)
 
-        description (mf/use-var nil)
+        token-value (mf/use-var (or (:value token) ""))
+
+        description (mf/use-var (or (:description token) ""))
         on-update-description #(reset! description (dom/get-target-val %))
 
-        state (mf/use-state fields)
+        initial-fields (mapv (fn [field]
+                               (assoc field :value (or (:value token) "")))
+                             fields)
+        state (mf/use-state initial-fields)
+
         on-update-state-field (fn [idx e]
                                 (->> (dom/get-target-val e)
                                      (assoc-in @state [idx :value])
@@ -66,9 +72,10 @@
                                           (first)
                                           (val))
                           token (cond-> {:name @name
-                                         :type token-type
+                                         :type (or (:type token) token-type)
                                          :value token-value}
-                                  @description (assoc :description @description))]
+                                  @description (assoc :description @description)
+                                  (:id token) (assoc :id (:id token)))]
                       (st/emit! (dt/add-token token))
                       (modal/hide!)))]
 
@@ -82,6 +89,7 @@
       :on-submit on-submit}
      [:div {:class (stl/css :token-rows)}
       [:& tokens.common/labeled-input {:label "Name"
+                                       :default-value @name
                                        :on-change on-update-name
                                        :input-ref name-ref}]
       (for [[idx {:keys [type label]}] (d/enumerate @state)]
@@ -89,8 +97,10 @@
          (case type
            :box-shadow [:p "TODO BOX SHADOW"]
            [:& tokens.common/labeled-input {:label label
+                                            :default-value @token-value
                                             :on-change #(on-update-state-field idx %)}])])
       [:& tokens.common/labeled-input {:label "Description"
+                                       :default-value @description
                                        :on-change #(on-update-description %)}]
       [:div {:class (stl/css :button-row)}
        [:button {:class (stl/css :button)

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

@@ -67,6 +67,7 @@
                            (dom/stop-propagation event)
                            (st/emit! (dt/show-token-context-menu {:type :token
                                                                   :position (dom/get-client-position event)
+                                                                  :token-type-props token-type-props
                                                                   :token-id (:id token)}))))
 
         on-toggle-open-click (mf/use-fn