App.ts

import {
    Admin,
    ArrayInput,
    Create,
    CreateButton,
    Datagrid,
    DateField,
    Edit,
    EditButton,
    FilterButton,
    FilterForm,
    FilterLiveSearch,
    List,
    ListBase,
    ListGuesser,
    NullableBooleanInput,
    ReferenceField,
    ReferenceInput,
    ReferenceManyField,
    required,
    Resource,
    SelectInput,
    SimpleForm,
    SimpleFormIterator,
    TextField,
    TextInput,
} from "react-admin";
import {Stack, Typography} from '@mui/material';
import {Layout} from "./Layout";
import {useWatch} from "react-hook-form";


// import { dataProvider } from "./dataProvider";
import authProvider from "./authProvider.ts";

// import simpleRestProvider from 'ra-data-simple-rest';
import {dataProvider} from "./dataProvider";

import React from "react";

// const dataProvider = simpleRestProvider('http://127.0.0.1:10001/api');

const SearchToolbar = () => (
    <Stack direction="row" justifyContent="space-between">
        <FilterLiveSearch source="q" label="Search" />
    </Stack>
)

const TypeInput = () => {
    const category_id = useWatch<{ category_id: string }>({ name: "category_id" });

    return (
        <>
      <TextField source="type_id.title"/>
    <ReferenceInput source="type_id" reference="types" filter={{'category_id': category_id}}/>
          </>
    );
};
const UserIdInput = () => {

  const user_real_id = useWatch<{ user_real_id: string }>({ name: "user_real_id" });

  const fooz = () => {user_real_id}

  return (
    // <ReferenceInput source="type_id" reference="types" />
    <TextInput source="user_id" defaultValue={fooz}/>
  );
};

export const ServiceCreate = () => (
    <Create>
        <SimpleForm>
            <TextInput source="title" validate={required()} />
            <TextInput source="api" label="id"  validate={required()} />
            <TextInput multiline source="description" />
            <TextInput source="cost"  validate={required()} />
            <TextInput source="selfcost"  validate={required()} />
            <TextInput source="limits[0]"  validate={required()} />
            <TextInput source="limits[1]"  validate={required()} />
          <ReferenceInput source="category_id" reference="categories" />
          <TypeInput />
        </SimpleForm>
    </Create>
);
export const ServiceEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput disabled label="Id" source="id" />
      <TextInput source="title" validate={required()} />
      <TextInput source="api" label="id"  validate={required()} />
      <TextInput multiline source="description" />
      <TextInput source="cost"  validate={required()} />
      <TextInput source="selfcost"  validate={required()} />
      <TextInput source="limits[0]"  validate={required()} />
      <TextInput source="limits[1]"  validate={required()} />
      <TextField label="Выбрано:" source="category_id.title"/>
      <ReferenceInput  source="category_id" reference="categories" />

      <TypeInput />
    </SimpleForm>
  </Edit>
);

export const UserEdit = () => (
  <Edit>
    <SimpleForm>
<TextInput disabled label="id" source="id" />
<TextInput disabled label="user_id" source="user_id" />
<TextInput  label="login" source="login" validate={required()}/>
<TextInput  label="balance" source="balance" validate={required()}/>
<TextInput  label="ref" source="ref" />
                  <ArrayInput source="custom_costs_array">
                <SimpleFormIterator inline>
                    <TextInput source="name" />
                    <TextInput source="value" />
                </SimpleFormIterator>
            </ArrayInput>
<TextInput  label="trial_left" source="trial_left" />
        <TextInput  label="Change password" source="new_password" />
      <SelectInput source="role" validate={required()} choices={
        [{'id': 'superadmin', 'name': 'superadmin'},
            {'id': 'admin', 'name': 'admin'},
          {'id': 'worker', 'name': 'worker'},
          {'id': 'client', 'name': 'client'}]
      } />
        <ReferenceManyField label="Orders" reference="orders" target="user_real_id">
          <Datagrid>
             <ReferenceField source="service_id" reference="services" />
            <TextField source="link" />
            <TextField source="speed" />
            <TextField source="count" />
            <TextField source="cost" />
            <TextField source="progress" />
            <TextField source="status" />
            <EditButton />
          </Datagrid>

        </ReferenceManyField>
    </SimpleForm>
  </Edit>
);

export const TypeEdit = () => (
  <Edit>
    <SimpleForm>
<TextInput disabled label="id" source="id" />
{/*<TextInput  label="revision_id" source="revision_id" />*/}
<TextInput  label="title" source="title" validate={required()}/>
      <TextField source="category_id.title"></TextField>
<ReferenceInput source="category_id" reference="categories" />
<TextInput  label="unit_name" source="unit_name" validate={required()}/>
<TextInput  label="unit_name_genetive" source="unit_name_genetive" validate={required()}/>
<TextInput  label="key" source="key" validate={required()}/>
    </SimpleForm>
  </Edit>
);

export const OrderEdit = () => (
  <Edit>
    <SimpleForm>
<TextInput disabled label="id" source="id" />
  <TextInput  label="user_id" source="user_id" />
        Created: <TextField label="created_at" source="created_at"/>
        Modified: <TextField label="modified" source="modified"/>
  {/*      <ReferenceInput source="user_id" reference="users.user_id" />*/}
  {/*    <TextField source="user_real_id.login"></TextField>*/}

{/*<ReferenceInput source="user_real_id" reference="users">*/}
{/*</ReferenceInput>*/}
<TextInput  label="issuer_id" source="issuer_id" />
<TextInput  label="issuer_cost" source="issuer_cost" />
        <TextField label="Выбрано:" source="service_link.title"/>
<TextInput  label="service_id" source="service_id" />
      {/*<ReferenceInput  source="service_link" reference="services" />*/}
<TextInput  label="link" source="link" />
<TextInput  label="speed" source="speed" />
<TextInput  label="count" source="count" validate={required()}/>
<TextInput  label="cost" source="cost" />
<TextInput  label="progress" source="progress" />
<TextInput  label="provider_id" source="provider_id" />
      <SelectInput source="status" validate={required()} choices={
        [{'id': 'processing', 'name': 'processing'},
          {'id': 'completed', 'name': 'completed'},
          {'id': 'refund', 'name': 'refund'},
          {'id': 'created', 'name': 'created'},
      {'id': 'manual', 'name': 'manual'}]
      } />
        <SelectInput source="t_status" choices={
            [{'id': 'accepted', 'name': 'accepted'},
                {'id': 'rejected', 'name': 'rejected'},
                {'id': 'refund', 'name': 'refund'},
                {'id': 'created', 'name': 'created'},
            {'id': 'not_manual', 'name': 'not_manual'}]
        } />
<TextInput  label="method" source="method" />
    </SimpleForm>
  </Edit>
);

export const OrderWorkerEdit = () => (
  <Edit>
    <SimpleForm>
      <TextField label="id" source="id" />
      <TextField  label="user_id" source="user_id" />
      {/*<ReferenceInput source="user_real_id" reference="users" />*/}
      <TextField label="issuer_id" source="issuer_id" />
      <TextField label="issuer_cost" source="issuer_cost" />
      <TextField label="service_id" source="service_id" />
      <TextField label="link" source="link" />
      <TextField label="speed" source="speed" />
      <TextField label="count" source="count" />
      <TextField label="cost" source="cost" />
      <TextField  label="progress" source="progress" />
      <TextField label="provider_id" source="provider_id" />
      <TextField  label="status" source="status" />
      {/*<SelectInput source="status" validate={required()} choices={*/}
      {/*  [{'id': 'processing', 'name': 'processing'},*/}
      {/*    {'id': 'completed', 'name': 'completed'},*/}
      {/*    {'id': 'refund', 'name': 'refund'},*/}
      {/*    {'id': 'created', 'name': 'created'}]*/}
      {/*} />*/}
        <SelectInput source="t_status" choices={
            [{'id': 'accepted', 'name': 'accepted'},
                {'id': 'rejected', 'name': 'rejected'},
                {'id': 'refund', 'name': 'refund'},
                {'id': 'created', 'name': 'created'},
                {'id': 'not_manual', 'name': 'not_manual'}]
        } />
      <TextField  label="method" source="method" />
    </SimpleForm>
  </Edit>
);

export const CategoryEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput disabled label="id" source="id" />
<TextInput  label="key" source="key" />
<TextInput  label="title" source="title" />

      <ReferenceManyField label="Types" reference="types" target="category_id" >
          <Datagrid>
              <TextField source="title" />
              <TextField source="key" />
              <TextField source="unit_name" />
              <EditButton />
          </Datagrid>

      </ReferenceManyField>
    </SimpleForm>
  </Edit>
);

export const UserCreate = () => (
  <Create>
    <SimpleForm>

<TextInput  label="login" source="login" validate={required()}/>
<TextInput  label="balance" source="balance" validate={required()}/>
<TextInput  label="ref" source="ref" />
                  <ArrayInput source="custom_costs_array">
                <SimpleFormIterator inline>
                    <TextInput source="name" />
                    <TextInput source="value" />
                </SimpleFormIterator>
            </ArrayInput>
<TextInput  label="trial_left" source="trial_left" />
      <SelectInput source="role" validate={required()} choices={
        [{'id': 'superadmin', 'name': 'superadmin'},{'id': 'admin', 'name': 'admin'},
          {'id': 'worker', 'name': 'worker'},
          {'id': 'client', 'name': 'client'}]
      } />
    </SimpleForm>
  </Create>
);

export const TypeCreate = () => (
  <Create>
    <SimpleForm>

{/*<TextInput  label="revision_id" source="revision_id" />*/}
<TextInput  label="title" source="title" validate={required()}/>
<ReferenceInput source="category_id" reference="categories" />
<TextInput  label="unit_name" source="unit_name" validate={required()}/>
<TextInput  label="unit_name_genetive" source="unit_name_genetive" validate={required()}/>
<TextInput  label="key" source="key" validate={required()}/>
    </SimpleForm>
  </Create>
);

export const OrderCreate = () => (
  <Create>
    <SimpleForm>

<TextInput  label="user_id" source="user_id" />
{/*      <UserIdInput/>*/}
{/*<ReferenceInput source="user_real_id" reference="users" />*/}
<TextInput  label="issuer_id" source="issuer_id" />
<TextInput  label="issuer_cost" source="issuer_cost" />
        <TextField label="Выбрано:" source="service_link.title"/>
<TextInput  label="service_id" source="service_id" />
      {/*<ReferenceInput  source="service_link" reference="services" />*/}
<TextInput  label="link" source="link" />
<TextInput  label="speed" source="speed" />
<TextInput  label="count" source="count" validate={required()}/>
<TextInput  label="cost" source="cost" />
<TextInput  label="progress" source="progress" />
<TextInput  label="provider_id" source="provider_id" />
      <SelectInput source="status" validate={required()} choices={
        [{'id': 'processing', 'name': 'processing'},
        {'id': 'completed', 'name': 'completed'},
        {'id': 'refund', 'name': 'refund'},
          {'id': 'created', 'name': 'created'},
            {'id': 'manual', 'name': 'manual'}]
      } />
<TextInput  label="method" source="method" />
    </SimpleForm>
  </Create>
);


export const CategoryCreate = () => (
  <Create>
    <SimpleForm>

        <TextInput disabled label="id" source="id" />
        <TextInput  label="key" source="key" />
        <TextInput  label="title" source="title" />
    </SimpleForm>
  </Create>
);

const serviceFilters = [
    // <SearchInput source="title" alwaysOn />,
  <ReferenceInput source="category_id" reference="categories" />
];
const ListToolbar = () => (
    <Stack direction="row" justifyContent="space-between">
        <FilterLiveSearch source="q" label="Search" />
        <FilterForm filters={serviceFilters} />
        <div>
            <FilterButton filters={serviceFilters} />
            <CreateButton />
        </div>
    </Stack>
)
const userFilters = [
  <TextInput name="user_id" source="user_id" ></TextInput>,
    <SelectInput source="status" choices={
        [{'id': 'processing', 'name': 'processing'},
            {'id': 'completed', 'name': 'completed'},
            {'id': 'refund', 'name': 'refund'},
            {'id': 'created', 'name': 'created'}]
    } />,
  <SelectInput source="t_status" choices={
    [{'id': 'accepted', 'name': 'accepted'},
      {'id': 'rejected', 'name': 'rejected'},
      {'id': 'refund', 'name': 'refund'},
      {'id': 'created', 'name': 'created'},
      {'id': 'not_manual', 'name': 'not_manual'}]
  } />,
    <NullableBooleanInput label="Manual orders" source="manual" />
  // <ReferenceInput source="user_real_id" reference="users" />
];
const OrderToolbar = () => (
  <Stack direction="row" justifyContent="space-between">
    {/*<FilterLiveSearch source="q" label="Search" />*/}
    <FilterForm filters={userFilters} />
    <div>
      <FilterButton filters={userFilters} />
      <CreateButton />
    </div>
  </Stack>
)


export const ServiceList = () => (
  <ListBase>
  <ListToolbar/>
      <List>
          <Datagrid>
              <TextField  label="id" source="api" />
              <TextField  label="title" source="title" />
              <TextField  label="type" source="type_id.title" />
              <TextField  label="category" source="category_id.title" />
              <TextField  label="key" source="key"/>
          </Datagrid>
      </List>
    </ListBase>
)
export const TypeList = () => (
  <ListBase>
    <ListToolbar/>
      <List>
          <Datagrid>
              <TextField  label="id" source="id" />
              <TextField  label="title" source="title" />
              <TextField  label="category" source="category_id.title" />
              <TextField  label="unit_name" source="unit_name" />
              <TextField  label="unit_name_genetive" source="unit_name_genetive" />
              <TextField  label="key" source="key"/>
          </Datagrid>
      </List>
  </ListBase>
)
export const OrderList = () => (
  <ListBase>
    <OrderToolbar/>
      <Typography variant="h4">Order list</Typography>
    <List>
        <Datagrid>
          <TextField source="id" />
          <TextField source="user_id" />
          <TextField source="service_id"/>
          <TextField source="link" />
          <TextField source="count" />
          <TextField source="cost" />
          <TextField source="progress" />
          <TextField source="status" />
          <TextField source="t_status" />
          <TextField source="created_at"/>
          <DateField source="modified" />
        </Datagrid>

    </List>
  </ListBase>
)


export const UserList = () => (
    <ListBase>
        <SearchToolbar/>
        <List>
            <Datagrid>
                <TextField source="id" />
                <TextField source="user_id" />
                <TextField source="email" />
                <TextField source="login" />
                <TextField source="balance" />
                <TextField source="trial_left" />
                <DateField source="created" />
            </Datagrid>

        </List>
    </ListBase>
)
const foo = (record) => {
  let u=document.getElementsByName('user_id')[0];
  if (u && record.user_id) u.value=record.user_id
  return record.email || record.name || record.login;
}
// recordRepresentation={foo}
export const App = () => (

  <Admin
    layout={Layout}
    authProvider={authProvider}
    dataProvider={dataProvider}
  >
      {permissions => (
          <>
          {(permissions === 'admin' || permissions === 'superadmin')?(
              <>
    <Resource
      name="services"
      list={ServiceList}
      edit={ServiceEdit}
      create={ServiceCreate}
    >
    </Resource>
    <Resource
      name="types"
      list={TypeList}
      edit={TypeEdit}
      create={TypeCreate}
    >
    </Resource>
    <Resource
      name="orders"
      list={OrderList}
      edit={OrderEdit}
      create={OrderCreate}
    >
    </Resource>
    <Resource
      name="users"
      list={UserList}
      edit={UserEdit}
      recordRepresentation={foo}
    >
    </Resource>
    <Resource
      name="categories"
      list={ListGuesser}
      edit={CategoryEdit}
      create={CategoryCreate}
    />
              </>):null}
{permissions === 'worker'?(
        <>
              <Resource
                name="services"
              >
              </Resource>
              <Resource
                name="types"
              >
              </Resource>
              <Resource
                name="orders"
                list={OrderList}
                edit={OrderWorkerEdit}
              >
              </Resource>
              <Resource
                name="users"
              >
              </Resource>
              <Resource
                name="categories"
              /></>):null}
          </>)}
  </Admin>
      )