9771220458

Committed 03 Jul 2024 03:06AM UTC coverage: 38.081% (-0.03%) from 38.11%

Build # 9771220458

Build Type

push

github

Committed by

web-flow

Commit Message

Delete site and delete site entry functionality (#369)

* Delete site and delete site entry functionality

* cleanups + show 404 on no site

---------

Co-authored-by: Avery Huang <averyhuang2003@gmail.com>

Run Details

239 of 952 branches covered (25.11%)

Branch coverage included in aggregate %.

10 of 44 new or added lines in 5 files covered. (22.73%)

2 existing lines in 2 files now uncovered.

1138 of 2664 relevant lines covered (42.72%)

10.64 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1.92

/src/components/siteEntryTable/index.tsx

import React, { useState } from 'react';
import {
  SiteEntry,
  SiteEntryField,
  SiteEntryFields,
} from '../../containers/treePage/ducks/types';
import { Form, Modal, Table, message } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import ProtectedClient from '../../api/protectedApiClient';
import {
  booleanToString,
  getSEFieldDisplayName,
  n,
} from '../../utils/stringFormat';
import { EditButton, StyledClose, DeleteButton } from '../themedComponents';
import UpdateSiteForm from '../forms/updateSiteForm';
import { SiteEntriesRequest, UpdateSiteRequest } from '../forms/ducks/types';
import { useTranslation } from 'react-i18next';
import { site } from '../../constants';
import moment from 'moment';

interface SiteEntryTableProps {
  readonly siteEntries: SiteEntry[];
  readonly getSite: () => void;
}

const SiteEntryTable: React.FC<SiteEntryTableProps> = ({
  siteEntries,
  getSite,
}) => {
  const { t } = useTranslation(n(site, ['site', 'forms']), {
    nsMode: 'fallback',
  });

  const [showEditEntryModal, setShowEditEntryModal] = useState<boolean>(false);
  const [editEntryModalData, setEditEntryModalData] = useState<
    SiteEntry | undefined
  >();

  const [editSiteEntryForm] = Form.useForm();

  // Columns configuration for the Ant Design Table
  const siteEntryTableColumns = Object.values(SiteEntryFields).map(
    (field: SiteEntryField) => {
      const columnBase = {
        title: getSEFieldDisplayName(field),
        dataIndex: field,
        key: field,
      };

      if (field === 'editEntry') {
        return {
          ...columnBase,
          render: (
            val: string | number | boolean,
            record: SiteEntry,
          ): JSX.Element => (
            <EditButton type="primary" onClick={() => handleEditEntry(record)}>
              <EditOutlined />
            </EditButton>
          ),
        };
      } else if (field === 'deleteEntry') {
        return {
          ...columnBase,
          render: (
            val: string | number | boolean,
            record: SiteEntry,
          ): JSX.Element => (
            <DeleteButton
              type="primary"
              onClick={() => onDeleteSiteEntry(record.id)}
            >
              <DeleteOutlined />
            </DeleteButton>
          ),
        };
      } else {
        return {
          ...columnBase,
          render: (val: string | number | boolean): string =>
            val || val === false ? booleanToString(String(val)) : '',
        };
      }
    },
  );

  // Function to handle edit button click
  const handleEditEntry = (record: SiteEntry) => {
    setShowEditEntryModal(true);
    setEditEntryModalData(record);

    // Set initial form values
    editSiteEntryForm.setFieldsValue({
      ...record,
      plantingDate: record?.plantingDate ? moment(record?.plantingDate) : null,
    });
  };

  // Function to handle form submission for editing
  const onSubmitEditSiteEntry = (values: UpdateSiteRequest) => {
    if (!editEntryModalData) {
      return;
    }

    const updatedEntry: SiteEntriesRequest = {
      ...values,
      plantingDate: values.plantingDate?.format('L') || null,
    };

    ProtectedClient.editSiteEntry(editEntryModalData.id, updatedEntry)
      .then(() => {
        message.success(t('edit_site_entry.success'));
        setShowEditEntryModal(false);
        getSite(); // Refresh site entries after successful edit
      })
      .catch((err) => {
        message.error(t('edit_site_entry.error', { error: err.response.data }));
      });
  };

  // Function to handle deletion of a site entry
  const onDeleteSiteEntry = (siteEntryId: number) => {
    ProtectedClient.deleteSiteEntry(siteEntryId)
      .then(() => {
        message.success('Successfully deleted site entry.');
        getSite(); // Refresh site entries after successful deletion
      })
      .catch((err) => {
        message.error(
          t('delete_site_entry.error', { error: err.response.data }),
        );
      });
  };

  return (
    <>
      <Table
        dataSource={siteEntries}
        columns={siteEntryTableColumns}
        scroll={{ x: 1300 }}
        rowKey={(siteEntry: SiteEntry) => siteEntry.id.toString()} // Ensure rowKey is a string
      />

      <Modal
        title={t('edit_site_entry')}
        visible={showEditEntryModal} // Use 'visible' to control visibility
        onCancel={() => {
          setShowEditEntryModal(false);
          editSiteEntryForm.resetFields();
        }}
        closeIcon={<StyledClose />}
        footer={null}
        width="80vw"
      >
        <UpdateSiteForm
          formInstance={editSiteEntryForm}
          onFinish={onSubmitEditSiteEntry}
          initialSiteEntry={editEntryModalData}
        />
      </Modal>
    </>
  );
};

export default SiteEntryTable;

1	import React, { useState } from 'react';
2	import {
3	SiteEntry,
4	SiteEntryField,
5	SiteEntryFields,
6	} from '../../containers/treePage/ducks/types';
7	import { Form, Modal, Table, message } from 'antd';
8	import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
9	import ProtectedClient from '../../api/protectedApiClient';
10	import {
11	booleanToString,
12	getSEFieldDisplayName,
13	n,
14	} from '../../utils/stringFormat';
15	import { EditButton, StyledClose, DeleteButton } from '../themedComponents';
16	import UpdateSiteForm from '../forms/updateSiteForm';
17	import { SiteEntriesRequest, UpdateSiteRequest } from '../forms/ducks/types';
18	import { useTranslation } from 'react-i18next';
19	import { site } from '../../constants';
20	import moment from 'moment';
21
22	interface SiteEntryTableProps {
23	readonly siteEntries: SiteEntry[];
24	readonly getSite: () => void;
25	}
26
27	const SiteEntryTable: React.FC<SiteEntryTableProps> = ({	12✔
28	siteEntries,
29	getSite,
30	}) => {
31	const { t } = useTranslation(n(site, ['site', 'forms']), {	×
32	nsMode: 'fallback',
33	});
34
35	const [showEditEntryModal, setShowEditEntryModal] = useState<boolean>(false);	×
NEW 36	const [editEntryModalData, setEditEntryModalData] = useState<	×
37	SiteEntry \| undefined
38	>();
39
40	const [editSiteEntryForm] = Form.useForm();	×
41
42	// Columns configuration for the Ant Design Table
UNCOV 43	const siteEntryTableColumns = Object.values(SiteEntryFields).map(	×
44	(field: SiteEntryField) => {
NEW 45	const columnBase = {	×
46	title: getSEFieldDisplayName(field),
47	dataIndex: field,
48	key: field,
49	};
50
NEW 51	if (field === 'editEntry') {	×
NEW 52	return {	×
53	...columnBase,
54	render: (
55	val: string \| number \| boolean,
56	record: SiteEntry,
57	): JSX.Element => (
NEW 58	<EditButton type="primary" onClick={() => handleEditEntry(record)}>	×
59	<EditOutlined />
60	</EditButton>
61	),
62	};
NEW 63	} else if (field === 'deleteEntry') {	×
NEW 64	return {	×
65	...columnBase,
66	render: (
67	val: string \| number \| boolean,
68	record: SiteEntry,
69	): JSX.Element => (
NEW 70	<DeleteButton	×
71	type="primary"
NEW 72	onClick={() => onDeleteSiteEntry(record.id)}	×
73	>
74	<DeleteOutlined />
75	</DeleteButton>
76	),
77	};
78	} else {
NEW 79	return {	×
80	...columnBase,
81	render: (val: string \| number \| boolean): string =>
NEW 82	val \|\| val === false ? booleanToString(String(val)) : '',	×
83	};
84	}
85	},
86	);
87
88	// Function to handle edit button click
NEW 89	const handleEditEntry = (record: SiteEntry) => {	×
NEW 90	setShowEditEntryModal(true);	×
NEW 91	setEditEntryModalData(record);	×
92
93	// Set initial form values
NEW 94	editSiteEntryForm.setFieldsValue({	×
95	...record,
96	plantingDate: record?.plantingDate ? moment(record?.plantingDate) : null,	×
97	});
98	};
99
100	// Function to handle form submission for editing
NEW 101	const onSubmitEditSiteEntry = (values: UpdateSiteRequest) => {	×
102	if (!editEntryModalData) {	×
103	return;	×
104	}
105
NEW 106	const updatedEntry: SiteEntriesRequest = {	×
107	...values,
108	plantingDate: values.plantingDate?.format('L') \|\| null,	×
109	};
110
NEW 111	ProtectedClient.editSiteEntry(editEntryModalData.id, updatedEntry)	×
112	.then(() => {
113	message.success(t('edit_site_entry.success'));	×
114	setShowEditEntryModal(false);	×
NEW 115	getSite(); // Refresh site entries after successful edit	×
116	})
117	.catch((err) => {
NEW 118	message.error(t('edit_site_entry.error', { error: err.response.data }));	×
119	});
120	};
121
122	// Function to handle deletion of a site entry
NEW 123	const onDeleteSiteEntry = (siteEntryId: number) => {	×
NEW 124	ProtectedClient.deleteSiteEntry(siteEntryId)	×
125	.then(() => {
NEW 126	message.success('Successfully deleted site entry.');	×
NEW 127	getSite(); // Refresh site entries after successful deletion	×
128	})
129	.catch((err) => {
NEW 130	message.error(	×
131	t('delete_site_entry.error', { error: err.response.data }),
132	);
133	});
134	};
135
136	return (	×
137	<>
138	<Table
139	dataSource={siteEntries}
140	columns={siteEntryTableColumns}
141	scroll={{ x: 1300 }}
NEW 142	rowKey={(siteEntry: SiteEntry) => siteEntry.id.toString()} // Ensure rowKey is a string	×
143	/>
144
145	<Modal
146	title={t('edit_site_entry')}
147	visible={showEditEntryModal} // Use 'visible' to control visibility
148	onCancel={() => {
149	setShowEditEntryModal(false);	×
150	editSiteEntryForm.resetFields();	×
151	}}
152	closeIcon={<StyledClose />}
153	footer={null}
154	width="80vw"
155	>
156	<UpdateSiteForm
157	formInstance={editSiteEntryForm}
158	onFinish={onSubmitEditSiteEntry}
159	initialSiteEntry={editEntryModalData}
160	/>
161	</Modal>
162	</>
163	);
164	};
165
166	export default SiteEntryTable;

Code-4-Community / speak-for-the-trees-frontend / 9771220458

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous