initial UI, pagination starts at 1 for some reason

frontend/files/records/app.js

@@ -0,0 +1,168 @@
+var sortState = {
+  sortBy: "sortArtist",
+  sortOrder: "asc",
+};
+
+function init() {
+  fetch("/api/records")
+    .then((response) => response.json())
+    .then((records) => {
+      // prepare response
+      records.forEach(apiResponseParsing);
+      document.getElementById("search").addEventListener("input", (e) => {
+        renderTable(search(records, e.target.value));
+      });
+      renderTable(records);
+    });
+}
+
+function renderTable(records, sortField) {
+  if (sortField) {
+    if (sortState.sortBy === sortField && sortState.sortOrder === "asc") {
+      sortState.sortOrder = "desc";
+    } else {
+      sortState.sortOrder = "asc";
+    }
+    sortState.sortBy = sortField;
+  }
+  records.sort((one, two) =>
+    (one[sortState.sortBy] + one["sortName"]).localeCompare(
+      two[sortState.sortBy] + two["sortName"]
+    )
+  );
+  if (sortState.sortOrder === "desc") {
+    records.reverse();
+  }
+  records.forEach((e, i) => (e.rowNumber = i)); // re-key
+
+  // rendering
+  var recordElement = document.getElementById("records");
+  recordElement.innerHTML = TableTemplate(records);
+
+  // add listeners for selecting record to view
+  Array.from(recordElement.querySelectorAll("tbody tr"))
+    .slice(1) // remove header from Array
+    .forEach((row) => {
+      row.addEventListener("click", (e) => {
+        // add listener to swap current record
+        document.getElementById("current").innerHTML = RecordTemplate(
+          records[e.currentTarget.id]
+        );
+      });
+    });
+  // add sorting callbacks
+  Array.from(
+    recordElement.querySelectorAll("tbody tr th[data-sort-by]")
+  ).forEach((row) => {
+    row.addEventListener("click", function (e) {
+      renderTable(records, e.target.dataset.sortBy); // only add callback when there's a sortBy attribute
+    });
+  });
+  // mark currently active column
+  recordElement
+    .querySelector("tbody tr th[data-sort-by=" + sortState.sortBy + "]")
+    .classList.add(sortState.sortOrder);
+}
+
+function apiResponseParsing(record) {
+  record.sortName = titleCleaner(record.name);
+  return record;
+}
+
+function search(records, searchBy) {
+  searchBy = searchCleaner(searchBy);
+  if (searchBy !== "") {
+    records = records.filter(({ name, artists, genre, label, year }) => {
+      return Object.values({
+        name,
+        artists: artists.join(" "),
+        genre,
+        label,
+        year,
+      }).find((field) => searchCleaner(field).indexOf(searchBy) !== -1);
+    });
+  }
+  return records;
+}
+
+function titleCleaner(title) {
+  return title
+    .replace('"', "")
+    .replace(":", "")
+    .replace(/^(An?|The)\s/i, "");
+}
+
+function searchCleaner(str) {
+  return str
+    .toLowerCase()
+    .replaceAll('"', "")
+    .replaceAll(":", "")
+    .replaceAll("'", "")
+    .replaceAll(" ", "");
+}
+
+// AlbumName   string   `json:"name"`
+// Artists     []string `json:"artists"`
+// SortArtist  string   `json:"sortArtist"`
+// Identifier  string   `json:"identifier"`
+// Format      string   `json:"format"`
+// Genre       string   `json:"genre"`
+// Label       string   `json:"label"`
+// Year        string   `json:"year"`
+// Description string   `json:"description"`
+// CoverURL    string   `json:"coverURL"`
+// DiscogsURL  string   `json:"discogsURL"`
+
+function RecordTemplate({
+  name,
+  artists,
+  coverURL,
+  description,
+  format,
+  genre,
+  identifier,
+  label,
+  year,
+}) {
+  return `${coverURL ? `<img src="${coverURL}"/>` : ""}
+  <h1>${name}</h1>
+  <h2>${artists.join(", ")}</h2>
+  <span>${identifier}</span><br/>
+  <span>${genre}, ${label}, ${year}</span><br/>
+  <span>${format}</span>
+  <div class="description">
+    <p>${description}</p>
+  </div>`;
+}
+
+function TableRowTemplate({
+  artists,
+  identifier,
+  label,
+  rowNumber,
+  name,
+  year,
+}) {
+  return `<tr class="tRow" id="${rowNumber}">
+    <td class="name">
+      ${name}
+    </td>
+    <td class="artist">${artists.join(", ")}</td>
+    <td class="label">${label}</td>
+    <td class="identifier">${identifier}</td>
+    <td class="year">${year}</td>
+  </tr>`;
+}
+
+function TableTemplate(records) {
+  return `<table class="recordTable">
+    <tr>
+      <th data-sort-by="sortName" class="tHeader name">Name</th>
+      <th data-sort-by="sortArtist" class="tHeader artist">Artist(s)</th>
+      <th data-sort-by="label" class="tHeader label">Label</th>
+      <th data-sort-by="identifier" class="tHeader identifier">Identifier</th>
+      <th data-sort-by="year" class="tHeader year">Year</th>
+    </tr>${records.reduce((acc, record) => {
+      return acc.concat(TableRowTemplate(record));
+    }, "")} </table>`;
+}