added task selection search function

library.edn

@@ -23,33 +23,97 @@
   :categories ["bedtime"],
   :keywords ["bedtime" "routine"],
   :image "teeth-brushing.png"}
- {:id 6, :name "ten second tidy", :image "ten-second-tidy.jpg"}
- {:id 7, :name "sing", :image "sing.jpg"}
+ {:id 6,
+  :name "ten second tidy",
+  :categories ["preparations" "bedtime"],
+  :image "ten-second-tidy.jpg"}
+ {:id 7,
+  :name "sing",
+  :categories ["activities" "church"],
+  :image "sing.jpg"}
  {:id 8, :name "blessing", :image "blessing.jpeg"}
  {:id 9,
   :name "family home evening",
+  :categories ["family activities"],
   :image "family-home-evening.jpeg"}
- {:id 11, :name "bath", :image "bath.png"}
- {:id 12, :name "ice cream cone", :image "ice-cream-cone.png"}
- {:id 13, :name "sacrament", :image "sacrament.jpeg"}
- {:id 14, :name "potty", :image "potty.jpg"}
- {:id 15, :name "temple", :image "temple.jpeg"}
- {:id 16, :name "church", :image "church.jpg"}
- {:id 17, :name "clean up", :image "clean-up.jpg"}
- {:id 18, :name "numbers", :image "numbers.png"}
- {:id 19, :name "cleaning", :image "cleaning.png"}
- {:id 20, :name "read", :image "read.png"}
- {:id 21, :name "walk", :image "walk.jpg"}
- {:id 22, :name "shoes", :image "shoes.png"}
- {:id 23, :name "flush", :image "flush.jpg"}
- {:id 24, :name "video", :image "video.png"}
- {:id 25, :name "car", :image "car.png"}
- {:id 26, :name "get dressed", :image "get-dressed.png"}
- {:id 27, :name "scriptures", :image "scriptures.jpg"}
- {:id 28, :name "letters", :image "letters.png"}
- {:id 30, :name "wash hands", :image "wash-hands.png"}
- {:id 31, :name "typing2", :image "typing2.png"}
- {:id 32, :name "writing", :image "writing.jpg"}
- {:id 33, :name "wait", :image "wait.png"}
+ {:id 11,
+  :name "bath",
+  :categories ["preparations" "bedtime"],
+  :image "bath.png"}
+ {:id 12,
+  :name "ice cream cone",
+  :categories ["rewards"],
+  :image "ice-cream-cone.png"}
+ {:id 13,
+  :name "sacrament",
+  :categories ["church"],
+  :image "sacrament.jpeg"}
+ {:id 14, :name "potty", :categories ["potty"], :image "potty.jpg"}
+ {:id 15, :name "temple", :categories ["church"], :image "temple.jpeg"}
+ {:id 16, :name "church", :categories ["church"], :image "church.jpg"}
+ {:id 17,
+  :name "clean up",
+  :categories ["preparations" "bedtime"],
+  :image "clean-up.jpg"}
+ {:id 18,
+  :name "numbers",
+  :categories ["activities"],
+  :image "numbers.png"}
+ {:id 19,
+  :name "cleaning",
+  :categories ["preparations"],
+  :image "cleaning.png"}
+ {:id 20, :name "read", :categories ["activities"], :image "read.png"}
+ {:id 21, :name "walk", :categories ["travel"], :image "walk.jpg"}
+ {:id 22,
+  :name "shoes",
+  :categories ["preparations"],
+  :image "shoes.png"}
+ {:id 23, :name "flush", :categories ["potty"], :image "flush.jpg"}
+ {:id 24,
+  :name "video",
+  :categories ["activities"],
+  :image "video.png"}
+ {:id 25, :name "car", :categories ["travel"], :image "car.png"}
+ {:id 26,
+  :name "get dressed",
+  :categories ["preparations" "bedtime"],
+  :image "get-dressed.png"}
+ {:id 27,
+  :name "scriptures",
+  :categories ["activities" "church" "bedtime"],
+  :image "scriptures.jpg"}
+ {:id 28,
+  :name "letters",
+  :categories ["activities"],
+  :image "letters.png"}
+ {:id 30,
+  :name "wash hands",
+  :categories ["preparations"],
+  :image "wash-hands.png"}
+ {:id 31,
+  :name "typing2",
+  :categories ["activities"],
+  :image "typing2.png"}
+ {:id 32,
+  :name "writing",
+  :categories ["activities"],
+  :image "writing.jpg"}
+ {:id 33,
+  :name "wait",
+  :categories ["preparations"],
+  :image "wait.png"}
  {:id 34, :name "typing1", :image "typing1.png"}
- {:id 35, :name "pray", :image "pray.jpeg"}]
+ {:id 35,
+  :name "pray",
+  :categories ["preparations" "bedtime" "family activities" "church"],
+  :image "pray.jpeg"}
+ {:id 36,
+  :name "change diaper",
+  :categories ["preparations" "potty"],
+  :image "change-diaper.png"}
+ {:id 37,
+  :name "night",
+  :categories ["preparations" "bedtime"],
+  :image "night.png"}
+ {:id 38, :name "SUV", :categories ["travel"], :image "SUV.jpg"}]

resources/public/styles.css

@@ -35,3 +35,13 @@
 .task-selector {
     cursor: pointer;
 }
+
+.selector-categories {
+    font-size: x-small;
+    font-style: italic;
+}
+
+.selector-keywords {
+    font-size: x-small;
+    font-style: italic;
+}

src/lineup/components/edit/selector.cljs

@@ -1,50 +1,100 @@
 (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]))
+   [re-frame.core :as re-frame]
+   [reagent.ratom :as r]))
 
-(defn task-selector [which]
-  (let [library-data (re-frame/subscribe [::subs/library])]
-    [re-com/modal-panel
-     :backdrop-on-click #(re-frame/dispatch [::events/select-selecting nil])
+(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
-     [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]
-         [:div "(TODO: search box here)"]]
-        (map
-         (fn [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/box
-              :child
-              [re-com/title
-               :label (:name library-item)
-               :level :level3]]]])
-         @library-data))]]]))
+     [: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))]]]))))

src/lineup/db.cljs

@@ -31,33 +31,97 @@
      :categories ["bedtime"],
      :keywords ["bedtime" "routine"],
      :image "teeth-brushing.png"}
-    {:id 6, :name "ten second tidy", :image "ten-second-tidy.jpg"}
-    {:id 7, :name "sing", :image "sing.jpg"}
+    {:id 6,
+     :name "ten second tidy",
+     :categories ["preparations" "bedtime"],
+     :image "ten-second-tidy.jpg"}
+    {:id 7,
+     :name "sing",
+     :categories ["activities" "church"],
+     :image "sing.jpg"}
     {:id 8, :name "blessing", :image "blessing.jpeg"}
     {:id 9,
      :name "family home evening",
+     :categories ["family activities"],
      :image "family-home-evening.jpeg"}
-    {:id 11, :name "bath", :image "bath.png"}
-    {:id 12, :name "ice cream cone", :image "ice-cream-cone.png"}
-    {:id 13, :name "sacrament", :image "sacrament.jpeg"}
-    {:id 14, :name "potty", :image "potty.jpg"}
-    {:id 15, :name "temple", :image "temple.jpeg"}
-    {:id 16, :name "church", :image "church.jpg"}
-    {:id 17, :name "clean up", :image "clean-up.jpg"}
-    {:id 18, :name "numbers", :image "numbers.png"}
-    {:id 19, :name "cleaning", :image "cleaning.png"}
-    {:id 20, :name "read", :image "read.png"}
-    {:id 21, :name "walk", :image "walk.jpg"}
-    {:id 22, :name "shoes", :image "shoes.png"}
-    {:id 23, :name "flush", :image "flush.jpg"}
-    {:id 24, :name "video", :image "video.png"}
-    {:id 25, :name "car", :image "car.png"}
-    {:id 26, :name "get dressed", :image "get-dressed.png"}
-    {:id 27, :name "scriptures", :image "scriptures.jpg"}
-    {:id 28, :name "letters", :image "letters.png"}
-    {:id 30, :name "wash hands", :image "wash-hands.png"}
-    {:id 31, :name "typing2", :image "typing2.png"}
-    {:id 32, :name "writing", :image "writing.jpg"}
-    {:id 33, :name "wait", :image "wait.png"}
+    {:id 11,
+     :name "bath",
+     :categories ["preparations" "bedtime"],
+     :image "bath.png"}
+    {:id 12,
+     :name "ice cream cone",
+     :categories ["rewards"],
+     :image "ice-cream-cone.png"}
+    {:id 13,
+     :name "sacrament",
+     :categories ["church"],
+     :image "sacrament.jpeg"}
+    {:id 14, :name "potty", :categories ["potty"], :image "potty.jpg"}
+    {:id 15, :name "temple", :categories ["church"], :image "temple.jpeg"}
+    {:id 16, :name "church", :categories ["church"], :image "church.jpg"}
+    {:id 17,
+     :name "clean up",
+     :categories ["preparations" "bedtime"],
+     :image "clean-up.jpg"}
+    {:id 18,
+     :name "numbers",
+     :categories ["activities"],
+     :image "numbers.png"}
+    {:id 19,
+     :name "cleaning",
+     :categories ["preparations"],
+     :image "cleaning.png"}
+    {:id 20, :name "read", :categories ["activities"], :image "read.png"}
+    {:id 21, :name "walk", :categories ["travel"], :image "walk.jpg"}
+    {:id 22,
+     :name "shoes",
+     :categories ["preparations"],
+     :image "shoes.png"}
+    {:id 23, :name "flush", :categories ["potty"], :image "flush.jpg"}
+    {:id 24,
+     :name "video",
+     :categories ["activities"],
+     :image "video.png"}
+    {:id 25, :name "car", :categories ["travel"], :image "car.png"}
+    {:id 26,
+     :name "get dressed",
+     :categories ["preparations" "bedtime"],
+     :image "get-dressed.png"}
+    {:id 27,
+     :name "scriptures",
+     :categories ["activities" "church" "bedtime"],
+     :image "scriptures.jpg"}
+    {:id 28,
+     :name "letters",
+     :categories ["activities"],
+     :image "letters.png"}
+    {:id 30,
+     :name "wash hands",
+     :categories ["preparations"],
+     :image "wash-hands.png"}
+    {:id 31,
+     :name "typing2",
+     :categories ["activities"],
+     :image "typing2.png"}
+    {:id 32,
+     :name "writing",
+     :categories ["activities"],
+     :image "writing.jpg"}
+    {:id 33,
+     :name "wait",
+     :categories ["preparations"],
+     :image "wait.png"}
     {:id 34, :name "typing1", :image "typing1.png"}
-    {:id 35, :name "pray", :image "pray.jpeg"}]})
+    {:id 35,
+     :name "pray",
+     :categories ["preparations" "bedtime" "family activities" "church"],
+     :image "pray.jpeg"}
+    {:id 36,
+     :name "change diaper",
+     :categories ["preparations" "potty"],
+     :image "change-diaper.png"}
+    {:id 37,
+     :name "night",
+     :categories ["preparations" "bedtime"],
+     :image "night.png"}
+    {:id 38, :name "SUV", :categories ["travel"], :image "SUV.jpg"}]})