Skip to content
Snippets Groups Projects
Commit b63f048f authored by borzechof99's avatar borzechof99 :whale2:
Browse files

Clean up and Fix Bugs

parent 0d7f2896
No related branches found
No related tags found
No related merge requests found
import * as React from 'react';
import { Admin, Resource, ListGuesser, EditGuesser } from 'react-admin';
import './App.css';
import dashboard from './dashboard';
import jsonServerProvider from 'ra-data-json-server';
import drfProvider from 'ra-data-django-rest-framework';
import { Sport_List_Create, Sport_Edit, Sport_List } from './sport-list/List'
import { Admin, Resource } from 'react-admin';
import dataProviderMapper from './dataProviderMapper';
import { incompleteEdit, incompleteList } from './incompleteList';
import { SportList, sportEdit, sportCreate } from './sportList';
// const dataProvider = jsonServerProvider('http://localhost:8000/api/admin')
const dataProvider = drfProvider('http://localhost:8000/api/admin');
import { sportList, sportEdit, sportCreate } from './sportList';
import { incompleteEdit, incompleteList } from './incompleteList';
const App = () => (
<Admin dataProvider={dataProviderMapper} disableTelemetry>
<Admin
dataProvider={dataProviderMapper} // A custom mapper is used because different resources need different dataProviders
disableTelemetry
>
<Resource
name='sport' // name of the api endpoint
options={{ label: 'Sport Management' }} // if we do not rename the resource, the api name will be used
list={SportList}
name='sport' // name of the API endpoint
options={{ label: 'Sport Management' }} // if we do not rename the resource, the API name will be used
list={sportList}
edit={sportEdit}
create={sportCreate}
/>
<Resource
name='sport-incomplete' // name of the api endpoint
options={{ label: 'Incomplete Sports' }} // if we do not rename the resource, the api name will be used
name='sport-incomplete'
options={{ label: 'Incomplete Sports' }}
list={incompleteList}
edit={incompleteEdit}
//create={Sport_List_Create}
/>
{/* <Resource
name='sport' // name of the api endpoint
options={{ label: 'Sport Management' }} // if we do not rename the resource, the api name will be used
list={ListGuesser}
edit={EditGuesser}
//create={Sport_List_Create}
/>
<Resource
name='sport' // name of the api endpoint
options={{ label: 'Sport Management' }} // if we do not rename the resource, the api name will be used
list={ListGuesser}
edit={EditGuesser}
//create={Sport_List_Create}
/> */}
</Admin>
);
......
export const criterionEditValidator = val => {
if (val % 1 != 0) {
return "Muss ganzzahlig sein!";
// return "Must be an Integer!";
}
if (val > 9) {
return "Darf nicht größer als 9 sein."
// return "Must not be larger than 9"
}
if (val < -1) {
return "Nur -1 ist als negativer Wert erlaubt!"
// return "Only allowed negative value is -1"
}
if (val === 0) {
return "Muss entweder -1 oder zwischen 1 und 9 liegen!"
// return "Must be either -1 or between 1 and 9"
}
return undefined;
};
if (val == 0) {
// Used as a validator for our criteria.
// Takes an input Int and corrects it if needed, returns correct value
export const criterionEditFormatter = val => {
if (val === 0) {
val = 1;
} else if (val == null || val == undefined) {
} else if (val === null || val === undefined || val <= -2) {
val = -1;
} else if (val >= 10) {
val = 9;
} else if (val <= -2) {
val = -1;
};
return val;
return Math.trunc(val);
};
import * as React from "react";
import { Card, CardContent, CardHeader } from '@material-ui/core';
export default () => (
<Card>
<CardHeader title="Welcome to the Administration" />
<CardContent>Lorem ipsum sic dolor amet...</CardContent>
</Card>
);
\ No newline at end of file
import drfProvider from 'ra-data-django-rest-framework';
import sportIncompleteProvider from './sportIncompleteProvider.js';
import {
fetchUtils,
GET_LIST,
GET_ONE,
CREATE,
......@@ -12,6 +11,9 @@ import {
GET_MANY_REFERENCE,
} from 'react-admin';
// Mapping of data providers onto resource names
// For every call, it is checked which data provider should be used
// Depending on the need, further data providers can be defined and added
const dataProviders = [
{
dataProvider: drfProvider('http://localhost:8000/api/admin'),
......@@ -24,9 +26,12 @@ const dataProviders = [
];
export default (type, resource, params) => {
// Goes through the data provider list and takes the one fitting to the resource
const dataProviderMapping = dataProviders.find((dp) =>
dp.resources.includes(resource));
// Maps the type of request onto the function of the data provider
const mappingType = {
[GET_LIST]: 'getList',
[GET_ONE]: 'getOne',
......@@ -38,6 +43,7 @@ export default (type, resource, params) => {
[DELETE]: 'delete',
};
// Debugging, yaay
console.log(type, resource, params)
return dataProviderMapping.dataProvider[mappingType[type]](resource, params);
......
......@@ -2,35 +2,38 @@ import * as React from 'react';
import {
List,
Datagrid,
ReferenceField,
TextField,
EditButton,
SingleFieldList,
ArrayField,
ChipField,
ArrayInput,
SimpleFormIterator,
TextInput,
NumberInput,
ShowGuesser,
Show,
SimpleShowLayout,
EditGuesser,
Edit,
SimpleForm,
SaveButton,
Toolbar,
FormDataConsumer
} from 'react-admin';
import { criterionEditValidator } from './criterionEditValidator.js';
import { criterionEditValidator } from './criterionEditValidator.js';
// Eliminates the delete function while editing the incomplete list
const IncompleteEditToolbar = props => (
<Toolbar {...props} >
<SaveButton />
</Toolbar>
);
export const incompleteList = props => (
<List {...props}>
{/* rowClick expand means that no edit page is opened, but instead shown below the data row itself without reloading */}
<Datagrid rowClick="expand" expand={incompleteEdit} >
<TextField source="id" />
<TextField source="name" />
</Datagrid>
</List>
);
export const incompleteEdit = props => (
<Edit {...props}>
<SimpleForm toolbar={<IncompleteEditToolbar />}>
......@@ -39,7 +42,9 @@ export const incompleteEdit = props => (
<ArrayInput source="criteria">
<SimpleFormIterator disableAdd disableRemove>
{/* Documentation is wrong, look here! https://github.com/marmelab/react-admin/issues/2500 */}
{/* Documentation is wrong, look here! https://github.com/marmelab/react-admin/issues/2500
getSource() needs to get called without arguments before the return,
instead of as the source parameter of the TextField with "name" as argument */}
<FormDataConsumer>
{({ getSource, scopedFormData }) => {
getSource();
......@@ -52,23 +57,13 @@ export const incompleteEdit = props => (
</FormDataConsumer>
{/* Bug Here: TextField changes to either None or Name of Sport when an invalid string or a number are entered respectively */}
{/* Bug Here: TextField changes to either None or name of the sport when an invalid string or a number are entered respectively */}
<NumberInput
label="Wertung"
format={val => criterionEditValidator(val)}
validate={[criterionEditValidator]}
/>
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Edit>
);
export const incompleteList = props => (
<List {...props} perPage={20}>
<Datagrid rowClick="expand" expand={incompleteEdit} >
<TextField source="id" />
<TextField source="name" />
</Datagrid>
</List>
);
\ No newline at end of file
import * as React from "react";
import {
List,
Datagrid,
TextField,
UrlField,
ReferenceField,
EditButton,
Edit,
SimpleForm,
ReferenceInput,
SelectInput,
TextInput,
Create,
} from 'react-admin';
export const Sport_List_List = props => (
<List {...props}>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="name" />
<UrlField source="url" />
<TextField source="criteria_ratings" />
</Datagrid>
</List>
);
export const Sport_List_Edit = props => (
<Edit {...props}>
<SimpleForm>
<TextInput disabled source="id" />
<TextInput source="name" />
<TextInput source="url" />
<TextInput source="criteria_ratings" />
</SimpleForm>
</Edit>
);
export const Sport_List_Create = props => (
<Create {...props}>
<SimpleForm>
<TextInput source="name" />
<TextInput source="url" />
</SimpleForm>
</Create>
)
\ No newline at end of file
import * as React from 'react';
import {
Edit,
SimpleForm,
TextInput,
ArrayInput,
SingleFieldList,
ChipField,
BooleanInput,
DateInput,
TextField,
SimpleFormIterator,
NumberInput,
} from 'react-admin';
const validate_critRating = [-1, 1, 2, 3, 4, 5, 6, 7, 8, 9];
export const sportEdit = props => (
<Edit {...props}>
<SimpleForm>
<TextInput disabled source="id" />
<TextInput source="name" fullWidth />
<TextInput source="url" fullWidth />
<DateInput disabled source="last_used" />
<BooleanInput source="currently_active" />
<ArrayInput source="criteria">
<SimpleFormIterator disableAdd disableRemove>
<TextInput disabled source="name" label="Kriterienname" />
<NumberInput
validate={validate_critRating}
min={-1}
max={9}
source="value"
label="Kriterienwertung"
/>
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Edit>
);
\ No newline at end of file
import { stringify } from 'query-string';
import {
Identifier,
Pagination,
Sort,
Filter,
fetchUtils,
DataProvider,
} from 'ra-core';
/* export {
default as tokenAuthProvider,
fetchJsonWithAuthToken,
} from './tokenAuthProvider';
/*
DATA PROVIDER FOR INCOMPLETE LIST
Based on the default Django REST data provider https://github.com/bmihelac/ra-data-django-rest-framework
export {
default as jwtTokenAuthProvider,
fetchJsonWithAuthJWTToken,
} from './jwtTokenAuthProvider'; */
Changed here:
- getList:
Saves the returned data from the backend in the cached_incomplete variable for further use
- getOne:
Checks cached_incomplete before asking the server for the complete list of all incomplete Sports
- update:
Sends filled out criteria to sport/id instead of sport-incomplete/id, since that doesn't exist
Also, the function returns only the other incomplete criteria instead of all
It might be worth thinking about changing the API in the backend so that sport-incomplete is a whole Viewset
This would bloat the API but make handling in the frontend easier.
*/
// export {
// default as jwtTokenAuthProvider,
// fetchJsonWithAuthJWTToken,
// } from './jwtTokenAuthProvider';
const getPaginationQuery = (pagination) => {
return {
......@@ -90,8 +99,6 @@ export default (
return {
data
};
// data: json.results.id
},
getMany: (resource, params) => {
......@@ -120,7 +127,7 @@ export default (
const verbose_criteria_list = [];
// Filter the Criteria that were Filled Out
// Filter the criteria that were filled out
for (let i = 0; i < params.data.criteria.length; i++) {
const element = params.data.criteria[i];
......@@ -136,7 +143,7 @@ export default (
}
// Send Criteria that were filled out
// Send criteria that were filled out
const data = {
"criteria": verbose_criteria_list
};
......@@ -146,12 +153,12 @@ export default (
body: JSON.stringify(data),
});
// The Whole Sport object has been returned
// Just return the unreturned Criteria, or None if everything is filled out
// The whole Sport object has been returned
// Just return the unreturned criteria, or None if everything is filled out
let new_criteria = []
json.criteria.forEach(element => {
if (element.value === -1) {
if (element.value <= -1) {
new_criteria.push(element)
}
});
......
......@@ -7,8 +7,6 @@ import {
SimpleForm,
TextInput,
ArrayInput,
SingleFieldList,
ChipField,
BooleanInput,
DateInput,
TextField,
......@@ -16,11 +14,12 @@ import {
NumberInput,
Create,
} from 'react-admin';
import { criterionEditValidator } from './criterionEditValidator.js';
export const SportList = props => (
<List {...props} perPage={20}>
export const sportList = props => (
<List {...props}>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="name" />
......@@ -31,7 +30,6 @@ export const SportList = props => (
);
const validate_critRating = [-1, 1, 2, 3, 4, 5, 6, 7, 8, 9];
export const sportEdit = props => (
<Edit {...props}>
......@@ -39,16 +37,15 @@ export const sportEdit = props => (
<TextInput disabled source="id" />
<TextInput source="name" fullWidth />
<TextInput source="url" fullWidth />
<DateInput disabled source="last_used" />
<BooleanInput source="currently_active" />
<DateInput disabled source="last_used" />
<ArrayInput source="criteria">
<SimpleFormIterator disableAdd disableRemove>
<SimpleFormIterator disableAdd disableRemove> {/* Used because you cannot know how many objects will be sent */}
<TextInput disabled source="name" label="Kriterienname" />
{/* criterionEditValidator checks input if it is within 1-9 or -1 and sets it accordingly */}
<NumberInput
min={-1}
max={9}
source="value"
format={val => criterionEditValidator(val)}
validate={[criterionEditValidator]}
label="Kriterienwertung"
/>
</SimpleFormIterator>
......@@ -57,28 +54,12 @@ export const sportEdit = props => (
</Edit>
);
// sportCreate cannot know at this point how many and which criteria are used, so they are editable after creating the sport
export const sportCreate = props => (
<Create {...props}>
<SimpleForm>
{/* <TextInput disabled source="id" /> */}
<TextInput source="name" fullWidth />
<TextInput source="url" fullWidth />
{/* <DateInput disabled source="last_used" /> */}
{/* <BooleanInput source="currently_active" />
<ArrayInput source="criteria">
<SimpleFormIterator disableAdd disableRemove>
<TextInput disabled source="name" label="Kriterienname" />
<NumberInput
min={-1}
max={9}
source="value"
format={val => criterionEditValidator(val)}
label="Kriterienwertung"
/>
</SimpleFormIterator>
</ArrayInput> */}
</SimpleForm>
</Create>
);
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment