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- search-results [library search-term]
  (let [sorted (partial sort-by (comp string/lower-case :name))]
    (if-let [search (->> search-term
                         string/trim
                         string/lower-case
                         not-empty)]
      (let [search-names (->> library
                              (filter #(string/includes? (string/lower-case (:name %)) search))
                              (set))
            search-keywords (->> library
                                 (filter (fn [item]
                                           (some #(string/includes? (string/lower-case %) search) (:keywords item))))
                                 (remove search-names)
                                 (set))
            search-categories (->> library
                                   (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))))

(defn task-selector [which]
  (let [search-term (r/atom "")
        library-data (re-frame/subscribe [::subs/library])]
    (fn []
      [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])
           (search-results @library-data @search-term)))]]])))