mirror of
https://github.com/penpot/penpot.git
synced 2025-03-20 19:51:23 -05:00
♻️ Refactor images dashboard and common dashboard grid header.
This commit is contained in:
Andrey Antukh
parent
7a88558706
commit
c948082e0a
5 changed files with 351 additions and 412 deletions
|
|
@ -59,27 +59,14 @@
|
|||
|
||||
;; --- Initialize
|
||||
|
||||
(declare fetch-images)
|
||||
(declare fetch-collections)
|
||||
(declare collections-fetched?)
|
||||
|
||||
(defrecord Initialize [type id]
|
||||
(defrecord Initialize []
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [type (or type :own)
|
||||
data {:type type :id id :selected #{}}]
|
||||
(-> state
|
||||
(assoc-in [:dashboard :images] data)
|
||||
(assoc-in [:dashboard :section] :dashboard/images))))
|
||||
|
||||
ptk/WatchEvent
|
||||
(watch [_ state s]
|
||||
(rx/merge (rx/of (fetch-collections))
|
||||
(rx/of (fetch-images id)))))
|
||||
(assoc-in state [:dashboard :images] {:selected #{}})))
|
||||
|
||||
(defn initialize
|
||||
[type id]
|
||||
(Initialize. type id))
|
||||
[]
|
||||
(Initialize.))
|
||||
|
||||
;; --- Color Collections Fetched
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
|
||||
(defmethod request :copy/image
|
||||
[_ {:keys [id collection] :as body}]
|
||||
(let [params {:url (str url "/library/images/copy")
|
||||
(let [params {:url (str url "/library/images/" id "/copy")
|
||||
:method :put
|
||||
:body body}]
|
||||
(send! params)))
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.colors :as dc]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.dashboard.common :as common]
|
||||
[uxbox.main.ui.colorpicker :refer [colorpicker]]
|
||||
[uxbox.main.ui.confirm :refer [confirm-dialog]]
|
||||
[uxbox.main.ui.keyboard :as k]
|
||||
|
|
@ -51,55 +52,22 @@
|
|||
|
||||
;; --- Page Title
|
||||
|
||||
(mf/defc page-title
|
||||
[{:keys [coll] :as props}]
|
||||
(let [edit? (mf/use-state false)
|
||||
input (mf/use-ref* nil)
|
||||
own? (= :own (:type coll))]
|
||||
(letfn [(save []
|
||||
(let [dom (mf/ref-node input)
|
||||
name (dom/get-inner-text dom)
|
||||
id (:id coll)]
|
||||
(st/emit! (dc/rename-collection id (str/trim name)))
|
||||
(reset! edit? false)))
|
||||
(cancel []
|
||||
(reset! edit? false))
|
||||
(edit []
|
||||
(reset! edit? true))
|
||||
(on-input-keydown [e]
|
||||
(cond
|
||||
(k/esc? e) (cancel)
|
||||
(k/enter? e)
|
||||
(do
|
||||
(dom/prevent-default e)
|
||||
(dom/stop-propagation e)
|
||||
(save))))
|
||||
(delete []
|
||||
(st/emit! (dc/delete-collection (:id coll))
|
||||
(rt/nav :dashboard/colors nil {:type (:type coll)})))
|
||||
|
||||
(on-delete []
|
||||
(modal/show! confirm-dialog {:on-accept delete}))]
|
||||
[:div.dashboard-title
|
||||
[:h2
|
||||
(if @edit?
|
||||
[:div.dashboard-title-field
|
||||
[:span.edit {:content-editable true
|
||||
:ref input
|
||||
:on-key-down on-input-keydown
|
||||
:dangerouslySetInnerHTML {"__html" (:name coll)}}]
|
||||
[:span.close {:on-click cancel} i/close]]
|
||||
(if own?
|
||||
[:span.dashboard-title-field {:on-double-click edit}
|
||||
(:name coll)]
|
||||
[:span.dashboard-title-field
|
||||
(:name coll)]))]
|
||||
(when (and own? coll)
|
||||
[:div.edition
|
||||
(if @edit?
|
||||
[:span {:on-click save} i/save]
|
||||
[:span {:on-click edit} i/pencil])
|
||||
[:span {:on-click on-delete} i/trash]])])))
|
||||
(mf/defc grid-header
|
||||
[{:keys [coll] :as props}]
|
||||
(letfn [(on-change [name]
|
||||
(st/emit! (dc/rename-collection (:id coll) name)))
|
||||
|
||||
(delete []
|
||||
(st/emit!
|
||||
(dc/delete-collection (:id coll))
|
||||
(rt/nav :dashboard/colors nil {:type (:type coll)})))
|
||||
|
||||
(on-delete []
|
||||
(modal/show! confirm-dialog {:on-accept delete}))]
|
||||
[:& common/grid-header {:value (:name coll)
|
||||
:on-change on-change
|
||||
:on-delete on-delete}]))
|
||||
|
||||
;; --- Nav
|
||||
|
||||
|
|
@ -291,7 +259,7 @@
|
|||
[{:keys [id type coll] :as props}]
|
||||
(let [selected (mf/deref selected-colors-iref)]
|
||||
[:section.dashboard-grid.library
|
||||
[:& page-title {:coll coll}]
|
||||
[:& grid-header {:coll coll}]
|
||||
[:& grid {:coll coll :id id :type type :selected selected}]
|
||||
(when (seq selected)
|
||||
[:& grid-options {:id id :type type
|
||||
|
|
|
|||
58
frontend/src/uxbox/main/ui/dashboard/common.cljs
Normal file
58
frontend/src/uxbox/main/ui/dashboard/common.cljs
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) 2019 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.ui.dashboard.common
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.ui.keyboard :as k]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :as t :refer [tr]]))
|
||||
|
||||
;; --- Page Title
|
||||
|
||||
(mf/defc grid-header
|
||||
[{:keys [on-change on-delete value read-only?] :as props}]
|
||||
(let [edit? (mf/use-state false)
|
||||
input (mf/use-ref* nil)]
|
||||
(letfn [(save []
|
||||
(let [new-value (-> (mf/ref-node input)
|
||||
(dom/get-inner-text)
|
||||
(str/trim))]
|
||||
(on-change new-value)
|
||||
(reset! edit? false)))
|
||||
(cancel []
|
||||
(reset! edit? false))
|
||||
(edit []
|
||||
(reset! edit? true))
|
||||
(on-input-keydown [e]
|
||||
(cond
|
||||
(k/esc? e) (cancel)
|
||||
(k/enter? e)
|
||||
(do
|
||||
(dom/prevent-default e)
|
||||
(dom/stop-propagation e)
|
||||
(save))))]
|
||||
[:div.dashboard-title
|
||||
[:h2
|
||||
(if @edit?
|
||||
[:div.dashboard-title-field
|
||||
[:span.edit {:content-editable true
|
||||
:ref input
|
||||
:on-key-down on-input-keydown
|
||||
:dangerouslySetInnerHTML {"__html" value}}]
|
||||
[:span.close {:on-click cancel} i/close]]
|
||||
(if-not read-only?
|
||||
[:span.dashboard-title-field {:on-double-click edit} value]
|
||||
[:span.dashboard-title-field value]))]
|
||||
(when-not read-only?
|
||||
[:div.edition
|
||||
(if @edit?
|
||||
[:span {:on-click save} i/save]
|
||||
[:span {:on-click edit} i/pencil])
|
||||
[:span {:on-click on-delete} i/trash]])])))
|
||||
|
||||
|
|
@ -16,9 +16,12 @@
|
|||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.dashboard.header :refer [header]]
|
||||
[uxbox.main.ui.dashboard.common :as common]
|
||||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.util.data :refer [read-string jscoll->vec]]
|
||||
[uxbox.main.ui.confirm :refer [confirm-dialog]]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.util.data :refer [read-string jscoll->vec seek]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :as t :refer [tr]]
|
||||
[uxbox.util.router :as rt]
|
||||
|
|
@ -60,95 +63,59 @@
|
|||
|
||||
;; --- Page Title
|
||||
|
||||
(mf/def page-title
|
||||
:mixins [(mf/local) mf/reactive]
|
||||
(mf/defc grid-header
|
||||
[{:keys [coll] :as props}]
|
||||
(letfn [(on-change [name]
|
||||
(st/emit! (di/rename-collection (:id coll) name)))
|
||||
|
||||
:render
|
||||
(fn [{:keys [::mf/local] :as own}
|
||||
{:keys [id type] :as coll}]
|
||||
(let [own? (= :own (:type coll))
|
||||
edit? (:edit @local)]
|
||||
(letfn [(on-save [e]
|
||||
(let [dom (mx/ref-node own "input")
|
||||
name (dom/get-inner-text dom)]
|
||||
(st/emit! (di/rename-collection id (str/trim name)))
|
||||
(swap! local assoc :edit false)))
|
||||
(on-cancel [e]
|
||||
(swap! local assoc :edit false))
|
||||
(on-edit [e]
|
||||
(swap! local assoc :edit true))
|
||||
(on-input-keydown [e]
|
||||
(cond
|
||||
(kbd/esc? e) (on-cancel e)
|
||||
(kbd/enter? e)
|
||||
(do
|
||||
(dom/prevent-default e)
|
||||
(dom/stop-propagation e)
|
||||
(on-save e))))
|
||||
(delete []
|
||||
(st/emit! (di/delete-collection id)))
|
||||
(on-delete []
|
||||
(udl/open! :confirm {:on-accept delete}))]
|
||||
[:div.dashboard-title
|
||||
[:h2
|
||||
(if edit?
|
||||
[:div.dashboard-title-field
|
||||
[:span.edit
|
||||
{:content-editable true
|
||||
:ref "input"
|
||||
:on-key-down on-input-keydown}
|
||||
(:name coll)]
|
||||
[:span.close {:on-click on-cancel} i/close]]
|
||||
(if own?
|
||||
[:span.dashboard-title-field
|
||||
{:on-double-click on-edit}
|
||||
(:name coll)]
|
||||
[:span.dashboard-title-field
|
||||
(:name coll "Storage")]))]
|
||||
(when (and own? coll)
|
||||
[:div.edition
|
||||
(if edit?
|
||||
[:span {:on-click on-save} ^:inline i/save]
|
||||
[:span {:on-click on-edit} ^:inline i/pencil])
|
||||
[:span {:on-click on-delete} ^:inline i/trash]])]))))
|
||||
(delete []
|
||||
(st/emit!
|
||||
(di/delete-collection (:id coll))
|
||||
(rt/nav :dashboard/mages nil {:type (:type coll)})))
|
||||
|
||||
(on-delete []
|
||||
(modal/show! confirm-dialog {:on-accept delete}))]
|
||||
[:& common/grid-header {:value (:name coll)
|
||||
:on-change on-change
|
||||
:on-delete on-delete}]))
|
||||
|
||||
;; --- Nav
|
||||
|
||||
(defn num-images-ref
|
||||
(defn- make-num-images-iref
|
||||
[id]
|
||||
(let [selector (fn [images] (count (filter #(= id (:collection %)) (vals images))))]
|
||||
(letfn [(selector [images]
|
||||
(->> (vals images)
|
||||
(filter #(= id (:collection %)))
|
||||
(count)))]
|
||||
(-> (comp (l/key :images)
|
||||
(l/lens selector))
|
||||
(l/derive st/state))))
|
||||
|
||||
(mf/def nav-item
|
||||
:key-fn :id
|
||||
:mixins [(mf/local) mf/memo mf/reactive]
|
||||
|
||||
:init
|
||||
(fn [own {:keys [id] :as props}]
|
||||
(assoc own ::num-images-ref (num-images-ref id)))
|
||||
|
||||
:render
|
||||
(fn [{:keys [::mf/local] :as own}
|
||||
{:keys [id type name num-images selected?] :as coll}]
|
||||
(mf/defc nav-item
|
||||
[{:keys [coll selected?] :as props}]
|
||||
(let [local (mf/use-state {})
|
||||
{:keys [id type name num-images]} coll
|
||||
;; TODO: recalculate the num-images on crud operations for
|
||||
;; avod doing this on UI.
|
||||
num-images-iref (mf/use-memo {:deps #js [id]
|
||||
:init #(make-num-images-iref (:id coll))})
|
||||
num-images (mf/deref num-images-iref)
|
||||
editable? (= type :own)]
|
||||
(letfn [(on-click [event]
|
||||
(let [type (or type :own)]
|
||||
(st/emit! (rt/nav :dashboard/images {} {:type type :id id}))))
|
||||
(on-input-change [event]
|
||||
(let [value (dom/get-target event)
|
||||
value (dom/get-value value)]
|
||||
(swap! local assoc :name value)))
|
||||
(let [type (or type :own)]
|
||||
(st/emit! (rt/nav :dashboard/images {} {:type type :id id}))))
|
||||
(on-input-change [event]
|
||||
(-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(swap! local assoc :name)))
|
||||
(on-cancel [event]
|
||||
(swap! local dissoc :name)
|
||||
(swap! local dissoc :edit))
|
||||
(swap! local dissoc :name :edit))
|
||||
(on-double-click [event]
|
||||
(when (= type :own)
|
||||
(when editable?
|
||||
(swap! local assoc :edit true)))
|
||||
(on-input-keyup [event]
|
||||
(when (kbd/enter? event)
|
||||
(let [value (dom/get-target event)
|
||||
value (dom/get-value value)]
|
||||
(let [value (-> (dom/get-target event) (dom/get-value))]
|
||||
(st/emit! (di/rename-collection id (str/trim (:name @local))))
|
||||
(swap! local assoc :edit false))))]
|
||||
[:li {:on-click on-click
|
||||
|
|
@ -156,118 +123,70 @@
|
|||
:class-name (when selected? "current")}
|
||||
(if (:edit @local)
|
||||
[:div
|
||||
[:input.element-title
|
||||
{:value (if (:name @local) (:name @local) (if id name "Storage"))
|
||||
:on-change on-input-change
|
||||
:on-key-down on-input-keyup}]
|
||||
[:span.close {:on-click on-cancel} ^:inline i/close]]
|
||||
[:span.element-title {}
|
||||
(if id name "Storage")])
|
||||
[:span.element-subtitle
|
||||
(tr "ds.num-elements" (t/c (or num-images (mf/react (::num-images-ref own)))))]])))
|
||||
[:input.element-title {:value (if (:name @local)
|
||||
(:name @local)
|
||||
(if id name "Storage"))
|
||||
:on-change on-input-change
|
||||
:on-key-down on-input-keyup}]
|
||||
[:span.close {:on-click on-cancel} i/close]]
|
||||
[:span.element-title (if id name "Storage")])
|
||||
[:span.element-subtitle (tr "ds.num-elements" (t/c num-images))]])))
|
||||
|
||||
(mf/def nav
|
||||
:mixins [mf/memo mf/reactive]
|
||||
(mf/defc nav
|
||||
[{:keys [id type colls selected-coll] :as props}]
|
||||
(let [own? (= type :own)
|
||||
builtin? (= type :builtin)
|
||||
select-tab #(st/emit! (rt/nav :dashboard/images nil {:type %}))]
|
||||
[:div.library-bar
|
||||
[:div.library-bar-inside
|
||||
[:ul.library-tabs
|
||||
[:li {:class-name (when own? "current")
|
||||
:on-click (partial select-tab :own)}
|
||||
(tr "ds.your-images-title")]
|
||||
[:li {:class-name (when builtin? "current")
|
||||
:on-click (partial select-tab :builtin)}
|
||||
(tr "ds.store-images-title")]]
|
||||
|
||||
:render
|
||||
(fn [own {:keys [id type] :as props}]
|
||||
(let [own? (= type :own)
|
||||
builtin? (= type :builtin)
|
||||
colls (mf/react collections-ref)
|
||||
select-tab (fn [type]
|
||||
(if-let [coll (->> (vals colls)
|
||||
(filter #(= type (:type %)))
|
||||
(sort-by :created-at)
|
||||
(first))]
|
||||
(st/emit! (rt/nav :dashboard/images nil {:type type :id (:id coll)}))
|
||||
(st/emit! (rt/nav :dashboard/images nil {:type type}))))]
|
||||
|
||||
[:div.library-bar
|
||||
[:div.library-bar-inside
|
||||
[:ul.library-tabs
|
||||
[:li {:class-name (when own? "current")
|
||||
:on-click (partial select-tab :own)}
|
||||
(tr "ds.your-images-title")]
|
||||
[:li {:class-name (when builtin? "current")
|
||||
:on-click (partial select-tab :builtin)}
|
||||
(tr "ds.store-images-title")]]
|
||||
|
||||
[:ul.library-elements
|
||||
(when own?
|
||||
[:li
|
||||
[:a.btn-primary {:on-click #(st/emit! (di/create-collection))}
|
||||
(tr "ds.images-collection.new")]])
|
||||
(when own?
|
||||
(nav-item {:selected? (nil? id)}))
|
||||
(for [coll (cond->> (vals colls)
|
||||
own? (filter #(= :own (:type %)))
|
||||
builtin? (filter #(= :builtin (:type %)))
|
||||
own? (sort-by :name))]
|
||||
(let [selected? (= (:id coll) id)]
|
||||
(nav-item (assoc coll :selected? selected?))))]]])))
|
||||
[:ul.library-elements
|
||||
(when own?
|
||||
[:li
|
||||
[:a.btn-primary {:on-click #(st/emit! (di/create-collection))}
|
||||
(tr "ds.images-collection.new")]])
|
||||
(when own?
|
||||
[:& nav-item {:selected? (nil? id)}])
|
||||
(for [item colls]
|
||||
[:& nav-item {:coll item
|
||||
:selected? (= (:id item) id)
|
||||
:key (:id item)}])]]]))
|
||||
|
||||
;; --- Grid
|
||||
|
||||
(mf/def grid-form
|
||||
:mixins #{mf/memo}
|
||||
(mf/defc grid-options-tooltip
|
||||
[{:keys [selected on-select title] :as props}]
|
||||
{:pre [(uuid? selected)
|
||||
(fn? on-select)
|
||||
(string? title)]}
|
||||
(let [colls (mf/deref collections-ref)
|
||||
colls (->> (vals colls)
|
||||
(filter #(= :own (:type %)))
|
||||
(remove #(= selected (:id %)))
|
||||
(sort-by :name colls))
|
||||
on-select (fn [event id]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(on-select id))]
|
||||
[:ul.move-list
|
||||
[:li.title title]
|
||||
[:li
|
||||
(when (not (nil? selected))
|
||||
[:a {:href "#" :on-click #(on-select % nil)} "Storage"])]
|
||||
(for [{:keys [id name] :as coll} colls]
|
||||
[:li {:key (pr-str id)}
|
||||
[:a {:on-click #(on-select % id)} name]])]))
|
||||
|
||||
:init
|
||||
(fn [own props]
|
||||
(assoc own ::file-input (mf/create-ref)))
|
||||
|
||||
:render
|
||||
(fn [own {:keys [id] :as props}]
|
||||
(letfn [(forward-click [event]
|
||||
(dom/click (mf/ref-node (::file-input own))))
|
||||
(on-file-selected [event]
|
||||
(let [files (dom/get-event-files event)
|
||||
files (jscoll->vec files)]
|
||||
(st/emit! (di/create-images id files))))]
|
||||
(let [uploading? (:uploading props)]
|
||||
[:div.grid-item.add-project {:on-click forward-click}
|
||||
(if uploading?
|
||||
[:div i/loader-pencil]
|
||||
[:span (tr "ds.image-new")])
|
||||
[:input.upload-image-input
|
||||
{:style {:display "none"}
|
||||
:multiple true
|
||||
:ref (::file-input own)
|
||||
:value ""
|
||||
:accept "image/jpeg,image/png"
|
||||
:type "file"
|
||||
:on-change on-file-selected}]]))))
|
||||
|
||||
(mf/def grid-options-tooltip
|
||||
:mixins [mf/reactive mf/memo]
|
||||
|
||||
:render
|
||||
(fn [own {:keys [selected on-select title]}]
|
||||
{:pre [(uuid? selected)
|
||||
(fn? on-select)
|
||||
(string? title)]}
|
||||
(let [colls (mf/react collections-ref)
|
||||
colls (->> (vals colls)
|
||||
(filter #(= :own (:type %)))
|
||||
(remove #(= selected (:id %)))
|
||||
(sort-by :name colls))
|
||||
on-select (fn [event id]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(on-select id))]
|
||||
[:ul.move-list
|
||||
[:li.title title]
|
||||
[:li
|
||||
[:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
|
||||
(for [{:keys [id name] :as coll} colls]
|
||||
[:li {:key (pr-str id)}
|
||||
[:a {:on-click #(on-select % id)} name]])])))
|
||||
|
||||
(mf/def grid-options
|
||||
:mixins [(mf/local)]
|
||||
|
||||
:render
|
||||
(fn [{:keys [::mf/local] :as own}
|
||||
{:keys [id type selected] :as props}]
|
||||
(mf/defc grid-options
|
||||
[{:keys [id type selected] :as props}]
|
||||
(let [local (mf/use-state {})]
|
||||
(letfn [(delete []
|
||||
(st/emit! (di/delete-selected)))
|
||||
(on-delete [event]
|
||||
|
|
@ -298,192 +217,199 @@
|
|||
{:alt (tr "ds.multiselect-bar.copy")
|
||||
:on-click on-toggle-copy}
|
||||
(when (:show-copy-tooltip @local)
|
||||
(grid-options-tooltip {:selected id
|
||||
:title (tr "ds.multiselect-bar.copy-to-library")
|
||||
:on-select on-copy}))
|
||||
^:inline i/copy]
|
||||
[:& grid-options-tooltip {:selected id
|
||||
:title (tr "ds.multiselect-bar.copy-to-library")
|
||||
:on-select on-copy}])
|
||||
i/copy]
|
||||
[:span.move-item.tooltip.tooltip-top
|
||||
{:alt (tr "ds.multiselect-bar.move")
|
||||
:on-click on-toggle-move}
|
||||
(when (:show-move-tooltip @local)
|
||||
(grid-options-tooltip {:selected id
|
||||
:title (tr "ds.multiselect-bar.move-to-library")
|
||||
:on-select on-move}))
|
||||
^:inline i/move]
|
||||
[:& grid-options-tooltip {:selected id
|
||||
:title (tr "ds.multiselect-bar.move-to-library")
|
||||
:on-select on-move}])
|
||||
i/move]
|
||||
(when (= 1 (count selected))
|
||||
[:span.move-item.tooltip.tooltip-top
|
||||
{:alt (tr "ds.multiselect-bar.rename")
|
||||
:on-click on-rename}
|
||||
^:inline i/pencil])
|
||||
[:span.delete.tooltip.tooltip-top
|
||||
{:alt (tr "ds.multiselect-bar.delete")
|
||||
:on-click on-delete}
|
||||
^:inline i/trash]]
|
||||
[:span.move-item.tooltip.tooltip-top {:alt (tr "ds.multiselect-bar.rename")
|
||||
:on-click on-rename}
|
||||
i/pencil])
|
||||
[:span.delete.tooltip.tooltip-top {:alt (tr "ds.multiselect-bar.delete")
|
||||
:on-click on-delete}
|
||||
i/trash]]
|
||||
|
||||
;; If not editable
|
||||
[:div.multiselect-nav
|
||||
[:span.move-item.tooltip.tooltip-top
|
||||
{:alt (tr "ds.multiselect-bar.copy")
|
||||
:on-click on-toggle-copy}
|
||||
[:span.move-item.tooltip.tooltip-top {:alt (tr "ds.multiselect-bar.copy")
|
||||
:on-click on-toggle-copy}
|
||||
(when (:show-copy-tooltip @local)
|
||||
(grid-options-tooltip {:selected id
|
||||
:title (tr "ds.multiselect-bar.copy-to-library")
|
||||
:on-select on-copy}))
|
||||
^:inline i/organize]])])))
|
||||
[:& grid-options-tooltip {:selected id
|
||||
:title (tr "ds.multiselect-bar.copy-to-library")
|
||||
:on-select on-copy}])
|
||||
i/organize]])])))
|
||||
|
||||
(mf/def grid-item
|
||||
:key-fn :id
|
||||
:mixins [mf/memo]
|
||||
(mf/defc grid-item
|
||||
[{:keys [image selected? edition?] :as props}]
|
||||
(letfn [(toggle-selection [event]
|
||||
(st/emit! (di/toggle-image-selection (:id image))))
|
||||
(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)]
|
||||
(st/emit! (di/update-opts :edition false)
|
||||
(di/rename-image (:id image) name))))
|
||||
(on-edit [event]
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (di/update-opts :edition (:id image))))]
|
||||
[:div.grid-item.images-th
|
||||
[:div.grid-item-th {:style {:background-image (str "url('" (:thumbnail image) "')")}}
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input {:type "checkbox"
|
||||
:id (:id image)
|
||||
:on-change toggle-selection
|
||||
:checked selected?}]
|
||||
[:label {:for (:id image)}]]]
|
||||
[:div.item-info
|
||||
(if edition?
|
||||
[:input.element-name {:type "text"
|
||||
:auto-focus true
|
||||
:on-key-down on-key-down
|
||||
:on-blur on-blur
|
||||
:on-click on-edit
|
||||
:default-value (:name image)}]
|
||||
[:h3 {:on-double-click on-edit} (:name image)])
|
||||
[:span.date (str (tr "ds.uploaded-at"
|
||||
(dt/format (:created-at image) "DD/MM/YYYY")))]]]))
|
||||
|
||||
:render
|
||||
(fn [own {:keys [id created-at ::selected? ::edition?] :as image}]
|
||||
(letfn [(toggle-selection [event]
|
||||
(st/emit! (di/toggle-image-selection id)))
|
||||
(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)]
|
||||
(st/emit! (di/update-opts :edition false)
|
||||
(di/rename-image id name))))
|
||||
(on-edit [event]
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (di/update-opts :edition id)))]
|
||||
[:div.grid-item.images-th
|
||||
[:div.grid-item-th {:style {:background-image (str "url('" (:thumbnail image) "')")}}
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input {:type "checkbox"
|
||||
:id (:id image)
|
||||
:on-change toggle-selection
|
||||
:checked selected?}]
|
||||
[:label {:for (:id image)}]]]
|
||||
[:div.item-info
|
||||
(if edition?
|
||||
[:input.element-name {:type "text"
|
||||
:auto-focus true
|
||||
:on-key-down on-key-down
|
||||
:on-blur on-blur
|
||||
:on-click on-edit
|
||||
:default-value (:name image)}]
|
||||
[:h3 {:on-double-click on-edit} (:name image)])
|
||||
[:span.date (str (tr "ds.uploaded-at" (dt/format created-at "DD/MM/YYYY")))]]])))
|
||||
(mf/defc grid-form
|
||||
[{:keys [id type uploading?] :as props}]
|
||||
(let [input (mf/use-ref* nil)
|
||||
on-click #(dom/click (mf/ref-node input))
|
||||
on-select #(st/emit! (->> (dom/get-event-files %)
|
||||
(jscoll->vec)
|
||||
(di/create-images id)))]
|
||||
[:div.grid-item.add-project {:on-click on-click}
|
||||
(if uploading?
|
||||
[:div i/loader-pencil]
|
||||
[:span (tr "ds.image-new")])
|
||||
[:input.upload-image-input
|
||||
{:style {:display "none"}
|
||||
:multiple true
|
||||
:ref input
|
||||
:value ""
|
||||
:accept "image/jpeg,image/png"
|
||||
:type "file"
|
||||
:on-change on-select}]]))
|
||||
|
||||
(mf/def grid
|
||||
:mixins [mf/reactive]
|
||||
:init
|
||||
(fn [own {:keys [id] :as props}]
|
||||
(let [selector (fn [images]
|
||||
(->> (vals images)
|
||||
(filter #(= id (:collection %)))))]
|
||||
(assoc own ::images-ref (-> (comp (l/key :images)
|
||||
(l/lens selector))
|
||||
(l/derive st/state)))))
|
||||
(defn- make-images-iref
|
||||
[id]
|
||||
(-> (comp (l/key :images)
|
||||
(l/lens (fn [images]
|
||||
(->> (vals images)
|
||||
(filter #(= id (:collection %)))))))
|
||||
(l/derive st/state)))
|
||||
|
||||
:render
|
||||
(fn [own {:keys [selected edition id type] :as props}]
|
||||
(let [editable? (or (= type :own) (nil? id))
|
||||
images (->> (mf/react (::images-ref own))
|
||||
(filter-images-by (:filter props ""))
|
||||
(sort-images-by (:order props :name)))]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.dashboard-grid-row
|
||||
(when editable?
|
||||
(grid-form props))
|
||||
(for [{:keys [id] :as image} images]
|
||||
(let [edition? (= edition id)
|
||||
selected? (contains? selected id)]
|
||||
(grid-item (assoc image ::selected? selected? ::edition? edition?))))]])))
|
||||
(mf/defc grid
|
||||
[{:keys [id type coll opts] :as props}]
|
||||
(let [editable? (or (= type :own) (nil? id))
|
||||
images-iref (mf/use-memo {:deps #js [id] :init #(make-images-iref id)})
|
||||
images (->> (mf/deref images-iref)
|
||||
(filter-images-by (:filter opts ""))
|
||||
(sort-images-by (:order opts :name)))]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.dashboard-grid-row
|
||||
(when editable?
|
||||
[:& grid-form {:id id :type type :uploading? (:uploading opts)}])
|
||||
(for [item images]
|
||||
[:& grid-item {:image item
|
||||
:key (:id item)
|
||||
:selected? (contains? (:selected opts) (:id item))
|
||||
:edition? (= (:edition opts) (:id item))}])]]))
|
||||
|
||||
;; --- Menu
|
||||
|
||||
(mf/def menu
|
||||
:mixins [mf/reactive mf/memo]
|
||||
(mf/defc menu
|
||||
[{:keys [opts coll] :as props}]
|
||||
(let [ordering (:order opts :name)
|
||||
filtering (:filter opts "")
|
||||
icount (count (:images coll))]
|
||||
(letfn [(on-term-change [event]
|
||||
(let [term (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(st/emit! (di/update-opts :filter term))))
|
||||
(on-ordering-change [event]
|
||||
(let [value (dom/event->value event)
|
||||
value (read-string value)]
|
||||
(st/emit! (di/update-opts :order value))))
|
||||
(on-clear [event]
|
||||
(st/emit! (di/update-opts :filter "")))]
|
||||
[:section.dashboard-bar.library-gap
|
||||
[:div.dashboard-info
|
||||
|
||||
;; :init
|
||||
;; (fn [own {:keys [id] :as props}]
|
||||
;; (assoc own ::num-images-ref (num-images-ref id)))
|
||||
;; Counter
|
||||
[:span.dashboard-images (tr "ds.num-images" (t/c icount))]
|
||||
|
||||
:render
|
||||
(fn [own props]
|
||||
(let [{:keys [id] :as coll} (::coll props)
|
||||
ordering (:order props :name)
|
||||
filtering (:filter props "")
|
||||
icount (count (:images coll))]
|
||||
(letfn [(on-term-change [event]
|
||||
(let [term (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(prn "on-term-change" term)
|
||||
(st/emit! (di/update-opts :filter term))))
|
||||
(on-ordering-change [event]
|
||||
(let [value (dom/event->value event)
|
||||
value (read-string value)]
|
||||
(st/emit! (di/update-opts :order value))))
|
||||
(on-clear [event]
|
||||
(st/emit! (di/update-opts :filter "")))]
|
||||
[:section.dashboard-bar.library-gap
|
||||
[:div.dashboard-info
|
||||
;; Sorting
|
||||
[:div
|
||||
[:span (tr "ds.ordering")]
|
||||
[:select.input-select {:on-change on-ordering-change
|
||||
:value (pr-str ordering)}
|
||||
(for [[key value] (seq +ordering-options+)]
|
||||
[:option {:key key :value (pr-str key)} (tr value)])]]
|
||||
|
||||
;; Counter
|
||||
[:span.dashboard-images (tr "ds.num-images" (t/c icount))]
|
||||
;; Search
|
||||
[:form.dashboard-search
|
||||
[:input.input-text {:key :images-search-box
|
||||
:type "text"
|
||||
:on-change on-term-change
|
||||
:auto-focus true
|
||||
:placeholder (tr "ds.search.placeholder")
|
||||
:value filtering}]
|
||||
[:div.clear-search {:on-click on-clear} i/close]]]])))
|
||||
|
||||
;; Sorting
|
||||
[:div
|
||||
[:span (tr "ds.ordering")]
|
||||
[:select.input-select {:on-change on-ordering-change
|
||||
:value (pr-str ordering)}
|
||||
(for [[key value] (seq +ordering-options+)]
|
||||
[:option {:key key :value (pr-str key)} (tr value)])]]
|
||||
|
||||
;; Search
|
||||
[:form.dashboard-search
|
||||
[:input.input-text {:key :images-search-box
|
||||
:type "text"
|
||||
:on-change on-term-change
|
||||
:auto-focus true
|
||||
:placeholder (tr "ds.search.placeholder")
|
||||
:value filtering}]
|
||||
[:div.clear-search {:on-click on-clear}
|
||||
i/close]]]]))))
|
||||
|
||||
(mf/def content
|
||||
:mixins [mf/reactive mf/memo]
|
||||
|
||||
:init
|
||||
(fn [own {:keys [id] :as props}]
|
||||
(assoc own ::coll-ref (-> (l/in [:images-collections id])
|
||||
(l/derive st/state))))
|
||||
|
||||
:render
|
||||
(fn [own props]
|
||||
(let [opts (mf/react opts-ref)
|
||||
coll (mf/react (::coll-ref own))
|
||||
props (merge opts props)]
|
||||
[:*
|
||||
(menu (assoc props ::coll coll))
|
||||
[:section.dashboard-grid.library
|
||||
(page-title coll)
|
||||
(grid props)
|
||||
(when (seq (:selected opts))
|
||||
(grid-options props))]])))
|
||||
(mf/defc content
|
||||
[{:keys [id type coll] :as props}]
|
||||
(let [opts (mf/deref opts-ref)]
|
||||
[:*
|
||||
[:& menu {:opts opts :coll coll}]
|
||||
[:section.dashboard-grid.library
|
||||
(when coll
|
||||
[:& grid-header {:coll coll}])
|
||||
[:& grid {:id id
|
||||
:type type
|
||||
:coll coll
|
||||
:opts opts}]
|
||||
(when (seq (:selected opts))
|
||||
[:& grid-options {:id id :type type :selected (:selected opts)}])]]))
|
||||
|
||||
;; --- Images Page
|
||||
|
||||
(mf/def images-page
|
||||
:key-fn identity
|
||||
:mixins #{mf/memo mf/reactive}
|
||||
(mf/defc images-page
|
||||
[{:keys [id type] :as props}]
|
||||
(let [type (or type :own)
|
||||
colls (mf/deref collections-ref)
|
||||
colls (cond->> (vals colls)
|
||||
(= type :own) (filter #(= :own (:type %)))
|
||||
(= type :builtin) (filter #(= :builtin (:type %)))
|
||||
true (sort-by :created-at))
|
||||
selected-coll (cond
|
||||
(and (= type :own) (nil? id)) nil
|
||||
(uuid? id) (seek #(= id (:id %)) colls)
|
||||
:else (first colls))
|
||||
id (:id selected-coll)]
|
||||
|
||||
:init
|
||||
(fn [own props]
|
||||
(let [{:keys [type id]} (::mf/props own)]
|
||||
(st/emit! (di/initialize type id))
|
||||
own))
|
||||
(mf/use-effect {:init #(st/emit! (di/fetch-collections))})
|
||||
(mf/use-effect {:init #(st/emit! (di/initialize)
|
||||
(di/fetch-images id))
|
||||
:deps #js [id type]})
|
||||
|
||||
:render
|
||||
(fn [own {:keys [type] :as props}]
|
||||
(let [type (or type :own)
|
||||
props (assoc props :type type)]
|
||||
[:section.dashboard-content
|
||||
(nav props)
|
||||
(content props)])))
|
||||
[:section.dashboard-content
|
||||
[:& nav {:type type
|
||||
:id id
|
||||
:colls colls
|
||||
:selected-coll selected-coll}]
|
||||
[:& content {:type type
|
||||
:id id
|
||||
:coll selected-coll}]]))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue