More refactor on images page.

src/uxbox/main/data/images.cljs

@@ -257,50 +257,6 @@
   [coll-id image]
   (DeleteImage. coll-id image))
 
-;; --- Set Collection
-
-(defrecord SetCollection [id builtin?]
-  rs/UpdateEvent
-  (-apply-update [_ state]
-    (assoc-in state [:dashboard :collection-id] id))
-
-  rs/WatchEvent
-  (-apply-watch [_ state s]
-    (cond
-      builtin? (rx/empty)
-      (nil? id) (rx/empty)
-      :else (rx/of (fetch-images id)))))
-
-(defn set-collection
-  [id builtin?]
-  (SetCollection. id builtin?))
-
-;; --- Set Collection Type
-
-(defrecord SetCollectionType [type]
-  rs/WatchEvent
-  (-apply-watch [_ state s]
-    (if (= type :builtin)
-      (rx/of (set-collection 1 true))
-      (let [colls (sort-by :id (vals (:images-by-id state)))]
-        (rx/of (set-collection (:id (first colls)) false)))))
-
-  rs/UpdateEvent
-  (-apply-update [_ state]
-    (as-> state $
-      (assoc-in $ [:dashboard :collection-type] type))))
-
-(defn set-collection-type
-  [type]
-  {:pre [(contains? #{:builtin :own} type)]}
-  (SetCollectionType. type))
-
-
-;; -------------------------------------
-
-
-
-
 ;; --- Remove Image
 
 (defrecord RemoveImages [id images]
@@ -357,27 +313,15 @@
   []
   (DeleteSelected.))
 
-;; --- Helpers
+;; --- Update Opts (Filtering & Ordering)
-
-(defn set-images-ordering
-  [order]
-  (reify
-    rs/UpdateEvent
-    (-apply-update [_ state]
-      (assoc-in state [:dashboard :images-order] order))))
-
-(defn set-images-filtering
-  [term]
-  (reify
-    rs/UpdateEvent
-    (-apply-update [_ state]
-      (assoc-in state [:dashboard :images-filter] term))))
-
-(defn clear-images-filtering
-  []
-  (reify
-    rs/UpdateEvent
-    (-apply-update [_ state]
-      (assoc-in state [:dashboard :images-filter] ""))))
 
+(defrecord UpdateOpts [order filter]
+  rs/UpdateEvent
+  (-apply-update [_ state]
+    (update state :dashboard merge
+            (when order {:order order})
+            (when filter {:filter filter}))))
 
+(defn update-opts
+  [& {:keys [order filter] :as opts}]
+  (UpdateOpts. order filter))

src/uxbox/main/ui/dashboard/images.cljs

@@ -23,7 +23,7 @@
             [uxbox.main.ui.keyboard :as kbd]
             [uxbox.main.ui.library-bar :as ui.library-bar]
             [uxbox.main.ui.dashboard.header :refer (header)]
-            [uxbox.util.data :as data]
+            [uxbox.util.data :as data :refer (read-string)]
             [uxbox.util.lens :as ul]
             [uxbox.util.dom :as dom]))
 
@@ -34,21 +34,22 @@
    :created "ds.project-ordering.by-creation-date"})
 
 (defn- sort-images-by
-  [ordering projs]
+  [ordering images]
   (case ordering
-    :name (sort-by :name projs)
+    :name (sort-by :name images)
-    :created (reverse (sort-by :created-at projs))
+    :created (reverse (sort-by :created-at images))
-    projs))
+    images))
 
 (defn- contains-term?
   [phrase term]
-  (str/includes? (str/lower phrase) (str/trim (str/lower term))))
+  (let [term (name term)]
+    (str/includes? (str/lower phrase) (str/trim (str/lower term)))))
 
 (defn- filter-images-by
-  [term projs]
+  [term images]
   (if (str/blank? term)
-    projs
+    images
-    (filter #(contains-term? (:name %) term) projs)))
+    (filter #(contains-term? (:name %) term) images)))
 
 ;; --- Refs
 
@@ -56,18 +57,6 @@
   (-> (l/key :dashboard)
       (l/derive st/state)))
 
-;; (def ^:private collections-by-id-ref
-;;   (-> (l/key :images-by-id)
-;;       (l/derive st/state)))
-
-;; (def ^:private images-ordering-ref
-;;   (-> (l/in [:dashboard :images-order])
-;;       (l/derive st/state)))
-
-;; (def ^:private images-filtering-ref
-;;   (-> (l/in [:dashboard :images-filter])
-;;       (l/derive st/state)))
-
 (def ^:private collections-map-ref
   (-> (comp (l/key :images-by-id)
             (ul/merge library/+image-collections-by-id+))
@@ -139,12 +128,12 @@
             (let [type (:type collection)
                   id (:id collection)]
               (rs/emit! (di/select-collection type id))))]
-    (let [colors (count (:data collection))]
+    (let [images (count (:images collection))]
       [:li {:on-click on-click
             :class-name (when selected? "current")}
        [:span.element-title (:name collection)]
        [:span.element-subtitle
-        (tr "ds.num-elements" (t/c colors))]])))
+        (tr "ds.num-elements" (t/c images))]])))
 
 (mx/defc nav-section
   {:mixins [mx/static mx/reactive]}
@@ -195,83 +184,6 @@
 
 ;; --- Grid
 
-;; (defn- grid-render
-;;   [own]
-;;   (let [local (:rum/local own)
-;;         dashboard (mx/react dashboard-ref)
-;;         coll-type (:collection-type dashboard)
-;;         coll-id (:collection-id dashboard)
-;;         own? (= coll-type :own)
-;;         builtin? (= coll-type :builtin)
-;;         coll (if builtin?
-;;                (get library/+image-collections-by-id+ coll-id)
-;;                (mx/react (focus-collection coll-id)))
-;;         images-filtering (mx/react images-filtering-ref)
-;;         images-ordering (mx/react images-ordering-ref)
-;;         images (->> (:images coll)
-;;                     (remove nil?)
-;;                     (filter-images-by images-filtering)
-;;                     (sort-images-by images-ordering))
-;;         show-menu? (not (empty? (:selected @local)))]
-;;     (letfn [(toggle-check [image]
-;;               (swap! local update :selected #(data/conj-or-disj % image)))
-;;             (toggle-check-card [image event]
-;;               (when (kbd/shift? event)
-;;                 (toggle-check image)))
-;;             (delete-selected []
-;;               (->> (:selected @local)
-;;                    (run! #(rs/emit! (di/delete-image coll-id %)))))
-;;       (when coll
-;;         (html
-;;          [:section.dashboard-grid.library
-;;           (page-title coll)
-;;           [:div.dashboard-grid-content
-;;            [:div.dashboard-grid-row
-;;             (if own?
-;;               [:div.grid-item.add-project {:on-click forward-click}
-;;                [:span "+ New image"]
-;;                [:input.upload-image-input
-;;                 {:style {:display "none"}
-;;                  :multiple true
-;;                  :ref "file-input"
-;;                  :value ""
-;;                  :type "file"
-;;                  :on-change on-file-selected}]])
-
-;;             (for [image images
-;;                   :let [selected? (contains? (:selected @local) image)]]
-;;               [:div.grid-item.images-th
-;;                {:key (:id image)
-;;                 :on-click (partial toggle-check-card image)}
-;;                [:div.grid-item-th
-;;                 {:style {:background-image (str "url('" (:thumbnail image) "')")}}
-;;                 [:div.input-checkbox.check-primary
-;;                  [:input {:type "checkbox"
-;;                           :id (:id image)
-;;                           :on-click (partial toggle-check image)
-;;                           :checked selected?}]
-;;                  [:label {:for (:id image)}]]]
-;;                [:span (:name image)]])]
-
-;;            (when show-menu?
-;;              ;; MULTISELECT OPTIONS BAR
-;;              [:div.multiselect-bar
-;;               [:div.multiselect-nav
-;;                [:span.move-item.tooltip.tooltip-top {:alt "Copy to"} i/organize]
-;;                (if own?
-;;                  [:span.copy.tooltip.tooltip-top {:alt "Duplicate"} i/copy])
-;;                (if own?
-;;                  [:span.delete.tooltip.tooltip-top
-;;                   {:alt "Delete"
-;;                    :on-click delete-selected}
-;;                   i/trash])]])]])))))
-
-;; (def ^:private grid
-;;   (mx/component
-;;    {:render grid-render
-;;     :name "grid"
-;;     :mixins [(rum/local {:selected #{}}) mx/static mx/reactive]}))
-
 (mx/defcs grid-form
   {:mixins [mx/static]}
   [own coll-id]
@@ -332,9 +244,14 @@
 
 (mx/defc grid
   {:mixins [mx/static]}
-  [selected {:keys [id type images] :as coll}]
+  [state selected {:keys [id type images] :as coll}]
-  (let [own? (= type :own)]
+  (let [own? (= type :own)
-    (println (map :id images))
+        ordering (:order state)
+        filtering (:filter state)
+        images (->> images
+                    (remove nil?)
+                    (filter-images-by filtering)
+                    (sort-images-by ordering))]
     [:div.dashboard-grid-content
      [:div.dashboard-grid-row
       (when own?
@@ -346,111 +263,66 @@
             (mx/with-key (str id))))]]))
 
 (mx/defc content
-  {:mixins [mx/static mx/reactive]}
+  {:mixins [mx/static]}
-  []
+  [state coll]
-  (let [dashboard (mx/react dashboard-ref)
+  (let [selected (:selected state)
-        selected (:selected dashboard)
+        coll-type (:type coll)
-        coll-type (:type dashboard)
-        coll-id (:id dashboard)
-        coll (mx/react (focus-collection coll-id))
         own? (= coll-type :own)]
     (when coll
       [:section.dashboard-grid.library
        (page-title coll)
-       (grid selected coll)
+       (grid state selected coll)
        (when (and (seq selected))
          (grid-options coll))])))
 
-;; --- Sort Widget
+;; --- Menu
 
-;; (defn- sort-widget-render
+(mx/defc menu
-;;   []
+  {:mixins [mx/static]}
-;;   (let [ordering (mx/react images-ordering-ref)
+  [state coll]
-;;         on-change #(rs/emit! (di/set-images-ordering
+  (let [ordering (:order state :name)
-;;                               (keyword (.-value (.-target %)))))]
+        filtering (:filter state "")
-;;     (html
+        icount (count (:images coll))]
-;;      [:div
+    (letfn [(on-term-change [event]
-;;       [:span (tr "ds.project-ordering")]
+              (let [term (-> (dom/get-target event)
-;;       [:select.input-select
+                             (dom/get-value))]
-;;        {:on-change on-change
+                (rs/emit! (di/update-opts :filter term))))
-;;         :value (:name ordering "")}
+            (on-ordering-change [event]
-;;        (for [option (keys +ordering-options+)
+              (let [value (dom/event->value event)
-;;              :let [option-id (get +ordering-options+ option)
+                    value (read-string value)]
-;;                    option-value (:name option)
+                (rs/emit! (di/update-opts :order value))))
-;;                    option-text (tr option-id)]]
+            (on-clear [event]
-;;          [:option
+              (rs/emit! (di/update-opts :filter "")))]
-;;           {:key option-id
+      (println "menu:" ordering)
-;;            :value option-value}
+      [:section.dashboard-bar.library-gap
-;;           option-text])]])))
+       [:div.dashboard-info
 
-;; (def ^:private sort-widget
+        ;; Counter
-;;   (mx/component
+        [:span.dashboard-images (tr "ds.num-images" (t/c icount))]
-;;    {:render sort-widget-render
-;;     :name "sort-widget-render"
-;;     :mixins [mx/reactive mx/static]}))
-
-;; --- Filtering Widget
-
-;; (defn- search-widget-render
-;;   []
-;;   (letfn [(on-term-change [event]
-;;             (-> (dom/get-target event)
-;;                 (dom/get-value)
-;;                 (di/set-images-filtering)
-;;                 (rs/emit!)))
-;;           (on-clear [event]
-;;             (rs/emit! (di/clear-images-filtering)))]
-;;     (html
-;;      [:form.dashboard-search
-;;       [:input.input-text
-;;        {:key :images-search-box
-;;         :type "text"
-;;         :on-change on-term-change
-;;         :auto-focus true
-;;         :placeholder (tr "ds.project-search.placeholder")
-;;         :value (mx/react images-filtering-ref)}]
-;;       [:div.clear-search {:on-click on-clear} i/close]])))
-
-;; (def ^:private search-widget
-;;   (mx/component
-;;    {:render search-widget-render
-;;     :name "search-widget"
-;;     :mixins [mx/reactive mx/static]}))
-
-;; ;; --- Menu
-
-;; (defn- menu-render
-;;   []
-;;   (let [dashboard (mx/react dashboard-ref)
-;;         coll-id (:collection-id dashboard)
-;;         coll (mx/react (focus-collection coll-id))
-;;         icount (count (:images coll)) ]
-;;     (html
-;;      [:section.dashboard-bar.library-gap
-;;       [:div.dashboard-info
-;;        [:span.dashboard-images (tr "ds.num-images" (t/c icount))]
-;;        (sort-widget)
-;;        (search-widget)]])))
-
-;; (def ^:private menu
-;;   (mx/component
-;;    {:render menu-render
-;;     :name "menu"
-;;     :mixins [mx/reactive mx/static]}))
 
+        ;; Sorting
+        [:div
+         [:span (tr "ds.project-ordering")]
+         [:select.input-select
+          {:on-change on-ordering-change
+           :value (pr-str ordering)}
+          (for [[key value] (seq +ordering-options+)
+                :let [ovalue (pr-str key)
+                      olabel (tr value)]]
+            [:option {:key ovalue :value ovalue} olabel])]]
+        ;; Search
+        [:form.dashboard-search
+         [:input.input-text
+          {:key :images-search-box
+           :type "text"
+           :on-change on-term-change
+           :auto-focus true
+           :placeholder (tr "ds.project-search.placeholder")
+           :value (or filtering "")}]
+         [:div.clear-search {:on-click on-clear} i/close]]]])))
 
 ;; --- Images Page
 
-;; (defn- images-page-render
-;;   [own]
-;;   (html
-;;    [:main.dashboard-main
-;;     (header)
-;;     [:section.dashboard-content
-;;      (nav)
-;;      (menu)
-;;      (grid)]]))
-
 (defn- images-page-will-mount
   [own]
   (let [[type id] (:rum/args own)]
@@ -469,10 +341,14 @@
 (mx/defc images-page
   {:will-mount images-page-will-mount
    :did-remount images-page-did-remount
-   :mixins [mx/static]}
+   :mixins [mx/static mx/reactive]}
   [type id]
-  [:main.dashboard-main
+  (let [state (mx/react dashboard-ref)
-   (header)
+        coll-id (:id state)
-   [:section.dashboard-content
+        coll (mx/react (focus-collection coll-id))]
-    (nav)
+    [:main.dashboard-main
-    (content)]])
+     (header)
+     [:section.dashboard-content
+      (nav)
+      (menu state coll)
+      (content state coll)]]))