GVSU/marten-application
GVSU/marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

Added ability to handle collection type schemas

Browse Source
This commit is contained in:
ajmaley 2018-11-23 13:07:42 -05:00
parent 31a5887b7b
commit 598f3bd0a0
7 changed files with 300 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/FlameLinkCollection.js Normal file
View File

@ -0,0 +1,47 @@
import React, { Component} from 'react';
import flamelinkApp from '../flamelink.js';
import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
class FlameLinkCollection extends Component {
constructor() {
super();
global.mediaID = '';
this.state = {
schemaContent: '',
}
flamelinkApp.content.get(global.schemaName)
.then(result => this.setState({
schemaContent: result
}))
}
getCollectionContent(schemaData){
var arr2 = [];
var collectionInfo = [schemaData, this.state.schemaContent];
for (var val in this.state.schemaContent){
arr2.push(val);
}
return arr2.map(this.getCollectionComponentInfo, collectionInfo);
}
getCollectionComponentInfo(num){
var arr3 = [];
for (var val in this[0]){
arr3.push(val);
}
return <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
}
render() {
return(
<div>
{this.getCollectionContent(this.props.schemaData)}
</div>
);
}
}
export default FlameLinkCollection;

25
src/components/FlameLinkCollectionComponentCreations.js Normal file
View File

@ -0,0 +1,25 @@
import React, { Component} from 'react';
import Grid from '@material-ui/core/Grid';
import FlameLinkCollectionStructure from './FlameLinkCollectionStructure';
class FlameLinkCollectionComponentCreations extends Component {
createCollectionEntries(schemaData, schemaContent, arr){
var collectionInfo = [schemaData, schemaContent];
return arr.map(this.createCollectionComponents, collectionInfo);
}
createCollectionComponents(num){
return <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
}
render() {
return(
<Grid container>
{this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
</Grid>
);
}
}
export default FlameLinkCollectionComponentCreations;

128
src/components/FlameLinkCollectionStructure.js Normal file
View File

@ -0,0 +1,128 @@
import React, { Component} from 'react';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import flamelinkApp from '../flamelink.js';
import FlameLinkImage from './FlameLinkImage';
import FlameLinkFieldSet from './FlameLinkFieldSet';
const styles = theme => ({
flamelinkItem: {
paddingRight: 20,
paddingLeft: 20,
paddingTop: 20,
},
});
class FlameLinkCollectionStructure extends Component {
constructor() {
super();
global.mediaID = '';
this.state = {
schemaContent: '',
}
flamelinkApp.content.get(global.schemaName)
.then(result => this.setState({
schemaContent: result
}))
}
getContent(content, field, key, type, description){
if (type === 'text'){
if(description === 'h1'){
return (
<Typography variant='display4' id={key}>
{content[key]}
</Typography>
)
}
if(description === 'h2'){
return (
<Typography variant='display3' id={key}>
{content[key]}
</Typography>
)
}
if(description === 'h3'){
return (
<Typography variant='display2' id={key}>
{content[key]}
</Typography>
)
}
if(description === 'h4'){
return (
<Typography variant='display1' id={key}>
{content[key]}
</Typography>
)
}
if(description === 'h5'){
return (
<Typography variant='headline' id={key}>
{content[key]}
</Typography>
)
}
if(description === 'h6'){
return (
<Typography variant='title' id={key}>
{content[key]}
</Typography>
)
}
else{
return (
<Typography variant='body2' component="p" id={key}>
{content[key]}
</Typography>
)
}
}
if(type === 'textarea'){
return (
<Typography variant='body2' component="p" id={key}>
{content[key]}
</Typography>
)
}
if (type === 'media'){
for (var val in content[key]){
global.mediaID = content[key][val];
return <FlameLinkImage/>
}
}
if (type === 'fieldset'){
if(content === ''){
return
}
else{
return <FlameLinkFieldSet field={content[key]} field2={field.options}/>
}
}
console.log('Content: ', content)
console.log('Field: ', field)
console.log('Key: ', key)
console.log('Type: ', type)
console.log('Description: ', description)
}
render() {
const { classes } = this.props;
const lg = this.props.field.gridColumns.lg;
const md = this.props.field.gridColumns.md;
const sm = this.props.field.gridColumns.sm;
const xs = this.props.field.gridColumns.xs;
return(
<Grid item lg={lg} md={md} sm={sm} xs={xs} className={classes.flamelinkItem}>
{this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
</Grid>
);
}
}
export default withStyles(styles)(FlameLinkCollectionStructure);

22
src/components/FlameLinkComponentCreations.js
View File

@ -1,25 +1,39 @@
import React, { Component} from 'react';
import FlameLinkStructure from './FlameLinkStructure';
import FlameLinkCollection from './FlameLinkCollection';
import Grid from '@material-ui/core/Grid';
class FlameLinkComponentCreations extends Component {
getSchemaFieldData(schemaData){
getSchemaFieldData(schemaData, schemaType){
var arr = [];
for (var val in schemaData){
arr.push(val);
}
return arr.map(this.createComponents, schemaData);
if(schemaType === 'single'){
return arr.map(this.createSingleTypeSchemaComponents, schemaData);
}
if(schemaType === 'collection'){
return this.createCollectionTypeSchemaComponents(schemaData);
}
else{
return
}
}
createComponents(num){
createSingleTypeSchemaComponents(num){
return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
}
createCollectionTypeSchemaComponents(schemaData){
return <FlameLinkCollection schemaData={schemaData} />
}
render() {
return(
<Grid container>
{this.getSchemaFieldData(this.props.schemaDetails)}
{this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
</Grid>
);
}

126
src/components/FlameLinkStructure.js
View File

@ -31,78 +31,78 @@ class FlameLinkStructure extends Component {
}
getContent(schemaField, key, type, description){
if (type === 'text'){
if(description === 'h1'){
return (
<Typography variant='display4' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
if (type === 'text'){
if(description === 'h1'){
return (
<Typography variant='display4' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h2'){
return (
<Typography variant='display3' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h3'){
return (
<Typography variant='display2' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h4'){
return (
<Typography variant='display1' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h5'){
return (
<Typography variant='headline' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h6'){
return (
<Typography variant='title' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
else{
return (
<Typography variant='body2' component="p" id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
}
if(description === 'h2'){
return (
<Typography variant='display3' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h3'){
return (
<Typography variant='display2' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h4'){
return (
<Typography variant='display1' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h5'){
return (
<Typography variant='headline' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h6'){
return (
<Typography variant='title' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
else{
if(type === 'textarea'){
return (
<Typography variant='body2' component="p" id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
}
if(type === 'textarea'){
return (
<Typography variant='body2' component="p" id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if (type === 'media'){
for (var val in this.state.schemaContent[key]){
global.mediaID = this.state.schemaContent[key][val];
return <FlameLinkImage/>
if (type === 'media'){
for (var val in this.state.schemaContent[key]){
global.mediaID = this.state.schemaContent[key][val];
return <FlameLinkImage/>
}
}
}
if (type === 'fieldset'){
if(this.state.schemaContent === ''){
return
if (type === 'fieldset'){
if(this.state.schemaContent === ''){
return
}
else{
return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
}
}
else{
return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
}
}
}
render() {

13
src/pages/About.js
View File

@ -6,26 +6,31 @@ class About extends Component {
constructor() {
super();
global.schemaName = 'martenSchemaDemo';
global.schemaName = 'martenAbout';
this.state = {
schemaDetails: '',
schemaType: '',
}
flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options' ] })
.then(result => this.setState({
schemaDetails: result
}))
}
flamelinkApp.schemas.get(global.schemaName)
.then(result => this.setState({
schemaType: result.type
}))
}
render() {
return (
<div>
<Fragment>
<FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails}/>
<FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails} schemaType = {this.state.schemaType}/>
</Fragment>
</div>
);
}

10
src/pages/Home.js
View File

@ -10,17 +10,23 @@ class Home extends Component {
this.state = {
schemaDetails: '',
schemaType: '',
}
flamelinkApp.schemas.getFields(global.schemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
.then(result => this.setState({
schemaDetails: result
}))
flamelinkApp.schemas.get(global.schemaName)
.then(result => this.setState({
schemaType: result.type
}))
}
render() {
return (
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
);
}
}