diff --git a/resources/js/src/components/DateTimeInput.js b/resources/js/src/components/DateTimeInput.js index c833163cda73d2a757245aae13f8bccc20b00fde..9c54f07542c7f2a7d60eaa3cdd01720fdf87d190 100644 --- a/resources/js/src/components/DateTimeInput.js +++ b/resources/js/src/components/DateTimeInput.js @@ -54,7 +54,6 @@ const Picker = ({ PickerComponent, ...fieldProps }) => { providerOptions, disabled, } = fieldProps; - console.log(fieldProps); const { input, meta } = useInput({ source }); diff --git a/resources/js/src/layout/Menu.js b/resources/js/src/layout/Menu.js index 619279afb6144a43c6715e183661b60ced210ea9..882288fee71e35f487b37d39573ca2795f811794 100644 --- a/resources/js/src/layout/Menu.js +++ b/resources/js/src/layout/Menu.js @@ -131,7 +131,7 @@ const Menu = ({ onMenuClick, logout }) => { <Accordeon open={false} title={translate('menu.left.archives')} permissions={["archived_members.show"]}> <Item to="/archived_members" permissions="archived_members.show" primaryText={translate('menu.left.archived_members')} leftIcon={<GroupIcon />} /> </Accordeon> - {isXSmall && <Item to="/profile" primaryText={translate('menu.left.logout')} leftIcon={<AccountCircleIcon />} />} + {isXSmall && <Item to="/profile" primaryText={translate('menu.left.profile')} leftIcon={<AccountCircleIcon />} />} {isXSmall && logout} </> ); diff --git a/resources/js/src/providers/I18nProvider.js b/resources/js/src/providers/I18nProvider.js index 45a0df6bcfec4d186bf38913eb156b1fa8a6e58c..c26501a817091386c765cc1850b978c9208584e9 100644 --- a/resources/js/src/providers/I18nProvider.js +++ b/resources/js/src/providers/I18nProvider.js @@ -222,7 +222,7 @@ const messages = { user_id: 'Créateur', created_at: 'Créé le', updated_at: 'Modifié le', - product_id: '#', + product_id: 'Produit', 'product.name': 'Nom', count: 'Différence', products: 'Produits', @@ -331,10 +331,8 @@ const messages = { movement_id: 'Mouvement', transaction_id: 'Transaction', 'movement.products': 'Produits', - product_id: '#', - 'product_id.name': 'Nom', - 'product.name': 'Nom', - count: 'Nombre' + product_id: 'Produit', + count: 'Différence' } }, purchases: { @@ -350,9 +348,8 @@ const messages = { transaction_id: 'Transaction', 'movement_id.products': 'Produits', 'movement.products': 'Produits', - product_id: '#', - 'product.name': 'Nom', - count: 'Nombre', + product_id: 'Produit', + count: 'Différence', account_id: 'Compte', category_id: 'Catégorie', amount: 'Montant', diff --git a/resources/js/src/resources/Accounts.js b/resources/js/src/resources/Accounts.js index fee40fcb940d1ff979cf96de4f39512e28587ddf..dda930257cb8d824660e24e53ead914d6919fc55 100644 --- a/resources/js/src/resources/Accounts.js +++ b/resources/js/src/resources/Accounts.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { CreateButton, Datagrid, EditButton, ExportButton, FilterButton, List, SimpleForm, SimpleShowLayout, TextField, TextInput, TopToolbar } from 'react-admin'; +import { CreateButton, Datagrid, EditButton, ExportButton, FilterButton, List, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput, TopToolbar } from 'react-admin'; import DateField from '../components/DateField'; import DateInput from '../components/DateInput'; import { CreateDialog, EditDialog, ShowDialog } from '../components/DialogForm'; @@ -22,49 +23,60 @@ const AccountsListActions = ({ basePath, ...props }) => ( </TopToolbar> ); -const Accounts = (props) => ( - <> - <List {...props} filters={AccountsFilters} actions={<AccountsListActions />}> - <Datagrid> - <TextField source="id" /> - <TextField source="name" /> - <TextField source="iban" /> - <TextField source="bic" /> - <MoneyField noLabel={true} source="balance" /> - <EditButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <TextInput source="name" /> - <TextInput source="iban" /> - <TextInput source="bic" /> - </SimpleForm> - </CreateDialog> - <EditDialog {...props}> - <SimpleForm redirect="list"> - <TextInput disabled source="id" /> - <TextInput source="name" /> - <TextInput source="iban" /> - <TextInput source="bic" /> - <MoneyInput disabled source="balance" /> - <DateInput disabled source="created_at" /> - <DateInput disabled source="updated_at" /> - </SimpleForm> - </EditDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <TextField source="name" /> - <TextField source="iban" /> - <TextField source="bic" /> - <MoneyField source="balance" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); +const Accounts = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={AccountsFilters} actions={<AccountsListActions />}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <TextField source="name" /> + <TextField source="iban" /> + <TextField source="bic" /> + <MoneyField noLabel={true} source="balance" /> + <EditButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => record.name} + secondaryText={record => Number(record.balance).toLocaleString('fr-FR', { currency: "EUR", currencyDisplay: 'symbol', style: 'currency' })} + tertiaryText={record => "#" + record.id} + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <TextInput source="name" /> + <TextInput source="iban" /> + <TextInput source="bic" /> + </SimpleForm> + </CreateDialog> + <EditDialog {...props}> + <SimpleForm redirect="list"> + <TextInput disabled source="id" /> + <TextInput source="name" /> + <TextInput source="iban" /> + <TextInput source="bic" /> + <MoneyInput disabled source="balance" /> + <DateInput disabled source="created_at" /> + <DateInput disabled source="updated_at" /> + </SimpleForm> + </EditDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <TextField source="name" /> + <TextField source="iban" /> + <TextField source="bic" /> + <MoneyField source="balance" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: Accounts, diff --git a/resources/js/src/resources/AccountsCounts.js b/resources/js/src/resources/AccountsCounts.js index a2577d514a4b9317245287e5aedecd03cec3f9d3..a78181a8340172d9a8bcc7ee5d34c0c8afa77283 100644 --- a/resources/js/src/resources/AccountsCounts.js +++ b/resources/js/src/resources/AccountsCounts.js @@ -1,6 +1,6 @@ -import { Table, TableBody, TableCell, TableRow } from '@material-ui/core'; +import { Table, TableBody, TableCell, TableRow, useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { Datagrid, Labeled, List, ReferenceField, ShowButton, SimpleShowLayout, TextField, useRecordContext, useTranslate } from 'react-admin'; +import { Datagrid, Labeled, List, ReferenceField, ShowButton, SimpleList, SimpleShowLayout, TextField, useRecordContext, useTranslate } from 'react-admin'; import DateField from '../components/DateField'; import { ShowDialog } from '../components/DialogForm'; import MoneyField from "../components/MoneyField"; @@ -46,54 +46,72 @@ const CountField = (props) => { </>); }; -const AccountsCounts = (props) => ( - <> - <List {...props} bulkActionButtons={false}> - <Datagrid> - <TextField source="id" /> - <TextField source="type" /> - <MoneyField noLabel={true} source="balance" /> - <ReferenceField source="transaction_id" reference="transactions" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField label="Compte" source="transaction_id" reference="transactions" link="show"> - <ReferenceField source="account_id" reference="accounts" link="show"> +const AccountsCounts = (props) => { + + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} bulkActionButtons={false}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <TextField source="type" /> + <MoneyField noLabel={true} source="balance" /> + <ReferenceField source="transaction_id" reference="transactions" link="show"> + <TextField source="name" /> + </ReferenceField> + <ReferenceField label="Compte" source="transaction_id" reference="transactions" link={false}> + <ReferenceField source="account_id" reference="accounts" link="show"> + <TextField source="name" /> + </ReferenceField> + </ReferenceField> + <ReferenceField label="Créateur" source="transaction_id" reference="transactions" link={false}> + <ReferenceField source="user_id" reference="users" link="show"> + <TextField source="username" /> + </ReferenceField> + </ReferenceField> + <DateField source="created_at" /> + <ShowButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => + <ReferenceField record={record} label="Compte" source="transaction_id" reference="transactions" link={false}> + <ReferenceField source="account_id" reference="accounts" link={false}> + <TextField source="name" /> + </ReferenceField> + </ReferenceField>} + tertiaryText={record => Number(record.balance).toLocaleString('fr-FR', { currency: "EUR", currencyDisplay: 'symbol', style: 'currency' })} + secondaryText={record => new Date(record.created_at).toLocaleString()} + linkType="show" + /> + )} + </List> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <TextField source="type" /> + <CountField source="data" /> + <ReferenceField source="transaction_id" reference="transactions" link="show"> <TextField source="name" /> </ReferenceField> - </ReferenceField> - <ReferenceField label="Créateur" source="transaction_id" reference="transactions" link="show"> - <ReferenceField source="user_id" reference="users" link="show"> - <TextField source="username" /> - </ReferenceField> - </ReferenceField> - <DateField source="created_at" /> - <ShowButton /> - </Datagrid> - </List> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <TextField source="type" /> - <CountField source="data" /> - <ReferenceField source="transaction_id" reference="transactions" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField label="Compte" source="transaction_id" reference="transactions" link="show"> - <ReferenceField source="account_id" reference="accounts" link="show"> - <TextField source="name" /> + <ReferenceField label="Compte" source="transaction_id" reference="transactions" link="show"> + <ReferenceField source="account_id" reference="accounts" link="show"> + <TextField source="name" /> + </ReferenceField> </ReferenceField> - </ReferenceField> - <ReferenceField label="Créateur" source="transaction_id" reference="transactions" link="show"> - <ReferenceField source="user_id" reference="users" link="show"> - <TextField source="username" /> + <ReferenceField label="Créateur" source="transaction_id" reference="transactions" link="show"> + <ReferenceField source="user_id" reference="users" link="show"> + <TextField source="username" /> + </ReferenceField> </ReferenceField> - </ReferenceField> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: AccountsCounts, diff --git a/resources/js/src/resources/ArchivedMembers.js b/resources/js/src/resources/ArchivedMembers.js index d294af5b79bf9ec5ae9112b7aa8126669ed0b75c..6237962e43599664b2a32e4717b85e952db159d0 100644 --- a/resources/js/src/resources/ArchivedMembers.js +++ b/resources/js/src/resources/ArchivedMembers.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { AutocompleteInput, BooleanField, BooleanInput, Datagrid, ExportButton, FilterButton, FunctionField, List, ReferenceField, ReferenceInput, ShowButton, SimpleShowLayout, TextField, TopToolbar } from 'react-admin'; +import { AutocompleteInput, BooleanField, BooleanInput, Datagrid, ExportButton, FilterButton, FunctionField, List, ReferenceField, ReferenceInput, ShowButton, SimpleList, SimpleShowLayout, TextField, TopToolbar } from 'react-admin'; import DateField from '../components/DateField'; import { ShowDialog } from '../components/DialogForm'; @@ -17,39 +18,54 @@ const ArchivedMembersListActions = ({ basePath, ...props }) => ( </TopToolbar> ); -const ArchivedMembers = (props) => ( - <> - <List {...props} filters={ArchivedMembersFilters} bulkActionButtons={false} actions={<ArchivedMembersListActions />}> - <Datagrid> - <TextField source="id" /> - <ReferenceField source="person_id" reference="people" link="show" > - <FunctionField render={r => r.firstname + " " + r.lastname} /> - </ReferenceField> - <BooleanField source="paid" /> - <ReferenceField source="transaction_id" reference="transactions" link="show" > - <FunctionField render={r => "#" + r.id} /> - </ReferenceField> - <TextField source="school_year" /> - <ShowButton /> - </Datagrid> - </List> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <ReferenceField source="person_id" reference="people" link="show" > - <FunctionField render={r => r.firstname + " " + r.lastname} /> - </ReferenceField> - <BooleanField source="paid" /> - <ReferenceField source="transaction_id" reference="transactions" link="show" > - <FunctionField render={r => "#" + r.id} /> - </ReferenceField> - <TextField source="school_year" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); +const ArchivedMembers = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={ArchivedMembersFilters} bulkActionButtons={false} actions={<ArchivedMembersListActions />}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <ReferenceField source="person_id" reference="people" link="show" > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField> + <BooleanField source="paid" /> + <ReferenceField source="transaction_id" reference="transactions" link="show" > + <FunctionField render={r => "#" + r.id} /> + </ReferenceField> + <TextField source="school_year" /> + <ShowButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => + <ReferenceField record={record} source="person_id" reference="people" link={false} > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField>} + tertiaryText={record => <BooleanField record={record} source="paid" />} + secondaryText={record => record.school_year} + linkType="show" + /> + )} + </List> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <ReferenceField source="person_id" reference="people" link="show" > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField> + <BooleanField source="paid" /> + <ReferenceField source="transaction_id" reference="transactions" link="show" > + <FunctionField render={r => "#" + r.id} /> + </ReferenceField> + <TextField source="school_year" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: ArchivedMembers, diff --git a/resources/js/src/resources/AutomatedTransactions.js b/resources/js/src/resources/AutomatedTransactions.js index fac1a21146ca136fcc4f3d201fd7d49c982e9e2a..664d4d968e177bb5a861aee657a3ff577232d083 100644 --- a/resources/js/src/resources/AutomatedTransactions.js +++ b/resources/js/src/resources/AutomatedTransactions.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { AutocompleteInput, BooleanField, BooleanInput, Datagrid, DateInput, EditButton, List, NumberField, NumberInput, ReferenceField, ReferenceInput, SelectField, SelectInput, SimpleForm, SimpleShowLayout, TextField, TextInput, useTranslate } from 'react-admin'; +import { AutocompleteInput, BooleanField, BooleanInput, Datagrid, DateInput, EditButton, List, NumberField, NumberInput, ReferenceField, ReferenceInput, SelectField, SelectInput, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput, useTranslate } from 'react-admin'; import DateField from '../components/DateField'; import { CreateDialog, EditDialog, ShowDialog } from '../components/DialogForm'; import MoneyField from "../components/MoneyField"; @@ -21,9 +22,18 @@ const AutomatedTransactionsFilters = [ const AutomatedTransactions = (props) => { const translate = useTranslate(); + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + + const l = { + yearly: "année", + monthly: "mois", + weekly: "semaine" + } + return ( <> <List {...props} filters={AutomatedTransactionsFilters}> + {isDesktop ? ( <Datagrid> <TextField source="id" /> <TextField source="name" /> @@ -48,6 +58,13 @@ const AutomatedTransactions = (props) => { <DateField source="created_at" /> <EditButton /> </Datagrid> + ) : ( + <SimpleList + primaryText={record => record.name} + tertiaryText={record => Number(record.amount).toLocaleString('fr-FR', { currency: "EUR", currencyDisplay: 'symbol', style: 'currency' })} + secondaryText={record => record.frequency === 'dayly' ? 'Tous les jours' : `Le ${record.day} de chaque ${l[record.frequency]}`} + /> + )} </List> <CreateDialog {...props}> <SimpleForm redirect="list"> diff --git a/resources/js/src/resources/Members.js b/resources/js/src/resources/Members.js index 2df2c28a2db3d5a74b1d82a6a28f0870aa048f50..ac1721cbf20de435676ff7488ec8feea10fbc127 100644 --- a/resources/js/src/resources/Members.js +++ b/resources/js/src/resources/Members.js @@ -1,7 +1,8 @@ +import { useMediaQuery } from '@material-ui/core'; import AttachMoneyIcon from '@material-ui/icons/AttachMoney'; import * as React from "react"; import { Fragment } from 'react'; -import { AutocompleteInput, BooleanField, BooleanInput, BulkDeleteButton, BulkUpdateButton, CreateButton, Datagrid, EditButton, ExportButton, FilterButton, FunctionField, List, ReferenceField, ReferenceInput, SimpleForm, SimpleShowLayout, TextField, TextInput, TopToolbar, useTranslate } from 'react-admin'; +import { AutocompleteInput, BooleanField, BooleanInput, BulkDeleteButton, BulkUpdateButton, CreateButton, Datagrid, EditButton, ExportButton, FilterButton, FunctionField, List, ReferenceField, ReferenceInput, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput, TopToolbar, useTranslate } from 'react-admin'; import { ArchiveButton } from '../components/ArchiveButton'; import DateField from '../components/DateField'; import DateInput from '../components/DateInput'; @@ -33,53 +34,67 @@ const MembersBulkActionButtons = props => { ); }; -const Members = (props) => ( - <> - <List {...props} filters={MembersFilters} bulkActionButtons={<MembersBulkActionButtons />} actions={<MembersListActions />}> - <Datagrid> - <TextField source="id" /> - <ReferenceField source="person_id" reference="people" link="show" > - <FunctionField render={r => r.firstname + " " + r.lastname} /> - </ReferenceField> - <BooleanField source="paid" /> - <ReferenceField source="transaction_id" reference="transactions" link="show" > - <FunctionField render={r => "#" + r.id} /> - </ReferenceField> - <EditButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <ReferenceInput source="person_id" reference="people" filterToQuery={searchText => ({ fullname: searchText, is_member: false })}> - <AutocompleteInput optionText="fullname" /> - </ReferenceInput> - <BooleanInput source="paid" /> - </SimpleForm> - </CreateDialog> - <EditDialog {...props}> - <SimpleForm redirect="list"> - <TextInput disabled source="id" /> - <ReferenceField source="person_id" reference="people" > - <FunctionField render={r => r.firstname + " " + r.lastname} /> - </ReferenceField> - <BooleanInput source="paid" /> - <DateInput disabled source="created_at" /> - <DateInput disabled source="updated_at" /> - </SimpleForm> - </EditDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <ReferenceField source="person_id" reference="people" link="show" > - <FunctionField render={r => r.firstname + " " + r.lastname} /> - </ReferenceField> - <BooleanField source="paid" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); +const Members = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={MembersFilters} bulkActionButtons={<MembersBulkActionButtons />} actions={<MembersListActions />}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <ReferenceField source="person_id" reference="people" link="show" > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField> + <BooleanField source="paid" /> + <ReferenceField source="transaction_id" reference="transactions" link="show" > + <FunctionField render={r => "#" + r.id} /> + </ReferenceField> + <EditButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => + <ReferenceField record={record} source="person_id" reference="people" link={false} > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField>} + tertiaryText={record => <BooleanField record={record} source="paid" />} + linkType="show" + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <ReferenceInput source="person_id" reference="people" filterToQuery={searchText => ({ fullname: searchText, is_member: false })}> + <AutocompleteInput optionText="fullname" /> + </ReferenceInput> + <BooleanInput source="paid" /> + </SimpleForm> + </CreateDialog> + <EditDialog {...props}> + <SimpleForm redirect="list"> + <TextInput disabled source="id" /> + <ReferenceField source="person_id" reference="people" > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField> + <BooleanInput source="paid" /> + <DateInput disabled source="created_at" /> + <DateInput disabled source="updated_at" /> + </SimpleForm> + </EditDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <ReferenceField source="person_id" reference="people" link="show" > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField> + <BooleanField source="paid" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: Members, diff --git a/resources/js/src/resources/Movements.js b/resources/js/src/resources/Movements.js index 55afd1b69b14da95b5734d225a48d35fee691733..64a6d662e5d29b03f3167972182b5055d2da4e19 100644 --- a/resources/js/src/resources/Movements.js +++ b/resources/js/src/resources/Movements.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import React from "react"; -import { ArrayField, ArrayInput, AutocompleteInput, BooleanField, BooleanInput, Datagrid, List, NumberInput, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleFormIterator, SimpleShowLayout, TextField, TextInput } from 'react-admin'; +import { ArrayField, ArrayInput, AutocompleteInput, BooleanField, BooleanInput, Datagrid, List, NumberInput, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleFormIterator, SimpleList, SimpleShowLayout, TextField, TextInput } from 'react-admin'; import DateField from '../components/DateField'; import { CreateDialog, ShowDialog } from '../components/DialogForm'; @@ -7,54 +8,67 @@ const MovementsFilters = [ <TextInput source="name" /> ]; -const Movements = (props) => ( - <> - <List {...props} filters={MovementsFilters} bulkActionButtons={false} > - <Datagrid> - <TextField source="id" /> - <TextField source="name" /> - <BooleanField source="rectification" /> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> - </ReferenceField> - <DateField source="created_at" /> - <ShowButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <TextInput source="name" /> - <BooleanInput source="rectification" /> - <ArrayInput source="products"> - <SimpleFormIterator> - <ReferenceInput source="id" reference="products" filterToQuery={searchText => ({ name: searchText })}> - <AutocompleteInput optionText="name" /> - </ReferenceInput> - <NumberInput source="diff" /> - </SimpleFormIterator> - </ArrayInput> - </SimpleForm> - </CreateDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <TextField source="name" /> - <ArrayField source="products"> +const Movements = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={MovementsFilters} bulkActionButtons={false} > + {isDesktop ? ( <Datagrid> - <TextField source="product_id" /> - <TextField source="product.name" /> - <TextField source="count" /> + <TextField source="id" /> + <TextField source="name" /> + <BooleanField source="rectification" /> + <ReferenceField source="user_id" reference="users"> + <TextField source="username" /> + </ReferenceField> + <DateField source="created_at" /> + <ShowButton /> </Datagrid> - </ArrayField> - <BooleanField source="rectification" /> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> - </ReferenceField> - <DateField source="created_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); + ) : ( + <SimpleList + primaryText={record => record.name} + tertiaryText={record => "#" + record.id} + secondaryText={record => new Date(record.created_at).toLocaleString()} + linkType="show" + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <TextInput source="name" /> + <BooleanInput source="rectification" /> + <ArrayInput source="products"> + <SimpleFormIterator> + <ReferenceInput source="id" reference="products" filterToQuery={searchText => ({ name: searchText })}> + <AutocompleteInput optionText="name" /> + </ReferenceInput> + <NumberInput source="diff" /> + </SimpleFormIterator> + </ArrayInput> + </SimpleForm> + </CreateDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <TextField source="name" /> + <ArrayField source="products" > + <Datagrid> + <ReferenceField source="product_id" reference="products" link="edit"> + <TextField source="name" /> + </ReferenceField> + <TextField source="count" /> + </Datagrid> + </ArrayField> + <BooleanField source="rectification" /> + <ReferenceField source="user_id" reference="users"> + <TextField source="username" /> + </ReferenceField> + <DateField source="created_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: Movements, diff --git a/resources/js/src/resources/People.js b/resources/js/src/resources/People.js index 81501d7009f2c236a58e2fc3b5570dd2e443ff39..d7a24bc039672cd7ee89c94b190522a634444496 100644 --- a/resources/js/src/resources/People.js +++ b/resources/js/src/resources/People.js @@ -1,6 +1,7 @@ +import { useMediaQuery } from '@material-ui/core'; import GetAppIcon from '@material-ui/icons/GetApp'; import * as React from "react"; -import { Button, Datagrid, EditButton, List, SimpleForm, SimpleShowLayout, TextField, TextInput, useDataProvider, useNotify } from 'react-admin'; +import { Button, Datagrid, EditButton, List, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput, useDataProvider, useNotify } from 'react-admin'; import DateField from '../components/DateField'; import DateInput from '../components/DateInput'; import { CreateDialog, EditDialog, ShowDialog } from '../components/DialogForm'; @@ -31,12 +32,9 @@ const PeopleExportButton = ({ record, ...rest }) => { const notify = useNotify(); const onClick = () => { - console.log(record.id); dataProvider.export('people', { id: record.id }).then((response) => { download(JSON.stringify(response), "export.json", "application/json"); - notify('ra.notification.exported'); - console.log(response); }); } @@ -48,47 +46,54 @@ const PeopleExportButton = ({ record, ...rest }) => { ) }; -const People = (props) => ( - <> - <List {...props} filters={PeopleFilters}> - <Datagrid> - <TextField source="id" /> - <TextField source="firstname" /> - <TextField source="lastname" /> - <TextField source="discord_id" /> - <EditButton /> - <PeopleExportButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <TextInput source="firstname" /> - <TextInput source="lastname" /> - <TextInput source="discord_id" /> - </SimpleForm> - </CreateDialog> - <EditDialog {...props}> - <SimpleForm redirect="list"> - <TextInput disabled source="id" /> - <TextInput source="firstname" /> - <TextInput source="lastname" /> - <TextInput source="discord_id" /> - <DateInput disabled source="created_at" /> - <DateInput disabled source="updated_at" /> - </SimpleForm> - </EditDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <TextField source="firstname" /> - <TextField source="lastname" /> - <TextField source="discord_id" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); +const People = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={PeopleFilters}> + {isDesktop ? (<Datagrid> + <TextField source="id" /> + <TextField source="firstname" /> + <TextField source="lastname" /> + <TextField source="discord_id" /> + <EditButton /> + <PeopleExportButton /> + </Datagrid>) : (<SimpleList + primaryText={record => record.firstname + " " + record.lastname} + secondaryText={record => record.discord_id} + tertiaryText={record => "#" + record.id} + />)} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <TextInput source="firstname" /> + <TextInput source="lastname" /> + <TextInput source="discord_id" /> + </SimpleForm> + </CreateDialog> + <EditDialog {...props}> + <SimpleForm redirect="list"> + <TextInput disabled source="id" /> + <TextInput source="firstname" /> + <TextInput source="lastname" /> + <TextInput source="discord_id" /> + <DateInput disabled source="created_at" /> + <DateInput disabled source="updated_at" /> + </SimpleForm> + </EditDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <TextField source="firstname" /> + <TextField source="lastname" /> + <TextField source="discord_id" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: People, diff --git a/resources/js/src/resources/PersonalAccounts.js b/resources/js/src/resources/PersonalAccounts.js index a55ebfaeb8479f4913f99c210f6551f0d1ff575c..d326104340e93e12b13ba0217dc72c4615ce02fe 100644 --- a/resources/js/src/resources/PersonalAccounts.js +++ b/resources/js/src/resources/PersonalAccounts.js @@ -1,6 +1,7 @@ +import { useMediaQuery } from '@material-ui/core'; import AttachMoneyIcon from '@material-ui/icons/AttachMoney'; import * as React from "react"; -import { AutocompleteInput, Button, CreateButton, Datagrid, ExportButton, FilterButton, FunctionField, List, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleShowLayout, TextField, TopToolbar, useRedirect } from 'react-admin'; +import { AutocompleteInput, Button, CreateButton, Datagrid, ExportButton, FilterButton, FunctionField, List, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleList, SimpleShowLayout, TextField, TopToolbar, useRedirect } from 'react-admin'; import DateField from '../components/DateField'; import { CreateDialog, ShowDialog } from '../components/DialogForm'; import MoneyField from "../components/MoneyField"; @@ -30,39 +31,53 @@ const PersonalAccountsListActions = ({ basePath, ...props }) => { ); } -const PersonalAccounts = (props) => ( - <> - <List {...props} filters={PersonalAccountsFilters} actions={<PersonalAccountsListActions />}> - <Datagrid> - <TextField source="id" /> - <ReferenceField source="person_id" reference="people" link="show" > - <FunctionField render={r => r.firstname + " " + r.lastname} /> - </ReferenceField> - <MoneyField noLabel={true} source="balance" /> - <ShowButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <ReferenceInput source="person_id" reference="people" filterToQuery={searchText => ({ fullname: searchText, has_account: false })}> - <AutocompleteInput optionText="fullname" /> - </ReferenceInput> - <QRInput source="token" label="Scan Carte Étudiant" regexp="(?:https?:\/\/esc\.gg\/|core:\/\/)([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}).*" /> - </SimpleForm> - </CreateDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <ReferenceField source="person_id" reference="people" link="show" > - <FunctionField render={r => r.firstname + " " + r.lastname} /> - </ReferenceField> - <MoneyField noLabel={false} source="balance" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); +const PersonalAccounts = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={PersonalAccountsFilters} actions={<PersonalAccountsListActions />}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <ReferenceField source="person_id" reference="people" link="show" > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField> + <MoneyField noLabel={true} source="balance" /> + <ShowButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => + <ReferenceField record={record} source="person_id" reference="people" link={false} > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField>} + tertiaryText={record => Number(record.balance).toLocaleString('fr-FR', { currency: "EUR", currencyDisplay: 'symbol', style: 'currency' })} + linkType="show" + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <ReferenceInput source="person_id" reference="people" filterToQuery={searchText => ({ fullname: searchText, has_account: false })}> + <AutocompleteInput optionText="fullname" /> + </ReferenceInput> + <QRInput source="token" label="Scan Carte Étudiant" regexp="(?:https?:\/\/esc\.gg\/|core:\/\/)([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}).*" /> + </SimpleForm> + </CreateDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <ReferenceField source="person_id" reference="people" link="show" > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField> + <MoneyField noLabel={false} source="balance" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: PersonalAccounts, diff --git a/resources/js/src/resources/PersonalTransactions.js b/resources/js/src/resources/PersonalTransactions.js index b054a5d9cb1671c9ec240d17fbba33a56333b1d7..e849fb46637b8fc7a46fe18c48e60a405d58e9df 100644 --- a/resources/js/src/resources/PersonalTransactions.js +++ b/resources/js/src/resources/PersonalTransactions.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { AutocompleteInput, Datagrid, List, ReferenceField, ReferenceInput, ShowButton, SimpleShowLayout, TextField } from 'react-admin'; +import { AutocompleteInput, Datagrid, List, ReferenceField, ReferenceInput, ShowButton, SimpleList, SimpleShowLayout, TextField } from 'react-admin'; import DateField from '../components/DateField'; import { ShowDialog } from '../components/DialogForm'; import MoneyField from "../components/MoneyField"; @@ -15,48 +16,68 @@ const PersonalTransactionsFilters = [ </ReferenceInput> ]; -const PersonalTransactions = (props) => ( - <> - <List {...props} filters={PersonalTransactionsFilters} bulkActionButtons={false}> - <Datagrid> - <TextField source="id" /> - <MoneyField noLabel={true} source="amount" /> - <ReferenceField source="transaction_id" reference="transactions" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField source="personal_account_id" reference="personal_accounts"> - <ReferenceField source="person_id" reference="people" link="show"> - <TextField source="fullname" /> +const PersonalTransactions = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={PersonalTransactionsFilters} bulkActionButtons={false}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <MoneyField noLabel={true} source="amount" /> + <ReferenceField source="transaction_id" reference="transactions" link="show"> + <TextField source="name" /> + </ReferenceField> + <ReferenceField source="personal_account_id" reference="personal_accounts" link={false}> + <ReferenceField source="person_id" reference="people" link="show"> + <TextField source="fullname" /> + </ReferenceField> + </ReferenceField> + <ReferenceField source="user_id" reference="users"> + <TextField source="username" /> + </ReferenceField> + <DateField source="created_at" /> + <ShowButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => + <ReferenceField record={record} source="transaction_id" reference="transactions" link={false} > + <TextField source="name" /> + </ReferenceField>} + secondaryText={record => + <ReferenceField record={record} source="personal_account_id" reference="personal_accounts"> + <ReferenceField source="person_id" reference="people" link={false}> + <TextField source="fullname" /> + </ReferenceField> + </ReferenceField>} + tertiaryText={record => Number(record.amount).toLocaleString('fr-FR', { currency: "EUR", currencyDisplay: 'symbol', style: 'currency' })} + linkType="show" + /> + )} + </List> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <MoneyField source="amount" /> + <ReferenceField source="personal_account_id" reference="personal_accounts"> + <ReferenceField source="person_id" reference="people" link="show"> + <TextField source="fullname" /> + </ReferenceField> </ReferenceField> - </ReferenceField> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> - </ReferenceField> - <DateField source="created_at" /> - <ShowButton /> - </Datagrid> - </List> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <MoneyField source="amount" /> - <ReferenceField source="personal_account_id" reference="personal_accounts"> - <ReferenceField source="person_id" reference="people" link="show"> - <TextField source="fullname" /> + <ReferenceField source="transaction_id" reference="transactions" link="show"> + <TextField source="name" /> </ReferenceField> - </ReferenceField> - <ReferenceField source="transaction_id" reference="transactions" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField source="user_id" reference="users" link="show"> - <TextField source="username" /> - </ReferenceField> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); + <ReferenceField source="user_id" reference="users" link="show"> + <TextField source="username" /> + </ReferenceField> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: PersonalTransactions, diff --git a/resources/js/src/resources/Products.js b/resources/js/src/resources/Products.js index 03ab1436fdf4aa1e0f2b28278d177049e7db1715..e7a8bce36d57c4542ffd36ec42a4b552b0221a36 100644 --- a/resources/js/src/resources/Products.js +++ b/resources/js/src/resources/Products.js @@ -1,7 +1,8 @@ +import { useMediaQuery } from '@material-ui/core'; import RemoveShoppingCartIcon from '@material-ui/icons/RemoveShoppingCart'; import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; import * as React from "react"; -import { AutocompleteInput, BooleanField, BooleanInput, BulkDeleteButton, BulkUpdateButton, CreateButton, Datagrid, EditButton, ExportButton, FilterButton, List, NullableBooleanInput, NumberField, NumberInput, ReferenceField, ReferenceInput, SimpleForm, SimpleShowLayout, TextField, TextInput, TopToolbar, useTranslate } from 'react-admin'; +import { AutocompleteInput, BooleanField, BooleanInput, BulkDeleteButton, BulkUpdateButton, CreateButton, Datagrid, EditButton, ExportButton, FilterButton, List, NullableBooleanInput, NumberField, NumberInput, ReferenceField, ReferenceInput, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput, TopToolbar, useTranslate } from 'react-admin'; import DateField from '../components/DateField'; import DateInput from '../components/DateInput'; import { CreateDialog, EditDialog, ShowDialog } from '../components/DialogForm'; @@ -38,67 +39,82 @@ const ProductsBulkActionButtons = props => { ); }; -const Products = (props) => ( - <> - <List {...props} filters={ProductsFilters} bulkActionButtons={<ProductsBulkActionButtons />} actions={<ProductsListActions />}> - <Datagrid> - <TextField source="id" /> - <TextField source="name" /> - <ReferenceField source="category_id" reference="products_categories" > - <TextField source="name" /> - </ReferenceField> - <MoneyField noLabel={true} source="price" /> - <NumberField source="count" /> - <NumberField source="alert_level" /> - <BooleanField source="salable" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - <EditButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <TextInput source="name" /> - <ReferenceInput source="category_id" reference="products_categories" filterToQuery={searchText => ({ name: searchText })}> - <AutocompleteInput optionText="name" /> - </ReferenceInput> - <MoneyInput source="price" /> - <NumberInput source="alert_level" /> - <BooleanInput source="salable" defaultValue={true} /> - </SimpleForm> - </CreateDialog> - <EditDialog {...props}> - <SimpleForm redirect="list"> - <TextInput disabled source="id" /> - <TextInput source="name" /> - <ReferenceInput source="category_id" reference="products_categories" filterToQuery={searchText => ({ name: searchText })}> - <AutocompleteInput optionText="name" /> - </ReferenceInput> - <MoneyInput source="price" /> - <NumberInput disabled source="count" /> - <NumberInput source="alert_level" /> - <BooleanInput source="salable" /> - <DateInput disabled source="created_at" /> - <DateInput disabled source="updated_at" /> - </SimpleForm> - </EditDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <TextField source="name" /> - <ReferenceField source="category_id" reference="products_categories" > +const Products = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={ProductsFilters} bulkActionButtons={<ProductsBulkActionButtons />} actions={<ProductsListActions />}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <TextField source="name" /> + <ReferenceField source="category_id" reference="products_categories" > + <TextField source="name" /> + </ReferenceField> + <MoneyField noLabel={true} source="price" /> + <NumberField source="count" /> + <NumberField source="alert_level" /> + <BooleanField source="salable" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + <EditButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => record.name} + secondaryText={record => + <ReferenceField record={record} source="category_id" reference="products_categories" link={false}> + <TextField source="name" /> + </ReferenceField>} + tertiaryText={record => record.count} + linkType="edit" + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <TextInput source="name" /> + <ReferenceInput source="category_id" reference="products_categories" filterToQuery={searchText => ({ name: searchText })}> + <AutocompleteInput optionText="name" /> + </ReferenceInput> + <MoneyInput source="price" /> + <NumberInput source="alert_level" /> + <BooleanInput source="salable" defaultValue={true} /> + </SimpleForm> + </CreateDialog> + <EditDialog {...props}> + <SimpleForm redirect="list"> + <TextInput disabled source="id" /> + <TextInput source="name" /> + <ReferenceInput source="category_id" reference="products_categories" filterToQuery={searchText => ({ name: searchText })}> + <AutocompleteInput optionText="name" /> + </ReferenceInput> + <MoneyInput source="price" /> + <NumberInput disabled source="count" /> + <NumberInput source="alert_level" /> + <BooleanInput source="salable" /> + <DateInput disabled source="created_at" /> + <DateInput disabled source="updated_at" /> + </SimpleForm> + </EditDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> <TextField source="name" /> - </ReferenceField> - <MoneyField source="price" /> - <NumberField source="count" /> - <NumberField source="alert_level" /> - <BooleanField source="salable" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); + <ReferenceField source="category_id" reference="products_categories" > + <TextField source="name" /> + </ReferenceField> + <MoneyField source="price" /> + <NumberField source="count" /> + <NumberField source="alert_level" /> + <BooleanField source="salable" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: Products, diff --git a/resources/js/src/resources/ProductsCategories.js b/resources/js/src/resources/ProductsCategories.js index ec73522a97a1a6c1ec42b80fe2b22fcd2b426e9f..5c93b4002e7c69036c6ccdd67b9503d6b07fd9dc 100644 --- a/resources/js/src/resources/ProductsCategories.js +++ b/resources/js/src/resources/ProductsCategories.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { Datagrid, EditButton, List, SimpleForm, SimpleShowLayout, TextField, TextInput } from 'react-admin'; +import { Datagrid, EditButton, List, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput } from 'react-admin'; import DateField from '../components/DateField'; import DateInput from '../components/DateInput'; import { CreateDialog, EditDialog, ShowDialog } from '../components/DialogForm'; @@ -8,40 +9,51 @@ const ProductsCategoriesFilters = [ <TextInput source="name" /> ]; -const ProductsCategories = (props) => ( - <> - <List {...props} filters={ProductsCategoriesFilters}> - <Datagrid> - <TextField source="id" /> - <TextField source="name" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - <EditButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <TextInput source="name" /> - </SimpleForm> - </CreateDialog> - <EditDialog {...props}> - <SimpleForm redirect="list"> - <TextInput disabled source="id" /> - <TextInput source="name" /> - <DateInput disabled source="created_at" /> - <DateInput disabled source="updated_at" /> - </SimpleForm> - </EditDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <TextField source="name" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); +const ProductsCategories = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={ProductsCategoriesFilters}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <TextField source="name" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + <EditButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => record.name} + tertiaryText={record => "#" + record.id} + linkType="edit" + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <TextInput source="name" /> + </SimpleForm> + </CreateDialog> + <EditDialog {...props}> + <SimpleForm redirect="list"> + <TextInput disabled source="id" /> + <TextInput source="name" /> + <DateInput disabled source="created_at" /> + <DateInput disabled source="updated_at" /> + </SimpleForm> + </EditDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <TextField source="name" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: ProductsCategories, diff --git a/resources/js/src/resources/ProductsCounts.js b/resources/js/src/resources/ProductsCounts.js index f9e445f2661b89875f38a0e063f90cfd69bca38e..5884d9cf4dd2a82742e7880531706a23a38a8f3d 100644 --- a/resources/js/src/resources/ProductsCounts.js +++ b/resources/js/src/resources/ProductsCounts.js @@ -1,51 +1,66 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { ArrayField, Create, Datagrid, List, ReferenceField, ShowButton, SimpleForm, SimpleShowLayout, TextField } from 'react-admin'; +import { ArrayField, Create, Datagrid, List, ReferenceField, ShowButton, SimpleForm, SimpleList, SimpleShowLayout, TextField } from 'react-admin'; import DateField from '../components/DateField'; import { ShowDialog } from '../components/DialogForm'; import { MultiProductCountInput, MultiProductCountItem } from "../components/MultiProductCountInput"; -const ProductsCounts = (props) => ( - <> - <List {...props} bulkActionButtons={false}> - <Datagrid> - <TextField source="id" /> - <ReferenceField source="movement_id" reference="movements" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField label="Créateur" source="movement_id" reference="movements" link="show"> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> - </ReferenceField> - </ReferenceField> - <DateField source="created_at" /> - <ShowButton /> - </Datagrid> - </List> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <ArrayField source="data"> +const ProductsCounts = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} bulkActionButtons={false}> + {isDesktop ? ( <Datagrid> - <ReferenceField source="id" reference="products" link="show"> + <TextField source="id" /> + <ReferenceField source="movement_id" reference="movements" link="show"> <TextField source="name" /> </ReferenceField> - <TextField source="count" /> + <ReferenceField label="Créateur" source="movement_id" reference="movements" link={false}> + <ReferenceField source="user_id" reference="users" link="show"> + <TextField source="username" /> + </ReferenceField> + </ReferenceField> + <DateField source="created_at" /> + <ShowButton /> </Datagrid> - </ArrayField> - <ReferenceField source="movement_id" reference="movements" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField label="Créateur" source="movement_id" reference="movements" link="show"> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> + ) : ( + <SimpleList + primaryText={record => <ReferenceField record={record} source="movement_id" reference="movements" link={false}> + <TextField source="name" /> + </ReferenceField>} + secondaryText={record => new Date(record.created_at).toLocaleString()} + tertiaryText={record => "#" + record.id} + linkType="show" + /> + )} + </List> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <ArrayField source="data"> + <Datagrid> + <ReferenceField source="id" reference="products" link="show"> + <TextField source="name" /> + </ReferenceField> + <TextField source="count" /> + </Datagrid> + </ArrayField> + <ReferenceField source="movement_id" reference="movements" link="show"> + <TextField source="name" /> </ReferenceField> - </ReferenceField> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); + <ReferenceField label="Créateur" source="movement_id" reference="movements" link="show"> + <ReferenceField source="user_id" reference="users"> + <TextField source="username" /> + </ReferenceField> + </ReferenceField> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; const CountProducts = (props) => { return <> diff --git a/resources/js/src/resources/Purchases.js b/resources/js/src/resources/Purchases.js index 62b7e6abbee790f828dcfc089e3ebefa2ed551e4..bc6b17d82d54cf82477ee3e48ce4020d44502d52 100644 --- a/resources/js/src/resources/Purchases.js +++ b/resources/js/src/resources/Purchases.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import React from "react"; -import { ArrayField, AutocompleteInput, BooleanInput, Create, Datagrid, FormDataConsumer, List, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleShowLayout, TextField, TextInput } from 'react-admin'; +import { ArrayField, AutocompleteInput, BooleanInput, Create, Datagrid, FormDataConsumer, List, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput } from 'react-admin'; import DateField from '../components/DateField'; import { ShowDialog } from '../components/DialogForm'; import MoneyField from "../components/MoneyField"; @@ -7,29 +8,41 @@ import MoneyInput from '../components/MoneyInput'; import { MultiProductCountInput, MultiProductCountItem } from "../components/MultiProductCountInput"; const Purchases = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); return ( <> <List {...props} bulkActionButtons={false} > - <Datagrid> - <TextField source="id" /> - <TextField source="name" /> - <DateField source="created_at" /> - <ReferenceField label="Montant" source="transaction_id" reference="transactions" link="show"> - <MoneyField source="amount" noLabel={true} /> - </ReferenceField> - <ReferenceField label="Créateur" source="transaction_id" reference="transactions" link="show"> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> - </ReferenceField> - </ReferenceField> - <ReferenceField source="movement_id" reference="movements" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField source="transaction_id" reference="transactions" link="show"> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> <TextField source="name" /> - </ReferenceField> - <ShowButton /> - </Datagrid> + <DateField source="created_at" /> + <ReferenceField label="Montant" source="transaction_id" reference="transactions" link="show"> + <MoneyField source="amount" noLabel={true} /> + </ReferenceField> + <ReferenceField label="Créateur" source="transaction_id" reference="transactions" link={false}> + <ReferenceField source="user_id" reference="users" link="show"> + <TextField source="username" /> + </ReferenceField> + </ReferenceField> + <ReferenceField source="movement_id" reference="movements" link="show"> + <TextField source="name" /> + </ReferenceField> + <ReferenceField source="transaction_id" reference="transactions" link="show"> + <TextField source="name" /> + </ReferenceField> + <ShowButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => record.name} + secondaryText={record => new Date(record.created_at).toLocaleString()} + tertiaryText={record => <ReferenceField record={record} label="Montant" source="transaction_id" reference="transactions" link={false}> + <MoneyField source="amount" noLabel={true} /> + </ReferenceField>} + linkType="show" + /> + )} </List> <ShowDialog> <SimpleShowLayout> @@ -43,13 +56,16 @@ const Purchases = (props) => { <TextField source="username" /> </ReferenceField> </ReferenceField> - <ArrayField source="movement.products" > - <Datagrid> - <TextField source="product_id" /> - <TextField source="product.name" /> - <TextField source="count" /> - </Datagrid> - </ArrayField> + <ReferenceField label="Produits" source="movement_id" reference="movements" link="show"> + <ArrayField source="products" > + <Datagrid> + <ReferenceField source="product_id" reference="products" link="edit"> + <TextField source="name" /> + </ReferenceField> + <TextField source="count" /> + </Datagrid> + </ArrayField> + </ReferenceField> <DateField source="created_at" /> </SimpleShowLayout> </ShowDialog> diff --git a/resources/js/src/resources/Sales.js b/resources/js/src/resources/Sales.js index ae47214b659a8d67fbfd5c5c6a1b9e727eaefc53..38b6088fd1b023fd4556790dc046a5c43692916e 100644 --- a/resources/js/src/resources/Sales.js +++ b/resources/js/src/resources/Sales.js @@ -1,6 +1,6 @@ -import { TextField as MuiTextField } from "@material-ui/core"; +import { TextField as MuiTextField, useMediaQuery } from "@material-ui/core"; import React, { useState } from "react"; -import { ArrayField, Create, Datagrid, FormDataConsumer, FormTab, List, ReferenceField, SelectInput, ShowButton, SimpleShowLayout, TabbedForm, TextField, useNotify, useRefresh, useTranslate } from 'react-admin'; +import { ArrayField, Create, Datagrid, FormDataConsumer, FormTab, List, ReferenceField, SelectInput, ShowButton, SimpleList, SimpleShowLayout, TabbedForm, TextField, useNotify, useRefresh, useTranslate } from 'react-admin'; import DateField from '../components/DateField'; import { ShowDialog } from '../components/DialogForm'; import MoneyField from "../components/MoneyField"; @@ -8,28 +8,42 @@ import { MultiProductCountInput, MultiProductCountItem } from "../components/Mul import PersonalAccountSelector from "../components/PersonalAccountSelector"; const Sales = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); return ( <> <List {...props} bulkActionButtons={false} > - <Datagrid> - <TextField source="id" /> - <DateField source="created_at" /> - <ReferenceField label="Montant" source="transaction_id" reference="transactions" link="show"> - <MoneyField source="amount" noLabel={true} /> - </ReferenceField> - <ReferenceField label="Créateur" source="transaction_id" reference="transactions" link="show"> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <DateField source="created_at" /> + <ReferenceField label="Montant" source="transaction_id" reference="transactions" link="show"> + <MoneyField source="amount" noLabel={true} /> </ReferenceField> - </ReferenceField> - <ReferenceField source="movement_id" reference="movements" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField source="transaction_id" reference="transactions" link="show"> - <TextField source="name" /> - </ReferenceField> - <ShowButton /> - </Datagrid> + <ReferenceField label="Créateur" source="transaction_id" reference="transactions" link={false}> + <ReferenceField source="user_id" reference="users" link="show"> + <TextField source="username" /> + </ReferenceField> + </ReferenceField> + <ReferenceField source="movement_id" reference="movements" link="show"> + <TextField source="name" /> + </ReferenceField> + <ReferenceField source="transaction_id" reference="transactions" link="show"> + <TextField source="name" /> + </ReferenceField> + <ShowButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => <ReferenceField record={record} source="movement_id" reference="movements" link={false}> + <TextField source="name" /> + </ReferenceField>} + secondaryText={record => new Date(record.created_at).toLocaleString()} + tertiaryText={record => <ReferenceField record={record} label="Montant" source="transaction_id" reference="transactions" link={false}> + <MoneyField source="amount" noLabel={true} /> + </ReferenceField>} + linkType="show" + /> + )} </List> <ShowDialog> <SimpleShowLayout> diff --git a/resources/js/src/resources/Transactions.js b/resources/js/src/resources/Transactions.js index 9c85f1ada07c276c9c5cbc9668b92717e179f4bd..c7a20ec1467c68dff0f19d17b42a314d3eed3ec8 100644 --- a/resources/js/src/resources/Transactions.js +++ b/resources/js/src/resources/Transactions.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { AutocompleteInput, BooleanField, BooleanInput, Datagrid, List, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleShowLayout, TextField, TextInput } from 'react-admin'; +import { AutocompleteInput, BooleanField, BooleanInput, Datagrid, List, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput } from 'react-admin'; import DateField from '../components/DateField'; import { CreateDialog, ShowDialog } from '../components/DialogForm'; import MoneyField from "../components/MoneyField"; @@ -18,61 +19,73 @@ const TransactionsFilters = [ </ReferenceInput> ]; -const Transactions = (props) => ( - <> - <List {...props} filters={TransactionsFilters} bulkActionButtons={false}> - <Datagrid> - <TextField source="id" /> - <TextField source="name" /> - <MoneyField noLabel={true} source="amount" /> - <BooleanField source="rectification" /> - <ReferenceField source="account_id" reference="accounts"> +const Transactions = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={TransactionsFilters} bulkActionButtons={false}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <TextField source="name" /> + <MoneyField noLabel={true} source="amount" /> + <BooleanField source="rectification" /> + <ReferenceField source="account_id" reference="accounts"> + <TextField source="name" /> + </ReferenceField> + <ReferenceField source="category_id" reference="transactions_categories"> + <TextField source="name" /> + </ReferenceField> + <ReferenceField source="user_id" reference="users"> + <TextField source="username" /> + </ReferenceField> + <DateField source="created_at" /> + <ShowButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => record.name} + secondaryText={record => new Date(record.created_at).toLocaleDateString()} + tertiaryText={record => <MoneyField record={record} source="amount" noLabel={true} />} + linkType="show" + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <TextInput source="name" /> + <MoneyInput source="amount" /> + <BooleanInput source="rectification" /> + <ReferenceInput source="account_id" reference="accounts" filterToQuery={searchText => ({ name: searchText })}> + <AutocompleteInput optionText="name" /> + </ReferenceInput> + <ReferenceInput source="category_id" reference="transactions_categories" filterToQuery={searchText => ({ name: searchText })}> + <AutocompleteInput optionText="name" /> + </ReferenceInput> + </SimpleForm> + </CreateDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> <TextField source="name" /> - </ReferenceField> - <ReferenceField source="category_id" reference="transactions_categories"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> - </ReferenceField> - <DateField source="created_at" /> - <ShowButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <TextInput source="name" /> - <MoneyInput source="amount" /> - <BooleanInput source="rectification" /> - <ReferenceInput source="account_id" reference="accounts" filterToQuery={searchText => ({ name: searchText })}> - <AutocompleteInput optionText="name" /> - </ReferenceInput> - <ReferenceInput source="category_id" reference="transactions_categories" filterToQuery={searchText => ({ name: searchText })}> - <AutocompleteInput optionText="name" /> - </ReferenceInput> - </SimpleForm> - </CreateDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <TextField source="name" /> - <MoneyField source="amount" /> - <BooleanField source="rectification" /> - <ReferenceField source="account_id" reference="accounts"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField source="category_id" reference="transactions_categories"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> - </ReferenceField> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); + <MoneyField source="amount" /> + <BooleanField source="rectification" /> + <ReferenceField source="account_id" reference="accounts"> + <TextField source="name" /> + </ReferenceField> + <ReferenceField source="category_id" reference="transactions_categories"> + <TextField source="name" /> + </ReferenceField> + <ReferenceField source="user_id" reference="users"> + <TextField source="username" /> + </ReferenceField> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: Transactions, diff --git a/resources/js/src/resources/TransactionsCategories.js b/resources/js/src/resources/TransactionsCategories.js index 5fc3f1dd555da73981b823f746010b216a1fd2f7..469d418808795f8082899baf2813e18d9fd40bee 100644 --- a/resources/js/src/resources/TransactionsCategories.js +++ b/resources/js/src/resources/TransactionsCategories.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { Datagrid, EditButton, List, SimpleForm, SimpleShowLayout, TextField, TextInput } from 'react-admin'; +import { Datagrid, EditButton, List, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput } from 'react-admin'; import DateField from '../components/DateField'; import DateInput from '../components/DateInput'; import { CreateDialog, EditDialog, ShowDialog } from '../components/DialogForm'; @@ -8,40 +9,51 @@ const TransactionsCategoriesFilters = [ <TextInput source="name" /> ]; -const TransactionsCategories = (props) => ( - <> - <List {...props} filters={TransactionsCategoriesFilters}> - <Datagrid> - <TextField source="id" /> - <TextField source="name" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - <EditButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <TextInput source="name" /> - </SimpleForm> - </CreateDialog> - <EditDialog {...props}> - <SimpleForm redirect="list"> - <TextInput disabled source="id" /> - <TextInput source="name" /> - <DateInput disabled source="created_at" /> - <DateInput disabled source="updated_at" /> - </SimpleForm> - </EditDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <TextField source="name" /> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); +const TransactionsCategories = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={TransactionsCategoriesFilters}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <TextField source="name" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + <EditButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => record.name} + tertiaryText={record => "#" + record.id} + linkType="edit" + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <TextInput source="name" /> + </SimpleForm> + </CreateDialog> + <EditDialog {...props}> + <SimpleForm redirect="list"> + <TextInput disabled source="id" /> + <TextInput source="name" /> + <DateInput disabled source="created_at" /> + <DateInput disabled source="updated_at" /> + </SimpleForm> + </EditDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <TextField source="name" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: TransactionsCategories, diff --git a/resources/js/src/resources/Transferts.js b/resources/js/src/resources/Transferts.js index 95eb4a2cdb46688be380c59a4336f04f78b49ff0..f083c6039d633c37e2f48fd8eb44d6618bc83035 100644 --- a/resources/js/src/resources/Transferts.js +++ b/resources/js/src/resources/Transferts.js @@ -1,81 +1,108 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { AutocompleteInput, Datagrid, List, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleShowLayout, TextField } from 'react-admin'; +import { AutocompleteInput, Datagrid, List, ReferenceField, ReferenceInput, ShowButton, SimpleForm, SimpleList, SimpleShowLayout, TextField } from 'react-admin'; import DateField from '../components/DateField'; import { CreateDialog, ShowDialog } from '../components/DialogForm'; import MoneyField from "../components/MoneyField"; import MoneyInput from "../components/MoneyInput"; -const Transferts = (props) => ( - <> - <List {...props} bulkActionButtons={false}> - <Datagrid> - <TextField source="id" /> - <ReferenceField label="Depuis" source="sub_transaction_id" reference="transactions" link="show"> - <ReferenceField source="account_id" reference="accounts"> - <TextField source="name" /> +const Transferts = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} bulkActionButtons={false}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <ReferenceField label="Depuis" source="sub_transaction_id" reference="transactions" link="show"> + <ReferenceField source="account_id" reference="accounts"> + <TextField source="name" /> + </ReferenceField> + </ReferenceField> + <ReferenceField label="Vers" source="add_transaction_id" reference="transactions" link="show"> + <ReferenceField source="account_id" reference="accounts"> + <TextField source="name" /> + </ReferenceField> + </ReferenceField> + <ReferenceField label="Montant" source="add_transaction_id" reference="transactions" link="show"> + <MoneyField source="amount" noLabel={true} /> + </ReferenceField> + <ReferenceField label="Créateur" source="add_transaction_id" reference="transactions" link="show"> + <ReferenceField source="user_id" reference="users"> + <TextField source="username" /> + </ReferenceField> + </ReferenceField> + <DateField source="created_at" /> + <ShowButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => ( + <> + <ReferenceField record={record} label="Depuis" source="sub_transaction_id" reference="transactions" link={false}> + <ReferenceField source="account_id" reference="accounts" link={false}> + <TextField source="name" /> + </ReferenceField> + </ReferenceField> → <ReferenceField record={record} label="Vers" source="add_transaction_id" reference="transactions" link={false}> + <ReferenceField source="account_id" reference="accounts" link={false}> + <TextField source="name" /> + </ReferenceField> + </ReferenceField> + </> + )} + secondaryText={record => new Date(record.created_at).toLocaleDateString()} + tertiaryText={record => <ReferenceField record={record} label="Montant" source="add_transaction_id" reference="transactions" link={false}> + <MoneyField source="amount" noLabel={true} /> + </ReferenceField>} + linkType="show" + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <MoneyInput source="amount" /> + <ReferenceInput source="from_account_id" reference="accounts" filterToQuery={searchText => ({ name: searchText })}> + <AutocompleteInput optionText="name" /> + </ReferenceInput> + <ReferenceInput source="to_account_id" reference="accounts" filterToQuery={searchText => ({ name: searchText })}> + <AutocompleteInput optionText="name" /> + </ReferenceInput> + </SimpleForm> + </CreateDialog> + <ShowDialog> + <SimpleShowLayout> + <TextField source="id" /> + <ReferenceField label="Depuis" source="sub_transaction_id" reference="transactions" link="show"> + <ReferenceField source="account_id" reference="accounts"> + <TextField source="name" /> + </ReferenceField> </ReferenceField> - </ReferenceField> - <ReferenceField label="Vers" source="add_transaction_id" reference="transactions" link="show"> - <ReferenceField source="account_id" reference="accounts"> + <ReferenceField label="Transaction soustraction" source="sub_transaction_id" reference="transactions" link="show"> <TextField source="name" /> </ReferenceField> - </ReferenceField> - <ReferenceField label="Montant" source="add_transaction_id" reference="transactions" link="show"> - <MoneyField source="amount" noLabel={true} /> - </ReferenceField> - <ReferenceField label="Créateur" source="add_transaction_id" reference="transactions" link="show"> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> + <ReferenceField label="Vers" source="add_transaction_id" reference="transactions" link="show"> + <ReferenceField source="account_id" reference="accounts"> + <TextField source="name" /> + </ReferenceField> </ReferenceField> - </ReferenceField> - <DateField source="created_at" /> - <ShowButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <MoneyInput source="amount" /> - <ReferenceInput source="from_account_id" reference="accounts" filterToQuery={searchText => ({ name: searchText })}> - <AutocompleteInput optionText="name" /> - </ReferenceInput> - <ReferenceInput source="to_account_id" reference="accounts" filterToQuery={searchText => ({ name: searchText })}> - <AutocompleteInput optionText="name" /> - </ReferenceInput> - </SimpleForm> - </CreateDialog> - <ShowDialog> - <SimpleShowLayout> - <TextField source="id" /> - <ReferenceField label="Depuis" source="sub_transaction_id" reference="transactions" link="show"> - <ReferenceField source="account_id" reference="accounts"> + <ReferenceField label="Transaction addition" source="add_transaction_id" reference="transactions" link="show"> <TextField source="name" /> </ReferenceField> - </ReferenceField> - <ReferenceField label="Transaction soustraction" source="sub_transaction_id" reference="transactions" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField label="Vers" source="add_transaction_id" reference="transactions" link="show"> - <ReferenceField source="account_id" reference="accounts"> - <TextField source="name" /> + <ReferenceField label="Montant" source="add_transaction_id" reference="transactions" link="show"> + <MoneyField source="amount" noLabel={true} /> </ReferenceField> - </ReferenceField> - <ReferenceField label="Transaction addition" source="add_transaction_id" reference="transactions" link="show"> - <TextField source="name" /> - </ReferenceField> - <ReferenceField label="Montant" source="add_transaction_id" reference="transactions" link="show"> - <MoneyField source="amount" noLabel={true} /> - </ReferenceField> - <ReferenceField label="Créateur" source="add_transaction_id" reference="transactions" link="show"> - <ReferenceField source="user_id" reference="users"> - <TextField source="username" /> + <ReferenceField label="Créateur" source="add_transaction_id" reference="transactions" link="show"> + <ReferenceField source="user_id" reference="users"> + <TextField source="username" /> + </ReferenceField> </ReferenceField> - </ReferenceField> - <DateField source="created_at" /> - <DateField source="updated_at" /> - </SimpleShowLayout> - </ShowDialog> - </> -); + <DateField source="created_at" /> + <DateField source="updated_at" /> + </SimpleShowLayout> + </ShowDialog> + </> + ); +}; export default { list: Transferts, diff --git a/resources/js/src/resources/Users.js b/resources/js/src/resources/Users.js index 006357381a797cfafee02678bea69975bf28353e..621a912f6e638b6f105426eb6a1efb1f2f8a9a36 100644 --- a/resources/js/src/resources/Users.js +++ b/resources/js/src/resources/Users.js @@ -1,5 +1,6 @@ +import { useMediaQuery } from '@material-ui/core'; import * as React from "react"; -import { AutocompleteArrayInput, AutocompleteInput, ChipField, Datagrid, EditButton, FunctionField, List, ReferenceArrayField, ReferenceArrayInput, ReferenceField, ReferenceInput, SimpleForm, SingleFieldList, TextField, TextInput } from 'react-admin'; +import { AutocompleteArrayInput, AutocompleteInput, Datagrid, EditButton, FunctionField, List, ReferenceArrayInput, ReferenceField, ReferenceInput, SimpleForm, SimpleList, TextField, TextInput } from 'react-admin'; import DateField from '../components/DateField'; import DateInput from '../components/DateInput'; import { CreateDialog, EditDialog } from '../components/DialogForm'; @@ -9,56 +10,65 @@ const UsersFilters = [ <TextInput label="Email" source="email" /> ]; -const Users = (props) => ( - <> - <List {...props} filters={UsersFilters}> - <Datagrid> - <TextField source="id" /> - <TextField source="username" /> - <ReferenceField source="person_id" reference="people" link="show" > - <FunctionField render={r => r.firstname + " " + r.lastname} /> - </ReferenceField> - <TextField source="email" /> - <ReferenceArrayField label="Permissions" reference="permissions" source="permissions"> - <SingleFieldList linkType={false}> - <ChipField source="name" /> - </SingleFieldList> - </ReferenceArrayField> - <DateField source="created_at" /> - <DateField source="updated_at" /> - <DateField source="password_changed_at" /> - <EditButton /> - </Datagrid> - </List> - <CreateDialog {...props}> - <SimpleForm redirect="list"> - <TextInput source="username" /> - <ReferenceInput source="person_id" reference="people" filterToQuery={searchText => ({ fullname: searchText, has_account: false })}> - <AutocompleteInput optionText="fullname" /> - </ReferenceInput> - <TextInput source="email" /> - <ReferenceArrayInput label="Permissions" reference="permissions" source="permissions"> - <AutocompleteArrayInput /> - </ReferenceArrayInput> - </SimpleForm> - </CreateDialog> - <EditDialog {...props}> - <SimpleForm redirect="list"> - <TextInput source="username" /> - <ReferenceInput disabled source="person_id" reference="people" filterToQuery={searchText => ({ fullname: searchText, has_account: false })}> - <AutocompleteInput optionText="fullname" /> - </ReferenceInput> - <TextInput source="email" /> - <ReferenceArrayInput label="Permissions" reference="permissions" source="permissions"> - <AutocompleteArrayInput /> - </ReferenceArrayInput> - <DateInput disabled source="created_at" /> - <DateInput disabled source="updated_at" /> - <DateInput disabled source="password_changed_at" /> - </SimpleForm> - </EditDialog> - </> -); +const Users = (props) => { + const isDesktop = useMediaQuery(theme => theme.breakpoints.up('md')); + return ( + <> + <List {...props} filters={UsersFilters}> + {isDesktop ? ( + <Datagrid> + <TextField source="id" /> + <TextField source="username" /> + <ReferenceField source="person_id" reference="people" link="show" > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField> + <TextField source="email" /> + <DateField source="created_at" /> + <DateField source="updated_at" /> + <DateField source="password_changed_at" /> + <EditButton /> + </Datagrid> + ) : ( + <SimpleList + primaryText={record => <ReferenceField record={record} source="person_id" reference="people" link={false} > + <FunctionField render={r => r.firstname + " " + r.lastname} /> + </ReferenceField>} + secondaryText={record => record.username} + tertiaryText={record => "#" + record.id} + linkType="show" + /> + )} + </List> + <CreateDialog {...props}> + <SimpleForm redirect="list"> + <TextInput source="username" /> + <ReferenceInput source="person_id" reference="people" filterToQuery={searchText => ({ fullname: searchText, has_account: false })}> + <AutocompleteInput optionText="fullname" /> + </ReferenceInput> + <TextInput source="email" /> + <ReferenceArrayInput label="Permissions" reference="permissions" source="permissions"> + <AutocompleteArrayInput /> + </ReferenceArrayInput> + </SimpleForm> + </CreateDialog> + <EditDialog {...props}> + <SimpleForm redirect="list"> + <TextInput source="username" /> + <ReferenceInput disabled source="person_id" reference="people" filterToQuery={searchText => ({ fullname: searchText, has_account: false })}> + <AutocompleteInput optionText="fullname" /> + </ReferenceInput> + <TextInput source="email" /> + <ReferenceArrayInput label="Permissions" reference="permissions" source="permissions"> + <AutocompleteArrayInput /> + </ReferenceArrayInput> + <DateInput disabled source="created_at" /> + <DateInput disabled source="updated_at" /> + <DateInput disabled source="password_changed_at" /> + </SimpleForm> + </EditDialog> + </> + ); +}; export default { list: Users,