538 lines
16 KiB
TypeScript
538 lines
16 KiB
TypeScript
import React from 'react';
|
|
import BaseIcon from '../BaseIcon';
|
|
import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
|
|
import axios from 'axios';
|
|
import {
|
|
GridActionsCellItem,
|
|
GridRowParams,
|
|
GridValueGetterParams,
|
|
} from '@mui/x-data-grid';
|
|
import ImageField from '../ImageField';
|
|
import {saveFile} from "../../helpers/fileSaver";
|
|
import dataFormatter from '../../helpers/dataFormatter'
|
|
import DataGridMultiSelect from "../DataGridMultiSelect";
|
|
import ListActionsPopover from '../ListActionsPopover';
|
|
|
|
import {hasPermission} from "../../helpers/userPermissions";
|
|
import { getRoleLaneFromUser } from "../../helpers/roleLanes";
|
|
|
|
type Params = (id: string) => void;
|
|
|
|
export const loadColumns = async (
|
|
onDelete: Params,
|
|
entityName: string,
|
|
|
|
user
|
|
|
|
) => {
|
|
async function callOptionsApi(entityName: string) {
|
|
|
|
if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
|
|
|
|
try {
|
|
const data = await axios(`/${entityName}/autocomplete?limit=100`);
|
|
return data.data;
|
|
} catch (error) {
|
|
console.log(error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
const hasUpdatePermission = hasPermission(user, 'UPDATE_RESERVATIONS')
|
|
const roleLane = getRoleLaneFromUser(user)
|
|
const hiddenFieldsByLane = {
|
|
super_admin: new Set([]),
|
|
admin: new Set(['tenant', 'organization']),
|
|
concierge: new Set(['tenant', 'organization', 'nightly_rate', 'monthly_rate', 'currency', 'internal_notes', 'invoices', 'comments']),
|
|
customer: new Set(['tenant', 'organization', 'booking_request', 'nightly_rate', 'monthly_rate', 'currency', 'internal_notes', 'invoices', 'comments', 'service_requests']),
|
|
}
|
|
|
|
const columns = [
|
|
|
|
{
|
|
field: 'tenant',
|
|
headerName: 'Tenant',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
getOptionValue: (value: any) => value?.id,
|
|
getOptionLabel: (value: any) => value?.label,
|
|
valueOptions: await callOptionsApi('tenants'),
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
params?.value?.id ?? params?.value,
|
|
|
|
},
|
|
|
|
{
|
|
field: 'organization',
|
|
headerName: 'Organization',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
getOptionValue: (value: any) => value?.id,
|
|
getOptionLabel: (value: any) => value?.label,
|
|
valueOptions: await callOptionsApi('organizations'),
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
params?.value?.id ?? params?.value,
|
|
|
|
},
|
|
|
|
{
|
|
field: 'booking_request',
|
|
headerName: 'Bookingrequest',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
getOptionValue: (value: any) => value?.id,
|
|
getOptionLabel: (value: any) => value?.label,
|
|
valueOptions: await callOptionsApi('booking_requests'),
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
params?.value?.id ?? params?.value,
|
|
|
|
},
|
|
|
|
{
|
|
field: 'reservation_code',
|
|
headerName: 'Reservationcode',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
|
|
},
|
|
|
|
{
|
|
field: 'status',
|
|
headerName: 'Status',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
|
|
},
|
|
|
|
{
|
|
field: 'property',
|
|
headerName: 'Property',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
getOptionValue: (value: any) => value?.id,
|
|
getOptionLabel: (value: any) => value?.label,
|
|
valueOptions: await callOptionsApi('properties'),
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
params?.value?.id ?? params?.value,
|
|
|
|
},
|
|
|
|
{
|
|
field: 'unit',
|
|
headerName: 'Unit',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
getOptionValue: (value: any) => value?.id,
|
|
getOptionLabel: (value: any) => value?.label,
|
|
valueOptions: await callOptionsApi('units'),
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
params?.value?.id ?? params?.value,
|
|
|
|
},
|
|
|
|
{
|
|
field: 'unit_type',
|
|
headerName: 'Unittype',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
getOptionValue: (value: any) => value?.id,
|
|
getOptionLabel: (value: any) => value?.label,
|
|
valueOptions: await callOptionsApi('unit_types'),
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
params?.value?.id ?? params?.value,
|
|
|
|
},
|
|
|
|
{
|
|
field: 'check_in_at',
|
|
headerName: 'Check-inat',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
type: 'dateTime',
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
new Date(params.row.check_in_at),
|
|
|
|
},
|
|
|
|
{
|
|
field: 'check_out_at',
|
|
headerName: 'Check-outat',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
type: 'dateTime',
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
new Date(params.row.check_out_at),
|
|
|
|
},
|
|
|
|
{
|
|
field: 'actual_check_in_at',
|
|
headerName: 'Actualcheck-inat',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
type: 'dateTime',
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
new Date(params.row.actual_check_in_at),
|
|
|
|
},
|
|
|
|
{
|
|
field: 'actual_check_out_at',
|
|
headerName: 'Actualcheck-outat',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
type: 'dateTime',
|
|
valueGetter: (params: GridValueGetterParams) =>
|
|
new Date(params.row.actual_check_out_at),
|
|
|
|
},
|
|
|
|
{
|
|
field: 'early_check_in',
|
|
headerName: 'Earlycheck-in',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
type: 'boolean',
|
|
|
|
},
|
|
|
|
{
|
|
field: 'late_check_out',
|
|
headerName: 'Latecheck-out',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
type: 'boolean',
|
|
|
|
},
|
|
|
|
{
|
|
field: 'guest_count',
|
|
headerName: 'Guestcount',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
type: 'number',
|
|
|
|
},
|
|
|
|
{
|
|
field: 'nightly_rate',
|
|
headerName: 'Nightlyrate',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
type: 'number',
|
|
|
|
},
|
|
|
|
{
|
|
field: 'monthly_rate',
|
|
headerName: 'Monthlyrate',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
type: 'number',
|
|
|
|
},
|
|
|
|
{
|
|
field: 'currency',
|
|
headerName: 'Currency',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
|
|
},
|
|
|
|
{
|
|
field: 'internal_notes',
|
|
headerName: 'Internalnotes',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
|
|
},
|
|
|
|
{
|
|
field: 'external_notes',
|
|
headerName: 'Externalnotes',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
|
|
editable: hasUpdatePermission,
|
|
|
|
|
|
},
|
|
|
|
{
|
|
field: 'guests',
|
|
headerName: 'Guests',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
editable: false,
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
valueFormatter: ({ value }) =>
|
|
dataFormatter.reservation_guestsManyListFormatter(value).join(', '),
|
|
renderEditCell: (params) => (
|
|
<DataGridMultiSelect {...params} entityName={'reservation_guests'}/>
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
field: 'service_requests',
|
|
headerName: 'Servicerequests',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
editable: false,
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
valueFormatter: ({ value }) =>
|
|
dataFormatter.service_requestsManyListFormatter(value).join(', '),
|
|
renderEditCell: (params) => (
|
|
<DataGridMultiSelect {...params} entityName={'service_requests'}/>
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
field: 'invoices',
|
|
headerName: 'Invoices',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
editable: false,
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
valueFormatter: ({ value }) =>
|
|
dataFormatter.invoicesManyListFormatter(value).join(', '),
|
|
renderEditCell: (params) => (
|
|
<DataGridMultiSelect {...params} entityName={'invoices'}/>
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
field: 'documents',
|
|
headerName: 'Documents',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
editable: false,
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
valueFormatter: ({ value }) =>
|
|
dataFormatter.documentsManyListFormatter(value).join(', '),
|
|
renderEditCell: (params) => (
|
|
<DataGridMultiSelect {...params} entityName={'documents'}/>
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
field: 'comments',
|
|
headerName: 'Comments',
|
|
flex: 1,
|
|
minWidth: 120,
|
|
filterable: false,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
|
|
editable: false,
|
|
sortable: false,
|
|
type: 'singleSelect',
|
|
valueFormatter: ({ value }) =>
|
|
dataFormatter.activity_commentsManyListFormatter(value).join(', '),
|
|
renderEditCell: (params) => (
|
|
<DataGridMultiSelect {...params} entityName={'activity_comments'}/>
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
field: 'actions',
|
|
type: 'actions',
|
|
minWidth: 30,
|
|
headerClassName: 'datagrid--header',
|
|
cellClassName: 'datagrid--cell',
|
|
getActions: (params: GridRowParams) => {
|
|
|
|
return [
|
|
<div key={params?.row?.id}>
|
|
<ListActionsPopover
|
|
onDelete={onDelete}
|
|
itemId={params?.row?.id}
|
|
pathEdit={`/reservations/reservations-edit/?id=${params?.row?.id}`}
|
|
pathView={`/reservations/reservations-view/?id=${params?.row?.id}`}
|
|
|
|
hasUpdatePermission={hasUpdatePermission}
|
|
|
|
/>
|
|
</div>,
|
|
]
|
|
},
|
|
},
|
|
];
|
|
|
|
return columns.filter((column) => !hiddenFieldsByLane[roleLane]?.has(column.field));
|
|
};
|