MrHertal / react-admin-amplify

AWS Amplify data provider for react-admin.
MIT License
159 stars 43 forks source link

How do I use the ascending and descending order? #70

Open seunghwako opened 2 years ago

seunghwako commented 2 years ago

Excuse me, I read the document in react-admin-amplify and implemented the sort, but the sort is not working properly. In addition, how can I distinguish ascending and descending order when using sorting?

All I want is to be sorted in code order

Thank you.

type B2BProduct
  @model
  @auth(
    rules: [
      { allow: public, operations: [read] }
      { allow: groups, groups: ["user", "adminUser"] }
    ]
  )
  @key(name: "byCode", fields: ["code", "id"], queryField: "b2BProductsByCode") {
  id: ID!
  thumbImage: S3Object!
  price: Int!
  productOption: [Option]!
  quantity: Int!
  eventText: String
  code: Int!
  is_del: Int!
  user_id: String!
  liveProductId: String
  product_id: String!
}
import React, { useState } from 'react';
import {
  Datagrid,
  DateField,
  EditButton,
  List,
  NumberField,
  ShowButton,
  TextField,
  TextInput,
  ReferenceField,
  ArrayField,
  ChipField,
} from 'react-admin';
import { AmplifyFilter } from 'react-admin-amplify';
import { Pagination } from '../Pagination';

const defaultQuery = 'listB2BProducts';

const B2BProductFilter = props => (
  <AmplifyFilter {...props} defaultQuery={defaultQuery}>
    <TextInput source='b2BProductsByCode.code' label='Code' alwaysOn resettable />
  </AmplifyFilter>
);

export const B2BProductList = props => {
  const [query, setQuery] = useState(defaultQuery);
  return (
    <List {...props} sort={{ field: 'code', order: 'DESC' }} filters={<B2BProductFilter setQuery={setQuery} />} pagination={<Pagination />} >
      <Datagrid>
        <NumberField label='Tiền hàng' source='price' />
        <TextField source='eventText' label='eventText' />
        <ArrayField source='productOption' label='Tùy chọn'>
          <Datagrid>
            <ChipField source='name' label='Tùy chọn' />
            <ArrayField source='contents' label='tùy chọn chi tiết'>
              <Datagrid>
                <ChipField source='name' label='tùy chọn chi tiết' />
              </Datagrid>
            </ArrayField>
          </Datagrid>
        </ArrayField>
        <NumberField label='code' source='code' sortable={query === 'b2BProductsByCode'} textAlign='center' />
        <ReferenceField label='Tên sản phẩm' source='product_id' reference='products'>
          <TextField source='name' />
        </ReferenceField>
        <ReferenceField label='User' source='user_id' reference='users'>
          <TextField source='name' />
        </ReferenceField>
        <DateField source='createdAt' />
        <DateField source='updatedAt' />
        <ShowButton />
        <EditButton />
      </Datagrid>
    </List>
  );
};