feat(org): Load curated sets in workbench

sites/shared/components/curated-sets.mjs

@@ -26,7 +26,15 @@ import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import Markdown from 'react-markdown'
 import Timeago from 'react-timeago'
 import { MeasieVal } from './account/sets.mjs'
-import { CameraIcon, UploadIcon, OkIcon, NoIcon } from 'shared/components/icons.mjs'
+import {
+  TrashIcon,
+  CameraIcon,
+  UploadIcon,
+  OkIcon,
+  NoIcon,
+  BoolNoIcon,
+  BoolYesIcon,
+} from 'shared/components/icons.mjs'
 import { Link, PageLink } from 'shared/components/link.mjs'
 import {
   StringInput,
@@ -63,7 +71,7 @@ const SetLineup = ({ sets = [], href = false, onClick = false }) => (
           backgroundPosition: 'center',
         },
       }
-      if (onClick) props.onClick = () => onClick(set.id)
+      if (onClick) props.onClick = () => onClick(set)
       else if (typeof href === 'function') props.href = href(set.id)
 
       if (onClick) return <button {...props} key={set.id}></button>
@@ -185,8 +193,11 @@ export const CuratedSet = ({ id }) => {
   )
 }
 
+// Picker version
+export const CuratedSetPicker = (props) => <CuratedSets {...props} />
+
 // Component for the curated-sets page
-export const CuratedSets = ({ href = false }) => {
+export const CuratedSets = ({ href = false, clickHandler = false }) => {
   // Hooks
   const backend = useBackend()
   const { setLoadingStatus } = useContext(LoadingStatusContext)
@@ -214,7 +225,7 @@ export const CuratedSets = ({ href = false }) => {
     sets: Object.values(sets),
   }
   if (typeof href === 'function') lineupProps.href = href
-  else lineupProps.onClick = setSelected
+  else lineupProps.onClick = clickHandler ? clickHandler : (set) => setSelected(set.id)
 
   return (
     <div className="max-w-7xl xl:pl-4">
@@ -224,6 +235,131 @@ export const CuratedSets = ({ href = false }) => {
   )
 }
 
+// Component for the maintaining the list of  curated-sets
+export const CuratedSetsList = ({ href = false }) => {
+  // Hooks
+  const { t } = useTranslation(ns)
+  const backend = useBackend()
+  const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
+  const [refresh, setRefresh] = useState(0)
+
+  // State
+  const [sets, setSets] = useState([])
+  const [selected, setSelected] = useState(false)
+
+  // Effects
+  useEffect(() => {
+    const getSets = async () => {
+      setLoadingStatus([true, 'contactingBackend'])
+      const result = await backend.getCuratedSets()
+      if (result.success) {
+        const allSets = []
+        for (const set of result.data.curatedSets) allSets.push(set)
+        setSets(allSets)
+        setLoadingStatus([true, 'status:dataLoaded', true, true])
+      } else setLoadingStatus([true, 'status:backendError', true, false])
+    }
+    getSets()
+  }, [refresh])
+
+  // Helper var to see how many are selected
+  const selCount = Object.keys(selected).length
+
+  // Helper method to toggle single selection
+  const toggleSelect = (id) => {
+    const newSelected = { ...selected }
+    if (newSelected[id]) delete newSelected[id]
+    else newSelected[id] = 1
+    setSelected(newSelected)
+  }
+
+  // Helper method to toggle select all
+  const toggleSelectAll = () => {
+    if (selCount === selected.length) setSelected({})
+    else {
+      const newSelected = {}
+      for (const set of selected) newSelected[set.id] = 1
+      setSelected(newSelected)
+    }
+  }
+
+  // Helper to delete one or more sets
+  const removeSelected = async () => {
+    let i = 0
+    for (const key in selected) {
+      i++
+      await backend.removeCuratedMeasurementsSet(key)
+      setLoadingStatus([
+        true,
+        <LoadingProgress val={i} max={selCount} msg={t('removingRecords')} key="linter" />,
+      ])
+    }
+    setSelected({})
+    setRefresh(refresh + 1)
+    setLoadingStatus([true, 'nailedIt', true, true])
+  }
+
+  const lineupProps = {
+    sets: Object.values(sets),
+  }
+  if (typeof href === 'function') lineupProps.href = href
+  else lineupProps.onClick = setSelected
+
+  return (
+    <div className="max-w-7xl xl:pl-4">
+      {selCount ? (
+        <button className="btn btn-error" onClick={removeSelected}>
+          <TrashIcon /> {selCount} {t('curate:sets')}
+        </button>
+      ) : null}
+      <table className="table table-auto">
+        <thead className="border border-base-300 border-b-2 border-t-0 border-x-0">
+          <tr className="b">
+            <th className="text-base-300 text-base">
+              <input
+                type="checkbox"
+                className="checkbox checkbox-secondary"
+                onClick={toggleSelectAll}
+                checked={selected.length === selCount}
+              />
+            </th>
+            <th className="text-base-300 text-base">{t('curate:id')}</th>
+            <th className="text-base-300 text-base">{t('curate:img')}</th>
+            <th className="text-base-300 text-base">{t('curate:name')}</th>
+            <th className="text-base-300 text-base">{t('curate:published')}</th>
+            <th className="text-base-300 text-base">{t('curate:createdAt')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {sets.map((set) => (
+            <tr key={set.id}>
+              <td className="text-base font-medium">
+                <input
+                  type="checkbox"
+                  checked={selected[set.id] ? true : false}
+                  className="checkbox checkbox-secondary"
+                  onClick={() => toggleSelect(set.id)}
+                />
+              </td>
+              <td>{set.id}</td>
+              <td>
+                <img
+                  src={cloudflareImageUrl({ id: set.img, variant: 'sq100' })}
+                  className="mask mask-squircle w-12 h-12"
+                />
+              </td>
+              <td>{set.nameEn}</td>
+              <td>{set.published ? <BoolYesIcon /> : <BoolNoIcon />}</td>
+              <td>{set.createdAt}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <SetLineup {...lineupProps} />
+    </div>
+  )
+}
+
 export const EditCuratedSet = ({ id }) => {
   // Hooks
   const { account } = useAccount()