Skip to content

Instantly share code, notes, and snippets.

@dupuchba
Created Oct 5, 2018
Embed
What would you like to do?
(ns formfulcro.ui.root
(:require
[fulcro.client.mutations :as m :refer [defmutation]]
[fulcro.client.data-fetch :as df]
#?(:cljs [fulcro.client.dom :as dom] :clj [fulcro.client.dom-server :as dom])
[formfulcro.api.mutations :as api]
[fulcro.client.primitives :as prim :refer [defsc]]
[fulcro.i18n :as i18n :refer [tr trf]]
[fulcro.ui.elements :as ele]
[fulcro.ui.form-state :as fs]))
;; The main UI of your application
(defsc PhoneNumber [this {:keys [:db/id ::phone-type ::phone-number]} {:keys [onSelect]}]
{:query [:db/id ::phone-number ::phone-type]
:initial-state {:db/id :param/id ::phone-number :param/number ::phone-type :param/type}
:ident [:phone/by-id :db/id]}
(dom/li
(dom/a {:onClick (fn [] (onSelect id) ;; @NOTE : not working 'unknown app state mutation'
#_(prim/transact! this `[(edit-phone-number {:id ~id})]))}
(str phone-number " (" (phone-type {:home "Home" :work "Work" nil "Unknown"}) ")"))))
(def ui-phone-number (prim/factory PhoneNumber {:keyfn :db/id}))
(defsc PhoneBook [this {:keys [:db/id ::phone-numbers]} {:keys [onSelect]}]
{:query [:db/id {::phone-numbers (prim/get-query PhoneNumber)}]
:initial-state {:db/id :main-phone-book
::phone-numbers [{:id 1 :number "541-555-1212" :type :home}
{:id 2 :number "541-555-5533" :type :work}]}
:ident [:phonebook/by-id :db/id]}
(dom/div
(dom/h4 "Phone Book (click a number to edit)")
(dom/ul
(map (fn [n] (ui-phone-number (prim/computed n {:onSelect onSelect}))) phone-numbers))))
(def ui-phone-book (prim/factory PhoneBook {:keyfn :db/id}))
;;;;;;;;;;;
;; FORMS ;;
;;;;;;;;;;;
(defsc PhoneForm [this {:keys [:db/id ::phone-type] :as props}]
{:query [:db/id ::phone-type ::phone-number fs/form-config-join]
:form-fields #{::phone-number ::phone-type}
:ident [:phone/by-id :db/id]}
(dom/div nil (str "Form" id)))
(def ui-phone-form (prim/factory PhoneForm {:keyfn :db/id}))
;;;;;;;;;;;;;;
;; ENDFORMS ;;
;;;;;;;;;;;;;;
;;;;;;;;;;;;;;;;;;;;;;;;;
;; MUTATIONS FORM SIDE ;;
;;;;;;;;;;;;;;;;;;;;;;;;;
(defmutation edit-form-number [{:keys [id]}]
(action [{:keys [state]}]
(let [phone-type (get-in @state [:phone/by-id id ::phone-type])]
(swap! state (fn [s]
(-> s
(fs/add-form-config* PhoneForm [:phone/by-id id])
(fs/mark-complete* [:phone/by-id id])
(assoc :root/phone-form [:phone/by-id id])))))))
(defsc Root [this {:keys [#_react/key :root/phone-form :root/phonebook]}]
{:query [{:root/phonebook (prim/get-query PhoneBook)}
{:root/phone-form (prim/get-query PhoneBook)}]
:initial-state (fn [params]
{:root/phonebook (prim/get-initial-state PhoneBook {})})}
(dom/div
(dom/link {:ref "stylesheet" :href "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"})
#_(ui-phone-form)
(ui-phone-book (prim/computed phonebook {:onSelect (fn [id] (prim/transact! this `[(edit-phone-number {:id ~id})]))}))))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment