WIP: working on migrating old frontend code

frontend/package-lock.json

@@ -0,0 +1,69 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "react": {
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
+      "integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-dom": {
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
+      "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.15.0"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "scheduler": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
+      "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    }
+  }
+}

frontend/package.json

@@ -1,5 +1,9 @@
 {
   "devDependencies": {
     "shadow-cljs": "2.8.83"
+  },
+  "dependencies": {
+    "react": "16.9.0",
+    "react-dom": "16.9.0"
   }
 }

frontend/src/cljs/microtables_frontend/db.cljs

@@ -1,4 +1,21 @@
 (ns microtables-frontend.db)
 
 (def default-db
-  {:name "re-frame"})
+  {:name "re-frame"
+   :table-data [{:row 1 :col "A" :value "59" :view :display}
+                {:row 5 :col "C" :value "269" :view :display}
+                {:row 4 :col "B" :value "7893" :view :display}
+                {:row 2 :col "F" :value "8650" :view :display}
+                {:row 6 :col "D" :value "4065" :view :display}
+                {:row 7 :col "F" :value "5316" :view :display}
+                {:row 12 :col "A" :value "2405" :view :display}
+                {:row 5 :col "B" :value "7863" :view :display}
+                {:row 9 :col "E" :value "3144" :view :display}
+                {:row 10 :col "D" :value "8272" :view :display}
+                {:row 11 :col "D" :value "2495" :view :display}
+                {:row 15 :col "E" :value "8968" :view :display}
+                {:row 7 :col "B" :value "=C5 + D6" :view :display}
+                {:row 8 :col "B" :value "=B7 * 2" :view :display}
+                {:row 7 :col "C" :value "=D1" :view :display}
+                {:row 12 :col "B" :value "=C12" :view :display}]})
+

frontend/src/cljs/microtables_frontend/events.cljs

@@ -1,10 +1,17 @@
 (ns microtables-frontend.events
   (:require
    [re-frame.core :as re-frame]
-   [microtables-frontend.db :as db]
-   ))
+   [microtables-frontend.db :as db]))
+
 
 (re-frame/reg-event-db
  ::initialize-db
  (fn [_ _]
    db/default-db))
+
+(re-frame/reg-event-db
+  ::edit-cell-value
+  (fn [db [_ c r existing-datum value]]
+    (if (nil? existing-datum)
+      (assoc db :table-data (conj (:table-data db) {:row r :col c :value value :dirty true}))
+      (assoc db :table-data (map #(if (and (= r (:row %)) (= c (:col %))) (assoc (assoc % :dirty true) :value value) %) (:table-data db))))))

frontend/src/cljs/microtables_frontend/subs.cljs

@@ -6,3 +6,10 @@
  ::name
  (fn [db]
    (:name db)))
+
+(re-frame/reg-sub
+  ::table-data
+  (fn [db]
+    (:table-data db)))
+
+

frontend/src/cljs/microtables_frontend/utils.cljs

@@ -0,0 +1,19 @@
+(ns microtables-frontend.utils)
+
+(defn highest [dir data] (apply max (map dir data)))
+
+(defn increment-letter-code [s]
+  (let [l (last s)]
+    (cond
+      (empty? s) [65]
+      (= l 90) (conj (increment-letter-code (subvec s 0 (dec (count s)))) 65)
+      :else (conj (subvec s 0 (dec (count s))) (inc l)))))
+
+
+(defn next-letter [lc]
+  (apply str (map char (increment-letter-code (mapv #(.charCodeAt % 0) lc)))))
+
+
+(def col-letters (iterate next-letter "A"))
+
+

frontend/src/cljs/microtables_frontend/views.cljs

@@ -2,10 +2,53 @@
   (:require
    [re-frame.core :as re-frame]
    [microtables-frontend.subs :as subs]
-   ))
+   [microtables-frontend.events :as events]
+   [microtables-frontend.utils :as utils]))
+
+
+
+
+(defn cell [c r data]
+  (let [datum (some #(if (and (= c (:col %)) (= r (:row %))) %) data)]
+    ^{:key (str c r)} [:td
+                       [:input {:id (str c r)
+                                :value (if (= (get datum :view nil) :value)
+                                         (get datum :value "")
+                                         (get datum :error (get datum :display (get datum :value ""))))
+                                :on-change #(re-frame/dispatch [::events/edit-cell-value c r datum (.. % -target -value)])}]]))
+
+(defn row [r cols data]
+  ^{:key (str "row-" r)} [:tr
+                          (cons
+                            ^{:key (str "row-head-" r)} [:th (str r)]
+                            (map #(cell % r data) cols))])
+
+(defn header-row [cols]
+  ^{:key "header"} [:tr
+                    (cons
+                      ^{:key "corner"} [:th]
+                      (map (fn [c] ^{:key (str "col-head-" c)} [:th c]) cols))])
+
+(defn sheet [data]
+  [:table [:tbody
+           (let [maxrow (utils/highest :row data)
+                 cols (take-while (partial not= (utils/next-letter (utils/highest :col data))) utils/col-letters)]
+             (cons
+               (header-row cols)
+               (map #(row % cols data) (range 1 (inc maxrow)))))]])
+
+
+
+
+
 
 (defn main-panel []
-  (let [name (re-frame/subscribe [::subs/name])]
+  (let [name (re-frame/subscribe [::subs/name])
+        data (re-frame/subscribe [::subs/table-data])]
     [:div
      [:h1 "Hello from " @name]
-     ]))
+     [:div
+      [:h1 "Microtables"]
+      [sheet @data]]]))
+
+