0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00

♻️ Refactor images dashboard and common dashboard grid header.

This commit is contained in:
Andrey Antukh 2019-08-04 12:49:08 +00:00
parent 7a88558706
commit c948082e0a
5 changed files with 351 additions and 412 deletions

View file

@ -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

View file

@ -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)))

View file

@ -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

View 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]])])))

View file

@ -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}]]))