Merge pull request #16 from Tolfix/feature/15-expense-information

Admin panel fixes
Tolfix · May 13, 2022 · 802301d · 802301d
2 parents d04f385 + 95d88fe
commit 802301d
Show file tree

Hide file tree

Showing 30 changed files with 436 additions and 470 deletions.
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -10,7 +10,13 @@
     "@types/query-string": "^6.3.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "date-and-time": "^2.3.1",
     "dotenv": "^10.0.0",
+    "eslint": "^8.14.0",
+    "eslint-config-custom": "*",
+    "exchange-rates-api": "^1.1.0",
+    "interfaces": "*",
+    "lib": "*",
     "prop-types": "^15.7.2",
     "query-string": "^7.0.1",
     "ra-data-json-server": "^3.19.0",
@@ -23,13 +29,8 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.4.2",
     "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "exchange-rates-api": "^1.1.0",
-    "eslint": "^8.14.0",
-    "eslint-config-custom": "*",
-    "interfaces": "*",
-    "lib": "*",
     "tsconfig": "*",
+    "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

diff --git a/apps/admin/src/components/configurable_options/Create.tsx b/apps/admin/src/components/configurable_options/Create.tsx
@@ -1,22 +1,26 @@
 import
-    {
-        ArrayInput,
-        Create, FormTab,
-        NumberInput,
-        ReferenceArrayInput, SelectArrayInput,
-        SimpleFormIterator,
-        TabbedForm,
-        TextInput,
-    } from "react-admin";
+{
+    ArrayInput,
+    AutocompleteArrayInput,
+    Create, FormTab,
+    NumberInput,
+    ReferenceArrayInput,
+    SimpleFormIterator,
+    TabbedForm,
+    TextInput,
+} from "react-admin";
 
 export const Create_configurable_options = (props: any) =>
 (
     <Create {...props}>
         <TabbedForm>
             <FormTab label="General">
                 <TextInput label="Name" required={true} source="name" />
-                <ReferenceArrayInput source="products_ids" reference="products">
-                    <SelectArrayInput
+                {/* @ts-ignore */}
+                <ReferenceArrayInput filterToQuery={searchText => ({
+                    "name": searchText,
+                })} perPage={100} source="products_ids" reference="products">
+                    <AutocompleteArrayInput
                         source="products"
                         label="Products"
                         required={true}

diff --git a/apps/admin/src/components/configurable_options/Edit.tsx b/apps/admin/src/components/configurable_options/Edit.tsx
@@ -1,22 +1,26 @@
 import
-    {
-        ArrayInput,
-        Edit, FormTab,
-        NumberInput,
-        ReferenceArrayInput, SelectArrayInput,
-        SimpleFormIterator,
-        TabbedForm,
-        TextInput,
-    } from "react-admin";
+{
+    ArrayInput,
+    AutocompleteArrayInput,
+    Edit, FormTab,
+    NumberInput,
+    ReferenceArrayInput,
+    SimpleFormIterator,
+    TabbedForm,
+    TextInput,
+} from "react-admin";
 
 export const Edit_configurable_options = (props: any) =>
 (
     <Edit {...props}>
         <TabbedForm>
             <FormTab label="General">
                 <TextInput label="Name" required={true} source="name" />
-                <ReferenceArrayInput source="products_ids" reference="products">
-                    <SelectArrayInput
+                {/* @ts-ignore */}
+                <ReferenceArrayInput filterToQuery={searchText => ({
+                    "name": searchText,
+                })} perPage={100} source="products_ids" reference="products">
+                    <AutocompleteArrayInput
                         source="products"
                         label="Products"
                         required={true}

diff --git a/apps/admin/src/components/customers/Edit.tsx b/apps/admin/src/components/customers/Edit.tsx
@@ -1,5 +1,5 @@
 import { currencyCodes } from "lib/Currencies";
-import { Edit, FormTab, PasswordInput, SelectInput, TabbedForm, TextInput } from "react-admin";
+import { Edit, FormTab, PasswordInput, AutocompleteInput, TabbedForm, TextInput } from "react-admin";
 
 export const EditCustomer = (props: any) =>
 (
@@ -21,7 +21,7 @@ export const EditCustomer = (props: any) =>
                 <TextInput label="City" required={true} source="billing.city" />
                 <TextInput label="State" required={true} source="billing.state" />
                 <TextInput label="Postcode" required={true} source="billing.postcode" />
-                <SelectInput required={true} source="currency" choices={currencyCodes.map(e =>
+                <AutocompleteInput required={true} source="currency" choices={currencyCodes.map(e =>
                 {
                     return { id: e, name: e };
                 })} />

diff --git a/apps/admin/src/components/invoices/Create.tsx b/apps/admin/src/components/invoices/Create.tsx
@@ -1,42 +1,45 @@
 import
 {
     ArrayInput,
+    AutocompleteArrayInput,
     BooleanInput,
     Create, DateInput, FormTab,
     NumberInput,
-    ReferenceArrayInput, SelectArrayInput, SelectInput,
+    ReferenceArrayInput, AutocompleteInput,
     SimpleFormIterator,
     TabbedForm,
 } from "react-admin";
 //@ts-ignore
 import MarkdownInput from 'ra-input-markdown';
 import { currencyCodes } from "lib/Currencies";
+import RenderFullName from "../../lib/RenderFullName";
 
 export const CreateInvoices = (props: any) =>
 (
     <Create {...props}>
         <TabbedForm>
             <FormTab label="General">
-                <ReferenceArrayInput source="customer_uid" reference="customers">
-                    <SelectInput
+                {/* @ts-ignore */}
+                <ReferenceArrayInput filterToQuery={searchText => ({
+                    "personal.first_name": searchText,
+                })} perPage={100} source="customer_uid" reference="customers">
+                    <AutocompleteInput
                         source="customers"
                         label="Customer"
                         required={true}
                         allowEmpty={false}
-                        optionText={
-                            (record: { personal: { first_name: any; last_name: any; } }) =>
-                                `${record.personal.first_name} ${record.personal.last_name}`}
+                        optionText={RenderFullName}
                     />
                 </ReferenceArrayInput>
-                <SelectInput required={true} source="status" choices={[
+                <AutocompleteInput required={true} source="status" choices={[
                     { id: "draft", name: "draft" },
                     { id: "refunded", name: "refunded" },
                     { id: "collections", name: "collections" },
                     { id: "payment_pending", name: "payment_pending" },
                     { id: "active", name: "active" },
                     { id: "pending", name: "pending" },
                 ]} />
-                <SelectInput required={true} source="payment_method" choices={[
+                <AutocompleteInput required={true} source="payment_method" choices={[
                     { id: "none", name: "none" },
                     { id: "manual", name: "manual" },
                     { id: "bank", name: "bank" },
@@ -45,7 +48,7 @@ export const CreateInvoices = (props: any) =>
                     { id: "swish", name: "swish" },
                 ]} />
                 <NumberInput required={true} label="Amount" source="amount" />
-                <SelectInput required={true} source="currency" choices={currencyCodes.map(e =>
+                <AutocompleteInput required={true} source="currency" choices={currencyCodes.map(e =>
                 {
                     return { id: e, name: e };
                 })} />
@@ -66,8 +69,11 @@ export const CreateInvoices = (props: any) =>
                         <MarkdownInput source="notes" />
                         <NumberInput required={true} label="Amount" source="amount" />
                         <NumberInput label="Quantity" defaultValue={1} source="quantity" />
-                        <ReferenceArrayInput source="product_id" reference="products">
-                            <SelectInput
+                        {/* @ts-ignore */}
+                        <ReferenceArrayInput filterToQuery={searchText => ({
+                            "name": searchText,
+                        })} perPage={100} source="product_id" reference="products">
+                            <AutocompleteInput
                                 source="product"
                                 label="Product"
                                 required={true}
@@ -78,8 +84,10 @@ export const CreateInvoices = (props: any) =>
                     </SimpleFormIterator>
                 </ArrayInput>
 
-                <ReferenceArrayInput source="transactions" reference="transactions">
-                    <SelectArrayInput optionText={(record) => record.id.toString()} />
+                <ReferenceArrayInput filterToQuery={(searchText: string) => ({
+                    "id": searchText,
+                })} perPage={100} source="transactions" reference="transactions">
+                    <AutocompleteArrayInput optionText={(record) => record?.id?.toString() ?? ""} />
                 </ReferenceArrayInput>
 
             </FormTab>

diff --git a/apps/admin/src/components/invoices/Edit.tsx b/apps/admin/src/components/invoices/Edit.tsx
@@ -1,36 +1,39 @@
 import
 {
     ArrayInput,
+    AutocompleteArrayInput,
     BooleanInput,
     DateInput, Edit, FormTab,
     NumberInput,
-    ReferenceArrayInput, ReferenceInput, SelectArrayInput, SelectInput,
+    ReferenceArrayInput, ReferenceInput, AutocompleteInput,
     SimpleFormIterator,
     TabbedForm,
 } from "react-admin";
 //@ts-ignore
 import MarkdownInput from 'ra-input-markdown';
 import { currencyCodes } from "lib/Currencies";
+import RenderFullName from "../../lib/RenderFullName";
 export const EditInvoices = (props: any) =>
 (
     <Edit {...props}>
         <TabbedForm>
 
             <FormTab label="General">
 
-                <ReferenceInput source="customer_uid" reference="customers">
-                    <SelectInput
+                {/* @ts-ignore */}
+                <ReferenceInput filterToQuery={searchText => ({
+                    "personal.first_name": searchText,
+                })} perPage={100} source="customer_uid" reference="customers">
+                    <AutocompleteInput
                         source="customers"
                         label="Customer"
                         required={true}
                         allowEmpty={false}
-                        optionText={
-                            (record: { personal: { first_name: any; last_name: any; } }) =>
-                                `${record.personal.first_name} ${record.personal.last_name}`}
+                        optionText={RenderFullName}
                     />
                 </ReferenceInput>
 
-                <SelectInput required={true} source="status" choices={[
+                <AutocompleteInput required={true} source="status" choices={[
                     { id: "draft", name: "draft" },
                     { id: "refunded", name: "refunded" },
                     { id: "collections", name: "collections" },
@@ -41,7 +44,7 @@ export const EditInvoices = (props: any) =>
                     { id: "cancelled", name: "cancelled" },
                 ]} />
 
-                <SelectInput required={true} source="payment_method" choices={[
+                <AutocompleteInput required={true} source="payment_method" choices={[
                     { id: "none", name: "none" },
                     { id: "manual", name: "manual" },
                     { id: "bank", name: "bank" },
@@ -51,7 +54,7 @@ export const EditInvoices = (props: any) =>
                 ]} />
 
                 <NumberInput required={true} label="Amount" source="amount" />
-                <SelectInput required={true} source="currency" choices={currencyCodes.map(e =>
+                <AutocompleteInput required={true} source="currency" choices={currencyCodes.map(e =>
                 {
                     return { id: e, name: e };
                 })} />
@@ -76,8 +79,10 @@ export const EditInvoices = (props: any) =>
                         <MarkdownInput source="notes" />
                         <NumberInput required={true} label="Amount" source="amount" />
                         <NumberInput label="Quantity" defaultValue={1} source="quantity" />
-                        <ReferenceInput source="product_id" reference="products">
-                            <SelectInput
+                        <ReferenceInput filterToQuery={searchText => ({
+                            "name": searchText,
+                        })} perPage={100} source="product_id" reference="products">
+                            <AutocompleteInput
                                 source="product"
                                 label="Product"
                                 required={true}
@@ -88,11 +93,14 @@ export const EditInvoices = (props: any) =>
                     </SimpleFormIterator>
                 </ArrayInput>
 
-                <ReferenceArrayInput source="transactions" reference="transactions">
-                    <SelectArrayInput
+                {/* @ts-ignore */}
+                <ReferenceArrayInput filterToQuery={searchText => ({
+                    "id": searchText,
+                })} perPage={100} source="transactions" reference="transactions">
+                    <AutocompleteArrayInput
                         source="transactions"
                         label="Transactions"
-                        optionText={(record) => record.id.toString()}
+                        optionText={(record) => record?.id?.toString() ?? ""}
                     />
                 </ReferenceArrayInput>
 

diff --git a/apps/admin/src/components/invoices/List.tsx b/apps/admin/src/components/invoices/List.tsx
@@ -9,9 +9,10 @@ import
     Filter,
     SearchInput,
     ReferenceInput,
-    SelectInput,
-    ArrayField
+    AutocompleteInput,
+    ArrayField,
 } from 'react-admin';
+import RenderFullName from "../../lib/RenderFullName";
 
 const PostPagination = (props: JSX.IntrinsicAttributes) => <Pagination rowsPerPageOptions={[10, 25, 50, 100]} {...props} />;
 
@@ -22,9 +23,7 @@ const TagFilter = (props: any) =>
             <SearchInput name='Search id' source="id" alwaysOn={true} />
             {/* Search for specific customer */}
             <ReferenceInput label="Customer" source="customer_uid" reference="customers" alwaysOn={true}>
-                <SelectInput optionText={
-                    (record: { personal: { first_name: any; last_name: any; } }) =>
-                        `${record.personal.first_name} ${record.personal.last_name}`} />
+                <AutocompleteInput optionText={RenderFullName} />
             </ReferenceInput>
         </Filter>
     )
@@ -38,8 +37,7 @@ export const InvoicesList = (props: any) => (
             <ReferenceField label="Customer" source="customer_uid" reference="customers">
                 <FunctionField
                     // @ts-ignore
-                    render={(record) =>
-                        `${record.personal.first_name} ${record.personal.last_name}`}
+                    render={RenderFullName}
                     source="personal.first_name"
                 />
             </ReferenceField>