Skip to content

Commit

Permalink
Merge pull request #595 from msupply-foundation/583-add-consumable-pa…
Browse files Browse the repository at this point in the history 
…cksizes-barcodes

583 add consumable packsizes barcodes
  • Loading branch information
@lache-melvin
lache-melvin authored Feb 15, 2024
2 parents e5b1b58 + a1eabba commit 6669bd0
Show file tree
Hide file tree
Showing 8 changed files with 383 additions and 102 deletions.
192 changes: 130 additions & 62 deletions frontend/system/src/Admin/EditEntity/components/ConsumableFormTree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { useState } from 'react';
import { useUuid } from '../../../hooks';
import { PropertiesModal } from './PropertiesModal';
import { useEditModal } from '@common/hooks';
import { ConsumableInput, Entity, Property } from '../types';
import { ConsumableInput, Entity, Presentation, Property } from '../types';
import { TreeFormBox } from './TreeFormBox';
import { AddFieldButton } from './AddFieldButton';
import { EditPropertiesButton } from './EditPropertiesButton';
Expand Down Expand Up @@ -156,87 +156,63 @@ export const ConsumableFormTree = ({
/>
</Box>

{!!pres.extraDescriptions.length && (
<Typography fontSize="12px">
{t('label.extra-descriptions')}
</Typography>
<ExtraDescriptions
parent={pres}
grandparents={[draft]}
isDisabled={isDisabled}
onUpdate={onUpdate}
onDelete={onDelete}
onOpenPropertiesModal={onOpenPropertiesModal}
/>

{!!pres.packSizes.length && (
<Typography fontSize="12px">{t('label.pack-sizes')}</Typography>
)}

{pres.extraDescriptions.map(description => (
<TreeFormBox key={description.id}>
{pres.packSizes.map(packSize => (
<TreeFormBox key={packSize.id}>
<Box sx={{ display: 'flex', alignItems: 'end' }}>
<NameEditField
label={t('label.extra-description')}
entity={description}
siblings={pres.extraDescriptions}
label={t('label.pack-size')}
entity={packSize}
siblings={pres.packSizes}
isDisabled={isDisabled}
onUpdate={onUpdate}
onDelete={onDelete}
/>
<EditPropertiesButton
parents={[draft, pres]}
entity={description}
entity={packSize}
onOpen={onOpenPropertiesModal}
/>
</Box>
</TreeFormBox>
))}

<AddFieldButton
label={t('label.add-extra-description')}
onClick={() =>
onUpdate(
{
id: uuid(),
name: '',
},
pres.extraDescriptions
)
}
label={t('label.add-pack-size')}
onClick={() => onUpdate({ id: uuid(), name: '' }, pres.packSizes)}
/>
</TreeFormBox>
))}
{draft.extraDescriptions.map(description => (
<TreeFormBox key={description.id}>
<Box sx={{ display: 'flex', alignItems: 'end' }}>
<NameEditField
label={t('label.extra-description')}
entity={description}
siblings={draft.extraDescriptions}
isDisabled={isDisabled}
onUpdate={onUpdate}
onDelete={onDelete}
/>
<EditPropertiesButton
parents={[draft]}
entity={description}
onOpen={onOpenPropertiesModal}
/>
</Box>
</TreeFormBox>
))}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<AddFieldButton
label={t('label.add-presentation')}
onClick={() =>
onUpdate(
{ id: uuid(), name: '', extraDescriptions: [] },
draft.presentations
)
}
/>
<AddFieldButton
label={t('label.add-extra-description')}
onClick={() =>
onUpdate({ id: uuid(), name: '' }, draft.extraDescriptions)
}
/>
</Box>
<AddFieldButton
label={t('label.add-presentation')}
onClick={() =>
onUpdate(
{ id: uuid(), name: '', extraDescriptions: [], packSizes: [] },
draft.presentations
)
}
/>

<ExtraDescriptions
parent={draft}
grandparents={[]}
isDisabled={isDisabled}
onUpdate={onUpdate}
onDelete={onDelete}
onOpenPropertiesModal={onOpenPropertiesModal}
/>

<Box>
{!!draft.alternativeNames.length && (
Expand Down Expand Up @@ -268,3 +244,95 @@ export const ConsumableFormTree = ({
</Box>
);
};

const ExtraDescriptions = ({
parent,
grandparents,
isDisabled,
onUpdate,
onDelete,
onOpenPropertiesModal,
}: {
parent: Presentation | ConsumableInput;
grandparents: Entity[];
isDisabled: (id: string) => boolean;
onUpdate: <T extends Entity>(updated: T, list: T[]) => void;
onDelete: <T extends Entity>(toDelete: T, list: T[]) => void;
onOpenPropertiesModal: (title: string, entityToUpdate: Entity) => void;
}) => {
const uuid = useUuid();
const t = useTranslation('system');

return (
<Box>
{!!parent.extraDescriptions.length && (
<Typography fontSize="12px">{t('label.extra-descriptions')}</Typography>
)}

{parent.extraDescriptions.map(description => (
<TreeFormBox key={description.id}>
<Box sx={{ display: 'flex', alignItems: 'end' }}>
<NameEditField
label={t('label.extra-description')}
entity={description}
siblings={parent.extraDescriptions}
isDisabled={isDisabled}
onUpdate={onUpdate}
onDelete={onDelete}
/>
<EditPropertiesButton
parents={[...grandparents, parent]}
entity={description}
onOpen={onOpenPropertiesModal}
/>
</Box>

{!!description.packSizes.length && (
<Typography fontSize="12px">{t('label.pack-sizes')}</Typography>
)}

{description.packSizes.map(packSize => (
<TreeFormBox key={packSize.id}>
<Box sx={{ display: 'flex', alignItems: 'end' }}>
<NameEditField
label={t('label.pack-size')}
entity={packSize}
siblings={description.packSizes}
isDisabled={isDisabled}
onUpdate={onUpdate}
onDelete={onDelete}
/>
<EditPropertiesButton
parents={[...grandparents, parent, description]}
entity={packSize}
onOpen={onOpenPropertiesModal}
/>
</Box>
</TreeFormBox>
))}

<AddFieldButton
label={t('label.add-pack-size')}
onClick={() =>
onUpdate({ id: uuid(), name: '' }, description.packSizes)
}
/>
</TreeFormBox>
))}

<AddFieldButton
label={t('label.add-extra-description')}
onClick={() =>
onUpdate(
{
id: uuid(),
name: '',
packSizes: [],
},
parent.extraDescriptions
)
}
/>
</Box>
);
};
Loading

0 comments on commit 6669bd0

Please sign in to comment.