feat: wip2

src/editors/containers/LibraryContentEditor/BlocksSelector.jsx

@@ -1,71 +1,107 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, DataTable, Form } from '@edx/paragon';
+
+import messages from './messages';
 import { actions, selectors } from './data';
 import { useBlocksHook } from './hooks';
+import { modes } from './constants';
 
 export const BlocksSelector = ({
   studioEndpointUrl,
 
   // redux
   blocksInSelectedLibrary,
+  libraries,
   loadBlocksInLibrary,
+  onSelectCandidates,
   selectedLibrary,
+  selectionMode,
 }) => {
-  if (selectedLibrary === null || !blocksInSelectedLibrary) return <></>;
-
   const {
     blockLinks,
     blocksTableData,
+    selectCandidates,
   } = useBlocksHook({
     blocksInSelectedLibrary,
     loadBlocksInLibrary,
+    onSelectCandidates,
+    selectedLibraryId: (selectedLibrary !== null) ? libraries[selectedLibrary].library_key : null,
     studioEndpointUrl,
   });
 
+  if (selectedLibrary === null || !blocksInSelectedLibrary) return <></>;
+
+  const ViewAction = ({ row }) => (
+    <Button
+      className='p-0'
+      onClick={() => {
+        window.open(blockLinks[row.id])
+      }}
+      size='sm'
+      variant='link'
+    >
+      <FormattedMessage {...messages.tableViewButton} />
+    </Button>
+  );
+
   return (
-    <div className='mb-5'>
-      <label>Select the blocks you want to show: </label>
+    <div className='mb-5 pt-3 border-top'>
+      {
+        selectionMode === modes.selected.value
+        ? <label><FormattedMessage {...messages.tableInstructionLabel} /></label>
+        : null
+      }
       <DataTable
+        // showFiltersInSidebar
+        // isFilterable
+        isPaginated
         isSelectable
-        initialState={{
-          pageSize: 1,
-        }}
-        columns={[
-          { Header: 'Name', accessor: 'display_name' },
-          { Header: 'Block Type', accessor: 'block_type'},
-        ]}
+        // isSelectable={selectionMode === modes.selected.value}
         isSortable
+        // defaultColumnValues={{ Filter: TextFilter }}
         itemCount={blocksTableData.length}
         data={blocksTableData}
-        // additionalColumns={[
-        //   {
-        //     id: 'view',
-        //     Header: 'View',
-        //     Cell: ({ row }) => {
-        //       <Button variant="link" onClick={() => console.log("View", row)}>
-        //         View
-        //       </Button>
-        //     }
-        //   }
-        // ]}
+        columns={[
+          {
+            Header: 'Name',
+            accessor: 'display_name',
+          },
+          {
+            Header: 'Block Type',
+            accessor: 'block_type',
+          },
+        ]}
+        additionalColumns={[
+          {
+            id: 'action',
+            Header: 'View',
+            Cell: ({ row }) => ViewAction({ row }),
+          }
+        ]}
+        onSelectedRowsChanged={(selected) => selectCandidates({ selected })}
+        // maxSelectedRows={2}
+        // onMaxSelectedRows={() => console.log('hey3 this is the last row allowed')}
       >
+        <DataTable.TableControlBar />
         <DataTable.Table />
-        <DataTable.EmptyTable content="No blocks" />
+        <DataTable.EmptyTable content="No blocks found." />
       </DataTable>
     </div>
   );
 };
 
 export const mapStateToProps = (state) => ({
   blocksInSelectedLibrary: selectors.blocksInSelectedLibrary(state),
+  libraries: selectors.libraries(state),
   selectedLibrary: selectors.selectedLibrary(state),
+  selectionMode: selectors.selectionMode(state),
 })
 
 export const mapDispatchToProps = {
   loadBlocksInLibrary: actions.loadBlocksInLibrary,
+  onSelectCandidates: actions.onSelectCandidates,
 };
 
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(BlocksSelector));

src/editors/containers/LibraryContentEditor/LibrarySelector.jsx

@@ -18,7 +18,7 @@ export const LibrarySelector = ({
   };
 
   return (
-    <div className='mb-5'>
+    <div className='mb-3'>
       {libraries
       ? (
         <Dropdown className='w-100'>

src/editors/containers/LibraryContentEditor/LibrarySettings.jsx

@@ -1,46 +1,81 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Form } from '@edx/paragon';
+
+import messages from './messages';
 import { modes } from './constants';
 import { actions, selectors } from './data';
 import { thunkActions } from '../../data/redux';
 
 export const LibrarySettings = ({
   // redux
-  onShowResetSettingsChange,
   onCountSettingsChange,
+  onSelectionModeChange,
+  onShowResetSettingsChange,
   selectedLibrary,
+  selectionMode,
   selectionSettings,
 }) => {
   if (selectedLibrary === null) return <></>;
 
   return (
-    <div className='row mb-4'>
-      <div className='row col mb-3'>
-        <Form.Control
-          className='col col-3'
-          // floatingLabel="Number of Blocks"
-          onChange= {(e) => onCountSettingsChange({
-            count: e.target.value,
-          })}
-          value={selectionSettings.count}
-          type="number"
-        />
-        <label className='col'>How many blocks do you want to show?</label>
-      </div>
-      <div className='col'>
-        <Form.Switch
-          checked={selectionSettings.showReset}
-          onChange={(e) => onShowResetSettingsChange({
-            showReset: e.target.checked,
+    <div className='col'>
+      <div className='row mb-2 p-3 border-top'>
+        <Form.RadioSet
+          onChange={e => onSelectionModeChange({ selectionMode: e.target.value })}
+          value={selectionMode}
+        >
+          <Form.Radio value={modes.random.value}>
+            <FormattedMessage {...modes.random.description} />
+          </Form.Radio>
+          <Form.Radio value={modes.selected.value}>
+            <FormattedMessage {...modes.selected.description} />
+          </Form.Radio>
+
+        </Form.RadioSet>
+        {/* <Form.Switch
+          helperText={
+            <span><FormattedMessage {...modes[selectionMode].description} /></span>
+          }
+          onChange={(e) => onSelectionModeChange({
+            selectionMode: (e.target.checked ? modes.selected.value : modes.random.value)
           })}
         >
-          Show Reset Button
-        </Form.Switch>
-        <div className="x-small mt-2">
-          Determines whether a 'Reset Problems' button is shown, so users may reset their answers and reshuffle selected items.
+          <FormattedMessage {...modes[selectionMode].title} />
+        </Form.Switch> */}
+      </div>
+      {
+        selectionMode === modes.random.value
+        ? <div className='row mb-2 pb-3'>
+            <Form.Control
+              className='col col-2'
+              onChange= {(e) => onCountSettingsChange({
+                count: e.target.value,
+              })}
+              value={selectionSettings.count}
+              type="number"
+            />
+            <label className='col pt-2'>
+              <FormattedMessage {...messages.countLabel} />
+            </label>
+          </div>
+        : null
+      }
+
+      <div className='row mb-2 p-3 border-top'>
+        <div className='col p-0'>
+          <Form.Switch
+            checked={selectionSettings.showReset}
+            onChange={(e) => onShowResetSettingsChange({
+              showReset: e.target.checked,
+            })}
+          >
+            <FormattedMessage {...messages.resetButton} />
+          </Form.Switch>
+          <div className="x-small mt-2">
+            <FormattedMessage {...messages.resetButtonDescription} />
+          </div>
         </div>
       </div>
     </div>
@@ -49,12 +84,14 @@ export const LibrarySettings = ({
 
 export const mapStateToProps = (state) => ({
   selectedLibrary: selectors.selectedLibrary(state),
+  selectionMode: selectors.selectionMode(state),
   selectionSettings: selectors.selectionSettings(state),
 })
 
 export const mapDispatchToProps = {
-  onShowResetSettingsChange: actions.onShowResetSettingsChange,
   onCountSettingsChange: actions.onCountSettingsChange,
+  onSelectionModeChange: actions.onSelectionModeChange,
+  onShowResetSettingsChange: actions.onShowResetSettingsChange,
 };
 
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LibrarySettings));

src/editors/containers/LibraryContentEditor/constants.js

@@ -1,16 +1,14 @@
 import messages from "./messages"
 
 export const modes = {
-    all: {
-        description: messages.modeAll,
-        value: 'all',
-    },
-    random: {
-        description: messages.modeRandom,
-        value: 'random',
-    },
-    selected: {
-        description: messages.modeSelected,
-        value: 'selected',
-    }
+  random: {
+    title: messages.modeRandom,
+    description: messages.modeRandomDescription,
+    value: 'random',
+  },
+  selected: {
+    title: messages.modeSelected,
+    description: messages.modeSelectedDescription,
+    value: 'selected',
+  },
 };