@k-int/stripes-kint-components 1.7.0 → 2.1.0

package/src/lib/Typedown/Typedown.js

@@ -4,10 +4,7 @@ import classnames from 'classnames';
 
 import get from 'lodash/get';
 
-import { EndOfList, IconButton, Popper } from '@folio/stripes/components';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { interactionStyles } from '@folio/stripes-components/lib/sharedStyles/interactionStyles.css';
+import { EndOfList, IconButton, Label, Popper } from '@folio/stripes/components';
 
 import SearchField from '../SearchField';
 import css from '../../../styles/TypeDown.css';
@@ -16,20 +13,31 @@ import { useTypedown } from '../hooks/typedownHooks';
 import selectorSafe from '../utils/selectorSafe';
 
 const Typedown = ({
+  className,
   dataOptions,
+  endOfList,
+  id,
   input,
+  isSelected,
   filterPath,
+  label,
   meta,
   onChange,
   onType,
   renderFooter = null,
   renderListItem = null,
+  required,
   uniqueIdentificationPath = 'id'
 }) => {
   const selectedUniqueId = get(input.value, uniqueIdentificationPath);
 
   // Display data needs to be in line with data options but also able to react to default handleType
   const [displayData, setDisplayData] = useState(dataOptions);
+
+  // keep track of what we've typed and whether we've typed an exact match or not
+  const [currentlyTyped, setCurrentlyTyped] = useState('');
+  const [exactMatch, setExactMatch] = useState(false);
+
   useEffect(() => {
     setDisplayData(dataOptions);
   }, [dataOptions]);
@@ -46,6 +54,14 @@ const Typedown = ({
     } else {
       setDisplayData(dataOptions);
     }
+
+    setCurrentlyTyped(e.target.value);
+
+    if (displayData.length === 1 && get(displayData[0], filterPath) === e.target.value) {
+      setExactMatch(true);
+    } else {
+      setExactMatch(false);
+    }
   };
 
   // Hook to set up all the essentials
@@ -74,11 +90,11 @@ const Typedown = ({
       className={css.listItem}
     >
       {renderListItem ?
-        renderListItem(option) :
+        renderListItem(option, currentlyTyped, exactMatch) :
         get(option, uniqueIdentificationPath)
       }
     </div>
-  ), [renderListItem, uniqueIdentificationPath]);
+  ), [currentlyTyped, exactMatch, renderListItem, uniqueIdentificationPath]);
 
   const handleChange = useCallback(value => {
     input.onChange(value);
@@ -101,16 +117,15 @@ const Typedown = ({
           id="typedown-list"
         >
           {displayData?.length ? displayData?.map((d, index) => {
-            const isSelected = get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
+            const isSelectedEval = isSelected ? isSelected(input.value, d) : get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
             return (
               <button
                 key={`typedown-button-[${index}]`}
                 className={classnames(
-                  interactionStyles,
                   css.fullWidth,
                   css.menuButton
                 )}
-                data-selected={isSelected}
+                data-selected={isSelectedEval}
                 id={`typedown-button-[${index}]`}
                 onClick={() => {
                   handleChange(d);
@@ -123,8 +138,7 @@ const Typedown = ({
               </button>
             );
           }) :
-          // TODO test this
-          <EndOfList />
+            endOfList || <EndOfList />
           }
         </div>
         {renderFooter &&
@@ -133,17 +147,21 @@ const Typedown = ({
             className={css.footer}
             id={`typedown-footer-${selectorSafe(input.name)}`}
           >
-            {renderFooter()}
+            {renderFooter(displayData, currentlyTyped, exactMatch)}
           </div>
         }
       </div>
     );
   }, [
+    currentlyTyped,
     displayData,
+    endOfList,
+    exactMatch,
     footerRef,
     handleChange,
     handleNextFocus,
     input,
+    isSelected,
     listKeyDownHandler,
     listRef,
     renderFooter,
@@ -173,7 +191,20 @@ const Typedown = ({
   return (
     <div
       ref={resizeRef}
+      className={classnames(
+        css.typedown,
+        className
+      )}
     >
+      {label &&
+        <Label
+          htmlFor={id}
+          id={`${id}-label`}
+          required={required}
+        >
+          {label}
+        </Label>
+      }
       {renderSearchField()}
       <Popper
         key="typedown-menu-toggle"
@@ -200,7 +231,6 @@ const Typedown = ({
       {selectedUniqueId && !open &&
         <div
           className={classnames(
-            css.selected,
             css.selectedDisplay
           )}
         >
@@ -221,14 +251,27 @@ const Typedown = ({
 };
 
 Typedown.propTypes = {
+  className: PropTypes.string,
   dataOptions: PropTypes.arrayOf(PropTypes.object),
+  endOfList: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node,
+    PropTypes.element
+  ]),
   filterPath: PropTypes.string,
+  id: PropTypes.string,
   input: PropTypes.object,
+  isSelected: PropTypes.func,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
   meta: PropTypes.object,
   onChange: PropTypes.func,
   onType: PropTypes.func,
   renderFooter: PropTypes.func,
   renderListItem: PropTypes.func,
+  required: PropTypes.bool,
   uniqueIdentificationPath: PropTypes.string
 };
 

package/src/lib/constants/customProperties.js

@@ -0,0 +1,9 @@
+export const TYPE_CLASS_PREFIX = 'com.k_int.web.toolkit.custprops.types.CustomProperty';
+export const BLOB_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyBlob';
+export const BOOLEAN_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyBoolean';
+export const CONTAINER_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyContainer';
+export const DECIMAL_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal';
+export const INTEGER_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyInteger';
+export const REFDATA_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata';
+export const REFDATA_DEFINITION_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdataDefinition';
+export const TEXT_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyText';

package/src/lib/hooks/index.js

@@ -8,3 +8,5 @@ export { default as useLocalStorageState } from './useLocalStorageState';
 export { default as useQIndex } from './useQIndex';
 export { useSettings, useSettingSection } from './settingsHooks';
 export { default as useKiwtFieldArray } from './useKiwtFieldArray';
+export { default as useCustomProperties } from './useCustomProperties';
+export { default as useMutateCustomProperties } from './useMutateCustomProperties';

package/src/lib/hooks/useCustomProperties.js

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+
+import { useQuery } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+import { generateKiwtQuery } from '../utils';
+
+const useCustomProperties = ({
+  endpoint,
+  ctx,
+  nsValues = {
+    sort: 'id'
+  },
+  options = {},
+  queryParams,
+  returnQueryObject = false,
+}) => {
+  const ky = useOkapiKy();
+
+  const custPropOptions = {
+    searchKey: 'label,name,description',
+    filterKeys: {
+      ContextKey: 'ctx'
+    },
+    filters: [],
+    stats: false,
+    max: 100,
+    ...options
+  };
+
+  if (Array.isArray(ctx)) {
+    // If we have an array, append a context filter for each ctx given
+
+    // Special case if one is isNull
+    custPropOptions.filters.push({
+      values: ctx.map(c => (c === 'isNull' ? 'ctx isNull' : `ctx==${c}`))
+    });
+  } else if (ctx === 'isNull') { // isNull is a special case
+    custPropOptions.filters.push({
+      value: 'ctx isNull'
+    });
+  } else if (ctx) {
+    custPropOptions.filters.push({
+      path: 'ctx',
+      value: ctx
+    });
+  }
+
+  const query = generateKiwtQuery(custPropOptions, nsValues);
+  const path = `${endpoint}${query}`;
+
+  const queryObject = useQuery(
+    ['stripes-kint-components', 'useCustomProperties', 'custprops', ctx, path],
+    () => ky(path).json(),
+    queryParams
+  );
+
+  if (returnQueryObject) {
+    return queryObject || {};
+  }
+
+  const { data: custprops } = queryObject;
+  return custprops || [];
+};
+
+useCustomProperties.propTypes = {
+  endpoint: PropTypes.string,
+  ctx: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  queryParams: PropTypes.object,
+  returnQueryObject: PropTypes.bool
+};
+
+export default useCustomProperties;

package/src/lib/hooks/useMutateCustomProperties.js

@@ -0,0 +1,62 @@
+import { useMutation } from 'react-query';
+
+import { useOkapiKy } from '@folio/stripes/core';
+
+const useMutateCustomProperties = ({
+  afterQueryCalls,
+  endpoint,
+  id,
+  queryParams,
+  returnQueryObject = {
+    post: false,
+    put: false,
+    delete: false
+  }
+}) => {
+  const returnObj = {};
+
+  const ky = useOkapiKy();
+
+  const deleteQueryObject = useMutation(
+    ['stripes-kint-components', 'useMutateCustomProperties', 'delete', id],
+    async () => ky.delete(`${endpoint}/${id}`).json()
+      .then(afterQueryCalls?.delete),
+    queryParams?.delete
+  );
+
+  const putQueryObject = useMutation(
+    ['stripes-kint-components', 'useMutateCustomProperties', 'put', id],
+    async (data) => ky.put(`${endpoint}/${id}`, { json: data }).json()
+      .then(afterQueryCalls?.put),
+    queryParams?.put
+  );
+
+  const postQueryObject = useMutation(
+    ['stripes-kint-components', 'useMutateCustomProperties', 'post'],
+    async (data) => ky.post(`${endpoint}`, { json: data }).json()
+      .then(afterQueryCalls?.post),
+    queryParams?.post
+  );
+
+  if (returnQueryObject?.delete) {
+    returnObj.delete = deleteQueryObject;
+  } else {
+    returnObj.delete = deleteQueryObject.mutateAsync;
+  }
+
+  if (returnQueryObject?.put) {
+    returnObj.put = putQueryObject;
+  } else {
+    returnObj.put = putQueryObject.mutateAsync;
+  }
+
+  if (returnQueryObject?.post) {
+    returnObj.post = postQueryObject;
+  } else {
+    returnObj.post = postQueryObject.mutateAsync;
+  }
+
+  return returnObj;
+};
+
+export default useMutateCustomProperties;

package/src/lib/utils/generateKiwtQueryParams.js

@@ -6,6 +6,31 @@ const generateKiwtQueryParams = (options, nsValues) => {
     filterKeys = {},
     sortKeys = {},
     stats = true,
+    /* Assumption made that if a direct sort array is passed in options, it overrides the nsValues
+     * Of the form [{ path: 'this.is.some.path', direction: 'asc'/'desc', value: 'someOverrideValue'}, ...]
+     * If only path is passed then assume asc.
+     * If value is passed then we ignore path/direction and append "sort=${value}" directly
+     */
+    sort: optionsSort,
+     /* Assumption made that if a direct filters array is passed in options, it overrides the nsValues
+     * Of the form
+      [
+        {
+          path: 'this.is.some.path'
+          comparator: '=='
+          value: 'this is a value' //OR
+          values: ['value1', 'value2']
+        },
+        ...
+      ]
+     * This (with value instead of values) will construct a query param: "filters=this.is.some.path==this is a value"
+     * If only value is passed, then it will construct directly: "filters=value"
+     * If no comparator is passed, it assumes '=='
+     * Values overwrites value and will construct "filters=this.is.some.path==value1||this.is.some.path==value2"
+     * Values WITHOUT path will construct "filters=value1||value2"
+     * If more complex query building is desired, this should be done externally and passed in as a standalone 'value'
+     */
+    filters: optionsFilters,
     ...rest
   } = options;
 
@@ -16,10 +41,31 @@ const generateKiwtQueryParams = (options, nsValues) => {
     paramsArray.push(`term=${query}`);
   }
 
-  if (filters) {
+  if (optionsFilters) {
+    optionsFilters.forEach(opf => {
+      if (opf?.values) {
+        // Build the values filter block
+        const innerFilters = [];
+        opf.values.forEach(opfv => {
+          if (opf.path) {
+            innerFilters.push(`${opf.path}${opf.comparator ?? '=='}${opfv}`);
+          } else {
+            innerFilters.push(opfv);
+          }
+        });
+        paramsArray.push(`filters=${innerFilters.join('||')}`);
+      } else if (opf?.value) { // If no value OR values, then ignore
+        if (opf.path) {
+          paramsArray.push(`filters=${opf.path}${opf.comparator ?? '=='}${opf.value}`);
+        } else {
+          paramsArray.push(`filters=${opf.value}`);
+        }
+      }
+    });
+  } else if (filters) {
     const filterMap = {};
     filters.split(',').forEach(filter => {
-      const [filterName, ...filterRest] = filter.split('.');
+      const [filterName, ...filterRest] = filter.trim()?.split('.');
       const filterValue = filterRest.join('.');
 
       if (filterMap[filterName] === undefined) filterMap[filterName] = [];
@@ -40,8 +86,16 @@ const generateKiwtQueryParams = (options, nsValues) => {
     });
   }
 
-  if (sort) {
-    paramsArray.push(...sort.split(',').map(sortKey => {
+  if (optionsSort && optionsSort.length > 0) {
+    optionsSort.forEach(os => {
+      if (os.value) {
+        paramsArray.push(`sort=${os.value}`);
+      } else if (os.path) { // If no path then ignore
+        paramsArray.push(`sort=${os.path};${os.direction ?? 'asc'}`);
+      }
+    });
+  } else if (sort) {
+    paramsArray.push(...sort.trim()?.split(',').map(sortKey => {
       const descending = sortKey.startsWith('-');
       let term = sortKey.replace('-', '');
 

package/styles/TypeDown.css

@@ -1,5 +1,9 @@
 @import '@folio/stripes-components/lib/variables.css';
 
+.typedown {
+  margin-bottom: var(--gutter);
+}
+
 .fullWidth {
   width: 100%;
 }
@@ -24,6 +28,7 @@
 }
 
 .menuButton {
+  composes: interactionStyles from "@folio/stripes-components/lib/sharedStyles/interactionStyles.css";
   margin-bottom: 0;
   border: none;
   border-radius: 0;
@@ -57,6 +62,8 @@
 
 .selectedDisplay {
   border-radius: 0 0 var(--radius) var(--radius);
+  border: 1px solid #ccc;
+  border-top: 0;
   display: flex;
 }
 

package/translations/stripes-kint-components/en.json

@@ -1,4 +1,13 @@
 {
+
+  "create": "Create",
+  "edit": "Edit",
+  "save": "Save",
+  "cancel": "Cancel",
+  "delete": "Delete",
+
+  "errors.hasNonAlphaName": "The name can only contain Latin alphabetical characters (a-z) and non-leading numeric characters.",
+
   "settings.noCurrentValue": "No current value",
   "settings.default": "default",
   "settings.edit": "Edit",
@@ -18,5 +27,44 @@
 
   "sasqLookupComponent.mainPane.found": "{total} records found",
 
-  "noResultsMessage.showFilters": "Show filters"
+  "noResultsMessage.showFilters": "Show filters",
+
+  "customProperties": "Custom properties",
+
+  "customProperties.all": "All",
+  "customProperties.none": "None",
+
+  "customProperties.label": "Label",
+  "customProperties.primary": "Primary",
+  "customProperties.ctx": "Context",
+  "customProperties.ctx.addContext": "Add context {value}",
+  "customProperties.weight": "Order weight",
+  "customProperties.type": "Type",
+  "customProperties.internalFalse": "Public",
+  "customProperties.internalNote": "Internal note",
+  "customProperties.internalTrue": "Internal",
+  "customProperties.publicNote": "Public note",
+  "customProperties.name": "Name",
+  "customProperties.description": "Description",
+  "customProperties.category": "Picklist",
+  "customProperties.defaultVisibility": "Default visibility",
+
+  "customProperties.noCtxFound": "No matching context found",
+
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyBlob": "Blob",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyBoolean": "Boolean",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyContainer": "Container",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal": "Decimal",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyInteger": "Integer",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata": "Refdata",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyRefdataDefinition": "Refdata definition",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyText": "Text",
+
+  "customProperties.delete.confirmLabel": "Delete",
+  "customProperties.delete.confirmHeading": "Delete custom property",
+  "customProperties.delete.confirmMessage": "Custom property <strong>{name}</strong> will be <strong>deleted</strong>.",
+
+  "search": "Search",
+  "yes": "Yes",
+  "no": "No"
 }