Fixes #150 - quantity box visibility. PartsGrid cuts off larger quant…

…ity values because it's inline-editable. Adjusted width and padding Fixes some translation issues
replaysMike · Apr 8, 2023 · ad8b419 · ad8b419
1 parent 32a568e
commit ad8b419
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 21 deletions.
diff --git a/Binner/Binner.Web/ClientApp/src/components/PartsGrid.css b/Binner/Binner.Web/ClientApp/src/components/PartsGrid.css
@@ -2,6 +2,10 @@
 	background-color: rgb(179, 218, 255);
 }
 
+#partsGrid td {
+	vertical-align: middle;
+}
+
 .ui.selectable.table tbody tr.selected:hover {
 	background-color: rgb(63, 160, 250) !important;
 }
diff --git a/Binner/Binner.Web/ClientApp/src/components/PartsGrid.js b/Binner/Binner.Web/ClientApp/src/components/PartsGrid.js
@@ -6,6 +6,7 @@ import _ from 'underscore';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { fetchApi } from '../common/fetchApi';
+import { AppEvents, Events } from "../common/events";
 import "./PartsGrid.css";
 
 const AppMedia = createMedia({
@@ -128,7 +129,7 @@ export default function PartsGrid(props) {
       if (_.where(changes, { partId: part.partId }).length === 0)
         changes.push({ partId: part.partId });
     }
-    setParts(parts);
+    setParts([...parts]);
     setChangeTracker(changes);
   };
 
@@ -226,7 +227,7 @@ export default function PartsGrid(props) {
           </div>
           <Pagination activePage={page} totalPages={totalPages} firstItem={null} lastItem={null} onPageChange={handlePageChange} size='mini' />
 
-          <Dimmer.Dimmable as={Table} dimmed={loading} id="partsGrid" compact celled sortable selectable striped unstackable size='small'>
+          <Dimmer.Dimmable as={Table} dimmed={loading} id="partsGrid" compact celled sortable selectable striped unstackable size='small' className="partsGrid">
             <Table.Header>
               <Table.Row>
                 {col.partnumber && <Table.HeaderCell sorted={column === 'partNumber' ? direction : null} onClick={handleSort('partNumber')}>{t('comp.partsGrid.part', "Part")}</Table.HeaderCell>}
@@ -260,15 +261,36 @@ export default function PartsGrid(props) {
                       hideOnScroll
                       position="bottom left"
                       content={t('comp.partsGrid.popup.quantity', "The quantity of parts currently in stock.")}
-                      trigger={editable ? <Input value={p.quantity} data={p.partId} name='quantity' className='borderless fixed50' onChange={handleChange} onClick={e => e.stopPropagation()} onBlur={saveColumn} /> : <span>{p.quantity}</span>}
+                      trigger={editable 
+                        ? <Input 
+                            value={p.quantity} 
+                            data={p.partId} 
+                            name='quantity' 
+                            className='borderless fixed60 inline-editable' 
+                            onChange={handleChange} 
+                            onClick={e => e.stopPropagation()} 
+                            onFocus={() => AppEvents.sendEvent(Events.DisableBarcodeInput)} 
+                            onBlur={(e) => { AppEvents.sendEvent(Events.RestoreBarcodeInput); saveColumn(e); }} 
+                          /> 
+                        : <span>{p.quantity}</span>}
                     />                      
                   </Table.Cell>}
                   {col.lowstockthreshold && <Table.Cell>
                     <Popup 
                       hideOnScroll
                       position="bottom left"
                       content={t('comp.partsGrid.popup.lowStock', "Quantities below this value will indicate the part is low on stock.")}
-                      trigger={<Input value={p.lowStockThreshold} data={p.partId} name='lowStockThreshold' className='borderless fixed50' onChange={handleChange} onClick={e => e.stopPropagation()} onBlur={saveColumn} />}
+                      trigger={
+                        <Input 
+                          value={p.lowStockThreshold} 
+                          data={p.partId} 
+                          name='lowStockThreshold' 
+                          className='borderless fixed60 inline-editable' 
+                          onChange={handleChange} 
+                          onClick={e => e.stopPropagation()} 
+                          onFocus={() => AppEvents.sendEvent(Events.DisableBarcodeInput)} 
+                          onBlur={(e) => { AppEvents.sendEvent(Events.RestoreBarcodeInput); saveColumn(e); }} 
+                        />}
                     />                      
                   </Table.Cell>}
                   {col.manufacturerpartnumber && <Table.Cell>

diff --git a/Binner/Binner.Web/ClientApp/src/components/VersionBanner.js b/Binner/Binner.Web/ClientApp/src/components/VersionBanner.js
@@ -54,8 +54,8 @@ export function VersionBanner(props) {
 		{isOpen && <div className="version-banner">
 			<span>
 				<Icon name="close" style={{marginRight: '20px', cursor: 'pointer'}} onClick={handleSkip} />
-				<Trans i18nKey="notification.versionBanner.newVersion" version={version}>
-					A new version of Binner <b>{version}</b> is available!
+				<Trans i18nKey="notification.versionBanner.newVersion">
+					A new version of Binner <b>{{version: version}}</b> is available!
 				</Trans>
 			</span>
 			<div style={{float: 'right'}}>

diff --git a/Binner/Binner.Web/ClientApp/src/custom.css b/Binner/Binner.Web/ClientApp/src/custom.css
@@ -158,6 +158,14 @@ section.formHeader {
 }
 
 
+.fixed60 {
+    width: 60px;
+}
+
+.fixed75 {
+    width: 75px;
+}
+
 .fixed100 {
     width: 100px;
 }
@@ -516,12 +524,23 @@ section.formHeader {
 }
 
 .page-notice {
+	font-size: 0.9em;
     background-color: #fcf7c9;
     padding: 2px 10px;
     border: 1px dotted #bec07b;
     font-weight: 400;
     box-shadow: 0 2px 2px 0 rgb(34 36 38 / 15%);
     cursor: pointer;
+	width: 100%;
+	max-height: 28px;
+}
+
+.page-notice div {
+	max-width: 100%;
+	max-height: 28px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .page-error {
@@ -532,6 +551,16 @@ section.formHeader {
     font-weight: 400;
     box-shadow: 0 2px 2px 0 rgb(34 36 38 / 15%);
     cursor: pointer;
+	width: 100%;
+	max-height: 28px;
+}
+
+.page-error div {
+	max-width: 100%;
+	max-height: 28px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .version-banner {

diff --git a/Binner/Binner.Web/ClientApp/src/pages/Bom.js b/Binner/Binner.Web/ClientApp/src/pages/Bom.js
@@ -461,8 +461,8 @@ export function Bom(props) {
     setConfirmDeleteIsOpen(true);
     setConfirmPartDeleteContent(
       <p>
-        <Trans i18nKey="confirm.removeBomParts" quantity={checkboxesChecked.length}>
-          Are you sure you want to remove these <b>checkboxesChecked.length</b> part(s) from your BOM?
+        <Trans i18nKey="confirm.removeBomParts">
+          Are you sure you want to remove these <b>{{quantity: checkboxesChecked.length}}</b> part(s) from your BOM?
         </Trans>
         <br />
         <br />

diff --git a/Binner/Binner.Web/ClientApp/src/pages/Inventory.js b/Binner/Binner.Web/ClientApp/src/pages/Inventory.js
@@ -1442,12 +1442,12 @@ export function Inventory(props) {
     setSelectedPart(part);
     setConfirmPartDeleteContent(
       <p>
-        <Trans i18nKey="confirm.deletePart" name={part.partNumber}>
-        Are you sure you want to delete part <b>{part.partNumber}</b>?
+        <Trans i18nKey="confirm.deletePart">
+        Are you sure you want to delete part <b>{{name: inputPartNumber}}</b>?
         </Trans>
         <br />
         <br />
-        <Trans i18nKey="confirm.permanent" partNumber={part.partNumber}>
+        <Trans i18nKey="confirm.permanent">
         This action is <i>permanent and cannot be recovered</i>.
         </Trans>        
       </p>
@@ -1468,12 +1468,12 @@ export function Inventory(props) {
     setSelectedLocalFile({ localFile, type });
     setConfirmLocalFileDeleteContent(
       <p>
-        <Trans i18nKey="confirm.deleteLocalFile" name={localFile.name}>
-        Are you sure you want to delete this local file named <b>{localFile.name}</b>?
+        <Trans i18nKey="confirm.deleteLocalFile">
+        Are you sure you want to delete this local file named <b>{{name: localFile.name}}</b>?
         </Trans>
         <br />
         <br />
-        <Trans i18nKey="confirm.permanent" partNumber={part.partNumber}>
+        <Trans i18nKey="confirm.permanent">
         This action is <i>permanent and cannot be recovered</i>.
         </Trans>
       </p>
@@ -1721,7 +1721,7 @@ export function Inventory(props) {
       </Modal>
       <Confirm
         className="confirm"
-        header={t('confirm.deletePart', "Delete Part")}
+        header={t('confirm.header.deletePart', "Delete Part")}
         open={confirmDeleteIsOpen}
         onCancel={confirmDeleteClose}
         onConfirm={handleDeletePart}
@@ -1795,10 +1795,12 @@ export function Inventory(props) {
         <div className="page-banner">
           {partMetadataIsSubscribed && (
             <div className="page-notice" onClick={() => setPartMetadataIsSubscribed(false)}>
-              <Icon name="close" /> 
-              <Trans i18nKey="message.noPartInfo" partNumber={part.partNumber}>
-              No part information is available for '{part.partNumber}'. You are subscribed to updates and will be automatically updated when the part is indexed.
-              </Trans>
+              <div>
+                <Icon name="close" /> 
+                <Trans i18nKey="message.noPartInfo">
+                No part information is available for '{{partNumber: inputPartNumber}}'. You are subscribed to updates and will be automatically updated when the part is indexed.
+                </Trans>
+              </div>
             </div>
           )}
           {partMetadataError && (

diff --git a/Binner/Binner.Web/ClientApp/src/pages/PartTypes.js b/Binner/Binner.Web/ClientApp/src/pages/PartTypes.js
@@ -224,8 +224,8 @@ export function PartTypes(props) {
     setSelectedPartType(partType);
     setConfirmPartDeleteContent(
       <p>
-        <Trans i18nKey='confirm.deletePartType' name={partType.name}>
-          Are you sure you want to delete part type <i>{partType.name}</i>?
+        <Trans i18nKey='confirm.deletePartType'>
+          Are you sure you want to delete part type <i>{{name: partType.name}}</i>?
         </Trans>
         <br/>
         <br/>

diff --git a/Binner/Binner.Web/Controllers/PartController.cs b/Binner/Binner.Web/Controllers/PartController.cs
@@ -355,6 +355,7 @@ public async Task<IActionResult> GetDashboardSummaryAsync()
                 PartsCost = partsCost,
                 LowStockCount = lowStockCount.Items.Count(),
                 ProjectsCount = projectsCount.Count,
+                Currency = "USD"
             });
         }