openapi-gui/src/resource/resource.html

GUI / visual editor for creating and editing OpenApi / Swagger definitions

<div class="resource box" :id="sanitisePath()">
    <div class="header columns">
		<div class="column">
        	<div class='field is-grouped level'>
                <div class="control">
                    <span class="icon" data-balloon="Add path"><a v-on:click="addResource()"><i class="fa fa-plus"></i></a></span>
                </div>
                <div class="control">
                    <span class="icon" data-balloon="Duplicate path"><a v-on:click="duplicateResource(index)"><i class="fa fa-copy"></i></a></span>
                </div>
                <div class="control">
                    <span class="icon" data-balloon="Edit path description"><a v-on:click="editPathDesc()"><i class="fa fa-edit"></i></a></span>
                </div>
                <div class="control">
                    <span class="icon" data-balloon="Remove path"><a v-on:click="removePath(index)"><i class="is-danger fa fa-trash"></i></a></span>
                </div>
                <div class="control">
                    <label class='is-normal field-label'><b>Path:&nbsp;</b></label>
                </div>
                <div class="control is-expanded">
                    <input class="input" v-model.lazy="pathEntry">
                </div>
            </div>
        </div>
        <div class='column is-2'>
            <a v-if="Object.keys(httpMethods).length==0" v-on:click="addOperation()" class='button is-primary is-right'>
                <i class='fa fa-fw fa-plus'></i>
                Add Operation
            </a>
        </div>
    </div>
    <div class="card hidden" :id="'pathDesc'+sanitisePath()">
        <div class="card-content">
            <div class="field">
                <label class="label">Summary</label>
                <input class="input" v-model="path.summary">
            </div>
            <div class="field">
                <label class="label">Description</label>
                <textarea class="textarea" v-model="path.description"></textarea>
            </div>
        </div>
        <footer class="card-footer">
            <p class="card-footer-item">
            <a v-on:click="hidePathDesc()"><span class="button is-primary"><i class="fa fa-fw fa-close"></i>Close</span></a>
            </p>
        </footer>
    </div>
    <div class="accordion method-container" v-for="(method,key,index) in httpMethods">
        <api-method :method="method" :index="key" :maintags="maintags"></api-method>
    </div>
</div>