浏览代码

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

Tienson Qin 2 年之前
父节点
当前提交
a1c3804e96
共有 2 个文件被更改,包括 15 次插入10 次删除
  1. 10 8
      src/main/frontend/components/query/builder.cljs
  2. 5 2
      src/main/frontend/components/select.cljs

+ 10 - 8
src/main/frontend/components/query/builder.cljs

@@ -170,17 +170,19 @@
                 ;; Need the existing choices later to improve the UX
                 ;; Need the existing choices later to improve the UX
                 :selected-choices #{}
                 :selected-choices #{}
                 :prompt-key :select/default-select-multiple
                 :prompt-key :select/default-select-multiple
-                :close-modal? false})
+                :close-modal? false
+                :on-apply (:toggle-fn opts)})
 
 
        "priority"
        "priority"
        (select db-default/built-in-priorities
        (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"
        "page"
        (let [pages (sort (db-model/get-all-page-original-names repo))]
        (let [pages (sort (db-model/get-all-page-original-names repo))]

+ 5 - 2
src/main/frontend/components/select.cljs

@@ -47,7 +47,7 @@
                  prompt-key input-default-placeholder close-modal?
                  prompt-key input-default-placeholder close-modal?
                  extract-fn host-opts on-input input-opts
                  extract-fn host-opts on-input input-opts
                  item-cp transform-fn tap-*input-val
                  item-cp transform-fn tap-*input-val
-                 multiple-choices? _selected-choices]
+                 multiple-choices? on-apply _selected-choices]
           :or {limit 100
           :or {limit 100
                prompt-key :select/default-prompt
                prompt-key :select/default-prompt
                empty-placeholder (fn [_t] [:div])
                empty-placeholder (fn [_t] [:div])
@@ -90,7 +90,10 @@
                                  (when close-modal? (state/close-modal!))
                                  (when close-modal? (state/close-modal!))
                                  (when on-chosen
                                  (when on-chosen
                                    (on-chosen (if multiple-choices? @*selected-choices x))))))
                                    (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
 (defn select-config
   "Config that supports multiple types (uses) of this component. To add a new
   "Config that supports multiple types (uses) of this component. To add a new