Generate filtering/sorting and searchable dropdowns
Includes backend q search + generated list UX from DSL.
This commit is contained in:
time_
@@ -1,46 +1,38 @@
|
||||
import {
|
||||
Create,
|
||||
SimpleForm,
|
||||
TextInput,
|
||||
NumberInput,
|
||||
DateInput,
|
||||
SelectInput,
|
||||
ReferenceInput,
|
||||
} from 'react-admin';
|
||||
import { Create, SimpleForm, TextInput, SelectInput, ReferenceInput, AutocompleteInput } from 'react-admin';
|
||||
|
||||
const repairKindChoices = [
|
||||
{ id: 'TO', name: 'Техническое обслуживание' },
|
||||
{ id: 'TR', name: 'Текущий ремонт' },
|
||||
{ id: 'TRE', name: 'Текущий расширенный ремонт' },
|
||||
{ id: 'KR', name: 'Капитальный ремонт' },
|
||||
{ id: 'AR', name: 'Аварийный ремонт' },
|
||||
{ id: 'MP', name: 'Метрологическая поверка' },
|
||||
{ id: 'TO', name: 'TO' },
|
||||
{ id: 'TR', name: 'TR' },
|
||||
{ id: 'TRE', name: 'TRE' },
|
||||
{ id: 'KR', name: 'KR' },
|
||||
{ id: 'AR', name: 'AR' },
|
||||
{ id: 'MP', name: 'MP' },
|
||||
];
|
||||
|
||||
const statusChoices = [
|
||||
{ id: 'Draft', name: 'Черновик' },
|
||||
{ id: 'Approved', name: 'Утверждена' },
|
||||
{ id: 'InWork', name: 'В работе' },
|
||||
{ id: 'Done', name: 'Выполнена' },
|
||||
{ id: 'Cancelled', name: 'Отменена' },
|
||||
{ id: 'Draft', name: 'Draft' },
|
||||
{ id: 'Approved', name: 'Approved' },
|
||||
{ id: 'InWork', name: 'InWork' },
|
||||
{ id: 'Done', name: 'Done' },
|
||||
{ id: 'Cancelled', name: 'Cancelled' },
|
||||
];
|
||||
|
||||
export const RepairOrderCreate = () => (
|
||||
<Create>
|
||||
<SimpleForm>
|
||||
<TextInput source="number" label="Номер заявки" isRequired />
|
||||
<ReferenceInput source="equipmentId" reference="equipment" label="Оборудование">
|
||||
<SelectInput optionText="name" isRequired />
|
||||
<TextInput source="number" label="number" isRequired />
|
||||
<ReferenceInput source="equipmentId" reference="equipment" label="equipmentId">
|
||||
<AutocompleteInput optionText={(record) => record.code ? `${record.code} — ${record.name ?? record.code}` : (record.name ?? record.id)} filterToQuery={(searchText) => ({ q: searchText })} />
|
||||
</ReferenceInput>
|
||||
<SelectInput source="repairKind" label="Вид ремонта" choices={repairKindChoices} isRequired />
|
||||
<SelectInput source="status" label="Статус" choices={statusChoices} defaultValue="Draft" />
|
||||
<DateInput source="plannedAt" label="Плановая дата начала" isRequired />
|
||||
<DateInput source="startedAt" label="Фактическая дата начала" />
|
||||
<DateInput source="completedAt" label="Фактическая дата завершения" />
|
||||
<TextInput source="contractor" label="Подрядная организация" />
|
||||
<NumberInput source="engineHoursAtRepair" label="Наработка на момент ремонта (ч)" />
|
||||
<TextInput source="description" label="Описание работ / дефекта" multiline />
|
||||
<TextInput source="notes" label="Примечания" multiline />
|
||||
<SelectInput source="repairKind" label="repairKind" choices={repairKindChoices} emptyText="Не выбрано" />
|
||||
<SelectInput source="status" label="status" choices={statusChoices} emptyText="Не выбрано" />
|
||||
<TextInput source="plannedAt" label="plannedAt" />
|
||||
<TextInput source="startedAt" label="startedAt" />
|
||||
<TextInput source="completedAt" label="completedAt" />
|
||||
<TextInput source="contractor" label="contractor" />
|
||||
<TextInput source="engineHoursAtRepair" label="engineHoursAtRepair" />
|
||||
<TextInput source="description" label="description" />
|
||||
<TextInput source="notes" label="notes" />
|
||||
</SimpleForm>
|
||||
</Create>
|
||||
);
|
||||
|
||||
@@ -1,46 +1,39 @@
|
||||
import {
|
||||
Edit,
|
||||
SimpleForm,
|
||||
TextInput,
|
||||
NumberInput,
|
||||
DateInput,
|
||||
SelectInput,
|
||||
ReferenceInput,
|
||||
} from 'react-admin';
|
||||
import { Edit, SimpleForm, TextInput, SelectInput, ReferenceInput, AutocompleteInput } from 'react-admin';
|
||||
|
||||
const repairKindChoices = [
|
||||
{ id: 'TO', name: 'Техническое обслуживание' },
|
||||
{ id: 'TR', name: 'Текущий ремонт' },
|
||||
{ id: 'TRE', name: 'Текущий расширенный ремонт' },
|
||||
{ id: 'KR', name: 'Капитальный ремонт' },
|
||||
{ id: 'AR', name: 'Аварийный ремонт' },
|
||||
{ id: 'MP', name: 'Метрологическая поверка' },
|
||||
{ id: 'TO', name: 'TO' },
|
||||
{ id: 'TR', name: 'TR' },
|
||||
{ id: 'TRE', name: 'TRE' },
|
||||
{ id: 'KR', name: 'KR' },
|
||||
{ id: 'AR', name: 'AR' },
|
||||
{ id: 'MP', name: 'MP' },
|
||||
];
|
||||
|
||||
const statusChoices = [
|
||||
{ id: 'Draft', name: 'Черновик' },
|
||||
{ id: 'Approved', name: 'Утверждена' },
|
||||
{ id: 'InWork', name: 'В работе' },
|
||||
{ id: 'Done', name: 'Выполнена' },
|
||||
{ id: 'Cancelled', name: 'Отменена' },
|
||||
{ id: 'Draft', name: 'Draft' },
|
||||
{ id: 'Approved', name: 'Approved' },
|
||||
{ id: 'InWork', name: 'InWork' },
|
||||
{ id: 'Done', name: 'Done' },
|
||||
{ id: 'Cancelled', name: 'Cancelled' },
|
||||
];
|
||||
|
||||
export const RepairOrderEdit = () => (
|
||||
<Edit>
|
||||
<SimpleForm>
|
||||
<TextInput source="number" label="Номер заявки" isRequired />
|
||||
<ReferenceInput source="equipmentId" reference="equipment" label="Оборудование">
|
||||
<SelectInput optionText="name" isRequired />
|
||||
<TextInput source="id" label="id" disabled />
|
||||
<TextInput source="number" label="number" isRequired />
|
||||
<ReferenceInput source="equipmentId" reference="equipment" label="equipmentId">
|
||||
<AutocompleteInput optionText={(record) => record.code ? `${record.code} — ${record.name ?? record.code}` : (record.name ?? record.id)} filterToQuery={(searchText) => ({ q: searchText })} />
|
||||
</ReferenceInput>
|
||||
<SelectInput source="repairKind" label="Вид ремонта" choices={repairKindChoices} isRequired />
|
||||
<SelectInput source="status" label="Статус" choices={statusChoices} />
|
||||
<DateInput source="plannedAt" label="Плановая дата начала" isRequired />
|
||||
<DateInput source="startedAt" label="Фактическая дата начала" />
|
||||
<DateInput source="completedAt" label="Фактическая дата завершения" />
|
||||
<TextInput source="contractor" label="Подрядная организация" />
|
||||
<NumberInput source="engineHoursAtRepair" label="Наработка на момент ремонта (ч)" />
|
||||
<TextInput source="description" label="Описание работ / дефекта" multiline />
|
||||
<TextInput source="notes" label="Примечания" multiline />
|
||||
<SelectInput source="repairKind" label="repairKind" choices={repairKindChoices} emptyText="Не выбрано" />
|
||||
<SelectInput source="status" label="status" choices={statusChoices} emptyText="Не выбрано" />
|
||||
<TextInput source="plannedAt" label="plannedAt" />
|
||||
<TextInput source="startedAt" label="startedAt" />
|
||||
<TextInput source="completedAt" label="completedAt" />
|
||||
<TextInput source="contractor" label="contractor" />
|
||||
<TextInput source="engineHoursAtRepair" label="engineHoursAtRepair" />
|
||||
<TextInput source="description" label="description" />
|
||||
<TextInput source="notes" label="notes" />
|
||||
</SimpleForm>
|
||||
</Edit>
|
||||
);
|
||||
|
||||
@@ -2,39 +2,76 @@ import {
|
||||
List,
|
||||
Datagrid,
|
||||
TextField,
|
||||
TextInput,
|
||||
TopToolbar,
|
||||
FilterButton,
|
||||
CreateButton,
|
||||
ExportButton,
|
||||
NumberField,
|
||||
DateField,
|
||||
SelectField,
|
||||
ReferenceField,
|
||||
SelectArrayInput,
|
||||
SelectInput,
|
||||
ReferenceInput,
|
||||
AutocompleteInput
|
||||
} from 'react-admin';
|
||||
|
||||
const repairKindChoices = [
|
||||
{ id: 'TO', name: 'Техническое обслуживание' },
|
||||
{ id: 'TR', name: 'Текущий ремонт' },
|
||||
{ id: 'TRE', name: 'Текущий расширенный ремонт' },
|
||||
{ id: 'KR', name: 'Капитальный ремонт' },
|
||||
{ id: 'AR', name: 'Аварийный ремонт' },
|
||||
{ id: 'MP', name: 'Метрологическая поверка' },
|
||||
{ id: 'TO', name: 'TO' },
|
||||
{ id: 'TR', name: 'TR' },
|
||||
{ id: 'TRE', name: 'TRE' },
|
||||
{ id: 'KR', name: 'KR' },
|
||||
{ id: 'AR', name: 'AR' },
|
||||
{ id: 'MP', name: 'MP' },
|
||||
];
|
||||
|
||||
const statusChoices = [
|
||||
{ id: 'Draft', name: 'Черновик' },
|
||||
{ id: 'Approved', name: 'Утверждена' },
|
||||
{ id: 'InWork', name: 'В работе' },
|
||||
{ id: 'Done', name: 'Выполнена' },
|
||||
{ id: 'Cancelled', name: 'Отменена' },
|
||||
{ id: 'Draft', name: 'Draft' },
|
||||
{ id: 'Approved', name: 'Approved' },
|
||||
{ id: 'InWork', name: 'InWork' },
|
||||
{ id: 'Done', name: 'Done' },
|
||||
{ id: 'Cancelled', name: 'Cancelled' },
|
||||
];
|
||||
|
||||
const repairOrderFilters = [
|
||||
<TextInput key="q" source="q" label="Поиск" alwaysOn />,
|
||||
<TextInput key="number" source="number" label="number" />,
|
||||
<ReferenceInput key="equipmentId" source="equipmentId" reference="equipment" label="equipmentId">
|
||||
<AutocompleteInput optionText={(record) => record.code ? `${record.code} — ${record.name ?? record.code}` : (record.name ?? record.id)} filterToQuery={(searchText) => ({ q: searchText })} />
|
||||
</ReferenceInput>,
|
||||
<SelectInput key="repairKind" source="repairKind" label="repairKind" choices={repairKindChoices} emptyText="Все" />,
|
||||
<SelectArrayInput key="status" source="status" label="status" choices={statusChoices} />,
|
||||
<TextInput key="contractor" source="contractor" label="contractor" />,
|
||||
<TextInput key="description" source="description" label="description" />,
|
||||
<TextInput key="notes" source="notes" label="notes" />
|
||||
];
|
||||
|
||||
const RepairOrderListActions = () => (
|
||||
<TopToolbar>
|
||||
<FilterButton filters={repairOrderFilters} />
|
||||
<CreateButton />
|
||||
<ExportButton />
|
||||
</TopToolbar>
|
||||
);
|
||||
|
||||
export const RepairOrderList = () => (
|
||||
<List>
|
||||
<List actions={<RepairOrderListActions />} filters={repairOrderFilters} sort={{ field: 'id', order: 'ASC' }}>
|
||||
<Datagrid rowClick="show">
|
||||
<TextField source="number" label="Номер" />
|
||||
<ReferenceField source="equipmentId" reference="equipment" label="Оборудование" link="show">
|
||||
<TextField source="id" label="id" />
|
||||
<TextField source="number" label="number" />
|
||||
<ReferenceField source="equipmentId" reference="equipment" label="equipmentId" link="show">
|
||||
<TextField source="name" />
|
||||
</ReferenceField>
|
||||
<SelectField source="repairKind" label="Вид ремонта" choices={repairKindChoices} />
|
||||
<SelectField source="status" label="Статус" choices={statusChoices} />
|
||||
<DateField source="plannedAt" label="Плановая дата" />
|
||||
<TextField source="contractor" label="Подрядчик" />
|
||||
<SelectField source="repairKind" label="repairKind" choices={repairKindChoices} />
|
||||
<SelectField source="status" label="status" choices={statusChoices} />
|
||||
<DateField source="plannedAt" label="plannedAt" />
|
||||
<DateField source="startedAt" label="startedAt" />
|
||||
<DateField source="completedAt" label="completedAt" />
|
||||
<TextField source="contractor" label="contractor" />
|
||||
<NumberField source="engineHoursAtRepair" label="engineHoursAtRepair" />
|
||||
<TextField source="description" label="description" />
|
||||
<TextField source="notes" label="notes" />
|
||||
</Datagrid>
|
||||
</List>
|
||||
);
|
||||
|
||||
@@ -1,46 +1,20 @@
|
||||
import {
|
||||
Show,
|
||||
SimpleShowLayout,
|
||||
TextField,
|
||||
NumberField,
|
||||
DateField,
|
||||
SelectField,
|
||||
ReferenceField,
|
||||
} from 'react-admin';
|
||||
|
||||
const repairKindChoices = [
|
||||
{ id: 'TO', name: 'Техническое обслуживание' },
|
||||
{ id: 'TR', name: 'Текущий ремонт' },
|
||||
{ id: 'TRE', name: 'Текущий расширенный ремонт' },
|
||||
{ id: 'KR', name: 'Капитальный ремонт' },
|
||||
{ id: 'AR', name: 'Аварийный ремонт' },
|
||||
{ id: 'MP', name: 'Метрологическая поверка' },
|
||||
];
|
||||
|
||||
const statusChoices = [
|
||||
{ id: 'Draft', name: 'Черновик' },
|
||||
{ id: 'Approved', name: 'Утверждена' },
|
||||
{ id: 'InWork', name: 'В работе' },
|
||||
{ id: 'Done', name: 'Выполнена' },
|
||||
{ id: 'Cancelled', name: 'Отменена' },
|
||||
];
|
||||
import { Show, SimpleShowLayout, TextField } from 'react-admin';
|
||||
|
||||
export const RepairOrderShow = () => (
|
||||
<Show>
|
||||
<SimpleShowLayout>
|
||||
<TextField source="number" label="Номер заявки" />
|
||||
<ReferenceField source="equipmentId" reference="equipment" label="Оборудование" link="show">
|
||||
<TextField source="name" />
|
||||
</ReferenceField>
|
||||
<SelectField source="repairKind" label="Вид ремонта" choices={repairKindChoices} />
|
||||
<SelectField source="status" label="Статус" choices={statusChoices} />
|
||||
<DateField source="plannedAt" label="Плановая дата начала" />
|
||||
<DateField source="startedAt" label="Фактическая дата начала" />
|
||||
<DateField source="completedAt" label="Фактическая дата завершения" />
|
||||
<TextField source="contractor" label="Подрядная организация" />
|
||||
<NumberField source="engineHoursAtRepair" label="Наработка на момент ремонта (ч)" />
|
||||
<TextField source="description" label="Описание работ / дефекта" />
|
||||
<TextField source="notes" label="Примечания" />
|
||||
<TextField source="id" label="id" />
|
||||
<TextField source="number" label="number" />
|
||||
<TextField source="equipmentId" label="equipmentId" />
|
||||
<TextField source="repairKind" label="repairKind" />
|
||||
<TextField source="status" label="status" />
|
||||
<TextField source="plannedAt" label="plannedAt" />
|
||||
<TextField source="startedAt" label="startedAt" />
|
||||
<TextField source="completedAt" label="completedAt" />
|
||||
<TextField source="contractor" label="contractor" />
|
||||
<TextField source="engineHoursAtRepair" label="engineHoursAtRepair" />
|
||||
<TextField source="description" label="description" />
|
||||
<TextField source="notes" label="notes" />
|
||||
</SimpleShowLayout>
|
||||
</Show>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user