enhance(ux): add an apply button to multiple selects

ofer1992 · Apr 4, 2023 · a1c3804 · a1c3804
1 parent b2e6e3d
commit a1c3804
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/main/frontend/components/query/builder.cljs b/src/main/frontend/components/query/builder.cljs
@@ -170,17 +170,19 @@
                 ;; Need the existing choices later to improve the UX
                 :selected-choices #{}
                 :prompt-key :select/default-select-multiple
-                :close-modal? false})
+                :close-modal? false
+                :on-apply (:toggle-fn opts)})
 
        "priority"
        (select db-default/built-in-priorities
-               (fn [value]
-                 (when (seq value)
-                   (append-tree! *tree opts loc (vec (cons :priority value)))))
-               {:multiple-choices? true
-                :selected-choices #{}
-                :prompt-key :select/default-select-multiple
-                :close-modal? false})
+         (fn [value]
+           (when (seq value)
+             (append-tree! *tree opts loc (vec (cons :priority value)))))
+         {:multiple-choices? true
+          :selected-choices #{}
+          :prompt-key :select/default-select-multiple
+          :close-modal? false
+          :on-apply (:toggle-fn opts)})
 
        "page"
        (let [pages (sort (db-model/get-all-page-original-names repo))]

diff --git a/src/main/frontend/components/select.cljs b/src/main/frontend/components/select.cljs
@@ -47,7 +47,7 @@
                  prompt-key input-default-placeholder close-modal?
                  extract-fn host-opts on-input input-opts
                  item-cp transform-fn tap-*input-val
-                 multiple-choices? _selected-choices]
+                 multiple-choices? on-apply _selected-choices]
           :or {limit 100
                prompt-key :select/default-prompt
                empty-placeholder (fn [_t] [:div])
@@ -90,7 +90,10 @@
                                  (when close-modal? (state/close-modal!))
                                  (when on-chosen
                                    (on-chosen (if multiple-choices? @*selected-choices x))))))
-        :empty-placeholder (empty-placeholder t)})]]))
+        :empty-placeholder (empty-placeholder t)})]
+
+     (when multiple-choices?
+       [:div.p-4 (ui/button "Apply updates" :on-click on-apply)])]))
 
 (defn select-config
   "Config that supports multiple types (uses) of this component. To add a new