Add improved form validation in color lightbox.

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
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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)

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"}]]

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)))

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"))

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)))

resources/public/styles/main.scss

@@ -44,3 +44,4 @@
 @import 'partials/lightbox';
 @import 'partials/color-palette';
 @import 'partials/colorpicker';
+@import 'partials/forms';

resources/public/styles/partials/forms.scss

@@ -0,0 +1,10 @@
+// TODO: juan revisit
+
+input,
+select,
+textarea {
+  &.invalid {
+    border-color: red;
+    color: red;
+  }
+}