@inventreedb/ui 0.0.1

package/src/tables/company/AddressTable.tsx

@@ -0,0 +1,211 @@
+import { t } from '@lingui/core/macro';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { YesNoButton } from '../../components/buttons/YesNoButton';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { LinkColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+export function AddressTable({
+  companyId,
+  params
+}: Readonly<{
+  companyId: number;
+  params?: any;
+}>) {
+  const user = useUserState();
+
+  const table = useTable('address');
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'title',
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'primary',
+        switchable: false,
+        sortable: false,
+        render: (record: any) => YesNoButton({ value: record.primary })
+      },
+      {
+        accessor: 'address',
+        title: t`Address`,
+        sortable: false,
+        switchable: false,
+        render: (record: any) => {
+          let address = '';
+
+          if (record?.line1) {
+            address += record.line1;
+          }
+
+          if (record?.line2) {
+            address += ` ${record.line2}`;
+          }
+
+          return address.trim();
+        }
+      },
+      {
+        accessor: 'postal_code',
+        sortable: false,
+        switchable: true
+      },
+      {
+        accessor: 'postal_city',
+        sortable: false,
+        switchable: true
+      },
+      {
+        accessor: 'province',
+        sortable: false,
+        switchable: true
+      },
+      {
+        accessor: 'country',
+        sortable: false,
+        switchable: true
+      },
+      {
+        accessor: 'shipping_notes',
+        sortable: false,
+        switchable: true
+      },
+      {
+        accessor: 'internal_shipping_notes',
+        sortable: false,
+        switchable: true
+      },
+      LinkColumn({})
+    ];
+  }, []);
+
+  const addressFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      company: {},
+      title: {},
+      primary: {},
+      line1: {},
+      line2: {},
+      postal_code: {},
+      postal_city: {},
+      province: {},
+      country: {},
+      shipping_notes: {},
+      internal_shipping_notes: {},
+      link: {}
+    };
+  }, []);
+
+  const newAddress = useCreateApiFormModal({
+    url: ApiEndpoints.address_list,
+    title: t`Add Address`,
+    fields: addressFields,
+    initialData: {
+      company: companyId
+    },
+    successMessage: t`Address created`,
+    table: table
+  });
+
+  const [selectedAddress, setSelectedAddress] = useState<number>(-1);
+
+  const editAddress = useEditApiFormModal({
+    url: ApiEndpoints.address_list,
+    pk: selectedAddress,
+    title: t`Edit Address`,
+    fields: addressFields,
+    table: table
+  });
+
+  const deleteAddress = useDeleteApiFormModal({
+    url: ApiEndpoints.address_list,
+    pk: selectedAddress,
+    title: t`Delete Address`,
+    preFormWarning: t`Are you sure you want to delete this address?`,
+    table: table
+  });
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      const can_edit =
+        user.hasChangeRole(UserRoles.purchase_order) ||
+        user.hasChangeRole(UserRoles.sales_order);
+
+      const can_delete =
+        user.hasDeleteRole(UserRoles.purchase_order) ||
+        user.hasDeleteRole(UserRoles.sales_order);
+
+      return [
+        RowEditAction({
+          hidden: !can_edit,
+          onClick: () => {
+            setSelectedAddress(record.pk);
+            editAddress.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !can_delete,
+          onClick: () => {
+            setSelectedAddress(record.pk);
+            deleteAddress.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const tableActions = useMemo(() => {
+    const can_add =
+      user.hasChangeRole(UserRoles.purchase_order) ||
+      user.hasChangeRole(UserRoles.sales_order);
+
+    return [
+      <AddItemButton
+        key='add-address'
+        tooltip={t`Add Address`}
+        onClick={() => newAddress.open()}
+        hidden={!can_add}
+      />
+    ];
+  }, [user]);
+
+  return (
+    <>
+      {newAddress.modal}
+      {editAddress.modal}
+      {deleteAddress.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.address_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          enableDownload: true,
+          rowActions: rowActions,
+          tableActions: tableActions,
+          params: {
+            ...params,
+            company: companyId
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/tables/company/CompanyTable.tsx

@@ -0,0 +1,176 @@
+import { t } from '@lingui/core/macro';
+import { Group, Text } from '@mantine/core';
+import { useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { Thumbnail } from '../../components/images/Thumbnail';
+import { companyFields } from '../../forms/CompanyForms';
+import { navigateToLink } from '../../functions/navigation';
+import {
+  useCreateApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowEditAction } from '../RowActions';
+
+/**
+ * A table which displays a list of company records,
+ * based on the provided filter parameters
+ */
+export function CompanyTable({
+  params,
+  path
+}: Readonly<{
+  params?: any;
+  path?: string;
+}>) {
+  const table = useTable('company');
+
+  const navigate = useNavigate();
+  const user = useUserState();
+
+  const columns = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        sortable: true,
+        render: (record: any) => {
+          return (
+            <Group gap='xs' wrap='nowrap'>
+              <Thumbnail
+                src={record.thumbnail ?? record.image ?? ''}
+                alt={record.name}
+                size={24}
+              />
+              <Text>{record.name}</Text>
+            </Group>
+          );
+        }
+      },
+      DescriptionColumn({}),
+      BooleanColumn({
+        accessor: 'active',
+        title: t`Active`,
+        sortable: true,
+        switchable: true
+      }),
+      {
+        accessor: 'website',
+        sortable: false
+      }
+    ];
+  }, []);
+
+  const newCompany = useCreateApiFormModal({
+    url: ApiEndpoints.company_list,
+    title: t`Add Company`,
+    fields: companyFields(),
+    initialData: params,
+    follow: true,
+    modelType: ModelType.company
+  });
+
+  const [selectedCompany, setSelectedCompany] = useState<number>(0);
+
+  const editCompany = useEditApiFormModal({
+    url: ApiEndpoints.company_list,
+    pk: selectedCompany,
+    title: t`Edit Company`,
+    fields: companyFields(),
+    onFormSuccess: (record: any) => table.updateRecord(record)
+  });
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'active',
+        label: t`Active`,
+        description: t`Show active companies`
+      },
+      {
+        name: 'is_supplier',
+        label: t`Supplier`,
+        description: t`Show companies which are suppliers`
+      },
+      {
+        name: 'is_manufacturer',
+        label: t`Manufacturer`,
+        description: t`Show companies which are manufacturers`
+      },
+      {
+        name: 'is_customer',
+        label: t`Customer`,
+        description: t`Show companies which are customers`
+      }
+    ];
+  }, []);
+
+  const tableActions = useMemo(() => {
+    const can_add =
+      user.hasAddRole(UserRoles.purchase_order) ||
+      user.hasAddRole(UserRoles.sales_order);
+
+    return [
+      <AddItemButton
+        key='add-company'
+        tooltip={t`Add Company`}
+        onClick={() => newCompany.open()}
+        hidden={!can_add}
+      />
+    ];
+  }, [user]);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden:
+            !user.hasChangeRole(UserRoles.purchase_order) &&
+            !user.hasChangeRole(UserRoles.sales_order),
+          onClick: () => {
+            setSelectedCompany(record.pk);
+            editCompany.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  return (
+    <>
+      {newCompany.modal}
+      {editCompany.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.company_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          params: {
+            ...params
+          },
+          onRowClick: (record: any, index: number, event: any) => {
+            if (record.pk) {
+              const base = path ?? 'company';
+              navigateToLink(`/${base}/${record.pk}`, navigate, event);
+            }
+          },
+          modelType: ModelType.company,
+          tableFilters: tableFilters,
+          tableActions: tableActions,
+          enableDownload: true,
+          rowActions: rowActions
+        }}
+      />
+    </>
+  );
+}

package/src/tables/company/ContactTable.tsx

@@ -0,0 +1,182 @@
+import { t } from '@lingui/core/macro';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { useNavigate } from 'react-router-dom';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { RenderInlineModel } from '../../components/render/Instance';
+import { getDetailUrl } from '../../functions/urls';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+export function ContactTable({
+  companyId,
+  params
+}: Readonly<{
+  companyId?: number;
+  params?: any;
+}>) {
+  const user = useUserState();
+  const navigate = useNavigate();
+
+  const table = useTable('contact');
+
+  const columns: TableColumn[] = useMemo(() => {
+    const corecols: TableColumn[] = [
+      {
+        accessor: 'name',
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'phone',
+        switchable: true,
+        sortable: false
+      },
+      {
+        accessor: 'email',
+        switchable: true,
+        sortable: false
+      },
+      {
+        accessor: 'role',
+        switchable: true,
+        sortable: false
+      }
+    ];
+    if (companyId === undefined) {
+      // Add company column if not in company detail view
+      corecols.unshift({
+        accessor: 'company_name',
+        title: t`Company`,
+        sortable: false,
+        switchable: true,
+        render: (record: any) => {
+          return (
+            <RenderInlineModel
+              primary={record.company_name}
+              url={getDetailUrl(ModelType.company, record.company)}
+              navigate={navigate}
+            />
+          );
+        }
+      });
+    }
+    return corecols;
+  }, []);
+
+  const contactFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      company: {},
+      name: {},
+      phone: {},
+      email: {},
+      role: {}
+    };
+  }, []);
+
+  const [selectedContact, setSelectedContact] = useState<number>(0);
+
+  const editContact = useEditApiFormModal({
+    url: ApiEndpoints.contact_list,
+    pk: selectedContact,
+    title: t`Edit Contact`,
+    fields: contactFields,
+    onFormSuccess: (record: any) => table.updateRecord(record)
+  });
+
+  const newContact = useCreateApiFormModal({
+    url: ApiEndpoints.contact_list,
+    title: t`Add Contact`,
+    initialData: {
+      company: companyId
+    },
+    fields: contactFields,
+    table: table
+  });
+
+  const deleteContact = useDeleteApiFormModal({
+    url: ApiEndpoints.contact_list,
+    pk: selectedContact,
+    title: t`Delete Contact`,
+    table: table
+  });
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      const can_edit =
+        user.hasChangeRole(UserRoles.purchase_order) ||
+        user.hasChangeRole(UserRoles.sales_order);
+      const can_delete =
+        user.hasDeleteRole(UserRoles.purchase_order) ||
+        user.hasDeleteRole(UserRoles.sales_order);
+
+      return [
+        RowEditAction({
+          hidden: !can_edit,
+          onClick: () => {
+            setSelectedContact(record.pk);
+            editContact.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !can_delete,
+          onClick: () => {
+            setSelectedContact(record.pk);
+            deleteContact.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const tableActions = useMemo(() => {
+    const can_add =
+      user.hasAddRole(UserRoles.purchase_order) ||
+      user.hasAddRole(UserRoles.sales_order);
+
+    return [
+      <AddItemButton
+        key='add-contact'
+        tooltip={t`Add contact`}
+        onClick={() => newContact.open()}
+        hidden={!can_add}
+      />
+    ];
+  }, [user]);
+
+  return (
+    <>
+      {newContact.modal}
+      {editContact.modal}
+      {deleteContact.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.contact_list)}
+        tableState={table}
+        columns={columns}
+        props={{
+          enableDownload: true,
+          rowActions: rowActions,
+          tableActions: tableActions,
+          params: {
+            ...params,
+            company: companyId
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/tables/core/UserTable.tsx

@@ -0,0 +1,88 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { t } from '@lingui/core/macro';
+import { useMemo } from 'react';
+import {} from '../../hooks/UseFilter';
+import { useTable } from '../../hooks/UseTable';
+import { BooleanColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+
+export function UserTable() {
+  const table = useTable('users-index');
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    const filters: TableFilter[] = [
+      {
+        name: 'is_active',
+        label: t`Active`,
+        description: t`Show active users`
+      },
+      {
+        name: 'is_staff',
+        label: t`Staff`,
+        description: t`Show staff users`
+      },
+      {
+        name: 'is_superuser',
+        label: t`Superuser`,
+        description: t`Show superusers`
+      }
+    ];
+
+    return filters;
+  }, []);
+
+  const tableColumns = useMemo(() => {
+    return [
+      {
+        accessor: 'username',
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'first_name',
+        sortable: true
+      },
+      {
+        accessor: 'last_name',
+        sortable: true
+      },
+      {
+        accessor: 'email',
+        sortable: true
+      },
+      {
+        accessor: 'groups',
+        title: t`Groups`,
+        sortable: true,
+        switchable: true,
+        render: (record: any) => {
+          return record.groups.length;
+        }
+      },
+      BooleanColumn({
+        accessor: 'is_staff'
+      }),
+      BooleanColumn({
+        accessor: 'is_superuser'
+      }),
+      BooleanColumn({
+        accessor: 'is_active'
+      })
+    ];
+  }, []);
+
+  return (
+    <InvenTreeTable
+      url={apiUrl(ApiEndpoints.user_list)}
+      tableState={table}
+      columns={tableColumns}
+      props={{
+        tableFilters: tableFilters,
+        modelType: ModelType.user
+      }}
+    />
+  );
+}