@k-int/stripes-kint-components 1.6.0 → 2.0.1

package/src/lib/Typedown/Typedown.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 
 import get from 'lodash/get';
 
-import { EndOfList, IconButton, Popper } from '@folio/stripes/components';
+import { EndOfList, IconButton, Label, Popper } from '@folio/stripes/components';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { interactionStyles } from '@folio/stripes-components/lib/sharedStyles/interactionStyles.css';
@@ -17,19 +17,29 @@ import selectorSafe from '../utils/selectorSafe';
 
 const Typedown = ({
   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 +56,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 +92,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,7 +119,7 @@ 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}]`}
@@ -110,7 +128,7 @@ const Typedown = ({
                   css.fullWidth,
                   css.menuButton
                 )}
-                data-selected={isSelected}
+                data-selected={isSelectedEval}
                 id={`typedown-button-[${index}]`}
                 onClick={() => {
                   handleChange(d);
@@ -123,8 +141,7 @@ const Typedown = ({
               </button>
             );
           }) :
-          // TODO test this
-          <EndOfList />
+            endOfList || <EndOfList />
           }
         </div>
         {renderFooter &&
@@ -133,17 +150,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,
@@ -174,6 +195,15 @@ const Typedown = ({
     <div
       ref={resizeRef}
     >
+      {label &&
+        <Label
+          htmlFor={id}
+          id={`${id}-label`}
+          required={required}
+        >
+          {label}
+        </Label>
+      }
       {renderSearchField()}
       <Popper
         key="typedown-menu-toggle"
@@ -222,13 +252,25 @@ const Typedown = ({
 
 Typedown.propTypes = {
   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,73 @@
+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 = {
+    searchKey: 'label,name,description',
+    filterKeys: {
+      ContextKey: 'ctx'
+    },
+    stats: false,
+    max: 100
+  },
+  queryParams,
+  returnQueryObject = false,
+}) => {
+  const ky = useOkapiKy();
+
+  // Allow passing of 'false' for isNull
+  if (Array.isArray(ctx)) {
+    // If we have an array, append a context filter for each ctx given
+    nsValues.filters = ctx.map(c => {
+      if (c === 'isNull') {
+        return 'ContextWithoutKey.ctx isNull';
+      } else {
+        return `ContextKey.${c}`;
+      }
+    }).join(',');
+  } else if (ctx === 'isNull') { // isNull is a special case
+    nsValues.filters = 'ContextWithoutKey.ctx isNull';
+  } else if (ctx) {
+    // If we just have a string, append a single ctx filter
+    nsValues.filters = `ContextKey.${ctx}`;
+  } else {
+    nsValues.filters = null;
+  }
+
+  const query = generateKiwtQuery(options, 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/hooks/useRefdata.js

@@ -4,20 +4,14 @@ import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
 
-import { generateKiwtQuery } from '../utils';
+import { generateKiwtQuery, refdataOptions } from '../utils';
 
 const useRefdata = ({
   endpoint,
   desc,
+  options = refdataOptions,
   queryParams,
   returnQueryObject = false,
-  options = {
-    filterKeys: {
-      DescKey: 'desc'
-    },
-    stats: false,
-    max: 100
-  }
 }) => {
   const ky = useOkapiKy();
 

package/src/lib/utils/index.js

@@ -4,6 +4,8 @@ export { default as selectorSafe } from './selectorSafe';
 
 export { default as buildUrl } from './buildUrl';
 
+export { default as refdataOptions } from './refdataOptions';
+
 // Settings utils
 export { default as renderHelpText } from './renderHelpText';
 export { default as sortByLabel } from './sortByLabel';

package/src/lib/utils/refdataOptions.js

@@ -0,0 +1,7 @@
+export default {
+  filterKeys: {
+    DescKey: 'desc'
+  },
+  stats: false,
+  max: 100
+};

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"
 }

package/artifacts/coverage-jest/lcov-report/base.css

@@ -1,224 +0,0 @@
-body, html {
-  margin:0; padding: 0;
-  height: 100%;
-}
-body {
-    font-family: Helvetica Neue, Helvetica, Arial;
-    font-size: 14px;
-    color:#333;
-}
-.small { font-size: 12px; }
-*, *:after, *:before {
-  -webkit-box-sizing:border-box;
-     -moz-box-sizing:border-box;
-          box-sizing:border-box;
-  }
-h1 { font-size: 20px; margin: 0;}
-h2 { font-size: 14px; }
-pre {
-    font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    margin: 0;
-    padding: 0;
-    -moz-tab-size: 2;
-    -o-tab-size:  2;
-    tab-size: 2;
-}
-a { color:#0074D9; text-decoration:none; }
-a:hover { text-decoration:underline; }
-.strong { font-weight: bold; }
-.space-top1 { padding: 10px 0 0 0; }
-.pad2y { padding: 20px 0; }
-.pad1y { padding: 10px 0; }
-.pad2x { padding: 0 20px; }
-.pad2 { padding: 20px; }
-.pad1 { padding: 10px; }
-.space-left2 { padding-left:55px; }
-.space-right2 { padding-right:20px; }
-.center { text-align:center; }
-.clearfix { display:block; }
-.clearfix:after {
-  content:'';
-  display:block;
-  height:0;
-  clear:both;
-  visibility:hidden;
-  }
-.fl { float: left; }
-@media only screen and (max-width:640px) {
-  .col3 { width:100%; max-width:100%; }
-  .hide-mobile { display:none!important; }
-}
-
-.quiet {
-  color: #7f7f7f;
-  color: rgba(0,0,0,0.5);
-}
-.quiet a { opacity: 0.7; }
-
-.fraction {
-  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  font-size: 10px;
-  color: #555;
-  background: #E8E8E8;
-  padding: 4px 5px;
-  border-radius: 3px;
-  vertical-align: middle;
-}
-
-div.path a:link, div.path a:visited { color: #333; }
-table.coverage {
-  border-collapse: collapse;
-  margin: 10px 0 0 0;
-  padding: 0;
-}
-
-table.coverage td {
-  margin: 0;
-  padding: 0;
-  vertical-align: top;
-}
-table.coverage td.line-count {
-    text-align: right;
-    padding: 0 5px 0 20px;
-}
-table.coverage td.line-coverage {
-    text-align: right;
-    padding-right: 10px;
-    min-width:20px;
-}
-
-table.coverage td span.cline-any {
-    display: inline-block;
-    padding: 0 5px;
-    width: 100%;
-}
-.missing-if-branch {
-    display: inline-block;
-    margin-right: 5px;
-    border-radius: 3px;
-    position: relative;
-    padding: 0 4px;
-    background: #333;
-    color: yellow;
-}
-
-.skip-if-branch {
-    display: none;
-    margin-right: 10px;
-    position: relative;
-    padding: 0 4px;
-    background: #ccc;
-    color: white;
-}
-.missing-if-branch .typ, .skip-if-branch .typ {
-    color: inherit !important;
-}
-.coverage-summary {
-  border-collapse: collapse;
-  width: 100%;
-}
-.coverage-summary tr { border-bottom: 1px solid #bbb; }
-.keyline-all { border: 1px solid #ddd; }
-.coverage-summary td, .coverage-summary th { padding: 10px; }
-.coverage-summary tbody { border: 1px solid #bbb; }
-.coverage-summary td { border-right: 1px solid #bbb; }
-.coverage-summary td:last-child { border-right: none; }
-.coverage-summary th {
-  text-align: left;
-  font-weight: normal;
-  white-space: nowrap;
-}
-.coverage-summary th.file { border-right: none !important; }
-.coverage-summary th.pct { }
-.coverage-summary th.pic,
-.coverage-summary th.abs,
-.coverage-summary td.pct,
-.coverage-summary td.abs { text-align: right; }
-.coverage-summary td.file { white-space: nowrap;  }
-.coverage-summary td.pic { min-width: 120px !important;  }
-.coverage-summary tfoot td { }
-
-.coverage-summary .sorter {
-    height: 10px;
-    width: 7px;
-    display: inline-block;
-    margin-left: 0.5em;
-    background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
-}
-.coverage-summary .sorted .sorter {
-    background-position: 0 -20px;
-}
-.coverage-summary .sorted-desc .sorter {
-    background-position: 0 -10px;
-}
-.status-line {  height: 10px; }
-/* yellow */
-.cbranch-no { background: yellow !important; color: #111; }
-/* dark red */
-.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
-.low .chart { border:1px solid #C21F39 }
-.highlighted,
-.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
-  background: #C21F39 !important;
-}
-/* medium red */
-.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
-/* light red */
-.low, .cline-no { background:#FCE1E5 }
-/* light green */
-.high, .cline-yes { background:rgb(230,245,208) }
-/* medium green */
-.cstat-yes { background:rgb(161,215,106) }
-/* dark green */
-.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
-.high .chart { border:1px solid rgb(77,146,33) }
-/* dark yellow (gold) */
-.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
-.medium .chart { border:1px solid #f9cd0b; }
-/* light yellow */
-.medium { background: #fff4c2; }
-
-.cstat-skip { background: #ddd; color: #111; }
-.fstat-skip { background: #ddd; color: #111 !important; }
-.cbranch-skip { background: #ddd !important; color: #111; }
-
-span.cline-neutral { background: #eaeaea; }
-
-.coverage-summary td.empty {
-    opacity: .5;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    line-height: 1;
-    color: #888;
-}
-
-.cover-fill, .cover-empty {
-  display:inline-block;
-  height: 12px;
-}
-.chart {
-  line-height: 0;
-}
-.cover-empty {
-    background: white;
-}
-.cover-full {
-    border-right: none !important;
-}
-pre.prettyprint {
-    border: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-.com { color: #999 !important; }
-.ignore-none { color: #999; font-weight: normal; }
-
-.wrapper {
-  min-height: 100%;
-  height: auto !important;
-  height: 100%;
-  margin: 0 auto -48px;
-}
-.footer, .push {
-  height: 48px;
-}