Roughing out UI with Parenscript, React, and Bootstrap

agent-ui.lisp

;;;; agent-ui.paren

(pt:defcomponent left-main-column ()
  (pt:jsl
   (:div :class-name "col-md-4" ;; left main column
         (:div :id "status-box")
         (:button :class "btn btn-default btn-xs" :on-click (ps:@ this props on-callback-click) "(Re)Schedule Callback")
         (:button :class "btn btn-default btn-xs" :on-click (ps:@ this props on-last-call-click) "Code Other")
         (:button :class "btn btn-default btn-xs" :on-click (ps:@ this props on-sale-authorised-click) "Authorise Sale")
         )))

(pt:defcomponent right-main-column-nav ()
  (pt:jsl
   (:div :class-name "nav nav-pills"
         (:ul
           (:li :class-name (if (= (ps:@ this props display) 'catalogue-sales-box) "active" "inactive")
                (:a :href "#catalogue"
                    :on-click (ps:@ this props on-catalogue-sales-click)
                    "Catalogue"))
           (:li :class-name (if (= (ps:@ this props display) 'offers-responses-box) "active" "inactive")
                (:a :href "#offers"
                    :on-click (ps:@ this props on-offers-responses-click)
                    "Offers"))))))

(pt:defcomponent catalogue-sales-box ()
  (pt:jsl
   (:div (right-main-column-nav (ps:@ this props))
         (:div "catalogue-sales-box"))))

(pt:defcomponent offers-responses-box ()
  (pt:jsl
   (:div (right-main-column-nav (ps:@ this props))
         (:div "offers-responses-box"))))

(pt:defcomponent sale-authorised-box ()
  (pt:jsl
   (:div (:div "sale-authorised-box")
         (:button :class "btn btn-default btn-xs" :on-click (ps:@ this props on-exit-click) "Exit"))))

(pt:defcomponent callback-box ()
  (pt:jsl
   (:div (:div "callback-box")
         (:button :class "btn btn-default btn-xs" :on-click (ps:@ this props on-exit-click) "Exit"))))

(pt:defcomponent last-call-box ()
  (pt:jsl
   (:div (:div "last-call-box")
         (:button :class "btn btn-default btn-xs" :on-click (ps:@ this props on-exit-click) "Exit"))))

(pt:defcomponent main-container
    (:get-initial-state
     #'(lambda () (ps:create 'display 'catalogue-sales-box))
     :display-catalogue-sales-box
     #'(lambda () (ps:chain this (set-state (ps:create 'display 'catalogue-sales-box))))
     :display-offers-responses-box
     #'(lambda () (ps:chain this (set-state (ps:create 'display 'offers-responses-box))))
     :display-sale-authorised-box
     #'(lambda () (ps:chain this (set-state (ps:create 'display 'sale-authorised-box))))
     :display-callback-box
     #'(lambda () (ps:chain this (set-state (ps:create 'display 'callback-box))))
     :display-last-call-box
     #'(lambda () (ps:chain this (set-state (ps:create 'display 'last-call-box))))
     )
  (pt:jsl
   (:div :class-name "container-fluid"
         (:div :class-name "row"
               (left-main-column (ps:create 'on-callback-click (ps:@ this display-callback-box)
                                            'on-last-call-click (ps:@ this display-last-call-box)
                                            'on-sale-authorised-click (ps:@ this display-sale-authorised-box)
                                  ))
               (:div :class-name "col-md-8"
                     (cond ((= (ps:@ this state display) 'catalogue-sales-box)
                            (catalogue-sales-box (ps:create 'display 'catalogue-sales-box
                                                            'on-catalogue-sales-click (ps:@ this display-catalogue-sales-box)
                                                            'on-offers-responses-click (ps:@ this display-offers-responses-box))))
                           ((= (ps:@ this state display) 'offers-responses-box)
                            (offers-responses-box (ps:create 'display 'offers-responses-box
                                                             'on-catalogue-sales-click (ps:@ this display-catalogue-sales-box)
                                                             'on-offers-responses-click (ps:@ this display-offers-responses-box))))
                           ((= (ps:@ this state display) 'sale-authorised-box)
                            (sale-authorised-box (ps:create 'on-exit-click (ps:@ this display-catalogue-sales-box))))
                           ((= (ps:@ this state display) 'callback-box)
                            (callback-box (ps:create 'on-exit-click (ps:@ this display-catalogue-sales-box))))
                           ((= (ps:@ this state display) 'last-call-box)
                            (last-call-box (ps:create 'on-exit-click (ps:@ this display-catalogue-sales-box))))))))))