@rnga/orders/src/node_modules/ui/View/OrderItem/List/index.js

## Get schema from @prisma-cms 1. yarn get-api-schema -e http://localhost:4000 2. yarn build-api-fragments

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from 'material-ui/styles';

import Pagination from 'Pagination';

// import {
//   styles,
//   TableView,
// } from '../../DataList/View/Table';

import {
  styles,
  TableView,
} from 'apollo-cms/src/DataView/List/Table';

// import Body from "./TableBody";

import { Link } from 'react-router-dom';
import { Grid, TextField, Checkbox, Button, IconButton } from 'material-ui';

import DeleteIcon from "material-ui-icons/Delete";

import Import from "./Import";

import UserLink from "ui/User/Link";

import moment from "moment";

import OrderNumber from "ui/OrderNumber";

import OrderItemStatus from "ui/OrderItem/Status/SelectField";

import UsersAutocomplete from "ui/Users/Autocomplete";

import FilterIcon from "material-ui-icons/FilterList";
import BackIcon from "material-ui-icons/ArrowBack";

import {
  deleteOrderItem,
} from "query";

const customStyles = theme => {



  const {
    palette: {
      orderItemStatus: {
        Vydan,
        Sobrano,
        GreidConfirmed,
        Otkaz,
        OtkazVydan,
      },
    },
  } = theme;

  return {

    ...styles(theme),
    // table: {
    //   // color: "red",
    // },
    row: {
      // color: "red",

      // Стили в зависимости от статуса

      // "&.orderItem-status--Vydan": {
      //   backgroundColor: "#43a047",

      //   "& *": {
      //     color: "#fff",
      //   },

      //   "&:hover": {
      //     backgroundColor: "#00701a",
      //   },
      // },

      "&.orderItem-status--Vydan": Vydan.tr,

      "&.orderItem-status--Sobrano": Sobrano.tr,

      "&.orderItem-status--GreidConfirmed": GreidConfirmed.tr,

      "&.orderItem-status--Otkaz": Otkaz.tr,

      "&.orderItem-status--OtkazVydan": OtkazVydan.tr,

    },
  };
}

const renderWithLink = (value, record) => {

  const {
    id,
  } = record || {}

  return value && <Link
    to={`/orders_items/${id}`}
  >
    {value}
  </Link> || value;

}

export class OrdersItemPageView extends TableView {


  static propTypes = {
    ...TableView.propTypes,
    limit: PropTypes.number,
    showFilters: PropTypes.bool.isRequired,
  };


  static contextTypes = {
    ...TableView.contextTypes,
    user: PropTypes.object,
    client: PropTypes.object.isRequired,
  }


  static defaultProps = {
    ...TableView.defaultProps,
    showFilters: true,
    // listName: "orderItemsConnection",
    title: "Элементы заказа",
    // Body,
    columnData: [
      {
        id: 'actions', numeric: false, disablePadding: false, label: '',
        renderer: (value, record, scope) => {

          const {
            id,
          } = record;

          if (!id) {
            return null;
          }

          const {
            user: currentUser,
          } = scope.context;


          const {
            sudo,
          } = currentUser || {};


          if (!sudo) {
            return null;
          }

          let actions = [];


          actions.push(<IconButton
            onClick={event => {
              event.preventDefault()
              event.stopPropagation()
              scope.deleteOrderItem(id);
            }}
          >
            <DeleteIcon

            />
          </IconButton>);

          return actions;

        }
      },
      {
        id: 'externalKey', numeric: false, disablePadding: false, label: '№',
        renderer: (value, record) => {

          const {
            id,
          } = record;

          return value ? <Link
            to={`/orders_items/${id}`}
          >
            {value}
          </Link> : null;

        }
      },
      {
        id: 'slab', numeric: false, disablePadding: false, label: '№ слаба',
        renderer: (value, record) => {

          const {
            id,
          } = record;

          return value ? <Link
            to={`/orders_items/${id}`}
          >
            <OrderNumber
              value={value}
              displayType="text"
            />
          </Link> : null;

        }
      },
      {
        id: 'User', numeric: false, disablePadding: true, label: 'Заказчик',
        renderer: (value, record) => {


          let content;


          const {
            User,
          } = record && record.Order || {};

          if (User) {

            content = <UserLink
              user={User}
            />;

          }

          return content;

        }
      },
      {
        id: 'status', numeric: false, disablePadding: false, label: 'Готовность',
        renderer: (value, record) => {

          return value && <OrderItemStatus
            value={value}
            disabled={true}
            onChange={() => { }}
          /> || null;

        }
      },
      // { id: 'frez', numeric: false, disablePadding: false, label: 'Фрез' },
      // { id: 'nakl', numeric: false, disablePadding: false, label: 'Накл' },
      {
        id: 'date', numeric: false, disablePadding: true, label: 'Дата (по договору)',
        renderer: (value, record) => {

          let date = record && record.Order && record.Order.date || null;

          return date && moment(date).format('DD.MM.YYYY') || null;

        }
      },
      {
        id: 'Order', numeric: false, disablePadding: true, label: '№ договора',
        renderer: (value, record, scope) => {

          const {
            id: orderId,
            number,
          } = value || {}

          const {
            props: {
              setFilters,
              getFilters,
              history,
            },
          } = scope;


          const {
            orderId: filterOrderId,
          } = getFilters();

          return number && <span>
            <Link
              to={`/orders/${orderId}`}
            >
              <OrderNumber
                value={number}
                displayType="text"
              />
            </Link>

            {filterOrderId
              ?
              <IconButton
                onClick={event => {

                  // setFilters({
                  //   orderId: undefined,
                  // });

                  history.goBack();

                }}
              >
                <FilterIcon
                  color="secondary"
                />
              </IconButton>
              :
              <IconButton
                onClick={event => {

                  setFilters({
                    orderId,
                  });

                }}
              >
                <FilterIcon />
              </IconButton>
            }

          </span>
            || null;


        }
      },
      {
        id: 'number', numeric: false, disablePadding: true, label: '№ в договоре',
        renderer: renderWithLink,
      },

      {
        id: 'title',
        numeric: false,
        disablePadding: false,
        label: 'Номинал',
        renderer: renderWithLink,
      },
      { id: 'year', numeric: false, disablePadding: false, label: 'Год' },
      { id: 'diametr', numeric: false, disablePadding: false, label: 'Диаметр' },
      { id: 'thingh', numeric: false, disablePadding: false, label: 'Толщина' },
      { id: 'weight', numeric: false, disablePadding: false, label: 'Вес' },
      { id: 'price', numeric: false, disablePadding: false, label: 'Оценочная стоимость' },
      { id: 'ensure_price', numeric: false, disablePadding: false, label: 'Страховая стоимость' },
      {
        id: 'type', numeric: false, disablePadding: false, label: 'мон|мед|ж',
        style: {
          whiteSpace: "nowrap",
        },
        renderer: (value, record) => {

          switch (value) {

            case "10":
              value = "Монета";
              break;

            case "20":
              value = "Медаль";
              break;

            case "30":
              value = "Жетон";
              break;

          }

          return value;

        }
      },
      { id: 'coin_num', numeric: false, disablePadding: false, label: '№ монеты' },
      { id: 'preGrade', numeric: false, disablePadding: false, label: 'Прегрейд' },
      { id: 'sheldon_grade', numeric: false, disablePadding: false, label: 'Грейд по Шелдону' },
      { id: 'bitkin', numeric: false, disablePadding: false, label: '№ по Биткину' },
      { id: 'expertize', numeric: false, disablePadding: false, label: 'Эксперт. закл.' },
    ],
    // where:{
    //   name_contains: "немо"
    // },
    rowRenderer: (n, index, renderer) => {

      const {
        status,
      } = n;


      let rowProps = {
        className: status ? `orderItem-status--${status}` : undefined,
        style: {
          color: "red",
        },
      }

      return renderer(n, index, rowProps);
    }
  };


  async deleteOrderItem(orderItemId) {


    if (window.confirm("Удалить данную позицию?")) {

      const {
        client,
      } = this.context;

      await client.mutate({
        mutation: deleteOrderItem,
        variables: {
          where: {
            id: orderItemId,
          },
        },
      })
        .then(async r => {

          await client.reFetchObservableQueries();

          return r
        })
        .catch(error => {
          console.error("Error", error);
        });
    }


  }


  getFilters() {

    const {
      getFilters,
      setFilters,
      cleanFilters,
      showFilters,
    } = this.props;


    if (!showFilters) {
      return null;
    }


    const {
      number,
      status,
      contractor,
    } = getFilters();

    const filters = <Grid
      container
      spacing={8}
      alignItems="flex-end"
    >
      <Grid
        item
      >
        <TextField
          label="Поиск"
          style={{
            marginLeft: 10,
            width: 200,
          }}
          name="number"
          value={number || ""}
          onChange={event => {
            const {
              value,
            } = event.target;

            setFilters({
              number: value,
            });
          }}
        />

      </Grid>


      <Grid
        item
      >
        <OrderItemStatus
          label="Статус"
          style={{
            marginLeft: 10,
            width: 200,
          }}
          name="status"
          value={status || ""}
          onChange={event => {
            const {
              value,
            } = event.target;

            setFilters({
              status: value,
            });
          }}
        />

      </Grid>

      <Grid
        item
      >
        <UsersAutocomplete
          inputProps={{
            label: "Контрагент",
            style: {
              marginLeft: 10,
              width: 200,
            },
          }}
          name="contractor"
          value={contractor || ""}
          // onChange={event => {
          //   const {
          //     value,
          //   } = event.target;

          //   setFilters({
          //     contractor: value,
          //   });
          // }}
          onSelect={value => {
            // const {
            //   value,
            // } = event.target;

            setFilters({
              contractor: value,
            });
          }}
        // onSubmit={user => {
        //   const {
        //     id: value,
        //   } = user;

        //   setFilters({
        //     contractor: value,
        //   });
        // }}
        />

      </Grid>

      {/* <Grid
        item
      >

        <Grid
          container
          alignItems="center"
        >

          <Grid
            item
          >
            <Checkbox
              checked={advantages_not === null ? true : false}
              bool="true"
              onChange={(event, checked) => {
                // const {
                //   value,
                // } = event.target;

                setFilters({
                  advantages_not: checked ? null : undefined,
                });
              }}
            />
          </Grid>

          <Grid
            item
          >
            С преимуществами
          </Grid>

        </Grid>

      </Grid> */}

      <Grid
        item
      >

        <Button
          onClick={event => cleanFilters({
            // where: null,
            // extraWhere: null,
          })}
        >
          Сброс
      </Button>

      </Grid>


      <Grid
        item
        xs
      >
      </Grid>

      <Grid
        item
      >

        <Import />

      </Grid>



    </Grid>;

    return filters;

  }


  render() {

    const {
      first,
      page,
      data,
    } = this.props;


    const {
      objectsConnection,
      variables,
    } = data;


    let {
      first: limit,
    } = variables || {}

    const {
      aggregate,
    } = objectsConnection || {};


    const {
      count,
    } = aggregate || {};

    const content = super.render();

    return <div>

      {content}

      {count && limit ?
        <Pagination
          limit={limit}
          total={count}
          page={page || 1}
        />
        :
        null
      }

    </div>;

  }

}

export default withStyles(customStyles)(OrdersItemPageView);