core.cljs

(ns cards.core
  (:require-macros [devcards.core :as dc :refer [defcard deftest defcard-rg]]
                   [clojure.set :as s])
  (:require [reagent.core :as r]
            [cljs.test :as t :refer-macros [is testing]]))

(enable-console-print!)

(def state (r/atom {:app/title "mimas"
                    :dropdown/list [{:item/id 0 :item/value :item-1 :item/label "item#1"}
                                    {:item/id 1 :item/value :item-2 :item/label "item#2"}
                                    {:item/id 2 :item/value :item-3 :item/label "item#3"}]
                    :task/list [{:task/id (rand-int 100) :task/title "task#1" :task/project "project#1"}
                                {:task/id (rand-int 100) :task/title "task#2" :task/project "project#2"}
                                {:task/id (rand-int 100) :task/title "task#3" :task/project "project#1"}]}))

(defcard state
  nil
  @state
  {:inspect-data true})

(defcard-rg title
  (fn [data _]
    (let [title (get @data :app/title)]
      [:div.title [:h1.title__text title]]))
  state)

(defn dropdown [data]
  (let [st (r/atom {:open? false :active nil})
        dropdown (get @data :dropdown/list)]
    (fn []
      (let [{:keys [open? active]} @st]
        [:div.dropdown
         (if-not open?
           [:div.dropdown__active {:on-click #(swap! st assoc :open? true)} (or (:item/label active) "none")]
           [:div.dropdown__list
            (for [{:keys [item/id item/label] :as item} dropdown]
              [:div.list__item {:key id :on-click #(swap! st assoc :active item :open? false)} label])])]))))

(defcard-rg dropdown
  (fn [data _]
    [dropdown data])
  state)

(defcard-rg create-task-panel
  (fn [data _]
    [:div.create-task-panel
     [:div.create-task-panel__input-container
      [:input.input-container__input {:type "text"}]]
     [:div.create-task-panel__dropdown-container
      [dropdown data]]
     [:div.create-task-panel__submit-container
      [:button.submit-container__submit-btn "create"]]])
  state)

(defn task-item [data _]
  (let [{:keys [task/id task/title task/project]} @data]
    [:li.task-item {:key id}
     [:input.task-item__done-checkbox {:type "checkbox"}]
     [:p.task-item__title title]
     [:small.task-item__project project]]))

(defcard-rg task-item
  (fn [data _]
    [task-item data])
  (second (get @state :task/list)))

(defcard-rg task-list
  (fn [data _]
    (let [{:keys [task/list]} @data]
      [:ul.task-list (map task-item @list)]))
  state)

;; (deftest tests
;;   (testing "foo"
;;     (is (= 2 2) "bla 1")
;;     (is (= 2 2) "ble")))