From a896bb60d63b788c3a3fe1df0db5b3557840a409 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 24 Dec 2015 20:30:05 +0200 Subject: [PATCH] Add improved form validation in color lightbox. --- frontend/uxbox/schema.cljs | 2 ++ frontend/uxbox/ui.cljs | 1 - frontend/uxbox/ui/dashboard/colors.cljs | 21 +++++++++++++------- frontend/uxbox/ui/dom.cljs | 4 ++++ frontend/uxbox/ui/form.cljs | 22 +++++++++++++++++++++ frontend/uxbox/ui/workspace/shortcuts.cljs | 2 -- resources/public/styles/main.scss | 1 + resources/public/styles/partials/forms.scss | 10 ++++++++++ 8 files changed, 53 insertions(+), 10 deletions(-) create mode 100644 frontend/uxbox/ui/form.cljs create mode 100644 resources/public/styles/partials/forms.scss diff --git a/frontend/uxbox/schema.cljs b/frontend/uxbox/schema.cljs index 32a12227f..9d42ce96a 100644 --- a/frontend/uxbox/schema.cljs +++ b/frontend/uxbox/schema.cljs @@ -30,6 +30,8 @@ [v] (not (nil? (re-find #"^#[0-9A-Fa-f]{6}$" v)))) +(def required v/required) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Public Api ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/uxbox/ui.cljs b/frontend/uxbox/ui.cljs index 425ad96ba..7675e0614 100644 --- a/frontend/uxbox/ui.cljs +++ b/frontend/uxbox/ui.cljs @@ -21,7 +21,6 @@ (defn app-render [own] (let [{:keys [location location-params] :as state} (rum/react state)] - (println "app-render" location state) (case location :auth/login (users/login) :dashboard/projects (dashboard/projects-page) diff --git a/frontend/uxbox/ui/dashboard/colors.cljs b/frontend/uxbox/ui/dashboard/colors.cljs index 40db07830..a9cb84894 100644 --- a/frontend/uxbox/ui/dashboard/colors.cljs +++ b/frontend/uxbox/ui/dashboard/colors.cljs @@ -5,10 +5,12 @@ [cats.labs.lens :as l] [uxbox.state :as st] [uxbox.rstore :as rs] + [uxbox.schema :as sc] [uxbox.data.dashboard :as dd] [uxbox.util.lens :as ul] - [uxbox.ui.dashboard.builtins :as builtins] [uxbox.ui.icons :as i] + [uxbox.ui.form :as form] + [uxbox.ui.dashboard.builtins :as builtins] [uxbox.ui.lightbox :as lightbox] [uxbox.ui.colorpicker :refer (colorpicker)] [uxbox.ui.dom :as dom] @@ -68,7 +70,7 @@ (defn page-title-render [own coll] (letfn [(on-title-edited [e] - (let [content (.-innerText (.-target e)) + (let [content (dom/event->inner-text e) collid (:id coll)] (rs/emit! (dd/rename-color-collection collid content)))) (on-delete [e] @@ -188,17 +190,21 @@ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; TODO: implement proper form validation +(def ^:static +color-form-schema+ + {:hex [sc/required sc/color]}) (defn- color-lightbox-render [own {:keys [coll color]}] (let [local (:rum/local own)] (letfn [(submit [e] - (let [params {:id (:id coll) :from color - :to (:hex @local)}] - (rs/emit! (dd/replace-color params)) - (lightbox/close!))) + (if-let [errors (sc/validate +color-form-schema+ @local)] + (swap! local assoc :errors errors) + (let [params {:id (:id coll) :from color + :to (:hex @local)}] + (rs/emit! (dd/replace-color params)) + (lightbox/close!)))) (on-change [e] - (let [value (str/trim (.-value (.-target e)))] + (let [value (str/trim (dom/event->value e))] (swap! local assoc :hex value)))] (html [:div.lightbox-body @@ -207,6 +213,7 @@ [:div.row-flex [:input#color-hex.input-text {:placeholder "#" + :class (form/error-class local :hex) :on-change on-change :value (or (:hex @local) color "") :type "text"}]] diff --git a/frontend/uxbox/ui/dom.cljs b/frontend/uxbox/ui/dom.cljs index 228d02a2f..695198f54 100644 --- a/frontend/uxbox/ui/dom.cljs +++ b/frontend/uxbox/ui/dom.cljs @@ -8,6 +8,10 @@ [e] (.preventDefault e)) +(defn event->inner-text + [e] + (.-innerText (.-target e))) + (defn event->value [e] (.-value (.-target e))) diff --git a/frontend/uxbox/ui/form.cljs b/frontend/uxbox/ui/form.cljs new file mode 100644 index 000000000..6816007e0 --- /dev/null +++ b/frontend/uxbox/ui/form.cljs @@ -0,0 +1,22 @@ +(ns uxbox.ui.form + (:require [sablono.core :refer-macros [html]] + [uxbox.schema :as sc])) + +(defn validate! + [local schema] + (if-let [errors (sc/validate schema @local)] + (swap! local assoc :errors errors) + (swap! local assoc :errors nil))) + +(defn input-error + [local name] + (when-let [errors (get-in @local [:errors name])] + [:div.errors + [:ul {} + (for [error errors] + [:li error])]])) + +(defn error-class + [local name] + (when (get-in @local [:errors name]) + "invalid")) diff --git a/frontend/uxbox/ui/workspace/shortcuts.cljs b/frontend/uxbox/ui/workspace/shortcuts.cljs index 6c52febeb..83ead79de 100644 --- a/frontend/uxbox/ui/workspace/shortcuts.cljs +++ b/frontend/uxbox/ui/workspace/shortcuts.cljs @@ -75,13 +75,11 @@ (defn -will-mount [own] - (println "shortcut-will-mount") (let [sub (init-handler)] (assoc own ::subscription sub))) (defn -will-unmount [own] - (println "shortcut-will-unmount") (let [sub (::subscription own)] (sub) (dissoc own ::subscription))) diff --git a/resources/public/styles/main.scss b/resources/public/styles/main.scss index 0ae9aafe3..eae31a552 100644 --- a/resources/public/styles/main.scss +++ b/resources/public/styles/main.scss @@ -44,3 +44,4 @@ @import 'partials/lightbox'; @import 'partials/color-palette'; @import 'partials/colorpicker'; +@import 'partials/forms'; diff --git a/resources/public/styles/partials/forms.scss b/resources/public/styles/partials/forms.scss new file mode 100644 index 000000000..319b013bd --- /dev/null +++ b/resources/public/styles/partials/forms.scss @@ -0,0 +1,10 @@ +// TODO: juan revisit + +input, +select, +textarea { + &.invalid { + border-color: red; + color: red; + } +}