How to use admin-on-rest - 10 common examples

To help you get started, we’ve selected a few admin-on-rest examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github marmelab / aor-graphql / packages / admin-on-rest-graphql-demo / src / commands / index.js View on Github external
export const CommandList = props => (
    <List {...props} filters={<CommandFilter />} sort={{ field: 'date', order: 'DESC' }} perPage={25}>
        <Datagrid >
            <DateField source="date" showTime />
            <TextField source="reference" />
            <CustomerReferenceField />
            <NbItemsField />
            <NumberField source="total" options={{ style: 'currency', currency: 'USD' }} elStyle={{ fontWeight: 'bold' }} />
            <TextField source="status" />
            <BooleanField source="returned" />
            <EditButton />
        </Datagrid>
    </List>
);

const CommandTitle = translate(({ record, translate }) => console.log({record}) || <span>{translate('resources.Command.name', { smart_count: 1 })} #{record.reference}</span>);

export const CommandEdit = translate(({ translate, ...rest }) => (
    <Edit title={<CommandTitle />} {...rest}>
        <SimpleForm>
            <Basket />
            <DateInput source="date" />
            <ReferenceInput source="customer.id" reference="Customer">
                <AutocompleteInput optionText={choice => `${choice.firstName} ${choice.lastName}`} />
            </ReferenceInput>
            <SelectInput
                source="status"
                choices={[
                    { id: 'delivered', name: 'delivered' },
                    { id: 'ordered', name: 'ordered' },
                    { id: 'cancelled', name: 'cancelled' },
                ]}
github marmelab / admin-on-rest-demo / src / visitors / SegmentsInput.js View on Github external
import React from 'react';
import { translate, SelectArrayInput } from 'admin-on-rest';

import segments from '../segments/data';

const SegmentsInput = ({ translate, ...rest }) => (
    <SelectArrayInput {...rest} choices={segments.map(segment => ({ id: segment.id, name: translate(segment.name) }))} />
);

const TranslatedSegmentsInput = translate(SegmentsInput);

TranslatedSegmentsInput.defaultProps = {
    addField: true,
    source: 'groups',
};

export default TranslatedSegmentsInput;
github marmelab / admin-on-rest-demo / src / visitors / SegmentsField.js View on Github external
const styles = {
    main: { display: 'flex', flexWrap: 'wrap' },
    chip: { margin: 4 },
};

const SegmentsField = ({ record, translate }) => (
    <span style={styles.main}>
        {record.groups.map(segment => (
            <Chip key={segment} style={styles.chip}>
                {translate(segments.find(s => s.id === segment).name)}
            </Chip>
        ))}
    </span>
);

const TranslatedSegmentsField = translate(SegmentsField);

TranslatedSegmentsField.defaultProps = {
    addLabel: true,
    source: 'groups',
};

export default TranslatedSegmentsField;
github marmelab / react-admin / example / comments.js View on Github external
</ToolbarGroup>
                </Toolbar>
            )
        );
    }
);

const cardStyle = {
    width: 300,
    minHeight: 300,
    margin: '0.5em',
    display: 'inline-block',
    verticalAlign: 'top',
};

const CommentGrid = translate(({ ids, data, basePath, translate }) => (
    <div style={{ margin: '1em' }}>
        {ids.map(id => (
            <Card key={id} style={cardStyle}>
                <CardHeader
                    title={<TextField record={data[id]} source="author.name" />}
                    subtitle={
                        <DateField record={data[id]} source="created_at" />
                    }
                    avatar={<Avatar icon={<PersonIcon />} />}
                />
                <CardText>
                    <TextField record={data[id]} source="body" />
                </CardText>
                <CardText>
                    {translate('comment.list.about')}&nbsp;
                    <ReferenceField
github marmelab / react-admin / example / comments.js View on Github external
import { Card, CardActions, CardHeader, CardText } from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
import ChevronLeft from 'material-ui/svg-icons/navigation/chevron-left';
import ChevronRight from 'material-ui/svg-icons/navigation/chevron-right';
export CommentIcon from 'material-ui/svg-icons/communication/chat-bubble';

const CommentFilter = ({ ...props }) => (
    <Filter {...props}>
        <ReferenceInput source="post_id" reference="posts">
            <SelectInput optionText="title" />
        </ReferenceInput>
    </Filter>
);

const CommentPagination = translate(
    ({ page, perPage, total, setPage, translate }) => {
        const nbPages = Math.ceil(total / perPage) || 1;
        return (
            nbPages > 1 && (
                <Toolbar>
                    <ToolbarGroup>
                        {page > 1 && (
                            <FlatButton
                                primary
                                key="prev"
                                label={translate('aor.navigation.prev')}
                                icon={<ChevronLeft />}
                                onClick={() => setPage(page - 1)}
                            />
                        )}
                        {page !== nbPages && (
github marmelab / admin-on-rest-demo / src / commands / index.js View on Github external
export const CommandList = (props) => (
    <List {...props} filters={<CommandFilter />} sort={{ field: 'date', order: 'DESC' }} perPage={25}>
        <Datagrid >
            <DateField source="date" showTime />
            <TextField source="reference" />
            <CustomerReferenceField />
            <NbItemsField />
            <NumberField source="total" options={{ style: 'currency', currency: 'USD' }} elStyle={{ fontWeight: 'bold' }}/>
            <TextField source="status" />
            <BooleanField source="returned" />
            <EditButton />
        </Datagrid>
    </List>
);

const CommandTitle = translate(({ record, translate }) => <span>{translate('resources.commands.name', { smart_count: 1 })} #{record.reference}</span>);

export const CommandEdit = translate(({ translate, ...rest }) => (
    <Edit title={<CommandTitle />} {...rest}>
        <SimpleForm>
            <Basket />
            <DateInput source="date" />
            <ReferenceInput source="customer_id" reference="customers">
                <AutocompleteInput optionText={choice => `${choice.first_name} ${choice.last_name}`} />
            </ReferenceInput>
            <SelectInput source="status" choices={[
                { id: 'delivered', name: 'delivered' },
                { id: 'ordered', name: 'ordered' },
                { id: 'cancelled', name: 'cancelled' },
            ]}/>
            <BooleanInput source="returned" />
            <div style={{ clear: 'both' }} />
github marmelab / admin-on-rest-demo / src / categories / index.js View on Github external
import ProductRefField from '../products/ProductRefField';
import LinkToRelatedProducts from './LinkToRelatedProducts';

export const CategoryIcon = Icon;

export const CategoryList = (props) => (
    <List {...props} sort={{ field: 'name', order: 'ASC' }}>
        <Datagrid >
            <TextField source="name" style={{ padding: '0 12px 0 25px' }} />
            <LinkToRelatedProducts />
            <EditButton />
        </Datagrid>
    </List>
);

const CategoryTitle = translate(({ record, translate }) => <span>{translate('resources.categories.name', { smart_count: 1 })} "{record.name}"</span>);

export const CategoryEdit = (props) => (
    <Edit title={<CategoryTitle />} {...props}>
        <SimpleForm>
            <TextInput source="name" />
            <ReferenceManyField reference="products" target="category_id" label="resources.categories.fields.products" perPage={5}>
                <Datagrid>
                    <ThumbnailField />
                    <ProductRefField source="reference" />
                    <NumberField source="price" options={{ style: 'currency', currency: 'USD' }} />
                    <NumberField source="width" options={{ minimumFractionDigits: 2 }} />
                    <NumberField source="height" options={{ minimumFractionDigits: 2 }} />
                    <NumberField source="stock" />
                    <EditButton />
                </Datagrid>
            </ReferenceManyField>
github marmelab / admin-on-rest-demo / src / visitors / index.js View on Github external
<EditButton style={{ padding: 0 }} />
                    </Datagrid>
                </ReferenceManyField>
            </FormTab>
            <FormTab label="resources.customers.tabs.stats">
                <SegmentsInput />
                <NullableBooleanInput source="has_newsletter" />
                <DateField source="first_seen" style={{ width: 128, display: 'inline-block' }} />
                <DateField source="latest_purchase" style={{ width: 128, display: 'inline-block' }} />
                <DateField source="last_seen" style={{ width: 128, display: 'inline-block' }} />
            </FormTab>
        </TabbedForm>
    </Edit>
);

const VisitorDeleteTitle = translate(({ record, translate }) => <span>
    {translate('resources.customers.page.delete')}&nbsp;
    {record && <img src={`${record.avatar}?size=25x25`} width="25" alt="" />}
    {record && `${record.first_name} ${record.last_name}`}
</span>);

export const VisitorDelete = (props) => <Delete {...props} title={<VisitorDeleteTitle />} />;
github marmelab / aor-graphql / packages / admin-on-rest-graphql-demo / src / segments / SegmentReferenceField.js View on Github external
import React from 'react';
import { translate, ReferenceArrayField, SingleFieldList } from 'admin-on-rest';

import Chip from 'material-ui/Chip';

const NameField = translate(({ translate: t, source, record = {} }) => (
    <Chip>{t(`resources.Segment.data.${record[source]}`)}</Chip>
));

const SegmentReferenceField = props => (
    <ReferenceArrayField source="groupsIds" reference="Segment" {...props}>
        <SingleFieldList>
            <NameField source="name" />
        </SingleFieldList>
    </ReferenceArrayField>
);

SegmentReferenceField.defaultProps = {
    label: 'resources.Customer.fields.groups',
    source: 'groupsIds',
    addLabel: true,
};
github marmelab / admin-on-rest-demo / src / products / index.js View on Github external
TabbedForm,
    TextField,
    TextInput,
} from 'admin-on-rest';
import Icon from 'material-ui/svg-icons/image/collections';
import Chip from 'material-ui/Chip';
import RichTextInput from 'aor-rich-text-input';

import CustomerReferenceField from '../visitors/CustomerReferenceField';
import StarRatingField from '../reviews/StarRatingField';
import GridList from './GridList';
import Poster from './Poster';

export const ProductIcon = Icon;

const QuickFilter = translate(({ label, translate }) => <Chip>{translate(label)}</Chip>);

export const ProductFilter = props => (
    <Filter {...props}>
        <TextInput label="pos.search" source="q" alwaysOn />
        <ReferenceInput source="category_id" reference="categories">
            <SelectInput source="name" />
        </ReferenceInput>
        <NumberInput source="width_gte" />
        <NumberInput source="width_lte" />
        <NumberInput source="height_gte" />
        <NumberInput source="height_lte" />
        <QuickFilter label="resources.products.fields.stock_lte" source="stock_lte" defaultValue={10} />
    </Filter>
);

export const ProductList = props => (

admin-on-rest

A frontend Framework for building admin applications on top of REST services, using ES6, React and Material UI

MIT
Latest version published 5 years ago

Package Health Score

53 / 100
Full package analysis

Popular admin-on-rest functions

Similar packages

    Popular JavaScript code snippets

    Find secure code to use in your application or website