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

Header UI

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

class CloudObject 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 = "User";
        let columnsData = ["username", "expires", "createdAt"];
        return (
            <div>
                <div className="method">
                    <a id="CloudObject" name="CloudObject" className="section-anchor" />
                    <a id="CloudObject-constructor" name="CloudObject-constructor" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Instantiate a CloudObject"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            {/*overlay={<CardHeader title="Overlay title" subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Overlay subtitle" />}
                        >*/}
                            <div className="method-example" id="api-summary-example">

                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_initiate")}>

                                </span>
                                <pre id="pre_initiate">
                                    {
                                        `//creates an object for ${TABLE} table
 `}<span className="code-red">{`var`}</span>{` cloudObj = `}<span className="code-red">{`new`}</span>{` CB.CloudObject(`}<span className="code-yellow">{`"${TABLE}"`}</span>{`);`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="Constructor : CloudObject( columnName, [objectId] )" subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader=" Instantiates a CloudObject object." />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                        <dt>tableName</dt>
                                        <dd className>string <span>The name of the table you want to deal with</span></dd>
                                        <div className="clearfix" />
                                        <dt>objectId</dt>
                                        <dd className>[optional] string <span>The id of the object you want it to be. <b>Important : Use this parameter only when you're working on relations. For more information</b></span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>It returns an instance of a CloudObject, as its a constructor. </p>
                                    <h6>Properties</h6>
                                    <p>Every instance of CloudObject has these properties </p>
                                    <dl className="argument-list">
                                        <dt>id</dt>
                                        <dd className>string <span>The id of the CloudObject which is populated after the object is saved.</span></dd>
                                        <div className="clearfix" />
                                        <dt>createdAt</dt>
                                        <dd className>Date <span>The Date and time when the object was saved in the database.</span></dd>
                                        <div className="clearfix" />
                                        <dt>updatedAt</dt>
                                        <dd className>Date <span>The Date and time when the object was updated in the database.</span></dd>
                                        <div className="clearfix" />
                                        <dt>ACL</dt>
                                        <dd className>ACL <span>Access Control List, by default this object is publicily readable and writeable. You set object level security here. Refer ACL's</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudObject-save" name="CloudObject-save" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Save a CloudObject"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            {/*overlay={<CardHeader title="Overlay title" subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Overlay subtitle" />}
                        >*/}
                            <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>{` cloudObj = new CB.CloudObject(`}<span className="code-yellow">{`"${TABLE}"`}</span>{`);
cloudObj.set(`}<span className="code-yellow">{`"${columnsData[0].name}", "${columnsData[0].value}"`}</span>{`);
cloudObj.save({
    success: `}<span className="code-red">{`function`}</span>{`(cloudObj) {
        //cloudObj saved
    },
    error: `}<span className="code-red">{`function`}</span>{`(err) {
        //Error occured in saving object
    }
});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudObject.save( [callback] )"
                            subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Saves the CloudObject object to CloudBoost." />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                        <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>It returns a <code>Promise</code> which when resolved and returns instance of <code>CloudObject </code> saved .If the promise is rejected, you get an error object back. (if <code>callback</code> is not provided).</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudObject-fetch" name="CloudObject-fetch" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Fetch a CloudObject"
                            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_fetch")}>
                                    </span>
                                <pre id="pre_fetch">
                                    {
                                        `cloudObj.fetch({
    success: `}<span className="code-red">{`function`}</span>{`(cloudObj) {
        //cloudObj fetched
    },
    error: `}<span className="code-red">{`function`}</span>{`(err) {    
        //Error occurred in fetching data
    }              
});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudObject.fetch( [callback] )"
                            subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Refreshes a CloudObject object to by fetching its values from the database." />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                        <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>It returns <code>Promise</code> whcih resolves or rejects (if <code>callback</code> is not provided).</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudObject-delete" name="CloudObject-delete" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Delete a CloudObject"
                            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">
                                    {
                                        `cloudObj.delete({
    success: `}<span className="code-red">{`function`}</span>{`(cloudObj) {    
        //success
    },
    error: `}<span className="code-red">{`function`}</span>{`(err) {
        //Error
    }              
});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudObject.delete( [callback] )"
                            subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Delete a CloudObject object, if it is saved in the database." />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                        <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>It returns <code>Promise</code> whcih resolves or rejects (if <code>callback</code> is not provided).</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        );
    }
}

export default CloudObject;