@k-int/stripes-kint-components 1.2.3 → 1.4.0

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -0,0 +1,282 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { useInfiniteQuery } from 'react-query';
+
+import {
+  useNamespace,
+  useOkapiKy
+} from '@folio/stripes/core';
+
+import {
+  SearchAndSortQuery,
+  PersistedPaneset,
+} from '@folio/stripes/smart-components';
+
+import {
+  Button,
+  IconButton,
+  Icon,
+  MultiColumnList,
+  Pane,
+  PaneMenu,
+  SearchField,
+} from '@folio/stripes/components';
+import { NoResultsMessage } from '../NoResultsMessage';
+
+import { generateKiwtQuery } from '../utils';
+import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
+
+
+const SASQLookupComponent = ({
+  children,
+  fetchParameters = {},
+  FilterComponent = () => null,
+  history,
+  id,
+  location,
+  mainPaneProps,
+  match,
+  mclProps,
+  noSearchField,
+  path,
+  resultColumns = [],
+  RenderBody,
+  sasqProps,
+}) => {
+  const { query, queryGetter, querySetter } = useKiwtSASQuery();
+  const { 0: namespace } = useNamespace();
+  const ky = useOkapiKy();
+
+  const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
+
+  const fetchPageData = ({ pageParam = 0 }) => {
+    const queryMap = fetchParameters.SASQ_MAP;
+    queryMap.offset = pageParam;
+    return ky(`${fetchParameters.endpoint}${generateKiwtQuery(queryMap, query)}`).json();
+  };
+
+  const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(filterPaneVisibileKey, true);
+  const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
+
+  const {
+    data: totalData = {},
+    error,
+    isError,
+    isLoading,
+    fetchNextPage,
+  } = useInfiniteQuery(
+    [namespace, id, 'data', query],
+    fetchPageData
+  );
+
+  const data = totalData.pages?.reduce(
+    (acc, curr) => {
+      const newAcc = { ...acc };
+      for (const [key, value] of Object.entries(curr)) {
+        if (
+          key !== 'page' &&
+          key !== 'result' &&
+          acc[key] !== value
+        ) {
+          newAcc[key] = value;
+        }
+      }
+
+      const newResults = [...(acc.results ?? [])];
+      newResults.push(...(curr.results ?? []));
+      newAcc.results = newResults;
+
+      return newAcc;
+    },
+    {}
+  ) ?? {};
+
+  // TODO focus handling to stop redraw movin to top
+
+  const onNeedMoreData = (_askAmount, index) => {
+    fetchNextPage({ pageParam: index });
+  };
+
+  // Build the map of column definitions
+  const columnMapping = Object.fromEntries(
+    resultColumns.map(e => [e.propertyPath, e.label])
+  );
+
+  // Build the list of visible columns
+  const visibleColumns = resultColumns.map(e => e.propertyPath);
+
+  return (
+    <SearchAndSortQuery
+      initialSearchState={{ query: '' }}
+      queryGetter={queryGetter}
+      querySetter={querySetter}
+      {...sasqProps}
+    >
+      {
+        ({
+          activeFilters,
+          filterChanged,
+          getFilterHandlers,
+          getSearchHandlers,
+          onSort,
+          onSubmitSearch,
+          resetAll,
+          searchChanged,
+          searchValue
+        }) => {
+          const searchHandlers = getSearchHandlers();
+          const sortOrder = query.sort ?? '';
+          const disableReset = !filterChanged && !searchChanged;
+
+          const filterCount = activeFilters.string ? activeFilters.string.split(',').length : 0;
+
+          const TableBody = () => (
+            <MultiColumnList
+              autosize
+              columnMapping={columnMapping}
+              contentData={data?.results}
+              isEmptyMessage={
+                <NoResultsMessage
+                  {...{
+                    error,
+                    isError,
+                    isLoading,
+                    filterPaneIsVisible: filterPaneVisible,
+                    searchTerm: query.query,
+                    toggleFilterPane
+                  }}
+                />
+              }
+              isSelected={({ item }) => item.id === match?.params?.id}
+              onHeaderClick={onSort}
+              onNeedMoreData={onNeedMoreData}
+              onRowClick={(_e, rowData) => {
+                history.push(`${path}/${rowData?.id}${location?.search}`);
+              }}
+              pagingType="click"
+              sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
+              sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
+              totalCount={data.totalRecords}
+              virtualize
+              visibleColumns={visibleColumns}
+              {...mclProps}
+            />
+          );
+
+          const Body = RenderBody ?? TableBody;
+
+          return (
+            <PersistedPaneset
+              appId={namespace}
+              id={`${id}-paneset`}
+            >
+              {filterPaneVisible &&
+                <Pane
+                  defaultWidth="20%"
+                  lastMenu={
+                    <PaneMenu>
+                      <IconButton
+                        icon="caret-left"
+                        onClick={() => setFilterPaneVisible(false)}
+                      />
+                    </PaneMenu>
+                  }
+                  paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
+                >
+                  <form onSubmit={onSubmitSearch}>
+                    {!noSearchField &&
+                      <>
+                        <SearchField
+                          autoFocus
+                          name="query"
+                          onChange={searchHandlers.query}
+                          onClear={searchHandlers.reset}
+                          value={searchValue.query}
+                        />
+                        <Button
+                          buttonStyle="primary"
+                          disabled={!searchValue.query}
+                          fullWidth
+                          type="submit"
+                        >
+                          <FormattedMessage id="stripes-smart-components.search" />
+                        </Button>
+                        <Button
+                          buttonStyle="none"
+                          disabled={disableReset}
+                          id="clickable-reset-all"
+                          onClick={resetAll}
+                        >
+                          <Icon icon="times-circle-solid">
+                            <FormattedMessage id="stripes-smart-components.resetAll" />
+                          </Icon>
+                        </Button>
+                      </>
+                    }
+                    <FilterComponent
+                      activeFilters={activeFilters.state}
+                      filterChanged={filterChanged}
+                      filterHandlers={getFilterHandlers()}
+                      resetAll={resetAll}
+                      searchChanged={searchChanged}
+                      searchHandlers={getSearchHandlers()}
+                      searchValue={searchValue}
+                    />
+                  </form>
+                </Pane>
+              }
+              <Pane
+                defaultWidth="fill"
+                firstMenu={!filterPaneVisible ?
+                  <PaneMenu>
+                    <IconButton
+                      badgeCount={filterCount}
+                      icon="caret-right"
+                      onClick={() => setFilterPaneVisible(true)}
+                    />
+                  </PaneMenu>
+                :
+                null}
+                paneSub={<FormattedMessage id="stripes-kint-components.sasqLookupComponent.mainPane.found" values={{ total: data?.total }} />}
+                {...mainPaneProps}
+              >
+                <Body data={data} />
+              </Pane>
+              {children}
+            </PersistedPaneset>
+          );
+        }
+      }
+    </SearchAndSortQuery>
+  );
+};
+
+SASQLookupComponent.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
+  fetchParameters: PropTypes.object,
+  FilterComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
+  history: PropTypes.object,
+  id: PropTypes.string.isRequired,
+  location: PropTypes.object,
+  mainPaneProps: PropTypes.object,
+  match: PropTypes.object,
+  mclProps: PropTypes.object,
+  noSearchField: PropTypes.bool,
+  path: PropTypes.string.isRequired,
+  RenderBody: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
+  resource: PropTypes.object,
+  resultColumns: PropTypes.arrayOf(PropTypes.object),
+  sasqProps: PropTypes.object
+};
+
+export default SASQLookupComponent;

package/src/lib/SASQLookupComponent/index.js

@@ -0,0 +1 @@
+export { default } from './SASQLookupComponent';

package/src/lib/SASQRoute/README.md

@@ -0,0 +1,55 @@
+# SASQRoute
+A component designed to speed up the basic 3-pane layout setup process, SASQRoute is an all in one Routing, SASQ and MCL setup
+
+## Basic Usage
+```
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { SASQRoute } from '@k-int/stripes-kint-components';
+import ActionItem from '../components/ActionItem';
+
+const ActionedRoute = ({ path }) => {
+
+  const fetchParameters = {
+    endpoint: "remote-sync/feedback/done",
+    itemEndpoint: "remote-sync/feedback",
+    SASQ_MAP: {
+      searchKey: 'description',
+      filterKeys: {
+      }
+    }
+  };
+
+  const resultColumns = [
+  { propertyPath: "selected", label: " " },
+  { propertyPath:"description", label: <FormattedMessage id="ui-remote-sync.prop.feedback.description" /> },
+  { propertyPath:"status", label: <FormattedMessage id="ui-remote-sync.prop.feedback.status" /> },
+  { propertyPath:"correlationId", label: <FormattedMessage id="ui-remote-sync.prop.feedback.correlationId" /> },
+  { propertyPath:"caseIndicator", label: <FormattedMessage id="ui-remote-sync.prop.feedback.caseIndicator" /> }
+];
+
+  return (
+    <SASQRoute
+      fetchParameters={fetchParameters}
+      id="actioned"
+      resultColumns={resultColumns}
+      path={path}
+      ViewComponent={ActionItem}
+    />
+  );
+};
+```
+
+NOTE - The following prop list is incomplete
+## Props
+
+Name | Type | Description | default | required
+--- | --- | --- | --- | ---
+fetchParameters | object | An object containing the parameters needed to make the fetches necessary for both the table and the view components. `endpoint` contains the main fetch endpoint, which regularly will be used for both fetching all data, and also for fetching an individual item (It is assumed that this endpoint will have `/{id}` appended to it.) If `itemEndpoint` is provided that will be used instead (this will also have `/{:id}` appended to it). `SASQ_MAP` is an object of the shape taken by `generateKiwtQuery`  | | ✓ |
+id | string | A unique identifier for this route. IMPORTANT that this is unique, as it drives paneset logic  | | ✓ |
+path | string | The main path for this route. In the above example the path is `remote-sync/actioned`. This component will set up the main 3 pane layout under this path, and also the view pane route under `remote-sync/actioned/:id` | | ✓ |
+resultColumns | array | An array containing objects with a `propertyPath` and `label`. These will be used to drive the MCL columns.  | | ✓ |
+ViewComponent | Element | The component to render on clicking a row entry.  | | ✓ |
+
+

package/src/lib/SASQRoute/SASQRoute.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Route
+} from 'react-router-dom';
+
+import SASQLookupComponent from '../SASQLookupComponent';
+import SASQViewComponent from '../SASQViewComponent';
+
+const SASQRoute = ({ path, fetchParameters, ...props }) => {
+  // Grab the SASQ_MAP and tweak it
+  const { SASQ_MAP = {} } = fetchParameters;
+
+  if (!SASQ_MAP.perPage) {
+    SASQ_MAP.perPage = 25;
+  }
+
+  SASQ_MAP.stats = true;
+
+  // Reinsert the SASQ_MAP
+  fetchParameters.SASQ_MAP = SASQ_MAP;
+
+  return (
+    <Route
+      path={`${path}/:id?`}
+      render={routeProps => {
+        return (
+          <SASQLookupComponent
+            {...routeProps}
+            fetchParameters={fetchParameters}
+            path={path}
+            {...props}
+          >
+            <Route
+              path={`${path}/:id`}
+              render={innerProps => (
+                <SASQViewComponent
+                  {...innerProps}
+                  fetchParameters={fetchParameters}
+                  path={path}
+                  ViewComponent={props.ViewComponent}
+                  {...props}
+                />
+              )}
+            />
+          </SASQLookupComponent>
+        );
+      }}
+    />
+  );
+};
+
+SASQRoute.propTypes = {
+  fetchParameters: PropTypes.object,
+  path: PropTypes.string,
+  ViewComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ])
+};
+
+export default SASQRoute;

package/src/lib/SASQRoute/index.js

@@ -0,0 +1 @@
+export { default } from './SASQRoute';

package/src/lib/SASQViewComponent/SASQViewComponent.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useQuery } from 'react-query';
+
+import {
+  useNamespace,
+  useOkapiKy
+} from '@folio/stripes/core';
+
+const SASQViewComponent = ({
+  fetchParameters,
+  history,
+  location,
+  match,
+  path,
+  ViewComponent,
+  ...props
+}) => {
+  const { 0: namespace } = useNamespace();
+
+  // If itemEndpoint is available, use that, otherwise use standard endpoint
+  const endpoint = fetchParameters?.itemEndpoint ?? fetchParameters?.endpoint;
+
+  const ky = useOkapiKy();
+  const { data = {} } = useQuery(
+    [namespace, 'data', 'view', match?.params?.id],
+    () => ky(`${endpoint}/${match?.params?.id}`).json(),
+    {
+      enabled: !!match?.params?.id
+    }
+  );
+
+  return (
+    <ViewComponent
+      onClose={() => history.push(`${path}${location.search}`)}
+      resource={data}
+      {...props}
+    />
+  );
+};
+
+SASQViewComponent.propTypes = {
+  fetchParameters: PropTypes.object,
+  history: PropTypes.object,
+  location: PropTypes.object,
+  match: PropTypes.object,
+  path: PropTypes.string.isRequired,
+  ViewComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
+};
+
+export default SASQViewComponent;

package/src/lib/SASQViewComponent/index.js

@@ -0,0 +1 @@
+export { default } from './SASQViewComponent';

package/src/lib/TypeDown/README.md

@@ -0,0 +1 @@
+DEPRECATED - DO NOT USE. You probably want Typedown

package/src/lib/TypeDown/TypeDown.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
@@ -15,15 +15,25 @@ import css from '../../../styles/TypeDown.css';
 import { useTypedown, useTypedownData } from '../hooks/typedownHooks';
 import selectorSafe from '../utils/selectorSafe';
 
+/* @deprecated
+ * Replaced by Typedown and QueryTypedown.
+ */
 const TypeDown = ({
   input,
   meta,
+  onChange,
   path,
   pathMutator,
   renderFooter = null,
   renderListItem = null,
   uniqueIdentificationPath = 'id'
 }) => {
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('TypeDown component is deprecated, you likely want either Typedown or QueryTypedown');
+    }
+  }, []);
+
   const selectedUniqueId = get(input.value, uniqueIdentificationPath);
 
   const [callPath, setCallPath] = useState(pathMutator(null, path));
@@ -61,6 +71,14 @@ const TypeDown = ({
     </div>
   ), [renderListItem, uniqueIdentificationPath]);
 
+  const handleChange = value => {
+    input.onChange(value);
+
+    if (typeof onChange === 'function') {
+      onChange(value);
+    }
+  };
+
   const dropDown = useCallback(() => {
     return (
       <div
@@ -86,7 +104,7 @@ const TypeDown = ({
                 data-selected={isSelected}
                 id={`typedown-button-[${index}]`}
                 onClick={() => {
-                  input.onChange(d);
+                  handleChange(d);
                   handleNextFocus();
                 }}
                 onKeyDown={listKeyDownHandler}
@@ -132,9 +150,9 @@ const TypeDown = ({
       >
         <SearchField
           // Pass meta through so correct styling gets applied to the TextField
-          {...meta}
           id="typedown-searchField"
           marginBottom0
+          meta={meta}
           onChange={e => {
             setCallPath(pathMutator(e.target.value, path));
           }}
@@ -186,7 +204,7 @@ const TypeDown = ({
           <IconButton
             className={css.clearItem}
             icon="times-circle-solid"
-            onClick={() => input.onChange()}
+            onClick={() => handleChange()}
           />
         </div>
       }
@@ -197,6 +215,7 @@ const TypeDown = ({
 TypeDown.propTypes = {
   input: PropTypes.object,
   meta: PropTypes.object,
+  onChange: PropTypes.func,
   path: PropTypes.string,
   pathMutator: PropTypes.func,
   renderFooter: PropTypes.func,

package/src/lib/Typedown/README.md

@@ -0,0 +1,115 @@
+```
+import React from 'react';
+
+import { Button, Col, Pane, Row, TextField } from '@folio/stripes/components';
+import { AppIcon } from '@folio/stripes/core';
+import { generateKiwtQuery, TypeDown } from '@k-int/stripes-kint-components';
+
+import { Form, Field, useFormState } from 'react-final-form';
+
+const TestField = () => {
+  const pathMutator = (input, path) => {
+    const query = generateKiwtQuery(
+      {
+        searchKey: 'name,alternateNames.name',
+        stats: false
+      }, {
+        sort: 'name',
+        query: input,
+      }
+    );
+
+    return `${path}${query}`;
+  };
+
+  console.log("Current values: %o", useFormState()?.values)
+  return (
+    <Field
+      component={TypeDown}
+      name="test"
+      path="erm/sas"
+      pathMutator={pathMutator}
+      renderFooter={() => (
+        <>
+          <Button
+            id="footer button 1"
+            marginBottom0
+            onClick={() => {
+              alert('sup')
+            }}
+            type="button"
+          >
+            Hello 1
+          </Button>
+          <Button
+            id="footer button 2"
+            marginBottom0
+            onClick={() => {
+              alert('sup 2')
+            }}
+            type="button"
+          >
+            Hello 2
+          </Button>
+        </>
+      )}
+      renderListItem={agreement => {
+        return (
+          <>
+            <AppIcon
+              app="agreements"
+              size="small"
+            >
+              {agreement.name}
+            </AppIcon>
+          </>
+        );
+      }}
+    />
+    );
+};
+
+
+const TestComponent = () => {
+  return (
+    <Pane
+      defaultWidth="fill"
+      dismissible
+      id="test-typedown"
+      paneTitle={"Test typedown"}
+    >
+      <Form
+        enableReinitialize
+        navigationCheck
+        onSubmit={(values) => console.log("submitting: %o", values)}
+        subscription={{ values: true }}
+      >
+        {({ handleSubmit }) => {
+          return (
+            <form onSubmit={handleSubmit}>
+              <Row>
+                <Col xs={6}>
+                  <TestField />
+                </Col>
+                <Col xs={6}>
+                  <Field
+                    component={TextField}
+                    name="test2"
+                  />
+                </Col>
+              </Row>
+              <Button
+                type="submit"
+              >
+                submit
+              </Button>
+            </form>
+          );
+        }}
+      </Form>
+    </Pane>
+  );
+};
+
+export default TestComponent;
+```