diff --git a/examples/todomvc/resources/public/todos.css b/examples/todomvc/resources/public/todos.css index 16a60fba3..19679850d 100644 --- a/examples/todomvc/resources/public/todos.css +++ b/examples/todomvc/resources/public/todos.css @@ -211,6 +211,12 @@ label[for='toggle-all'] { text-decoration: line-through; } +#todo-list li .created { + font-size: 14px; + float: right; + word-break: break-all; +} + #todo-list li .destroy { display: none; position: absolute; diff --git a/examples/todomvc/src/todomvc/db.cljs b/examples/todomvc/src/todomvc/db.cljs index 56d1b66f6..0c3452fe2 100644 --- a/examples/todomvc/src/todomvc/db.cljs +++ b/examples/todomvc/src/todomvc/db.cljs @@ -22,7 +22,8 @@ (s/def ::id int?) (s/def ::title string?) (s/def ::done boolean?) -(s/def ::todo (s/keys :req-un [::id ::title ::done])) +(s/def ::date #(instance? js/Date (js/Date. %))) +(s/def ::todo (s/keys :req-un [::id ::title ::done ::date])) (s/def ::todos (s/and ;; should use the :kind kw to s/map-of (not supported yet) (s/map-of ::id ::todo) ;; in this map, each todo is keyed by its :id #(instance? PersistentTreeMap %) ;; is a sorted-map (not just a map) diff --git a/examples/todomvc/src/todomvc/events.cljs b/examples/todomvc/src/todomvc/events.cljs index 83a7bcd2a..0e1e54544 100644 --- a/examples/todomvc/src/todomvc/events.cljs +++ b/examples/todomvc/src/todomvc/events.cljs @@ -87,7 +87,7 @@ ;; The "path" interceptor in `todo-interceptors` means 1st parameter is :todos (fn [todos [text]] (let [id (allocate-next-id todos)] - (assoc todos id {:id id :title text :done false})))) + (assoc todos id {:id id :title text :done false :date (.getTime (js/Date.))})))) (reg-event-db diff --git a/examples/todomvc/src/todomvc/views.cljs b/examples/todomvc/src/todomvc/views.cljs index 53880412d..12cec36a0 100644 --- a/examples/todomvc/src/todomvc/views.cljs +++ b/examples/todomvc/src/todomvc/views.cljs @@ -26,7 +26,7 @@ (defn todo-item [] (let [editing (reagent/atom false)] - (fn [{:keys [id done title]}] + (fn [{:keys [id done title date]}] [:li {:class (str (when done "completed ") (when @editing "editing"))} [:div.view @@ -36,7 +36,9 @@ :on-change #(dispatch [:toggle-done id])}] [:label {:on-double-click #(reset! editing true)} - title] + title + [:span.created + (.toDateString (js/Date. date))]] [:button.destroy {:on-click #(dispatch [:delete-todo id])}]] (when @editing