header-ui/src/components/documentation/cloudTable.jsx

Header UI

import React from 'react';
import {
    Card,
    CardHeader,
    CardContent
} from '@material-ui/core';

class CloudTable extends React.Component {
    constructor() {
        super()
        this.state = {

        }
    }

    copyToClipboard(element) {
        const range = document.createRange();
        const selection = window.getSelection();

        // Clear selection from any previous data.
        selection.removeAllRanges();

        // Make the range select the entire content of the contentHolder paragraph.
        range.selectNodeContents(document.querySelector(element));

        // Add that range to the selection.
        selection.addRange(range);

        // Copy the selection to clipboard.
        document.execCommand('copy');

        // Clear selection if you want to.
        selection.removeAllRanges();
    }

    render() {
        // let { TABLE, columnsData } = this.props.contextData
        let TABLE = "Role";
        let columnsData = ["username", "expires", "createdAt"];
        return (
            <div>
                <div className="method">
                    <a id="CloudTable-constructor" name="CloudTable-constructor" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Create a CloudTable"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            <div className="method-example" id="api-summary-example">
                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_create")} />
                                <pre id="pre_create">
                                    <span className="code-red">{
                                        `var`}</span>{` table = `}<span className="code-red">{`new`}</span>{` CB.CloudTable(`}<span className="code-yellow">{`"${TABLE}"`}</span>{`);`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudTable( tableName )"
                            subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="All the tables are in CloudBoost is a type of CloudTable. Pass the table name as a parameter to initialize a CloudTable." />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Arguments</h6>
                                    <dl className="argument-list">
                                        <dt>tableName</dt>
                                        <dd className>String <span>Table should not start with a number and should not contain any spaces and special characters.</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>A CloudTable object</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudTable-save" name="CloudTable-save" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Save a created Table"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            <div className="method-example" id="api-summary-example">
                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_save")}>
                                    </span>
                                <pre id="pre_save">
                                    <span className="code-red">{
                                        `var`}</span>{` table;;
table = `}<span className="code-red">{`new`}</span>{` CB.CloudTable(`}<span className="code-yellow">{`"NewTable"`}</span>{`);
table.save().then(`}<span className="code-red">{`function`}</span>{`(response){
    //success response
},`}<span className="code-red">{`function`}</span>{`(){
    //get error response
});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudTable.save( [callback] )"
                            subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Save a CloudTable Object. It will automatically create all default columns for a table. If you want to create a user table or role table then just pass 'User' or 'Role' as an argument while creating cloudtable object." />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Arguments</h6>
                                    <dl>
                                        <dt>callback</dt>
                                        <dd className>Object <span>[optional] if provided must have success and error functions to handle respective response.</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>CloudTable Object</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudTable-delete" name="CloudTable-delete" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Delete a created Table"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            <div className="method-example" id="api-summary-example">
                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_delete")}>
                                    </span>
                                <pre id="pre_delete">
                                    <span className="code-red">{
                                        `var`}</span>{` table = `}<span className="code-red">{`new`}</span>{` CB.CloudTable(`}<span className="code-yellow">{`"${TABLE}"`}</span>{`);
table.delete().then(`}<span className="code-red">{`function`}</span>{`(response){
    //success response
},`}<span className="code-red">{`function`}</span>{`(){
    //get error response
});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudTable.delete( [callback] )"
                            subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Delete a CloudTable object i.e. delete a table of an App." />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Arguments</h6>
                                    <dl>
                                        <dt>callback</dt>
                                        <dd className>Object <span>[optional] if provided must have success and error functions to handle respective response.</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>Success or Error Status</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        );
    }
}

export default CloudTable;