From 7c892cf0126e23706474ed77418e891dd1bf37b2 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 13 Apr 2016 23:42:07 +0300 Subject: [PATCH] Improve error handling on workspace settings form. --- src/uxbox/data/workspace.cljs | 31 ++++++++++++++++++ src/uxbox/ui/workspace/settings.cljs | 47 ++++++++++++++++------------ 2 files changed, 58 insertions(+), 20 deletions(-) diff --git a/src/uxbox/data/workspace.cljs b/src/uxbox/data/workspace.cljs index d3603641f2..fe5f3c4200 100644 --- a/src/uxbox/data/workspace.cljs +++ b/src/uxbox/data/workspace.cljs @@ -15,6 +15,8 @@ [uxbox.data.core :refer (worker)] [uxbox.data.pages :as udp] [uxbox.data.shapes :as uds] + [uxbox.data.forms :as udf] + [uxbox.ui.lightbox :as lightbox] [uxbox.util.datetime :as dt] [uxbox.util.math :as mth] [uxbox.util.data :refer (index-of)] @@ -196,3 +198,32 @@ [id] (InitializeAlignmentIndex. id)) +;; --- Update Workspace Settings (Form) + +(defrecord UpdateWorkspaceSettings [id options] + rs/WatchEvent + (-apply-watch [_ state s] + (let [page (get-in state [:pages-by-id id]) + page (assoc page :options options)] + (rx/of + (udp/update-page-metadata page) + (initialize-alignment-index id) + (udf/clean :workspace/settings)))) + + rs/EffectEvent + (-apply-effect [_ state] + (lightbox/close!))) + +(def update-workspace-settings-schema + {:grid/y-axis [sc/required sc/integer [sc/in-range 2 100]] + :grid/x-axis [sc/required sc/integer [sc/in-range 2 100]] + :grid/alignment [sc/boolean] + :grid/color [sc/required sc/color]}) + +(defn update-workspace-settings + [id data] + (let [schema update-workspace-settings-schema + [errors data] (sc/validate data schema)] + (if errors + (udf/assign-errors :workspace/settings errors) + (UpdateWorkspaceSettings. id data)))) diff --git a/src/uxbox/ui/workspace/settings.cljs b/src/uxbox/ui/workspace/settings.cljs index 5c061617c4..f3f4cb3146 100644 --- a/src/uxbox/ui/workspace/settings.cljs +++ b/src/uxbox/ui/workspace/settings.cljs @@ -10,11 +10,14 @@ [lentes.core :as l] [rum.core :as rum] [uxbox.constants :as c] + [uxbox.state :as st] [uxbox.rstore :as rs] [uxbox.data.pages :as udp] + [uxbox.data.forms :as udf] [uxbox.data.workspace :as udw] [uxbox.ui.icons :as i] [uxbox.ui.mixins :as mx] + [uxbox.ui.forms :as forms] [uxbox.ui.lightbox :as lightbox] [uxbox.ui.colorpicker :as uucp] [uxbox.ui.workspace.base :as wb] @@ -23,36 +26,38 @@ ;; --- Lentes -(def page-metadata-l - (-> (l/key :metadata) - (l/focus-atom wb/page-l))) +(def formdata (udf/focus-form-data :workspace/settings)) +(def formerrors (udf/focus-form-errors :workspace/settings)) +(def assign-field-value (partial udf/assign-field-value :workspace/settings)) ;; --- Form Component -;; TODO: proper implement form validation +(def settings-form-defaults + {:grid/x-axis c/grid-x-axis + :grid/y-axis c/grid-y-axis + :grid/color "#0000ff" + :grid/alignment false}) (defn- settings-form-render [own] - (let [local (:rum/local own) - page (rum/react wb/page-l) - opts (merge (:options page) - (deref local))] + (let [page (rum/react wb/page-l) + form (merge settings-form-defaults + (:options page) + (rum/react formdata)) + errors (rum/react formerrors)] (letfn [(on-field-change [field event] (let [value (dom/event->value event) - value (parse-int value)] - (swap! local assoc field value))) + value (parse-int value "")] + (rs/emit! (assign-field-value field value)))) (on-color-change [color] - (swap! local assoc :grid/color color)) + (rs/emit! (assign-field-value :grid/color color))) (on-align-change [event] (let [checked? (-> (dom/get-target event) (dom/checked?))] - (swap! local assoc :grid/alignment checked?))) + (rs/emit! (assign-field-value :grid/alignment checked?)))) (on-submit [event] (dom/prevent-default event) - (let [page (assoc page :options opts)] - (rs/emit! (udp/update-page-metadata page) - (udw/initialize-alignment-index (:id page))) - (lightbox/close!)))] + (rs/emit! (udw/update-workspace-settings (:id page) form)))] (html [:form {:on-submit on-submit} [:span.lightbox-label "Grid size"] @@ -60,28 +65,30 @@ [:input#grid-x.input-text {:placeholder "X px" :type "number" - :value (:grid/x-axis opts c/grid-x-axis) + :class (forms/error-class errors :grid/x-axis) + :value (:grid/x-axis form "") :on-change (partial on-field-change :grid/x-axis) :min 1 :max 100}] [:input#grid-y.input-text {:placeholder "Y px" :type "number" - :value (:grid/y-axis opts c/grid-y-axis) + :class (forms/error-class errors :grid/y-axis) + :value (:grid/y-axis form "") :on-change (partial on-field-change :grid/y-axis) :min 1 :max 100}]] [:span.lightbox-label "Grid color"] [:div.color-picker-default (uucp/colorpicker - :value (:grid/color opts "#0000ff") + :value (:grid/color form) :on-change on-color-change)] [:span.lightbox-label "Grid magnet option"] [:div.input-checkbox.check-primary [:input {:type "checkbox" :on-change on-align-change - :checked (:grid/alignment opts) + :checked (:grid/alignment form) :id "magnet" :value "Yes"}] [:label {:for "magnet"} "Activate magnet"]]