lineup/src/lineup/components/edit/selector.cljs

(ns lineup.components.edit.selector
  (:require
   [clojure.string :as string]
   [lineup.events :as events]
   [lineup.subs :as subs]
   [re-com.core :as re-com]
   [re-frame.core :as re-frame]
   [reagent.ratom :as r]))

(defn- selection-item [which library-item]
  [re-com/h-box
   :gap "20px"
   :align :center
   :align-self :start
   :attr {:on-click #(re-frame/dispatch [::events/select-task which (:id library-item)])}
   :class "task-selector"
   :children
   [[re-com/box
     :width "50px"
     :height "50px"
     :max-width "50px"
     :max-height "50px"
     :justify :center
     :child
     [:img
      {:src (:image library-item)}]]
    [re-com/v-box
     :children
     [[re-com/box
       :child
       [re-com/title
        :label (:name library-item)
        :level :level3]]
      [re-com/box
       :child
       [:div
        {:class "selector-categories"}
        (->> (:categories library-item)
             (remove #(= (:name library-item) %))
             (string/join ", "))]]
      [re-com/box
       :child
       [:div
        {:class "selector-keywords"}
        (->> (:keywords library-item)
             (string/join ", "))]]]]]])

(defn task-selector [which]
  (let [search-term (r/atom "")
        library-data (re-frame/subscribe [::subs/library])]
    (fn []
      (let [sorted (partial sort-by (comp string/lower-case :name))
            library (if-let [search (->> @search-term
                                         string/trim
                                         string/lower-case
                                         not-empty)]
                      (let [search-names (->> @library-data
                                              (filter #(string/includes? (string/lower-case (:name %)) search))
                                              (set))
                            search-keywords (->> @library-data
                                                 (filter (fn [item]
                                                           (some #(string/includes? (string/lower-case %) search) (:keywords item))))
                                                 (remove search-names)
                                                 (set))
                            search-categories (->> @library-data
                                                   (filter (fn [item]
                                                             (some #(string/includes? (string/lower-case %) search) (:categories item))))
                                                   (remove search-names)
                                                   (remove search-keywords)
                                                   (set))]
                        (concat
                         (sorted search-names)
                         (sorted search-keywords)
                         (sorted search-categories)))
                      (sorted @library-data))]
        [re-com/modal-panel
         :backdrop-on-click #(re-frame/dispatch [::events/select-selecting nil])
         :child
         [re-com/scroller
          :v-scroll :auto
          :h-scroll :off
          :height "80vh"
          :child
          [re-com/v-box
           :gap "10px"
           :align :center
           :children
           (concat
            [[re-com/title
              :label "Select an Activity"
              :level :level3]
             [re-com/input-text
              :model search-term
              :change-on-blur? false
              :placeholder "search"
              :on-change #(reset! search-term %)]]
            (map
             (fn [library-item]
               [selection-item which library-item])
             library))]]]))))