Merge pull request #1507 from unfoldingWord/abelpz-chapter-verse-filter

added chapter and verse filters for tsv

Author: Joel-C-Johnson

package.json

@@ -35,7 +35,7 @@
     "@material-ui/styles": "^4.11.3",
     "axios": "^0.21.0",
     "bible-reference-range": "^1.0.1",
-    "datatable-translatable": "1.0.15",
+    "datatable-translatable": "^1.0.16",
     "deep-freeze": "^0.0.1",
     "gitea-react-toolkit": "2.2.3",
     "lodash.isequal": "^4.5.0",

public/build_number

@@ -1 +1 @@
-207-408b416
+210-1dcfb53

src/components/translatable/ChapterVerseFilters.js

@@ -0,0 +1,73 @@
+import { FormControl, InputLabel, ListItemText, MenuItem, Select, Box } from "@material-ui/core";
+import React, { useState } from "react";
+import { useDeepCompareCallback } from "use-deep-compare";
+
+const SelectSimple = ({options,onChange,label,value,...props}) => {
+  return (
+    <FormControl {...props}>
+      <InputLabel htmlFor='select-multiple-chip'>
+        {label}
+      </InputLabel>
+      <Select
+        value={value}
+        renderValue={selected => selected}
+        onChange={onChange}
+      >
+        {options.map(item => (
+          <MenuItem key={item} value={item}>
+            <ListItemText primary={item} />
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  )
+}
+
+const column = { name: "Reference", filterType: "custom" };
+
+const ChapterVerseFilters = ({ cvData, filters, onChange, index }) => {
+  const [chapter, setChapter] = useState("All");
+  const [verse, setVerse] = useState("All");
+
+  const handleChapterChange = useDeepCompareCallback((event) => {
+    event.preventDefault();
+    const chapter = event.target.value;
+    const verse = "All";
+    setChapter(chapter);
+    setVerse(verse);
+    if (chapter === "All") {
+      onChange([], index, column);
+      return;
+    }
+    filters[index] = cvData[chapter].map((verse) => `${chapter}:${verse}`)
+    onChange(filters[index], index, column)
+  }, [onChange,index,filters,cvData])
+
+  const handleVerseChange = useDeepCompareCallback((event) => {
+    event.preventDefault()
+    if (chapter === "All") return;
+    const verse = event.target.value;
+    filters[index] = [`${chapter}:${verse}`]
+    onChange(filters[index], index, column)
+    setVerse(verse);
+  }, [onChange,index,filters,chapter])
+
+  return (
+    <Box sx={{display:"grid", gridTemplateColumns: "1fr 1fr", gap: "17px"}}>
+      <SelectSimple
+        value={chapter}
+        label={"Chapter"}
+        onChange={handleChapterChange}
+        options={["All", ...Object.keys(cvData)]}
+      />
+      <SelectSimple
+        value={verse}
+        label={"Verse"}
+        onChange={handleVerseChange}
+        options={["All", ...(cvData[chapter] || [])]}
+      />
+    </Box>
+  )
+}
+
+export default ChapterVerseFilters;

src/components/translatable/TranslatableTSV.js

@@ -29,6 +29,7 @@ import {
   compositeKeyIndicesFromColumnNames,
   generateRowId,
 } from './helpers';
+import ChapterVerseFilters from './ChapterVerseFilters';
 
 const delimiters = { row: '\n', cell: '\t' };
 
@@ -133,6 +134,40 @@ export default function TranslatableTSV({
     return _config;
   }, [columnNames, rowHeader]);
 
+  const REF_FILTER_INDEX = 1;
+
+  const chapterVerseFilter = {
+    name: "ChapterVerse",
+    options: {
+      empty: true,
+      display: "excluded",
+      filterType: "custom",
+      filterOptions: {
+        //TODO: modify logic to allow search strings like `1:5-6`, etc.
+        logic: (location, filters, row) => {
+          if (filters.length) return !filters.includes(row[0]);
+          return false;
+        },
+        display: (filterList, onChange, _index, column, filterData) => {
+          const filterValues = filterData[REF_FILTER_INDEX].reduce(
+            (cv, reference, i) => {
+              const [chapter, verse] = reference.replace('\t', "").split(":");
+              if(!cv[chapter]) cv[chapter] = [];
+              cv[chapter].push(verse)
+              return cv;
+            },
+            {}
+          );
+          const index = REF_FILTER_INDEX;
+          console.log({ filterList, onChange, index, column, filterData });
+          const optionValues = filterValues;
+          return <ChapterVerseFilters onChange={onChange} cvData={optionValues} filters={filterList} index={index}/>
+        },
+        fullWidth: true
+      }
+    }
+  }
+
   return (
     <ResourcesContextProvider
       reference={{ bookId }}
@@ -155,6 +190,7 @@ export default function TranslatableTSV({
         generateRowId={_generateRowId}
         options={options}
         parser={parser}
+        columns={[chapterVerseFilter]}
         translationFontFamily={selectedFont}
       />
       {validationComponent}

yarn.lock

@@ -1315,7 +1315,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
   integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
@@ -1329,6 +1329,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.2":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
+  integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.16.7", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.8.6":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -4840,11 +4847,16 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^1.0.4, clsx@^1.1.1:
+clsx@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 cmd-shim@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"
@@ -5659,10 +5671,10 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-datatable-translatable@1.0.15:
-  version "1.0.15"
-  resolved "https://registry.yarnpkg.com/datatable-translatable/-/datatable-translatable-1.0.15.tgz#3b1c75ab0c49152e7d19fccf085f0d6954447aed"
-  integrity sha512-X3IMcqrQMQIUwq/vCiXfu7wrcTaObVQPdetnIzMmTBGWEf5I0VPASdbeL+ioVuF4L1j1IAiyP7TcVqqpf6EdAw==
+datatable-translatable@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/datatable-translatable/-/datatable-translatable-1.0.16.tgz#0868adad5bc818418fd6dd4982b18bf2445f3a92"
+  integrity sha512-rwKUIApCLa7Cqui4Qd+WDd7yvRghVVEvmkBfBAu1KcSl+2gPSQogspWYN/1PBpBdbm9KUmvan510Vqg/JNbiEw==
   dependencies:
     deep-freeze "^0.0.1"
     lodash.isequal "^4.5.0"
@@ -10759,7 +10771,7 @@ loader-utils@1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -10768,6 +10780,15 @@ loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
+  integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
 loader-utils@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
@@ -14410,9 +14431,9 @@ react-test-renderer@^16.13.1:
     scheduler "^0.19.1"
 
 react-to-print@^2.8.0:
-  version "2.14.7"
-  resolved "https://registry.yarnpkg.com/react-to-print/-/react-to-print-2.14.7.tgz#d288de0e573e6e63e203a48d4bad7a1759d18688"
-  integrity sha512-lWVVAs9Co25uyE0toxcWeFsmaZObwUozXrJD9WMpDPclpBgk+WIzxlt3Q3omL/BCBG/cpf0XNvhayUWa+99YGw==
+  version "2.14.11"
+  resolved "https://registry.yarnpkg.com/react-to-print/-/react-to-print-2.14.11.tgz#14ce17fce6ed238ae08c8c375c13847eb1aefbac"
+  integrity sha512-sePHBaCtZLp8/g4d/gRyI9XQZkveZq6xoukanAHfkzlXOa7sTuXCEQOYq37lIa5MkUoxySdJxYuyClaXPa9Zpg==
   dependencies:
     prop-types "^15.8.1"
 
@@ -14674,6 +14695,11 @@ regenerator-runtime@^0.12.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
   integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"