Campo de quantidade adicionado quando adicionar suprimento a um abrigo (SOS-RS#46)

* feat(shelter-supply): input to add quantity supply

* feat(shelter-supply): show quantity supply at Shelter page and EditShelter page

* resolve conflict

---------

Co-authored-by: Lipe <[email protected]>

Author: 2 people

src/components/Chip/types.ts

@@ -3,4 +3,5 @@ export type ChipVariant = 'info' | 'success' | 'warn' | 'danger';
 export interface IChipProps extends React.ComponentPropsWithoutRef<'div'> {
   label: string;
   variant?: ChipVariant;
+  quantity?: number;
 }

src/hooks/useShelter/types.ts

@@ -23,6 +23,7 @@ export interface IUseShelterData {
 
 export interface IUseShelterDataSupply {
   priority: number;
+  quantity?: number | null;
   supply: IUseShelterDataSupplyData;
 }
 

src/hooks/useShelters/types.ts

@@ -30,6 +30,7 @@ export interface IUseSheltersDataSupplyData {
   };
   priority: number;
   tags: ShelterTagType[];
+  quantity?: number | null;
 }
 
 export interface IUseShelterOptions {

src/pages/CreateSupply/CreateSupply.tsx

@@ -47,6 +47,7 @@ const CreateSupply = () => {
     validationSchema: Yup.object().shape({
       shelterId: Yup.string().required('Este campo deve ser preenchido'),
       name: Yup.string().required('Este campo deve ser preenchido'),
+      quantity: Yup.number().typeError('Insira um valor númerico').moreThan(0, 'O valor tem que ser maior do que 0').optional(),
       priority: Yup.string().required('Este campo deve ser preenchido'),
       supplyCategoryId: Yup.string().required('Este campo deve ser preenchido'),
     }),
@@ -59,6 +60,7 @@ const CreateSupply = () => {
         await ShelterSupplyServices.create({
           supplyId: resp.data.id,
           priority: +values.priority,
+          quantity: Number(values.quantity) || null,
           shelterId,
         });
         clearCache(false);
@@ -134,6 +136,12 @@ const CreateSupply = () => {
                 </SelectContent>
               </Select>
             </div>
+            <TextField
+              label="Quantidade"
+              {...getFieldProps('quantity')}
+              error={!!errors.quantity}
+              helperText={errors.quantity}
+            />
             <div className="flex flex-col w-full">
               <label className="text-muted-foreground">Prioridade</label>
               <Select

src/pages/EditShelterSupply/EditShelterSupply.tsx

@@ -185,6 +185,7 @@ const EditShelterSupply = () => {
                 return {
                   id: v.id,
                   name: v.name,
+                  quantity: supply?.quantity,
                   priority: supply?.priority,
                 };
               });

src/pages/EditShelterSupply/components/SupplyRow/SupplyRow.tsx

@@ -13,6 +13,7 @@ const SupplyRow = (props: ISupplyRowProps) => {
           <SupplyRowInfo
             key={idy}
             name={item.name}
+            quantity={item.quantity}
             priority={item.priority ?? SupplyPriority.NotNeeded}
             onClick={() => (onClick ? onClick(item) : undefined)}
           />

src/pages/EditShelterSupply/components/SupplyRow/types.ts

@@ -3,6 +3,7 @@ import { SupplyPriority } from '@/service/supply/types';
 export interface ISupplyRowItemProps {
   id: string;
   name: string;
+  quantity?: number | null;
   priority?: SupplyPriority;
 }
 

src/pages/EditShelterSupply/components/SupplyRowInfo/SupplyRowInfo.tsx

@@ -3,9 +3,10 @@ import { useMemo } from 'react';
 import { CircleStatus } from '@/components';
 import { ISupplyRowInfoProps } from './types';
 import { getSupplyPriorityProps } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
 
 const SupplyRowInfo = (props: ISupplyRowInfoProps) => {
-  const { name, priority, onClick } = props;
+  const { name, priority, quantity, onClick } = props;
 
   const { className, label } = useMemo(
     () => getSupplyPriorityProps(priority),
@@ -21,6 +22,9 @@ const SupplyRowInfo = (props: ISupplyRowInfoProps) => {
       <div className="flex justify-end items-center gap-2">
         <CircleStatus className={className} />
         <p className="text-muted-foreground text-nowrap pl-1">{label}</p>
+        {quantity && (
+          <Badge className="bg-gray-700">{quantity}</Badge>
+        )}
       </div>
     </div>
   );

src/pages/EditShelterSupply/components/SupplyRowInfo/types.ts

@@ -1,5 +1,6 @@
 export interface ISupplyRowInfoProps {
   name: string;
+  quantity?: number | null;
   priority: number;
   onClick?: () => void;
 }

src/pages/Shelter/Shelter.tsx

@@ -37,7 +37,11 @@ const Shelter = () => {
       .sort(([a], [b]) => (+a > +b ? -1 : 1))
       .map(([key, values]) => ({
         priority: +key,
-        tags: values.map((v) => ({ label: v.supply.name, value: v.supply.id })),
+        tags: values.map((v) => ({
+          label: v.supply.name,
+          value: v.supply.id,
+          quantity: v.quantity,
+        })),
       }));
   }, [shelter?.shelterSupplies]);
   const { availability, className: availabilityClassName } =