form.cljs

(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})]))}))))