@rnga/orders/src/node_modules/ui/View/ServiceOrder/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 Badge from 'material-ui/Badge';

import Pagination from 'Pagination';


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

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

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


import UserLink from "ui/User/Link";

import moment from "moment";

import OrderNumber from "ui/OrderNumber";

import ServiceStatus from "ui/ServiceOrder/Status";

export class ServicesOrdersPageView extends TableView {


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


  static defaultProps = {
    ...TableView.defaultProps,
    // listName: "ordersConnection",
    title: "Заказы",
    columnData: [
      {
        id: 'actions', numeric: false, disablePadding: false, label: '',
        renderer: (value, record, scope) => {

          let buttons = [];

          const {
            id,
            status,
            confirmDate,
          } = record;


          switch (status) {

            case "Created":

              buttons.push(<Button
                size="small"
                onClick={event => scope.setServiceOrderAsAccepted(id)}
                color="secondary"
              >
                Принять
              </Button>);

              break;

            case "Accepted":

              buttons.push(<Button
                size="small"
                onClick={event => scope.setServiceOrderAsCompleted(id)}
                color="primary"
                disabled={!confirmDate}
              >
                Завершить
              </Button>);

              break;

          }

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


          let content = null;



          if (value) {

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

          }

          return content;

        }
      },
      {
        id: 'OrderItem', numeric: false, disablePadding: true, label: 'Товар',
        renderer: (value, record, scope) => {

          if (!value) {
            return null;
          }

          const {
            id: orderItemId,
            title,
            ServiceOrders,
          } = value || {};


          const {
            id: serviceOrderId,
          } = record;


          const otherServiceOrders = ServiceOrders.filter(n => n.id !== serviceOrderId && n.status !== "Ended");


          let otherOrdersLink;


          if (otherServiceOrders.length > 0) {
            otherOrdersLink = <Button
              variant="fab"
              color="secondary"
              style={{
                width: 36,
                height: 36,
                fontSize: "1rem",
              }}
              onClick={event => {

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




                setFilters({
                  orderItem: orderItemId,
                });

              }}
            >
              {otherServiceOrders.length}
            </Button>
          }

          return orderItemId ? <span>
            <Link
              to={`/orders_items/${orderItemId}`}
            >
              {title}
              {/* <Badge
              color="secondary"
              badgeContent={otherServiceOrders.length}
            >

            </Badge> */}


            </Link>

            {otherOrdersLink}
          </span> : null;

        }
      },
      {
        id: 'Service', numeric: false, disablePadding: true, label: 'Услуга',
        renderer: (value, record) => {

          const {
            id: serviceId,
            name,
          } = value || {};
          
          const {
            confirmDate,
            rejectDate,
          } = record;



          // return serviceId ? <Link
          //   to={``}
          // >
          //   {name}
          // </Link> : null; 

          return name ? <span
            style={{
              color: confirmDate ? "green" : rejectDate ? "red" : undefined,
            }}
          >
            {name} {confirmDate ? `(подтверждено)` : rejectDate ? `(отказ)` : ""}
          </span> : null;

        }
      },
      {
        id: 'Tarif', numeric: false, disablePadding: true, label: 'Тариф',
        renderer: (value, record) => {

          const {
            id: tarifId,
            name,
          } = value || {};


          return name || null;

        }
      },
      {
        id: 'status', numeric: false, disablePadding: true, label: 'Статус',
        renderer: (value, record) => {

          return value ? <ServiceStatus
            value={value}
          /> : null;

        }
      },
      { id: 'amount', numeric: false, disablePadding: false, label: 'Сумма' },
      {
        id: 'createdAt', numeric: false, disablePadding: true, label: 'Дата заказа',
        renderer: (value, record) => {

          return value && moment(value).format('DD.MM.YYYY HH:mm:ss') || null;

        }
      },
      {
        id: 'updatedAt', numeric: false, disablePadding: true, label: 'Дата обновления',
        renderer: (value, record) => {

          return value && moment(value).format('DD.MM.YYYY HH:mm:ss') || null;

        }
      },
      {
        id: 'readyDate', numeric: false, disablePadding: true, label: 'Дата выполнения',
        renderer: (value, record) => {

          return value && moment(value).format('DD.MM.YYYY HH:mm:ss') || null;

        }
      },

      // { id: 'calories', numeric: false, disablePadding: false, label: 'Емейл' },
      // { id: 'fat', numeric: false, disablePadding: false, label: 'Телефон' },
      // { id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' },
      // { id: 'sdfsdfsdf', numeric: true, disablePadding: false, label: 'wef wef (g)' },
      // { id: 'protein', numeric: true, disablePadding: false, label: 'Protein (g)' },
    ],
    // where:{
    //   name_contains: "немо"
    // },
  };


  async setServiceOrderAsAccepted(id) {



    const {
      mutate,
    } = this.props;

    await this.updateServiceOrder({
      where: {
        id,
      },
      data: {
        status: "Accepted",
      },
    });

  }


  async setServiceOrderAsCompleted(id) {



    const {
      mutate,
    } = this.props;

    await this.updateServiceOrder({
      where: {
        id,
      },
      data: {
        status: "Completed",
        readyDate: new Date(),
      },
    });

  }


  async updateServiceOrder(variables) {



    const {
      mutate,
    } = this.props;

    await mutate({ variables });

  }




  getFilters() {

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


    const {
      query,
      activeOnly,
    } = getFilters();

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

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

      </Grid>


      <Grid
        item
      >

        <Grid
          container
          alignItems="center"
        >

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

                setFilters({
                  activeOnly: checked ? true : undefined,
                });
              }}
            />
          </Grid>

          <Grid
            item
          >
            Только активные
          </Grid>

        </Grid>

      </Grid>

      <Grid
        item
      >

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

      </Grid>


      <Grid
        item
        xs
      >
      </Grid>




    </Grid>;

    return filters;

  }


  render() {

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

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


    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(styles)(ServicesOrdersPageView);