From 28c3be230218df3a077ba8467bcb7e2215331229 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Garc=C3=ADa=20Isa=C3=ADa?= Date: Mon, 11 Mar 2024 15:02:52 -0300 Subject: [PATCH] Replace Consumers Dataset dropdown an autoselect In production, the amount of datasets to pick from was getting large and unsorted, so the UX was really bad. This change mimics the Region selection, with an autoselect control for the users to filter the available options. See #717 --- .../client/projects2/components/settings.cljs | 2 +- .../client/sources/components/dropdown.cljs | 31 ++++++------------- 2 files changed, 11 insertions(+), 22 deletions(-) diff --git a/client/src/planwise/client/projects2/components/settings.cljs b/client/src/planwise/client/projects2/components/settings.cljs index b59a1ba0..a4a2f6f1 100644 --- a/client/src/planwise/client/projects2/components/settings.cljs +++ b/client/src/planwise/client/projects2/components/settings.cljs @@ -217,7 +217,7 @@ (when-not read-only [sources-type-component {:label "Data type"}]) [sources-dropdown-component {:label "Consumer Dataset" - :value (:source-set-id @current-project) + :model (:source-set-id @current-project) :on-change #(dispatch [:projects2/save-key :source-set-id %]) :disabled? read-only}] [current-project-input {:label "Consumers Unit" :path [:config :demographics :unit-name] :type "text" :disabled read-only :empty-label (capitalize consumer-unit)}] diff --git a/client/src/planwise/client/sources/components/dropdown.cljs b/client/src/planwise/client/sources/components/dropdown.cljs index 496acc50..8af76f9a 100644 --- a/client/src/planwise/client/sources/components/dropdown.cljs +++ b/client/src/planwise/client/sources/components/dropdown.cljs @@ -4,6 +4,7 @@ [planwise.client.asdf :as asdf] [planwise.client.components.common2 :as common2] [planwise.client.utils :as utils] + [planwise.client.ui.filter-select :as filter-select] [planwise.client.ui.rmwc :as m])) (def in-sources (rf/path [:sources])) @@ -14,29 +15,17 @@ [(subscribe [:sources/list]) (subscribe [:projects2/source-types])]) (fn [[list types] _] - (->> list - (filter (fn [{:keys [type]}] (types type))) - (mapv (fn [{:keys [id name type]}] {:value id :label name :type type}))))) + (filter (fn [{:keys [type]}] (types type)) list))) ;; ---------------------------------------------------------------------------- ;; Views -(defn- sources-select-component - [{:keys [label value options empty-label on-change]}] - [m/Select {:label (if (empty? options) empty-label label) - :disabled (empty? options) - :value (str value) - :options options - :onChange #(on-change (js/parseInt (-> % .-target .-value)))}]) - (defn sources-dropdown-component - [{:keys [label value on-change disabled?]}] - (let [options (subscribe [:sources/dropdown-options]) - component (if (or disabled? (empty? @options)) - common2/disabled-input-component - sources-select-component)] - [component {:label label - :value value - :options @options - :empty-label "No sources layer available." - :on-change on-change}])) \ No newline at end of file + [attrs] + (let [props (merge {:choices @(rf/subscribe [:sources/dropdown-options]) + :label-fn :name + :render-fn (fn [source] [:div.option-row + [:span (:name source)] + [:span.option-context (:value source)]])} + attrs)] + (into [filter-select/single-dropdown] (mapcat identity props))))