checkboxes on multi select working

resources/public/css/output.css

@@ -815,6 +815,11 @@ html {
     border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
   }
 
+  .checkbox-warning:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
+  }
+
   .label a:hover {
     --tw-text-opacity: 1;
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
@@ -1965,6 +1970,27 @@ html {
   color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
 }
 
+.checkbox-warning {
+  --chkbg: var(--fallback-wa,oklch(var(--wa)/1));
+  --chkfg: var(--fallback-wac,oklch(var(--wac)/1));
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
+}
+
+.checkbox-warning:focus-visible {
+  outline-color: var(--fallback-wa,oklch(var(--wa)/1));
+}
+
+.checkbox-warning:checked,
+    .checkbox-warning[aria-checked="true"] {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+}
+
 @keyframes checkmark {
   0% {
     background-position-y: 5px;
@@ -3432,6 +3458,21 @@ details.collapse summary::-webkit-details-marker {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
+}
+
+.bg-orange-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
+}
+
+.bg-orange-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+}
+
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;

src/ied/views/add.cljs

@@ -80,21 +80,29 @@
          :about {:type :skos
                  :schemes ["https://w3id.org/kim/hochschulfaechersystematik/scheme"]}}})
 
+(defn concept-checkbox [concept field toggled]
+  [:input {:type "checkbox"
+           :checked (or toggled false)
+           :class "checkbox checkbox-warning"
+           :on-change (fn [] (re-frame/dispatch [::events/toggle-concept [concept field]]))}])
+
 (defn concept-label-component
   [[concept  field]]
   (fn []
     (let [toggled-concepts @(re-frame/subscribe [::subs/toggled-concepts])
           toggled (some #(= (:id %) (:id concept)) toggled-concepts)]
-      [:div {:class ""} 
+      [:li
-       [:p
+       (if-let [narrower (:narrower concept)]
-        {:class (str "hover:bg-base-200 cursor-pointer" (when toggled " bg-white"))
+         [:details {:open false}
-         :on-click (fn []
+          [:summary {:class (when toggled "bg-orange-400 text-black")}
-                     (re-frame/dispatch [::events/toggle-concept [concept field]]))}
+           [concept-checkbox concept field toggled]
-        (-> concept :prefLabel :de)]
+           (-> concept :prefLabel :de)]
-       (when-let [narrower (:narrower concept)]
+          [:ul {:tabindex "0"}
-         [:div {:class "pl-2 "}
+           (for [child narrower]
-          (for [child narrower]
+             ^{:key (:id child)} [concept-label-component [child field]])]]
-            ^{:key (:id child)} [concept-label-component [child field]])])])))
+         [:a {:class (when toggled "bg-orange-400 text-black")}
+          [concept-checkbox concept field toggled]
+          [:p {:on-click (fn [] (re-frame/dispatch [::events/toggle-concept [concept field]])) } (-> concept :prefLabel :de)]])])))
 
 (defn skos-concept-scheme-multiselect-component
   [[cs field field-title]]
@@ -106,18 +114,12 @@
      :role "button"
      :class "btn m-1 grow w-full"}
     field-title]
-   [:div
+   [:div {:class "dropdown-content z-[1]"}
-    {:tabIndex "0",
+    [:ul {:class "menu bg-base-200 rounded-box w-96 "
-     :class
+          :tabindex "0"}
-     "dropdown-content card card-compact bg-base-100 z-[1] w-64 p-2 shadow"}
-    [:div
-     {:class "card-body"}
-     [:h3 {:class "card-title"}
-      field-title]
      (doall
       (for [concept (:hasTopConcept cs)]
-        ^{:key (:id concept)} [concept-label-component [concept field]]))
+        ^{:key (:id concept)} [concept-label-component [concept field]]))]]])
-     [:p "you can use any element as a dropdown."]]]])
 
 (defn array-fields-component [selected-md-scheme field field-title]
   (let [array-items-type (get-in selected-md-scheme [field :items :type])