github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-06 20:18:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Add minor refactor to dashboard export dialog components

Browse Source
This commit is contained in:
Andrey Antukh 2023-07-28 16:11:50 +02:00
parent 9d2fc63780
commit dcd428d3b2
1 changed files with 94 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
frontend/src/app/main/ui/dashboard/export.cljs
View File

@ -7,6 +7,7 @@
(ns app.main.ui.dashboard.export (ns app.main.ui.dashboard.export
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.features :as features] [app.main.features :as features]
[app.main.store :as st] [app.main.store :as st]
@ -20,8 +21,8 @@
(def ^:const options [:all :merge :detach]) (def ^:const options [:all :merge :detach])
(mf/defc export-entry (mf/defc export-entry
{::mf/wrap-props false}
[{:keys [file]}] [{:keys [file]}]
[:div.file-entry [:div.file-entry
{:class (dom/classnames {:class (dom/classnames
:loading (:loading? file) :loading (:loading? file)
@ -35,72 +36,89 @@
[:div.file-name-label (:name file)]]]) [:div.file-name-label (:name file)]]])
(defn mark-file-error [files file-id] (defn- mark-file-error
(->> files [files file-id]
(mapv #(cond-> % (mapv #(cond-> %
(= file-id (:id %)) (= file-id (:id %))
(assoc :export-error? true (assoc :export-error? true
:loading? false))))) :loading? false))
files))
(defn mark-file-success [files file-id] (defn- mark-file-success
(->> files [files file-id]
(mapv #(cond-> % (mapv #(cond-> %
(= file-id (:id %)) (= file-id (:id %))
(assoc :export-success? true (assoc :export-success? true
:loading? false))))) :loading? false))
files))
(def export-types
[:all :merge :detach])
(mf/defc export-dialog (mf/defc export-dialog
{::mf/register modal/components {::mf/register modal/components
::mf/register-as :export} ::mf/register-as :export
::mf/wrap-props false}
[{:keys [team-id files has-libraries? binary?]}] [{:keys [team-id files has-libraries? binary?]}]
(let [state (mf/use-state {:status :prepare (let [components-v2 (features/use-feature :components-v2)
:files (->> files (mapv #(assoc % :loading? true)))}) state* (mf/use-state
selected-option (mf/use-state :all) #(let [files (mapv (fn [file] (assoc file :loading? true)) files)]
{:status :prepare
:selected :all
:files files}))
components-v2 (features/use-feature :components-v2) state (deref state*)
selected (:selected state)
status (:status state)
start-export start-export
(fn [] (mf/use-fn
(swap! state assoc :status :exporting) (mf/deps team-id selected files components-v2)
(->> (uw/ask-many! (fn []
{:cmd (if binary? :export-binary-file :export-standard-file) (swap! state* assoc :status :exporting)
:team-id team-id (->> (uw/ask-many!
:export-type @selected-option {:cmd (if binary? :export-binary-file :export-standard-file)
:files files :team-id team-id
:components-v2 components-v2}) :export-type selected
(rx/delay-emit 1000) :files files
(rx/subs :components-v2 components-v2})
(fn [msg] (rx/delay-emit 1000)
(when (= :error (:type msg)) (rx/subs
(swap! state update :files mark-file-error (:file-id msg))) (fn [msg]
(cond
(= :error (:type msg))
(swap! state* update :files mark-file-error (:file-id msg))
(when (= :finish (:type msg)) (= :finish (:type msg))
(swap! state update :files mark-file-success (:file-id msg)) (do
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg))))))) (swap! state* update :files mark-file-success (:file-id msg))
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg)))))))))
cancel-fn on-cancel
(mf/use-callback (mf/use-fn
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(st/emit! (modal/hide)))) (st/emit! (modal/hide))))
accept-fn on-accept
(mf/use-callback (mf/use-fn
(mf/deps @selected-option) (mf/deps start-export)
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(start-export))) (start-export)))
on-change-handler on-change
(mf/use-callback (mf/use-fn
(fn [_ type] (fn [event]
(reset! selected-option type)))] (let [type (-> (dom/get-target event)
(dom/get-data "type")
(keyword))]
(swap! state* assoc :selected type))))]
(mf/use-effect (mf/with-effect [has-libraries?]
(fn [] ;; Start download automatically when no libraries
(when-not has-libraries? (when-not has-libraries?
;; Start download automatically (start-export)))
(start-export))))
[:div.modal-overlay [:div.modal-overlay
[:div.modal-container.export-dialog [:div.modal-container.export-dialog
@ -109,52 +127,53 @@
[:h2 (tr "dashboard.export.title")]] [:h2 (tr "dashboard.export.title")]]
[:div.modal-close-button [:div.modal-close-button
{:on-click cancel-fn} i/close]] {:on-click on-cancel} i/close]]
(cond (cond
(= (:status @state) :prepare) (= status :prepare)
[:* [:*
[:div.modal-content [:div.modal-content
[:p.explain (tr "dashboard.export.explain")] [:p.explain (tr "dashboard.export.explain")]
[:p.detail (tr "dashboard.export.detail")] [:p.detail (tr "dashboard.export.detail")]
(for [type [:all :merge :detach]] (for [type export-types]
(let [selected? (= @selected-option type)] [:div.export-option {:class (when (= selected type) "selected")
[:div.export-option {:class (when selected? "selected")} :key (name type)}
[:label.option-container [:label.option-container
;; Execution time translation strings: ;; Execution time translation strings:
;; dashboard.export.options.all.message ;; dashboard.export.options.all.message
;; dashboard.export.options.all.title ;; dashboard.export.options.all.title
;; dashboard.export.options.detach.message ;; dashboard.export.options.detach.message
;; dashboard.export.options.detach.title ;; dashboard.export.options.detach.title
;; dashboard.export.options.merge.message ;; dashboard.export.options.merge.message
;; dashboard.export.options.merge.title ;; dashboard.export.options.merge.title
[:h3 (tr (str "dashboard.export.options." (d/name type) ".title"))] [:h3 (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
[:p (tr (str "dashboard.export.options." (d/name type) ".message"))] [:p (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]
[:input {:type "radio" [:input {:type "radio"
:checked selected? :checked (= selected type)
:on-change #(on-change-handler % type) :data-type (name type)
:name "export-option"}] :on-change on-change
[:span {:class "option-radio-check"}]]]))] :name "export-option"}]
[:span {:class "option-radio-check"}]]])]
[:div.modal-footer [:div.modal-footer
[:div.action-buttons [:div.action-buttons
[:input.cancel-button [:input.cancel-button
{:type "button" {:type "button"
:value (tr "labels.cancel") :value (tr "labels.cancel")
:on-click cancel-fn}] :on-click on-cancel}]
[:input.accept-button [:input.accept-button
{:class "primary" {:class "primary"
:type "button" :type "button"
:value (tr "labels.continue") :value (tr "labels.continue")
:on-click accept-fn}]]]] :on-click on-accept}]]]]
(= (:status @state) :exporting) (= status :exporting)
[:* [:*
[:div.modal-content [:div.modal-content
(for [file (:files @state)] (for [file (:files state)]
[:& export-entry {:file file}])] [:& export-entry {:file file :key (dm/str (:id file))}])]
[:div.modal-footer [:div.modal-footer
[:div.action-buttons [:div.action-buttons
@ -162,5 +181,5 @@
{:class "primary" {:class "primary"
:type "button" :type "button"
:value (tr "labels.close") :value (tr "labels.close")
:disabled (->> @state :files (some :loading?)) :disabled (->> state :files (some :loading?))
:on-click cancel-fn}]]]])]])) :on-click on-cancel}]]]])]]))