From 27070b374ed15563e9ca3879c83ad9fb607be183 Mon Sep 17 00:00:00 2001 From: Anders Borch Date: Fri, 28 Apr 2023 08:50:04 +0200 Subject: [PATCH] In place edit company info (#90) * Add update company functionality * Fix padding in cells with chips * Add icons to table headers --- .gitignore | 1 + .../src/interfaces/company.interface.test.ts | 6 +-- front/src/interfaces/company.interface.ts | 20 +++++--- front/src/pages/companies/companies-table.tsx | 40 +++++++++------ front/src/services/companies/index.ts | 1 + front/src/services/companies/update.ts | 50 +++++++++++++++++++ 6 files changed, 92 insertions(+), 26 deletions(-) create mode 100644 front/src/services/companies/update.ts diff --git a/.gitignore b/.gitignore index 4b8801edb..9c7242178 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ **/**/.env **/**/.npmrc .DS_Store +node_modules \ No newline at end of file diff --git a/front/src/interfaces/company.interface.test.ts b/front/src/interfaces/company.interface.test.ts index 4f71d4611..79c9c957e 100644 --- a/front/src/interfaces/company.interface.test.ts +++ b/front/src/interfaces/company.interface.test.ts @@ -48,6 +48,7 @@ describe('mapCompany', () => { expect(company.name).toBe('ACME'); expect(company.domain_name).toBe('exmaple.com'); expect(company.creationDate).toEqual(now); + expect(company.accountOwner).toBeUndefined(); expect(company.employees).toBe(10); expect(company.address).toBe( '1 Infinite Loop, 95014 Cupertino, California, USA', @@ -76,11 +77,9 @@ describe('mapCompany', () => { expect(company.name).toBe('ACME'); expect(company.domain_name).toBe('exmaple.com'); expect(company.created_at).toEqual(now.toUTCString()); - expect(company.account_owner?.id).toBe( + expect(company.account_owner_id).toBe( '522d4ec4-c46b-4360-a0a7-df8df170be81', ); - expect(company.account_owner?.email).toBe('john@example.com'); - expect(company.account_owner?.displayName).toBe('John Doe'); expect(company.employees).toBe(10); expect(company.address).toBe( '1 Infinite Loop, 95014 Cupertino, California, USA', @@ -103,6 +102,7 @@ describe('mapCompany', () => { expect(company.name).toBe('ACME'); expect(company.domain_name).toBe('exmaple.com'); expect(company.created_at).toEqual(now.toUTCString()); + expect(company.account_owner_id).toBeUndefined(); expect(company.employees).toBe(10); expect(company.address).toBe( '1 Infinite Loop, 95014 Cupertino, California, USA', diff --git a/front/src/interfaces/company.interface.ts b/front/src/interfaces/company.interface.ts index a775f9a41..fb1167a9a 100644 --- a/front/src/interfaces/company.interface.ts +++ b/front/src/interfaces/company.interface.ts @@ -32,6 +32,16 @@ export type GraphqlQueryCompany = { created_at: string; }; +export type GraphqlMutationCompany = { + id: string; + name: string; + domain_name: string; + account_owner_id?: string; + employees: number; + address: string; + created_at: string; +}; + export const mapCompany = (company: GraphqlQueryCompany): Company => ({ ...company, name: company.name, @@ -51,16 +61,10 @@ export const mapCompany = (company: GraphqlQueryCompany): Company => ({ opportunities: [{ name: 'Sales Pipeline', icon: '' }], }); -export const mapGqlCompany = (company: Company): GraphqlQueryCompany => ({ +export const mapGqlCompany = (company: Company): GraphqlMutationCompany => ({ ...company, name: company.name, domain_name: company.domain_name, created_at: company.creationDate.toUTCString(), - account_owner: company.accountOwner - ? { - id: company.accountOwner.id, - email: company.accountOwner.email, - displayName: `${company.accountOwner.first_name} ${company.accountOwner.last_name}`, - } - : undefined, + account_owner_id: company.accountOwner?.id, }); diff --git a/front/src/pages/companies/companies-table.tsx b/front/src/pages/companies/companies-table.tsx index c07bf1287..6d3975f67 100644 --- a/front/src/pages/companies/companies-table.tsx +++ b/front/src/pages/companies/companies-table.tsx @@ -1,13 +1,21 @@ import { createColumnHelper } from '@tanstack/react-table'; import { Company } from '../../interfaces/company.interface'; -import { OrderByFields } from '../../services/companies'; +import { OrderByFields, updateCompany } from '../../services/companies'; import ColumnHead from '../../components/table/ColumnHead'; import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer'; import Checkbox from '../../components/form/Checkbox'; import CompanyChip from '../../components/chips/CompanyChip'; import EditableCell from '../../components/table/EditableCell'; import PipeChip from '../../components/chips/PipeChip'; -import { faCalendar } from '@fortawesome/pro-regular-svg-icons'; +import { + faBuildings, + faCalendar, + faLinkSimple, + faMapPin, + faRectangleHistory, + faSigma, + faUser, +} from '@fortawesome/pro-regular-svg-icons'; import ClickableCell from '../../components/table/ClickableCell'; import PersonChip from '../../components/chips/PersonChip'; import { SortType } from '../../components/table/table-header/interface'; @@ -28,7 +36,7 @@ export const sortsAvailable = [ const columnHelper = createColumnHelper(); export const companiesColumns = [ columnHelper.accessor('name', { - header: () => , + header: () => , cell: (props) => ( , + header: () => , cell: (props) => ( { const company = props.row.original; company.employees = parseInt(value); - // TODO: update company + updateCompany(company).catch((error) => console.error(error)); }} /> ), }), columnHelper.accessor('domain_name', { - header: () => , + header: () => , cell: (props) => ( { const company = props.row.original; company.domain_name = value; - // TODO: update company + updateCompany(company).catch((error) => console.error(error)); }} /> ), }), columnHelper.accessor('address', { - header: () => , + header: () => , cell: (props) => ( { const company = props.row.original; company.address = value; - // TODO: update company + updateCompany(company).catch((error) => console.error(error)); }} /> ), }), columnHelper.accessor('opportunities', { - header: () => , + header: () => ( + + ), cell: (props) => ( - + {props.row.original.opportunities.map((opportunity) => ( ))} - + ), }), columnHelper.accessor('creationDate', { @@ -104,9 +114,9 @@ export const companiesColumns = [ ), }), columnHelper.accessor('accountOwner', { - header: () => , + header: () => , cell: (props) => ( - + <> {props.row.original.accountOwner && ( )} - + ), }), ]; diff --git a/front/src/services/companies/index.ts b/front/src/services/companies/index.ts index c7396734d..18c6c2f7d 100644 --- a/front/src/services/companies/index.ts +++ b/front/src/services/companies/index.ts @@ -1 +1,2 @@ export * from './select'; +export * from './update'; diff --git a/front/src/services/companies/update.ts b/front/src/services/companies/update.ts new file mode 100644 index 000000000..56b380f0a --- /dev/null +++ b/front/src/services/companies/update.ts @@ -0,0 +1,50 @@ +import { FetchResult, gql } from '@apollo/client'; +import { Company, mapGqlCompany } from '../../interfaces/company.interface'; +import { apiClient } from '../../apollo'; + +export const UPDATE_COMPANY = gql` + mutation UpdateCompany( + $id: uuid + $name: String + $domain_name: String + $account_owner_id: uuid + $address: String + $employees: Int + ) { + update_companies( + where: { id: { _eq: $id } } + _set: { + account_owner_id: $account_owner_id + address: $address + domain_name: $domain_name + employees: $employees + name: $name + } + ) { + affected_rows + returning { + account_owner { + id + email + displayName + } + address + created_at + domain_name + employees + id + name + } + } + } +`; + +export async function updateCompany( + company: Company, +): Promise> { + const result = await apiClient.mutate({ + mutation: UPDATE_COMPANY, + variables: mapGqlCompany(company), + }); + return result; +}