UI out-of-stock upgrade

Update UI to flag out-of-stock items with different font colour & disable edit/transfer button for managers on out-of-stock products.
UplandsDynamic · Feb 5, 2019 · 91aa590 · 91aa590
1 parent 77b048e
commit 91aa590
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 17 deletions.
diff --git a/stock_control_frontend/react/.env.staging b/stock_control_frontend/react/.env.staging
@@ -5,4 +5,4 @@ REACT_APP_SHORT_ORG_NAME = 'Aninstance Consultancy'
 REACT_APP_COPYRIGHT = 'Application developed by Aninstance Consultancy - www.aninstance.com'
 REACT_APP_FOOTER = 'THIS IS A STAGING OR DEVELOPMENT VERSION'
 REACT_APP_GREETING = 'Simple Stock Management'
-REACT_APP_VERSION = '1.2.7'
+REACT_APP_VERSION = '1.2.9'
diff --git a/stock_control_frontend/react/src/css/data-table.css b/stock_control_frontend/react/src/css/data-table.css
@@ -16,6 +16,7 @@ thead th {
     padding: 1em !important;
 }
 
+
 td {
     color: yellow !important;
     padding: 0.5em !important;
@@ -26,6 +27,15 @@ td.action-col, th.action-col {
     color: white !important;
 }
 
+tr.outOfStock td.unitsTotal {
+    color: orangered !important;
+    font-size: 0.7em;
+}
+
+tr.outOfStock td.sku {
+    color: orangered !important;
+}
+
 table td.table-small-font {
     font-size: 0.8em;
 }
@@ -40,7 +50,7 @@ table.stockTable-disabled, table.stockTable-disabled input {
 }
 
 table.stockTable-disabled input {
-    background-color: lightslategrey!important;
+    background-color: lightslategrey !important;
     border: none;
 }
 
@@ -59,6 +69,21 @@ caption {
     color: orange;
 }
 
+input.search {
+    background-color: darkorange;
+    color: #001e00 !important;
+    font-weight: bold;
+}
+
+input.search::placeholder {
+    color: #001e00 !important;
+    font-weight: bold;
+}
+
+input.search {
+    border: 2px solid darkgoldenrod !important;
+}
+
 .Modal {
     position: absolute;
     top: 40px;

diff --git a/stock_control_frontend/react/src/css/paginate.css b/stock_control_frontend/react/src/css/paginate.css
@@ -53,4 +53,5 @@ input.page-input {
     max-width: 3em;
     background-color: darkorange;
     color: #001e00;
+    border: 2px solid darkgoldenrod !important;
 }
diff --git a/stock_control_frontend/react/src/data-table.js b/stock_control_frontend/react/src/data-table.js
@@ -112,7 +112,7 @@ class DataTable extends React.Component {
                         <div className={'col-sm'}>
                             <nav className={'search-navigation'}>
                                 <input value={this.state.search} placeholder={'Search'}
-                                       name={'search'} className={'form-control'}
+                                       name={'search'} className={'form-control search'}
                                        onChange={(e) => this.handleSearch(e)}/>
                             </nav>
                         </div>
@@ -138,22 +138,29 @@ class DataTable extends React.Component {
         let resultData = ({stockData = null} = {}) => {
             return stockData.data.results.length ?
                 stockData.data.results.map((item) => {
-                    return (<tr key={item.id} data-toggle="modal" className={'d-flex'}>
+                    let {sku, desc, units_total, unit_price} = item;
+                    let admin = stockRecordMeta.userIsAdmin;
+                    let rowClasses = [units_total <= 0 ? 'outOfStock' : '', 'd-flex'];
+                    let editButtonClasses = [units_total <= 0 && !admin ?
+                        'disabled' : '', 'table-btn', 'btn', 'btn-primary'];
+                    return (<tr key={item.id} data-toggle="modal" className={rowClasses.join(' ')}>
                         {/*<th scope="row">{item.id}</th>*/}
-                        <td className={'col-2'}>{item.sku}</td>
-                        <td className={'col-3'}>{item.desc}</td>
-                        <td className={'col-1'}>{item.units_total}</td>
-                        <td className={'col-2'}>{item.unit_price}</td>
-                        <td className={'table-small-font col-2'}>
+                        <td className={'col-2 sku'}>{sku}</td>
+                        <td className={'col-4 desc'}>{desc}</td>
+                        <td className={'col-1 unitsTotal'}>{units_total > 0 ? units_total : 'Out of Stock'}</td>
+                        <td className={'col-1 unitPrice'}>{unit_price}</td>
+                        <td className={'table-small-font col-2 recordUpdated'}>
                             {DataTable.formatUTCDateTime({dateTime: item.record_updated})}</td>
                         <td className={'action-col col-2 '}>
-                            <button onClick={() => this.handleEditRecord({record: {data: item}})}
-                                    className={'table-btn btn btn-primary'}>
+                            <button onClick={() => {
+                                if (admin || (!admin && units_total > 0)) {
+                                    return this.handleEditRecord({record: {data: item}})
+                                } else return null;
+                            }} className={editButtonClasses.join(' ')}>
                                 <FontAwesomeIcon icon={"edit"}/></button>
-                            {stockRecordMeta.userIsAdmin ?
-                                <button onClick={() => this.handleDeleteLine({record: item})}
-                                        className={'table-btn btn btn-danger'}>
-                                    <FontAwesomeIcon icon={"trash-alt"}/></button> : ''}
+                            {admin ? <button onClick={() => this.handleDeleteLine({record: item})}
+                                             className={'table-btn btn btn-danger'}>
+                                <FontAwesomeIcon icon={"trash-alt"}/></button> : ''}
                         </td>
                     </tr>)
                 }) : null;
@@ -178,7 +185,7 @@ class DataTable extends React.Component {
                                         })}>
                                             SKU
                                         </th>
-                                        <th className={'col-3'} scope={'col'} onClick={() => this.handleGetRecords({
+                                        <th className={'col-4'} scope={'col'} onClick={() => this.handleGetRecords({
                                             stockRecord: {meta: {orderBy: 'desc', page: 1}}
                                         })}>
                                             Description
@@ -188,7 +195,7 @@ class DataTable extends React.Component {
                                         })}>
                                             Units
                                         </th>
-                                        <th className={'col-2'} scope={'col'} onClick={() => this.handleGetRecords({
+                                        <th className={'col-1'} scope={'col'} onClick={() => this.handleGetRecords({
                                             stockRecord: {meta: {orderBy: 'unit_price', page: 1}}
                                         })}>
                                             Unit Price