Skip to content

Commit

Permalink
feat: add volume field in inventory tab (ComPlat#1613)
Browse files Browse the repository at this point in the history 
* add volume field in inventory tab

* fix: apply conditional check for p-statements in chemicalTab

* fix: verify fetched pictograms from merck
  • Loading branch information
@adambasha0
adambasha0 authored Nov 24, 2023
1 parent cf7e0b0 commit 5e3d981
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 30 deletions.
10 changes: 7 additions & 3 deletions app/assets/stylesheets/chemical-tab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,18 +142,22 @@ table.table-borderless {
justify-content: space-between;
margin-top: 10px;
}

.text-input-price {
width: 22%;
}

.text-input-person {
width: 29%;
width: 22%;
}

.text-input-date {
margin-top: -17px;
width: 40%;
width: 35%;
}

.text-input-required-by {
width: 29%;
width: 22%;
}
}

Expand Down
23 changes: 14 additions & 9 deletions app/packs/src/apps/mydb/elements/details/NumericInputUnit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,16 @@ export default function NumericInputUnit(props) {
return [convertedValue, convertedUnit];
};

const validateConversionForInventoryAmount = (valueToFormat) => {
const conversionMap = {
g: { convertedUnit: 'mg', conversionFactor: 1000 },
mg: { convertedUnit: 'μg', conversionFactor: 1000 },
μg: { convertedUnit: 'g', conversionFactor: 0.000001 }
};
const conversionMap = {
g: { convertedUnit: 'mg', conversionFactor: 1000 },
mg: { convertedUnit: 'μg', conversionFactor: 1000 },
μg: { convertedUnit: 'g', conversionFactor: 0.000001 },
l: { convertedUnit: 'ml', conversionFactor: 1000 },
ml: { convertedUnit: 'μl', conversionFactor: 1000 },
μl: { convertedUnit: 'l', conversionFactor: 0.000001 }
};

const convertValue = (valueToFormat, currentUnit) => {
const { convertedUnit, conversionFactor } = conversionMap[currentUnit];
const decimalPlaces = 7;
const formattedValue = weightConversion(valueToFormat, conversionFactor);
Expand All @@ -77,8 +81,9 @@ export default function NumericInputUnit(props) {
const toggleInput = () => {
let [convertedValue, convertedUnit] = [value, currentUnit];
switch (field) {
case 'inventory_amount':
[convertedValue, convertedUnit] = validateConversionForInventoryAmount(value);
case 'chemical_amount_in_g':
case 'chemical_amount_in_l':
[convertedValue, convertedUnit] = convertValue(value, currentUnit);
break;
case 'flash_point':
[convertedValue, convertedUnit] = validateConversionForFlashPoint(value);
Expand All @@ -98,7 +103,7 @@ export default function NumericInputUnit(props) {
setValue(newInput);
};

const labelWrap = label ? <ControlLabel>{label}</ControlLabel> : null;
const labelWrap = label ? <ControlLabel>{label}</ControlLabel> : <ControlLabel style={{ paddingTop: '15px' }} />;
const bsSize = field === 'flash_point' ? 'small' : null;

const unitSwitch = (
Expand Down
18 changes: 14 additions & 4 deletions app/packs/src/components/ChemicalTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export default class ChemicalTab extends React.Component {

const precautionaryPhrases = [];
// eslint-disable-next-line no-restricted-syntax
for (const [key, value] of Object.entries(str.p_statements)) {
for (const [key, value] of Object.entries(str?.p_statements || {})) {
// eslint-disable-next-line react/jsx-one-expression-per-line
const st = <p key={key}>{key}:{value}</p>;
precautionaryPhrases.push(st);
Expand Down Expand Up @@ -494,10 +494,17 @@ export default class ChemicalTab extends React.Component {

numInputWithoutTable(data, label, parameter) {
const value = data?.[parameter]?.value ?? 0;
const unit = data?.[parameter]?.unit ?? 'mg';
let unit; let field;
if (parameter === 'amount') {
unit = data?.[parameter]?.unit ?? 'mg';
field = 'chemical_amount_in_g';
} else if (parameter === 'volume') {
unit = data?.[parameter]?.unit ?? 'ml';
field = 'chemical_amount_in_l';
}
return (
<NumericInputUnit
field="inventory_amount"
field={field}
inputDisabled={false}
onInputChange={
(newValue, newUnit) => this.handleMetricsChange(parameter, newValue, newUnit)
Expand Down Expand Up @@ -910,10 +917,13 @@ export default class ChemicalTab extends React.Component {
{this.numInputWithoutTable(data, 'Amount', 'amount')}
</div>
<div className="inventory-text-input">
{this.textInput(data, 'Price', 'price')}
{this.numInputWithoutTable(data, '', 'volume')}
</div>
</div>
<div className="text-input-group">
<div className="inventory-text-input">
{this.textInput(data, 'Price', 'price')}
</div>
<div className="text-input-person">
{this.textInput(data, 'Person', 'person')}
</div>
Expand Down
3 changes: 2 additions & 1 deletion lib/chemotion/chemicals_service.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,10 @@ def self.safety_phrases_merck(product_link)
safety_section = safety_section(product_link)
safety_array = safety_section.children.reject { |i| i.text.empty? }.map(&:text)
pictograms = safety_array[0].split(',')
verified_pictograms = pictograms.select { |pictogram| pictograms_hash.value?(pictogram) }
{ 'h_statements' => construct_h_statements(safety_array, 'merck'),
'p_statements' => construct_p_statements(safety_array, 'merck'),
'pictograms' => pictograms }
'pictograms' => verified_pictograms }
rescue StandardError
'Could not find H and P phrases'
end
Expand Down
26 changes: 13 additions & 13 deletions spec/javascripts/utils/NumericInputUnit.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,54 +24,54 @@ const createWrapper = (label, unit, value, field, inputDisable) => shallow(

describe('NumericInputUnit component', () => {
it('renders correctly', () => {
const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
const expectedHtml = '<div class="numericInputWithUnit_g"><label class="control-label">Amount</label><span class="input-group"><input type="text" value="1" name="inventory_amount" label="Amount" class="bs-form--compact form-control"/><span class="input-group-btn"><button type="button" class="btn btn-default active">g</button></span></span></div>';
const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
const expectedHtml = '<div class="numericInputWithUnit_g"><label class="control-label">Amount</label><span class="input-group"><input type="text" value="1" name="chemical_amount_in_g" label="Amount" class="bs-form--compact form-control"/><span class="input-group-btn"><button type="button" class="btn btn-default active">g</button></span></span></div>';
expect(wrapper.html()).toEqual(expectedHtml);
});

it('should render without errors', () => {
const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
expect(wrapper.find('.numericInputWithUnit_g')).toHaveLength(1);
});

it('renders ControlLabel component', () => {
const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
const label = wrapper.find(ControlLabel);
expect(label.exists()).toBeTruthy();
});

it('renders correct label text', () => {
const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
const label = wrapper.find(ControlLabel);
expect(label.props().children).toEqual('Amount');
});

it('should not render the label when it is not passed as a prop', () => {
const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
it('should render the label even when it is not passed as a prop', () => {
const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
wrapper.setProps({ label: undefined });
wrapper.update();
expect(wrapper.find('ControlLabel').exists()).toBe(false);
expect(wrapper.find('ControlLabel').exists()).toBe(true);
});

it('calls the onInputChange function when the value is changed and updates state of value, then convert unit', () => {
const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
wrapper.find('FormControl').simulate('change', { target: { value: 3 } });
expect(mockFn.calledWith(3, 'g')).toEqual(true);
wrapper.find('Button').simulate('click');
const inputComponent = wrapper.find('[name="inventory_amount"]');
const inputComponent = wrapper.find('[name="chemical_amount_in_g"]');
inputComponent.simulate('change', { target: { value: 3000 } });
expect(mockFn.calledWith(3000, 'mg')).toEqual(true);
});

it('toggles input unit for weight', () => {
const wrapper = createWrapper('Amount', 'g', 1, 'inventory_amount', false);
const wrapper = createWrapper('Amount', 'g', 1, 'chemical_amount_in_g', false);
wrapper.find('Button').simulate('click');
let inputComponent = wrapper.find('[name="inventory_amount"]');
let inputComponent = wrapper.find('[name="chemical_amount_in_g"]');
inputComponent.simulate('change', { target: { value: 1000 } });
expect(mockFn.calledWith(1000, 'mg')).toEqual(true);

wrapper.find('Button').simulate('click');
inputComponent = wrapper.find('[name="inventory_amount"]');
inputComponent = wrapper.find('[name="chemical_amount_in_g"]');
inputComponent.simulate('change', { target: { value: 1000000 } });
expect(mockFn.calledWith(1000000, 'μg')).toEqual(true);
});
Expand Down

0 comments on commit 5e3d981

Please sign in to comment.