From 33b6d2cd3a4914f91022ec8871b81c4f1086fe84 Mon Sep 17 00:00:00 2001 From: Saskia Lindner Date: Tue, 7 Mar 2017 18:45:06 +0100 Subject: [PATCH 1/5] Add date to todo --- examples/todomvc/resources/public/todos.css | 7 +++ examples/todomvc/src/todomvc/events.cljs | 24 ++++----- examples/todomvc/src/todomvc/views.cljs | 58 +++++++++++---------- 3 files changed, 49 insertions(+), 40 deletions(-) diff --git a/examples/todomvc/resources/public/todos.css b/examples/todomvc/resources/public/todos.css index 16a60fba3..01f197808 100644 --- a/examples/todomvc/resources/public/todos.css +++ b/examples/todomvc/resources/public/todos.css @@ -211,6 +211,13 @@ label[for='toggle-all'] { text-decoration: line-through; } +#todo-list li .created { + font-size: 14px; + float: right; + margin-top: auto; + margin-bottom: auto; +} + #todo-list li .destroy { display: none; position: absolute; diff --git a/examples/todomvc/src/todomvc/events.cljs b/examples/todomvc/src/todomvc/events.cljs index 83a7bcd2a..9b922a7bf 100644 --- a/examples/todomvc/src/todomvc/events.cljs +++ b/examples/todomvc/src/todomvc/events.cljs @@ -76,18 +76,18 @@ ;; usage: (dispatch [:add-todo "Finish comments"]) (reg-event-db ;; given the text, create a new todo - :add-todo - - ;; The standard set of interceptors, defined above, which we - ;; apply to all todos-modifiing event handlers. Looks after - ;; writing todos to local store, etc. - todo-interceptors - - ;; The event handler function. - ;; 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})))) + :add-todo + + ;; The standard set of interceptors, defined above, which we + ;; apply to all todos-modifiing event handlers. Looks after + ;; writing todos to local store, etc. + todo-interceptors + + ;; The event handler function. + ;; 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 :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..ffc37f195 100644 --- a/examples/todomvc/src/todomvc/views.cljs +++ b/examples/todomvc/src/todomvc/views.cljs @@ -26,42 +26,44 @@ (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 - [:input.toggle - {:type "checkbox" - :checked done - :on-change #(dispatch [:toggle-done id])}] - [:label - {:on-double-click #(reset! editing true)} - title] - [:button.destroy - {:on-click #(dispatch [:delete-todo id])}]] - (when @editing - [todo-input - {:class "edit" - :title title - :on-save #(dispatch [:save id %]) - :on-stop #(reset! editing false)}])]))) + [:div.view + [:input.toggle + {:type "checkbox" + :checked done + :on-change #(dispatch [:toggle-done id])}] + [:label + {:on-double-click #(reset! editing true)} + title + [:span.created + (.toDateString (js/Date. date))]] + [:button.destroy + {:on-click #(dispatch [:delete-todo id])}]] + (when @editing + [todo-input + {:class "edit" + :title title + :on-save #(dispatch [:save id %]) + :on-stop #(reset! editing false)}])]))) (defn task-list [] (let [visible-todos @(subscribe [:visible-todos]) all-complete? @(subscribe [:all-complete?])] - [:section#main - [:input#toggle-all - {:type "checkbox" - :checked all-complete? - :on-change #(dispatch [:complete-all-toggle (not all-complete?)])}] - [:label - {:for "toggle-all"} - "Mark all as complete"] - [:ul#todo-list - (for [todo visible-todos] - ^{:key (:id todo)} [todo-item todo])]])) + [:section#main + [:input#toggle-all + {:type "checkbox" + :checked all-complete? + :on-change #(dispatch [:complete-all-toggle (not all-complete?)])}] + [:label + {:for "toggle-all"} + "Mark all as complete"] + [:ul#todo-list + (for [todo visible-todos] + ^{:key (:id todo)} [todo-item todo])]])) (defn footer-controls From d4ee08ede5994f1f1fe80bf5bfd0919bfc515796 Mon Sep 17 00:00:00 2001 From: Saskia Lindner Date: Tue, 7 Mar 2017 19:07:43 +0100 Subject: [PATCH 2/5] Add spec for creation date --- examples/todomvc/src/todomvc/db.cljs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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) From 41c56cfefdd122edf6a74e8f98eea60df76fc872 Mon Sep 17 00:00:00 2001 From: Saskia Lindner Date: Wed, 8 Mar 2017 13:29:30 +0100 Subject: [PATCH 3/5] Cleanup code --- examples/todomvc/src/todomvc/events.cljs | 24 +++++----- examples/todomvc/src/todomvc/views.cljs | 60 ++++++++++++------------ 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/examples/todomvc/src/todomvc/events.cljs b/examples/todomvc/src/todomvc/events.cljs index 9b922a7bf..0e1e54544 100644 --- a/examples/todomvc/src/todomvc/events.cljs +++ b/examples/todomvc/src/todomvc/events.cljs @@ -76,18 +76,18 @@ ;; usage: (dispatch [:add-todo "Finish comments"]) (reg-event-db ;; given the text, create a new todo - :add-todo - - ;; The standard set of interceptors, defined above, which we - ;; apply to all todos-modifiing event handlers. Looks after - ;; writing todos to local store, etc. - todo-interceptors - - ;; The event handler function. - ;; 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 :date (.getTime (js/Date.))})))) + :add-todo + + ;; The standard set of interceptors, defined above, which we + ;; apply to all todos-modifiing event handlers. Looks after + ;; writing todos to local store, etc. + todo-interceptors + + ;; The event handler function. + ;; 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 :date (.getTime (js/Date.))})))) (reg-event-db diff --git a/examples/todomvc/src/todomvc/views.cljs b/examples/todomvc/src/todomvc/views.cljs index ffc37f195..08160a249 100644 --- a/examples/todomvc/src/todomvc/views.cljs +++ b/examples/todomvc/src/todomvc/views.cljs @@ -29,42 +29,42 @@ (fn [{:keys [id done title date]}] [:li {:class (str (when done "completed ") (when @editing "editing"))} - [:div.view - [:input.toggle - {:type "checkbox" - :checked done - :on-change #(dispatch [:toggle-done id])}] - [:label - {:on-double-click #(reset! editing true)} - title - [:span.created - (.toDateString (js/Date. date))]] - [:button.destroy - {:on-click #(dispatch [:delete-todo id])}]] - (when @editing - [todo-input - {:class "edit" - :title title - :on-save #(dispatch [:save id %]) - :on-stop #(reset! editing false)}])]))) + [:div.view + [:input.toggle + {:type "checkbox" + :checked done + :on-change #(dispatch [:toggle-done id])}] + [:label + {:on-double-click #(reset! editing true)} + title + [:span.created + (.toDateString (js/Date. date))]] + [:button.destroy + {:on-click #(dispatch [:delete-todo id])}]] + (when @editing + [todo-input + {:class "edit" + :title title + :on-save #(dispatch [:save id %]) + :on-stop #(reset! editing false)}])]))) (defn task-list [] (let [visible-todos @(subscribe [:visible-todos]) all-complete? @(subscribe [:all-complete?])] - [:section#main - [:input#toggle-all - {:type "checkbox" - :checked all-complete? - :on-change #(dispatch [:complete-all-toggle (not all-complete?)])}] - [:label - {:for "toggle-all"} - "Mark all as complete"] - [:ul#todo-list - (for [todo visible-todos] - ^{:key (:id todo)} [todo-item todo])]])) - + [:section#main + [:input#toggle-all + {:type "checkbox" + :checked all-complete? + :on-change #(dispatch [:complete-all-toggle (not all-complete?)])}] + [:label + {:for "toggle-all"} + "Mark all as complete"] + [:ul#todo-list + (for [todo visible-todos] + ^{:key (:id todo)} [todo-item todo])]])) + (defn footer-controls [] From a088133cb18172ce6e1951d1124673f012f281a1 Mon Sep 17 00:00:00 2001 From: Saskia Lindner Date: Wed, 8 Mar 2017 13:39:55 +0100 Subject: [PATCH 4/5] Cleanup code --- examples/todomvc/resources/public/todos.css | 3 +- examples/todomvc/src/todomvc/views.cljs | 56 ++++++++++----------- 2 files changed, 29 insertions(+), 30 deletions(-) diff --git a/examples/todomvc/resources/public/todos.css b/examples/todomvc/resources/public/todos.css index 01f197808..19679850d 100644 --- a/examples/todomvc/resources/public/todos.css +++ b/examples/todomvc/resources/public/todos.css @@ -214,8 +214,7 @@ label[for='toggle-all'] { #todo-list li .created { font-size: 14px; float: right; - margin-top: auto; - margin-bottom: auto; + word-break: break-all; } #todo-list li .destroy { diff --git a/examples/todomvc/src/todomvc/views.cljs b/examples/todomvc/src/todomvc/views.cljs index 08160a249..befc0fb63 100644 --- a/examples/todomvc/src/todomvc/views.cljs +++ b/examples/todomvc/src/todomvc/views.cljs @@ -29,42 +29,42 @@ (fn [{:keys [id done title date]}] [:li {:class (str (when done "completed ") (when @editing "editing"))} - [:div.view - [:input.toggle - {:type "checkbox" - :checked done - :on-change #(dispatch [:toggle-done id])}] - [:label - {:on-double-click #(reset! editing true)} - title - [:span.created - (.toDateString (js/Date. date))]] - [:button.destroy - {:on-click #(dispatch [:delete-todo id])}]] + [:div.view + [:input.toggle + {:type "checkbox" + :checked done + :on-change #(dispatch [:toggle-done id])}] + [:label + {:on-double-click #(reset! editing true)} + title + [:span.created + (.toDateString (js/Date. date))]] + [:button.destroy + {:on-click #(dispatch [:delete-todo id])}]] (when @editing [todo-input - {:class "edit" - :title title - :on-save #(dispatch [:save id %]) - :on-stop #(reset! editing false)}])]))) + {:class "edit" + :title title + :on-save #(dispatch [:save id %]) + :on-stop #(reset! editing false)}])]))) (defn task-list [] (let [visible-todos @(subscribe [:visible-todos]) all-complete? @(subscribe [:all-complete?])] - [:section#main - [:input#toggle-all - {:type "checkbox" - :checked all-complete? - :on-change #(dispatch [:complete-all-toggle (not all-complete?)])}] - [:label - {:for "toggle-all"} - "Mark all as complete"] - [:ul#todo-list - (for [todo visible-todos] - ^{:key (:id todo)} [todo-item todo])]])) - + [:section#main + [:input#toggle-all + {:type "checkbox" + :checked all-complete? + :on-change #(dispatch [:complete-all-toggle (not all-complete?)])}] + [:label + {:for "toggle-all"} + "Mark all as complete"] + [:ul#todo-list + (for [todo visible-todos] + ^{:key (:id todo)} [todo-item todo])]])) + (defn footer-controls [] From 1cf0b0f04b7de60fd066d67b2cdd70601dede669 Mon Sep 17 00:00:00 2001 From: Saskia Lindner Date: Wed, 8 Mar 2017 13:45:22 +0100 Subject: [PATCH 5/5] Cleanup code --- examples/todomvc/src/todomvc/views.cljs | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/examples/todomvc/src/todomvc/views.cljs b/examples/todomvc/src/todomvc/views.cljs index befc0fb63..12cec36a0 100644 --- a/examples/todomvc/src/todomvc/views.cljs +++ b/examples/todomvc/src/todomvc/views.cljs @@ -29,18 +29,18 @@ (fn [{:keys [id done title date]}] [:li {:class (str (when done "completed ") (when @editing "editing"))} - [:div.view + [:div.view [:input.toggle - {:type "checkbox" - :checked done - :on-change #(dispatch [:toggle-done id])}] + {:type "checkbox" + :checked done + :on-change #(dispatch [:toggle-done id])}] [:label - {:on-double-click #(reset! editing true)} - title - [:span.created - (.toDateString (js/Date. date))]] + {:on-double-click #(reset! editing true)} + title + [:span.created + (.toDateString (js/Date. date))]] [:button.destroy - {:on-click #(dispatch [:delete-todo id])}]] + {:on-click #(dispatch [:delete-todo id])}]] (when @editing [todo-input {:class "edit"