test UI

dataesr · Jan 19, 2024 · 789d5d5 · 789d5d5
1 parent b87f388
commit 789d5d5
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 46 deletions.
diff --git a/client/src/pages/affiliationsTab.jsx b/client/src/pages/affiliationsTab.jsx
@@ -48,10 +48,10 @@ export default function AffiliationsTab({ affiliations, selectedAffiliations, se
   return (
     <>
       <Row>
-        <Col n="4">
-          {renderButtons(selectedAffiliations, tagAffiliations)}
+        <Col n="9">
+          {renderButtons(selectedAffiliations, tagAffiliations, 'affiliations')}
         </Col>
-        <Col n="8">
+        <Col n="3">
           <Gauge
             data={Object.values(status).map((st) => ({
               ...st,
@@ -61,15 +61,19 @@ export default function AffiliationsTab({ affiliations, selectedAffiliations, se
         </Col>
       </Row>
       <Row gutters>
-        <Col n="2">
+        <Col n="9" offset="2">
           <TextInput
-            label="Filter affiliations on name"
+            label="Search in affiliations name"
             onChange={(e) => setFilteredAffiliationName(e.target.value)}
             value={filteredAffiliationName}
           />
+        </Col>
+      </Row>
+      <Row gutters>
+        <Col n="2">
           <CheckboxGroup
-            hint="Filter affiliations on selected status"
-            legend="Status"
+            hint="Filter affilitions on the decisions already made"
+            legend="Filter on decision status"
           >
             {Object.values(status).map((st) => (
               <Checkbox
@@ -90,11 +94,6 @@ export default function AffiliationsTab({ affiliations, selectedAffiliations, se
           />
         </Col>
       </Row>
-      <Row>
-        <Col>
-          {renderButtons(selectedAffiliations, tagAffiliations)}
-        </Col>
-      </Row>
     </>
   );
 }

diff --git a/client/src/pages/affiliationsView.jsx b/client/src/pages/affiliationsView.jsx
@@ -17,10 +17,10 @@ export default function AffiliationsView({
       metaKeySelection
       onSelectionChange={(e) => setSelectedAffiliations(e.value)}
       paginator
-      paginatorPosition="both"
-      paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+      paginatorPosition="bottom"
+      paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks  NextPageLink LastPageLink RowsPerPageDropdown"
       rows={50}
-      rowsPerPageOptions={[25, 50, 100, 200, 500, 1000, 5000]}
+      rowsPerPageOptions={[50, 200, 1000, 5000]}
       scrollable
       selection={selectedAffiliations}
       selectionPageOnly

diff --git a/client/src/pages/datasetsTab.jsx b/client/src/pages/datasetsTab.jsx
@@ -91,10 +91,10 @@ export default function DatasetsTab({ datasets, publishers, selectedDatasets, se
   return (
     <>
       <Row>
-        <Col n="4">
-          {renderButtons(selectedDatasets, tagDatasets)}
+        <Col n="9">
+          {renderButtons(selectedDatasets, tagDatasets, 'datasets')}
         </Col>
-        <Col n="8">
+        <Col n="3">
           <Gauge
             data={Object.values(status).map((st) => ({
               ...st,
@@ -103,16 +103,20 @@ export default function DatasetsTab({ datasets, publishers, selectedDatasets, se
           />
         </Col>
       </Row>
-      <Row>
-        <Col n="2">
+      <Row gutters>
+        <Col n="9" offset="2">
           <TextInput
-            label="Search datasets on affiliations name"
+            label="Search in affiliations name"
             onChange={(e) => setFilteredAffiliationName(e.target.value)}
             value={filteredAffiliationName}
           />
+        </Col>
+      </Row>
+      <Row gutters>
+        <Col n="2">
           <CheckboxGroup
-            hint="Filter publications on selected status"
-            legend="Status"
+            hint="Filter datasets according to the choices made on affiliations"
+            legend="Filter on decision status"
           >
             {Object.values(status).map((st) => (
               <Checkbox
@@ -189,11 +193,6 @@ export default function DatasetsTab({ datasets, publishers, selectedDatasets, se
           />
         </Col>
       </Row>
-      <Row>
-        <Col>
-          {renderButtons(selectedDatasets, tagDatasets)}
-        </Col>
-      </Row>
     </>
   );
 }

diff --git a/client/src/pages/publicationsTab.jsx b/client/src/pages/publicationsTab.jsx
@@ -91,10 +91,10 @@ export default function PublicationsTab({ publications, publishers, selectedPubl
   return (
     <>
       <Row>
-        <Col n="4">
-          {renderButtons(selectedPublications, tagPublications)}
+        <Col n="9">
+          {renderButtons(selectedPublications, tagPublications, 'publications')}
         </Col>
-        <Col n="8">
+        <Col n="3">
           <Gauge
             data={Object.values(status).map((st) => ({
               ...st,
@@ -104,15 +104,19 @@ export default function PublicationsTab({ publications, publishers, selectedPubl
         </Col>
       </Row>
       <Row gutters>
-        <Col n="2">
+        <Col n="9" offset="2">
           <TextInput
-            label="Search publications on affiliations name"
+            label="Search in affiliations name"
             onChange={(e) => setFilteredAffiliationName(e.target.value)}
             value={filteredAffiliationName}
           />
+        </Col>
+      </Row>
+      <Row gutters>
+        <Col n="2">
           <CheckboxGroup
-            hint="Filter publications on selected status"
-            legend="Status"
+            hint="Filter publications according to the choices made on affiliations"
+            legend="Filter on decision status"
           >
             {Object.values(status).map((st) => (
               <Checkbox
@@ -189,11 +193,6 @@ export default function PublicationsTab({ publications, publishers, selectedPubl
           />
         </Col>
       </Row>
-      <Row>
-        <Col n="4">
-          {renderButtons(selectedPublications, tagPublications)}
-        </Col>
-      </Row>
     </>
   );
 }

diff --git a/client/src/pages/worksView.jsx b/client/src/pages/worksView.jsx
@@ -23,10 +23,10 @@ export default function WorksView({
       metaKeySelection={false}
       onSelectionChange={(e) => setSelectedWorks(e.value)}
       paginator
-      paginatorPosition="both"
-      paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+      paginatorPosition="bottom"
+      paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks  NextPageLink LastPageLink RowsPerPageDropdown"
       rows={50}
-      rowsPerPageOptions={[25, 50, 100, 200, 500, 1000, 5000]}
+      rowsPerPageOptions={[50, 200, 1000, 5000]}
       scrollable
       selection={selectedWorks}
       selectionPageOnly

diff --git a/client/src/utils/works.jsx b/client/src/utils/works.jsx
@@ -47,7 +47,7 @@ const normalizeName = (name) => name
   .replace(/\s+/g, ' ')
   .trim();
 
-const renderButtons = (selected, fn) => (
+const renderButtons = (selected, fn, entityLabel) => (
   <>
     {Object.values(status).map((st) => (
       <Button
@@ -56,9 +56,9 @@ const renderButtons = (selected, fn) => (
         icon={st.buttonIcon}
         key={st.id}
         onClick={() => fn(selected, st.id)}
-        size="sm"
+        size="lg"
       >
-        {`${st.buttonLabel} (${selected.length})`}
+        {`${st.buttonLabel} ${selected.length} ${entityLabel}`}
       </Button>
     ))}
   </>