Add "Add to List" to search results

adds the latest event of an search result to a list

src/ied/components/icons.cljs

@@ -113,3 +113,15 @@
      :stroke-width "2",
      :d
      "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"}]])
+
+(defn looking-glass []
+  [:svg
+   {:xmlns "http://www.w3.org/2000/svg",
+    :viewBox "0 0 16 16",
+    :fill "currentColor",
+    :class "h-4 w-4 opacity-70"}
+   [:path
+    {:fill-rule "evenodd",
+     :d
+     "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z",
+     :clip-rule "evenodd"}]])

src/ied/components/resource.cljs

@@ -84,7 +84,7 @@
        ^{:key k} [grouped-about-tags [k v]]))))
 
 (defn keywords-component [kw]
-  ^{:key kw}[:div {:on-click #(do
+  ^{:key kw} [:div {:on-click #(do
                                  (re-frame/dispatch [::events/navigate [:search-view]])
                                  (re-frame/dispatch [::events/handle-filter-search ["keywords" kw]]))
                     :class "badge badge-secondary m-1 cursor-pointer"}
@@ -106,3 +106,16 @@
 
 (comment
   (hash "https://w3id.org/kim/hcrt/scheme"))
+
+(defn add-to-list [event]
+  (let [selected-events @(re-frame/subscribe  [::subs/selected-events])]
+
+    [:div
+     [:div {:class "form-control"}
+      [:label {:class "cursor-pointer label "}
+       [:span {:class "label-text m-2"} "Add to List "]
+       [:input
+        {:type "checkbox"
+         :checked (contains? (set (map #(:id %) selected-events)) (:id event))
+         :class "checkbox checkbox-success"
+         :on-change #(re-frame/dispatch [::events/toggle-selected-events event])}]]]]))

src/ied/views.cljs

@@ -14,7 +14,6 @@
    [ied.components.resource :as resource-component]
    [reagent.core :as reagent]))
 
-
 ;; event data modal
 (defn event-data-modal []
   (let [visible? @(re-frame/subscribe [::subs/show-event-data-modal])
@@ -53,15 +52,7 @@
       [:div {:class "flex flex-row justify-between items-center"}
        [:button {:class "btn"
                  :on-click #(re-frame/dispatch [::events/toggle-show-event-data-modal event])} "Show Event Data"]
-       [:div
+       [resource-component/add-to-list event]]]
-        [:div {:class "form-control"}
-         [:label {:class "cursor-pointer label "}
-          [:span {:class "label-text m-2"} "Add to List "]
-          [:input
-           {:type "checkbox"
-            :checked (contains? (set (map #(:id %) selected-events)) (:id event))
-            :class "checkbox checkbox-success"
-            :on-change #(re-frame/dispatch [::events/toggle-selected-events event])}]]]]]]
      [:div {:class "w-1/4"}
       [:figure
        [:img
@@ -194,8 +185,6 @@
        [:p "No relays found"]
        ;(re-frame/dispatch [::events/connect-to-default-relays])
        )]))
-
-
 ;; Add to lists modal
 (defn create-list-modal []
   (let [name (reagent/atom "")
@@ -270,7 +259,7 @@
       {:tabIndex "0", :role "button", :class "btn btn-ghost btn-circle"}
       [:div
        {:class "indicator"}
-      [icons/shopping-cart ] 
+       [icons/shopping-cart]
        [:span {:class "badge badge-sm indicator-item"} (count selected-events)]]]
      [:div
       {:tabIndex "0",

src/ied/views/add.cljs

@@ -81,11 +81,11 @@
          :about {:type :skos
                  :schemes ["https://w3id.org/kim/hochschulfaechersystematik/scheme"]}}})
 
-(defn concept-checkbox [concept field toggled]
+(defn concept-checkbox [concept field toggled disable-on-change]
   [:input {:type "checkbox"
            :checked (or toggled false)
            :class "checkbox checkbox-warning"
-           :on-change (fn [] (re-frame/dispatch [::events/toggle-concept [concept field]]))}])
+           :on-change (fn [] (when-not disable-on-change (re-frame/dispatch [::events/toggle-concept [concept field]])))}])
 
 (defn highlight-match
   "Wraps the matching part of the text in bold markers, preserving the original capitalization.
@@ -111,7 +111,7 @@
   [[concept field search-input]]
   (fn []
     (let [toggled-concepts @(re-frame/subscribe [::subs/toggled-concepts])
-          toggled (some #(= (:id %) (:id concept)) toggled-concepts)
+          toggled (some #(= (:id %) (:id concept)) toggled-concepts) ;; TODO could also be a subscription?
           prefLabel (highlight-match (-> concept :prefLabel :de) search-input)]
       [:li
        (if-let [narrower (:narrower concept)]
@@ -119,14 +119,13 @@
           [:summary {:class (when toggled "bg-orange-400 text-black")}
            [concept-checkbox concept field toggled]
            prefLabel]
-          [:ul {:tabindex "0"}
+          [:ul {:tabIndex "0"}
            (for [child narrower]
              ^{:key (:id child)} [concept-label-component [child field]])]]
          [:a {:class (when toggled "bg-orange-400 text-black")
               :on-click (fn [] (re-frame/dispatch [::events/toggle-concept [concept field]]))}
-          [concept-checkbox concept field toggled]
+          [concept-checkbox concept field toggled true]
           [:p
-           
            prefLabel]])])))
 
 (defn get-nested
@@ -201,13 +200,15 @@
            :class "btn m-1 grow w-full"}
           field-title]
          [:div {:class "dropdown-content z-[1]"}
-
           [:ul {:class "menu bg-base-200 rounded-box w-96 "
-                :tabindex "0"}
+                :tabIndex "0"}
-           [:input {:class "input"
+           [:label {:class "input flex items-center gap-2"}
+            [:input {:class "grow"
+                     :placeholder "Suche..."
                      :type "text"
                      :on-change (fn [e]
                                   (reset! search-input (-> e .-target .-value)))}]
+            [icons/looking-glass]]
            (doall
             (for [concept (:hasTopConcept filtered-cs)]
               ^{:key (str @search-input (:id concept))} [concept-label-component [concept field @search-input]]))]]]))))

src/ied/views/search.cljs

@@ -75,9 +75,11 @@
 
         [:p {:class "line-clamp-3"} description]
 
-        [:label {:class "btn self-end mb-0 mt-auto "
+        [:div {:class "flex flex-row mb-0 mt-auto justify-between"}
+         [:label {:class "btn  "
                   :on-click #(re-frame/dispatch [::events/navigate [:naddr-view :naddr naddr]])}
-         "Details"]]
+          "Details"]
+         [resource-component/add-to-list latest-event]]]
 
        [:div {:class "w-1/4"}
         [:figure