@openmrs/esm-stock-management-app 3.0.1-pre.840 → 3.0.1-pre.848

package/src/stock-items/stock-items-table.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/styles/scss/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .headerBtnContainer {
   background-color: $ui-background;
@@ -74,6 +74,8 @@
 .filterContainer {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  margin-bottom: layout.$spacing-05;
 }
 
 .dateAlign {
@@ -82,17 +84,12 @@
 }
 
 .filtersAlign {
-  padding-bottom: layout.$spacing-03;
+  margin-bottom: layout.$spacing-03;
+  min-width: auto;
+  width: auto;
 
   :global(.cds--list-box__menu) {
     min-width: 15rem;
     z-index: 1;
   }
 }
-
-.filterContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: layout.$spacing-05;
-}

package/src/stock-items/stock-items.component.tsx

@@ -3,7 +3,7 @@ import StockItemsTableComponent from './stock-items-table.component';
 
 const StockItems = () => {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockItemsTableComponent />
     </div>
   );

package/src/stock-locations/stock-locations.component.tsx

@@ -3,7 +3,7 @@ import StockLocationsItems from './stock-locations-table.component';
 
 function StockLocations() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockLocationsItems />
     </div>
   );

package/src/stock-management-header/stock-management-header.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
   @include type.type-style('body-compact-02');

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .textHeading {
   font-weight: bold;

package/src/stock-operations/stock-operations-filters.component.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { getStockOperationTypes, useConcept } from '../stock-lookups/stock-lookups.resource';
 import { DropdownSkeleton, MultiSelect } from '@carbon/react';
+import { getStockOperationTypes, useConcept } from '../stock-lookups/stock-lookups.resource';
 import { StockFilters } from '../constants';
 import { StockOperationStatusTypes } from '../core/api/types/stockOperation/StockOperationStatus';
 import styles from '../stock-items/stock-items-table.scss';
 
 interface StockOperationFiltersProps {
   conceptUuid?: string;
-  onFilterChange: (selectedItems: any[], filterType: string) => void;
   filterName: string;
+  onFilterChange: (selectedItems: any[], filterType: string) => void;
 }
 
 const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptUuid, onFilterChange, filterName }) => {
@@ -58,11 +58,12 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
 
   return (
     <MultiSelect
+      autoAlign
       className={styles.filtersAlign}
+      disabled={!dataItems.length}
       id="multiSelect"
       label={filterName}
-      size="md"
-      labelInline={true}
+      labelInline
       items={dataItems}
       itemToString={(item) => (item ? item.display : 'Not Set')}
       onChange={({ selectedItems }) => {
@@ -74,7 +75,6 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
         }
       }}
       placeholder={`Filter by ${filterName}`}
-      style={{ minWidth: 'auto', width: 'auto' }}
     />
   );
 };

package/src/stock-operations/stock-operations-table.component.tsx

@@ -1,9 +1,11 @@
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   DataTable,
   DataTableSkeleton,
   DatePicker,
   DatePickerInput,
   InlineLoading,
+  Link,
   Pagination,
   Table,
   TableBody,
@@ -22,22 +24,18 @@ import {
   TableToolbarSearch,
   TabPanel,
   Tile,
-  Link,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
-import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
 import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, StockFilters } from '../constants';
-import { ResourceRepresentation } from '../core/api/api';
-import { StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
 import { formatDisplayDate } from '../core/utils/datetimeUtils';
 import { handleMutate } from '../utils';
+import { ResourceRepresentation } from '../core/api/api';
+import { useStockOperationPages } from './stock-operations-table.resource';
 import EditStockOperationActionMenu from './edit-stock-operation/edit-stock-operation-action-menu.component';
 import StockOperationTypesSelector from './stock-operation-types-selector/stock-operation-types-selector.component';
 import StockOperationsFilters from './stock-operations-filters.component';
-import { useStockOperationPages } from './stock-operations-table.resource';
-
 import StockOperationExpandedRow from './add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.component';
 import styles from './stock-operations-table.scss';
 
@@ -47,6 +45,7 @@ interface StockOperationsTableProps {
 
 const StockOperations: React.FC<StockOperationsTableProps> = () => {
   const { t } = useTranslation();
+
   const handleRefresh = () => {
     handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
   };
@@ -96,46 +95,48 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     }
   };
 
-  const tableRows = useMemo(() => {
-    return items?.map((stockOperation, index) => {
-      const threshHold = 1;
-      const itemCountGreaterThanThreshhold = (stockOperation?.stockOperationItems?.length ?? 0) > threshHold;
-      const commonNames =
-        stockOperation?.stockOperationItems
-          ?.slice(0, itemCountGreaterThanThreshhold ? threshHold : undefined)
-          .map((item) => item.commonName)
-          .join(', ') ?? '';
+  const tableRows = useMemo(
+    () =>
+      items?.map((stockOperation, index) => {
+        const threshHold = 1;
+        const itemCountGreaterThanThreshhold = (stockOperation?.stockOperationItems?.length ?? 0) > threshHold;
+        const commonNames =
+          stockOperation?.stockOperationItems
+            ?.slice(0, itemCountGreaterThanThreshhold ? threshHold : undefined)
+            .map((item) => item.commonName)
+            .join(', ') ?? '';
 
-      return {
-        ...stockOperation,
-        id: stockOperation?.uuid,
-        key: `key-${stockOperation?.uuid}`,
-        operationTypeName: `${stockOperation?.operationTypeName}`,
-        operationNumber: (
-          <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={false} showprops={true} />
-        ),
-        stockOperationItems: {
-          commonNames,
-          more: itemCountGreaterThanThreshhold ? stockOperation?.stockOperationItems?.length - threshHold : 0,
-        },
-        status: `${stockOperation?.status}`,
-        source: `${stockOperation?.sourceName ?? ''}`,
-        destination: `${stockOperation?.destinationName ?? ''}`,
-        location: (
-          <>
-            {stockOperation?.sourceName ?? ''}
-            {stockOperation?.sourceName && stockOperation?.destinationName ? <ArrowRight size={16} /> : ''}{' '}
-            {stockOperation?.destinationName ?? ''}
-          </>
-        ),
-        responsiblePerson: `${
-          stockOperation?.responsiblePersonFamilyName ?? stockOperation?.responsiblePersonOther ?? ''
-        } ${stockOperation?.responsiblePersonGivenName ?? ''}`,
-        operationDate: formatDisplayDate(stockOperation?.operationDate),
-        actions: <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={true} showprops={false} />,
-      };
-    });
-  }, [items]);
+        return {
+          ...stockOperation,
+          id: stockOperation?.uuid,
+          key: `key-${stockOperation?.uuid}`,
+          operationTypeName: `${stockOperation?.operationTypeName}`,
+          operationNumber: (
+            <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={false} showprops={true} />
+          ),
+          stockOperationItems: {
+            commonNames,
+            more: itemCountGreaterThanThreshhold ? stockOperation?.stockOperationItems?.length - threshHold : 0,
+          },
+          status: `${stockOperation?.status}`,
+          source: `${stockOperation?.sourceName ?? ''}`,
+          destination: `${stockOperation?.destinationName ?? ''}`,
+          location: (
+            <>
+              {stockOperation?.sourceName ?? ''}
+              {stockOperation?.sourceName && stockOperation?.destinationName ? <ArrowRight size={16} /> : ''}{' '}
+              {stockOperation?.destinationName ?? ''}
+            </>
+          ),
+          responsiblePerson: `${
+            stockOperation?.responsiblePersonFamilyName ?? stockOperation?.responsiblePersonOther ?? ''
+          } ${stockOperation?.responsiblePersonGivenName ?? ''}`,
+          operationDate: formatDisplayDate(stockOperation?.operationDate),
+          actions: <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={true} showprops={false} />,
+        };
+      }),
+    [items],
+  );
 
   if (isLoading && !filterApplied) {
     return (
@@ -144,26 +145,22 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
   }
 
   return (
-    <div className={styles.tableOverride}>
+    <div>
       <TabPanel>{t('stockOperationTrackMovement', 'Stock operations to track movement of stock.')}</TabPanel>
-      <div id="table-tool-bar">
-        <div></div>
-        <div className="right-filters"></div>
-      </div>
       <DataTable
-        rows={tableRows}
         headers={tableHeaders}
-        isSortable={true}
-        useZebraStyles={true}
+        isSortable
+        rows={tableRows}
+        useZebraStyles
         render={({
-          rows,
-          headers,
+          expandRow,
+          getExpandedRowProps,
           getHeaderProps,
-          getTableProps,
           getRowProps,
+          getTableProps,
+          headers,
           onInputChange,
-          getExpandedRowProps,
-          expandRow,
+          rows,
         }) => (
           <TableContainer>
             <TableToolbar
@@ -175,34 +172,30 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
             >
               <TableToolbarContent className={styles.toolbarContent}>
                 <TableToolbarSearch
-                  className={styles.patientListSearch}
                   expanded
+                  labelText={t('searchStockOperations', 'Search stock operations')}
                   onChange={onInputChange}
-                  placeholder="Filter Table"
-                  size="sm"
+                  placeholder={t('searchStockOperations', 'Search stock operations')}
                 />
-                <div className={styles.filterContainer}>
+                <div className={styles.container}>
                   <DatePicker
-                    className={styles.dateAlign}
+                    className={styles.datePicker}
                     datePickerType="range"
                     dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                    onChange={([startDate, endDate]) => handleDateFilterChange([startDate, endDate])}
                     value={[selectedFromDate, selectedToDate]}
-                    onChange={([startDate, endDate]) => {
-                      handleDateFilterChange([startDate, endDate]);
-                    }}
                   >
-                    <DatePickerInput placeholder={DATE_PICKER_FORMAT} />
-                    <DatePickerInput placeholder={DATE_PICKER_FORMAT} />
+                    <DatePickerInput labelText={t('startDate', 'Start date')} placeholder={DATE_PICKER_FORMAT} />
+                    <DatePickerInput labelText={t('endDate', 'End date')} placeholder={DATE_PICKER_FORMAT} />
                   </DatePicker>
-
                   <StockOperationsFilters filterName={StockFilters.SOURCES} onFilterChange={handleOnFilterChange} />
-
                   <StockOperationsFilters filterName={StockFilters.STATUS} onFilterChange={handleOnFilterChange} />
-
                   <StockOperationsFilters filterName={StockFilters.OPERATION} onFilterChange={handleOnFilterChange} />
                 </div>
                 <TableToolbarMenu>
-                  <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
+                  <TableToolbarAction className={styles.toolbarMenuAction} onClick={handleRefresh}>
+                    {t('refresh', 'Refresh')}
+                  </TableToolbarAction>
                 </TableToolbarMenu>
 
                 <StockOperationTypesSelector />

package/src/stock-operations/stock-operations-table.scss

@@ -1,7 +1,7 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/colors';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tileContainer {
   background-color: $ui-02;
@@ -34,23 +34,20 @@
 .toolbarContent {
   display: flex;
   align-items: center;
+  height: layout.$spacing-09;
+  margin-top: layout.$spacing-05;
 }
 
-.filterContainer {
+.container {
   display: flex;
   align-items: center;
-}
-
-.dateAlign {
-  padding-top: layout.$spacing-03;
-  height: 100%;
+  justify-content: space-between;
 }
 
 .filterContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: layout.$spacing-05;
 }
 
 .rowLoadingContainer {
@@ -96,3 +93,15 @@
 .relatedTransactionHeader {
   color: colors.$green-50;
 }
+
+.toolbarMenuAction {
+  max-width: none;
+}
+
+.dataTableSkeleton {
+  margin-top: layout.$spacing-09;
+}
+
+.datePicker {
+  margin-bottom: layout.$spacing-05;
+}

package/src/stock-operations/stock-operations.component.tsx

@@ -3,7 +3,7 @@ import StockOperations from './stock-operations-table.component';
 
 function StockOperationsComponent() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockOperations />
     </div>
   );

package/src/stock-reports/report-list/stock-reports.scss

@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/type';
 @use '@carbon/layout';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-02');

package/src/stock-sources/add-stock-sources/add-stock-sources.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
   margin: layout.$spacing-03;

package/src/stock-sources/delete-stock-modal.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .bodyText {
   @include type.type-style('body-long-01');

package/src/stock-sources/stock-sources.component.tsx

@@ -3,7 +3,7 @@ import StockSourcesItems from './stock-sources-items-table.component';
 
 function StockSources() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockSourcesItems />
     </div>
   );

package/src/stock-user-role-scopes/delete-stock-user-scope-modal.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .bodyText {
   @include type.type-style('body-long-01');

package/src/stock-user-role-scopes/stock-user-role-scopes.component.tsx

@@ -3,7 +3,7 @@ import StockUserRoleScopesItems from './stock-user-role-scopes-items-table.compo
 
 function StockUserScopes() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockUserRoleScopesItems />
     </div>
   );

package/src/stock-user-role-scopes/stock-user-role-scopes.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-02');