mirror of
https://github.com/penpot/penpot.git
synced 2025-05-19 16:06:11 +02:00
✨ Changed export modal progress
This commit is contained in:
alonso.torres
parent
60009476d6
commit
84cf63d1ba
7 changed files with 132 additions and 60 deletions
|
|
@ -11,6 +11,7 @@
|
|||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.worker :as uw]
|
||||
[app.util.data :refer [classnames]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[beicon.core :as rx]
|
||||
|
|
@ -18,12 +19,60 @@
|
|||
|
||||
(def ^:const options [:all :merge :detach])
|
||||
|
||||
(mf/defc export-entry
|
||||
[{:keys [file]}]
|
||||
|
||||
[:div.file-entry
|
||||
{:class (classnames :loading (:loading? file)
|
||||
:success (:export-success? file)
|
||||
:error (:export-error? file))}
|
||||
[:div.file-name
|
||||
[:div.file-icon
|
||||
(cond (:export-success? file) i/tick
|
||||
(:export-error? file) i/close
|
||||
(:loading? file) i/loader-pencil)]
|
||||
|
||||
[:div.file-name-label (:name file)]]])
|
||||
|
||||
(defn mark-file-error [files file-id]
|
||||
(->> files
|
||||
(mapv #(cond-> %
|
||||
(= file-id (:id %))
|
||||
(assoc :export-error? true
|
||||
:loading? false)))))
|
||||
|
||||
(defn mark-file-success [files file-id]
|
||||
(->> files
|
||||
(mapv #(cond-> %
|
||||
(= file-id (:id %))
|
||||
(assoc :export-success? true
|
||||
:loading? false)))))
|
||||
|
||||
(mf/defc export-dialog
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :export}
|
||||
[{:keys [team-id files]}]
|
||||
(let [selected-option (mf/use-state :all)
|
||||
[{:keys [team-id files has-libraries?]}]
|
||||
(let [state (mf/use-state {:status :prepare
|
||||
:files (->> files (mapv #(assoc % :loading? true)))})
|
||||
selected-option (mf/use-state :all)
|
||||
|
||||
start-export
|
||||
(fn []
|
||||
(swap! state assoc :status :exporting)
|
||||
(->> (uw/ask-many!
|
||||
{:cmd :export-file
|
||||
:team-id team-id
|
||||
:export-type @selected-option
|
||||
:files (->> files (mapv :id))})
|
||||
(rx/delay-emit 1000)
|
||||
(rx/subs
|
||||
(fn [msg]
|
||||
(when (= :error (:type msg))
|
||||
(swap! state update :files mark-file-error (:file-id msg)))
|
||||
|
||||
(when (= :finish (:type msg))
|
||||
(swap! state update :files mark-file-success (:file-id msg))
|
||||
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg)))))))
|
||||
cancel-fn
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
|
|
@ -35,24 +84,19 @@
|
|||
(mf/deps @selected-option)
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
|
||||
(->> (uw/ask-many!
|
||||
{:cmd :export-file
|
||||
:team-id team-id
|
||||
:export-type @selected-option
|
||||
:files files})
|
||||
(rx/subs
|
||||
(fn [msg]
|
||||
(when (= :finish (:type msg))
|
||||
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg))))))
|
||||
|
||||
(st/emit! (modal/hide))))
|
||||
(start-export)))
|
||||
|
||||
on-change-handler
|
||||
(mf/use-callback
|
||||
(fn [_ type]
|
||||
(reset! selected-option type)))]
|
||||
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(when-not has-libraries?
|
||||
;; Start download automaticaly
|
||||
(start-export))))
|
||||
|
||||
[:div.modal-overlay
|
||||
[:div.modal-container.export-dialog
|
||||
[:div.modal-header
|
||||
|
|
@ -62,31 +106,49 @@
|
|||
[:div.modal-close-button
|
||||
{:on-click cancel-fn} i/close]]
|
||||
|
||||
[:div.modal-content
|
||||
[:p.explain (tr "dashboard.export.explain")]
|
||||
[:p.detail (tr "dashboard.export.detail")]
|
||||
(cond
|
||||
(= (:status @state) :prepare)
|
||||
[:*
|
||||
[:div.modal-content
|
||||
[:p.explain (tr "dashboard.export.explain")]
|
||||
[:p.detail (tr "dashboard.export.detail")]
|
||||
|
||||
(for [type [:all :merge :detach]]
|
||||
(let [selected? (= @selected-option type)]
|
||||
[:div.export-option {:class (when selected? "selected")}
|
||||
[:label.option-container
|
||||
[:h3 (tr (str "dashboard.export.options." (d/name type) ".title"))]
|
||||
[:p (tr (str "dashboard.export.options." (d/name type) ".message"))]
|
||||
[:input {:type "radio"
|
||||
:checked selected?
|
||||
:on-change #(on-change-handler % type)
|
||||
:name "export-option"}]
|
||||
[:span {:class "option-radio-check"}]]]))]
|
||||
(for [type [:all :merge :detach]]
|
||||
(let [selected? (= @selected-option type)]
|
||||
[:div.export-option {:class (when selected? "selected")}
|
||||
[:label.option-container
|
||||
[:h3 (tr (str "dashboard.export.options." (d/name type) ".title"))]
|
||||
[:p (tr (str "dashboard.export.options." (d/name type) ".message"))]
|
||||
[:input {:type "radio"
|
||||
:checked selected?
|
||||
:on-change #(on-change-handler % type)
|
||||
:name "export-option"}]
|
||||
[:span {:class "option-radio-check"}]]]))]
|
||||
|
||||
[:div.modal-footer
|
||||
[:div.action-buttons
|
||||
[:input.cancel-button
|
||||
{:type "button"
|
||||
:value (tr "labels.cancel")
|
||||
:on-click cancel-fn}]
|
||||
[:div.modal-footer
|
||||
[:div.action-buttons
|
||||
[:input.cancel-button
|
||||
{:type "button"
|
||||
:value (tr "labels.cancel")
|
||||
:on-click cancel-fn}]
|
||||
|
||||
[:input.accept-button
|
||||
{:class "primary"
|
||||
:type "button"
|
||||
:value (tr "labels.export")
|
||||
:on-click accept-fn}]]]]]))
|
||||
[:input.accept-button
|
||||
{:class "primary"
|
||||
:type "button"
|
||||
:value (tr "labels.continue")
|
||||
:on-click accept-fn}]]]]
|
||||
|
||||
(= (:status @state) :exporting)
|
||||
[:*
|
||||
[:div.modal-content
|
||||
(for [file (:files @state)]
|
||||
[:& export-entry {:file file}])]
|
||||
|
||||
[:div.modal-footer
|
||||
[:div.action-buttons
|
||||
[:input.accept-button
|
||||
{:class "primary"
|
||||
:type "button"
|
||||
:value (tr "labels.close")
|
||||
:disabled (->> @state :files (some :loading?))
|
||||
:on-click cancel-fn}]]]])]]))
|
||||
|
|
|
|||
|
|
@ -171,7 +171,8 @@
|
|||
(modal/show
|
||||
{:type :export
|
||||
:team-id current-team-id
|
||||
:files (->> files (mapv :id))})))))))]
|
||||
:has-libraries? (->> files (some :has-libraries?))
|
||||
:files files})))))))]
|
||||
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@
|
|||
(modal/show
|
||||
{:type :export
|
||||
:team-id team-id
|
||||
:files (->> files (mapv :id))})))))))]
|
||||
:files files})))))))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps @editing?)
|
||||
|
|
|
|||
|
|
@ -450,14 +450,22 @@
|
|||
[{:keys [team-id files export-type] :as message}]
|
||||
|
||||
(->> (rx/from files)
|
||||
(rx/mapcat #(export-file team-id % export-type))
|
||||
(rx/map
|
||||
(fn [value]
|
||||
(if (contains? value :type)
|
||||
value
|
||||
(let [[file export-blob] value]
|
||||
{:type :finish
|
||||
:filename (:name file)
|
||||
:mtype "application/penpot"
|
||||
:description "Penpot export (*.penpot)"
|
||||
:uri (dom/create-uri export-blob)}))))))
|
||||
(rx/mapcat
|
||||
(fn [file]
|
||||
(->> (export-file team-id file export-type)
|
||||
(rx/map
|
||||
(fn [value]
|
||||
(if (contains? value :type)
|
||||
value
|
||||
(let [[file export-blob] value]
|
||||
{:type :finish
|
||||
:file-id (:id file)
|
||||
:filename (:name file)
|
||||
:mtype "application/penpot"
|
||||
:description "Penpot export (*.penpot)"
|
||||
:uri (dom/create-uri export-blob)}))))
|
||||
(rx/catch
|
||||
(fn [err]
|
||||
(rx/of {:type :error
|
||||
:error (str err)
|
||||
:file-id file}))))))))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue