Edit manufacturers #73

cypress/e2e/manufacturer/manufacturer.cy.tsx → cypress/e2e/manufacturer/manufacturer.cy.ts

@@ -93,7 +93,7 @@ describe('Manufacturer', () => {
       expect(patchRequests.length).equal(1);
       const request = patchRequests[0];
       expect(JSON.stringify(request.body)).equal(
-        '{"name":"Manufacturer D","url":"","address":{"building_number":"1","street_name":"Example Street","town":"","county":"","postcode":"OX1 2AB"},"telephone":""}'
+        '{"name":"Manufacturer D","address":{"building_number":"1","street_name":"Example Street","town":"","county":"","postcode":"OX1 2AB"},"telephone":""}'
       );
     });
 
@@ -179,4 +179,130 @@ describe('Manufacturer', () => {
         );
       });
   });
+  it('Edits a manufacturer correctly', () => {
+    cy.visit('/inventory-management-system/manufacturer');
+    cy.findByRole('button', {
+      name: 'Edit Manufacturer A manufacturer',
+    }).click();
+    cy.findByLabelText('Name').clear();
+    cy.findByLabelText('Name').type('test');
+
+    cy.findByLabelText('Building number').clear();
+    cy.findByLabelText('Building number').type('100');
+
+    cy.findByLabelText('Street name').clear();
+    cy.findByLabelText('Street name').type('test');
+
+    cy.findByLabelText('Town').clear();
+    cy.findByLabelText('Town').type('test');
+
+    cy.findByLabelText('County').clear();
+    cy.findByLabelText('County').type('test');
+
+    cy.findByLabelText('Post/Zip code').clear();
+    cy.findByLabelText('Post/Zip code').type('test');
+
+    cy.findByLabelText('Telephone number').clear();
+    cy.findByLabelText('Telephone number').type('0000000000');
+
+    cy.startSnoopingBrowserMockedRequest();
+
+    cy.findByRole('button', { name: 'Save' }).click();
+
+    cy.findBrowserMockedRequests({
+      method: 'PATCH',
+      url: '/v1/manufacturers/:id',
+    }).should((patchRequests) => {
+      expect(patchRequests.length).equal(1);
+      const request = patchRequests[0];
+      expect(JSON.stringify(request.body)).equal(
+        '{"name":"test","address":{"building_number":"100","street_name":"test","town":"test","county":"test","postcode":"test"},"telephone":"0000000000"}'
+      );
+    });
+  });
+
+  it('Trying to edit with duplicate name displays error message', () => {
+    cy.findByRole('button', {
+      name: 'Edit Manufacturer A manufacturer',
+    }).click();
+
+    cy.findByLabelText('Name').clear();
+    cy.findByLabelText('Name').type('test_dup');
+
+    cy.findByRole('button', { name: 'Save' }).click();
+
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.contains(
+          'A manufacturer with the same name has been found. Please enter a different name'
+        );
+      });
+  });
+
+  it('Trying to edit with invalid url displays error message', () => {
+    cy.findByRole('button', {
+      name: 'Edit Manufacturer A manufacturer',
+    }).click();
+
+    cy.findByLabelText('URL').clear();
+    cy.findByLabelText('URL').type('invalid');
+
+    cy.findByRole('button', { name: 'Save' }).click();
+
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.contains('Please enter a valid URL');
+      });
+  });
+
+  it('Not changing any fields shows error', () => {
+    cy.findByRole('button', {
+      name: 'Edit Manufacturer A manufacturer',
+    }).click();
+
+    cy.findByRole('button', { name: 'Save' }).click();
+
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.contains(
+          "There have been no changes made. Please change a field's value or press Cancel to exit"
+        );
+      });
+  });
+
+  it('Required fields that are cleared are not allowed and show error message', () => {
+    cy.findByRole('button', {
+      name: 'Edit Manufacturer A manufacturer',
+    }).click();
+
+    cy.findByLabelText('Name').clear();
+    cy.findByLabelText('Building number').clear();
+    cy.findByLabelText('Street name').clear();
+    cy.findByLabelText('Post/Zip code').clear();
+
+    cy.findByRole('button', { name: 'Save' }).click();
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.contains('Please enter a name.');
+      });
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.contains('Please enter a building number.');
+      });
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.contains('Please enter a street name.');
+      });
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.contains('Please enter a post code or zip code.');
+      });
+  });
 });

src/api/manufacturer.tsx

@@ -11,6 +11,7 @@
 import {
   AddManufacturer,
   AddManufacturerResponse,
+  EditManufacturer,
   Manufacturer,
 } from '../app.types';
 
@@ -51,7 +52,7 @@
   apiUrl = '';
   const settingsResult = await settings;
   if (settingsResult) {
     apiUrl = settingsResult['apiUrl'];
   }
   return axios
     .post<AddManufacturerResponse>(`${apiUrl}/v1/manufacturers`, manufacturer)
@@ -82,7 +83,7 @@
   apiUrl = '';
   const settingsResult = await settings;
   if (settingsResult) {
     apiUrl = settingsResult['apiUrl'];
   }
   return axios
     .delete(`${apiUrl}/v1/manufacturers/${session.id}`, {})
@@ -104,3 +105,72 @@
     },
   });
 };
+
+const fetchManufacturer = async (
+  id: string | undefined
+): Promise<Manufacturer> => {
+  let apiUrl: string;
+  apiUrl = '';
+  const settingsResult = await settings;
+  if (settingsResult) {
+    apiUrl = settingsResult['apiUrl'];
+  }
+
+  return axios.get(`${apiUrl}/v1/manufacturers/${id}`, {}).then((response) => {
+    return response.data;
+  });
+};
+
+export const useManufacturer = (
+  id: string | undefined
+): UseQueryResult<Manufacturer, AxiosError> => {
+  return useQuery<Manufacturer, AxiosError>(
+    ['Manufacturer', id],
+    (params) => {
+      return fetchManufacturer(id);
+    },
+    {
+      onError: (error) => {
+        console.log('Got error ' + error.message);
+      },
+      enabled: id !== undefined,
+    }
+  );
+};
+
+const editManufacturer = async (
+  manufacturer: EditManufacturer
+): Promise<Manufacturer> => {
+  let apiUrl: string;
+  apiUrl = '';
+  const settingsResult = await settings;
+  if (settingsResult) {
+    apiUrl = settingsResult['apiUrl'];
+  }
+  const { id, ...updatedManufacturer } = manufacturer;
+  return axios
+    .patch<Manufacturer>(
+      `${apiUrl}/v1/manufacturers/${id}`,
+      updatedManufacturer
+    )
+    .then((response) => response.data);
+};
+
+export const useEditManufacturer = (): UseMutationResult<
+  Manufacturer,
+  AxiosError,
+  EditManufacturer
+> => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    (manufacturer: EditManufacturer) => editManufacturer(manufacturer),
+    {
+      onError: (error) => {
+        console.log('Got error ' + error.message);
+      },
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['Manufacturers'] });
+      },
+    }
+  );
+};

src/app.types.tsx

@@ -32,15 +32,6 @@ export interface CatalogueCategory {
   is_leaf: boolean;
   catalogue_item_properties?: CatalogueCategoryFormData[];
 }
-
-export interface Manufacturer {
-  name: string;
-  url: string;
-  address: Address;
-  telephone: string;
-  id: string;
-}
-
 export interface AddManufacturer {
   name: string;
   url?: string;
@@ -49,17 +40,26 @@ export interface AddManufacturer {
 }
 
 export interface AddManufacturerResponse {
+  id: string;
   name: string;
-  code: string;
   url: string;
   address: Address;
   telephone: string;
-  id: string;
+  code: string;
 }
 
-export interface ManufacturerDetail {
+export interface EditManufacturer {
+  name?: string;
+  url?: string;
+  address?: EditAddress;
+  telephone?: string;
+  id?: string;
+}
+
+export interface Manufacturer {
+  id?: string;
   name: string;
-  url: string;
+  url?: string;
   address: Address;
   telephone: string;
 }
@@ -127,6 +127,14 @@ interface Address {
   county?: string;
   postcode: string;
 }
+
+interface EditAddress {
+  building_number?: string;
+  street_name?: string;
+  town?: string;
+  county?: string;
+  postcode?: string;
+}
 export interface CatalogueCategoryTransferState {
   name: string;
   message: string;