.editor-api
.editor-api-main
v-list.editor-api-sidebar.radius-0(nav, :class='$vuetify.theme.dark ? `grey darken-4` : `primary`', dark)
v-list-item-group(v-model='tab')
v-list-item.animated.fadeInLeft(value='info')
v-list-item-icon: v-icon mdi-book-information-variant
v-list-item-title Info
v-list-item.mt-3.animated.fadeInLeft.wait-p2s(value='servers')
v-list-item-icon: v-icon mdi-server
v-list-item-title Servers
v-list-item.mt-3.animated.fadeInLeft.wait-p3s(value='endpoints')
v-list-item-icon: v-icon mdi-code-braces
v-list-item-title Endpoints
v-list-item.mt-3.animated.fadeInLeft.wait-p4s(value='models')
v-list-item-icon: v-icon mdi-buffer
v-list-item-title Models
v-list-item.mt-3.animated.fadeInLeft.wait-p5s(value='auth')
v-list-item-icon: v-icon mdi-lock
v-list-item-title Authentication
.editor-api-editor
template(v-if='tab === `info`')
v-container.px-2.pt-1(fluid)
v-row(dense)
v-col(cols='12')
.pa-3
.subtitle-2 API General Information
.caption.grey--text.text--darken-1 Global metadata about the API
v-col(cols='12', lg='6')
v-card.pt-2
v-card-text
v-text-field(
label='Title'
outlined
hint='Required - Title of the API'
persistent-hint
v-model='info.title'
)
v-divider.mt-2.mb-4
v-text-field(
label='Version'
outlined
hint='Required - Semantic versioning like 1.0.0 or an arbitrary string like 0.99-beta.'
persistent-hint
v-model='info.version'
)
v-divider.mt-2.mb-4
v-textarea(
label='Description'
outlined
hint='Optional - Markdown formatting is supported.'
persistent-hint
v-model='info.description'
)
v-col(cols='12', lg='6')
v-card.pt-2
v-card-text
v-list(nav, two-line)
v-list-item-group(v-model='kind', mandatory, color='primary')
v-list-item(value='rest')
v-list-item-avatar
img(src='/_assets/svg/icon-transaction-list.svg', alt='REST')
v-list-item-content
v-list-item-title REST API
v-list-item-subtitle Classic REST Endpoints
v-list-item-avatar
v-icon(:color='kind === `rest` ? `primary` : `grey lighten-3`') mdi-check-circle
v-list-item(value='graphql', disabled)
v-list-item-avatar
img(src='/_assets/svg/icon-graphql.svg', alt='GraphQL')
v-list-item-content
v-list-item-title GraphQL
v-list-item-subtitle.grey--text.text--lighten-1 Schema-based API
v-list-item-action
//- v-icon(:color='kind === `graphql` ? `primary` : `grey lighten-3`') mdi-check-circle
v-chip(label, small) Coming soon
template(v-else-if='tab === `servers`')
v-container.px-2.pt-1(fluid)
v-row(dense)
v-col(cols='12')
.pa-3
.d-flex.align-center.justify-space-between
div
.subtitle-2 List of servers / load balancers where this API reside
.caption.grey--text.text--darken-1 Enter all environments, e.g. Integration, QA, Pre-production, Production, etc.
v-btn(color='primary', large, @click='addServer')
v-icon(left) mdi-plus
span Add Server
v-col(cols='12', lg='6', v-for='srv of servers', :key='srv.id')
v-card.pt-1
v-card-text
.d-flex
.d-flex.flex-column.justify-space-between
v-menu(offset-y, min-width='200')
template(v-slot:activator='{ on }')
v-btn(text, x-large, style='min-width: 0;', v-on='on')
v-icon(large, :color='iconColor(srv.icon)') {{iconKey(srv.icon)}}
v-list(nav, dense)
v-list-item-group(v-model='srv.icon', mandatory)
v-list-item(:value='srvKey', v-for='(srv, srvKey) in serverTypes', :key='srvKey')
v-list-item-icon: v-icon(large, :color='srv.color', v-text='srv.icon')
v-list-item-content: v-list-item-title(v-text='srv.title')
v-btn.mb-2(depressed, small, @click='removeServer(srv.id)')
v-icon(left) mdi-close
span Delete
v-divider.ml-5(vertical)
.pl-5(style='flex: 1 1 100%;')
v-text-field(
label='Environment / Server Name'
outlined
hint='Required - Name of the environment (e.g. QA, Production)'
persistent-hint
v-model='srv.name'
)
v-text-field.mt-4(
label='URL'
outlined
hint='Required - URL of the environment (e.g. https://api.example.com/v1)'
persistent-hint
v-model='srv.url'
)
template(v-else-if='tab === `endpoints`')
v-container.px-2.pt-1(fluid)
v-row(dense)
v-col(cols='12')
.pa-3
.d-flex.align-center.justify-space-between
div
.subtitle-2 List of endpoints
.caption.grey--text.text--darken-1 Groups of REST endpoints (GET, POST, PUT, DELETE).
v-btn(color='primary', large, @click='addGroup')
v-icon(left) mdi-plus
span Add Group
v-col(cols='12', v-for='grp of endpointGroups', :key='grp.id')
v-card(color='grey darken-2')
v-card-text
v-toolbar(color='grey darken-2', flat, height='86')
v-text-field.mr-1(
flat
dark
label='Group Name'
solo
hint='Group Name'
persistent-hint
v-model='grp.name'
)
v-text-field.mx-1(
flat
dark
label='Group Description'
solo
hint='Group Description'
persistent-hint
v-model='grp.description'
)
v-divider.mx-3(vertical, dark)
v-btn.mx-1.align-self-start(color='grey lighten-2', @click='addEndpoint(grp)', dark, text, height='48')
v-icon(left) mdi-trash-can
span Delete
v-divider.mx-3(vertical, dark)
v-btn.ml-1.align-self-start(color='pink', @click='addEndpoint(grp)', dark, depressed, height='48')
v-icon(left) mdi-plus
span Add Endpoint
v-container.pa-0.mt-2(fluid)
v-row(dense)
v-col(cols='12', v-for='ept of grp.endpoints', :key='ept.id')
v-card.pt-1
v-card-text
.d-flex
.d-flex.flex-column
v-menu(offset-y, min-width='140')
template(v-slot:activator='{ on }')
v-btn.subtitle-1(depressed, large, dark, style='min-width: 140px;', height='48', v-on='on', :color='methodColor(ept.method)')
strong {{ept.method}}
v-list(nav, dense)
v-list-item-group(v-model='ept.method', mandatory)
v-list-item(:value='mtd.key', v-for='mtd of endpointMethods', :key='mtd.key')
v-list-item-content
v-chip.text-center(label, :color='mtd.color', dark) {{mtd.key}}
v-btn.mt-2(v-if='!ept.expanded', small, @click='ept.expanded = true', color='pink', outlined)
v-icon(left) mdi-arrow-down-box
span Expand
v-btn.mt-2(v-else, small, @click='ept.expanded = false', color='pink', outlined)
v-icon(left) mdi-arrow-up-box
span Collapse
template(v-if='ept.expanded')
v-spacer
v-btn.my-2(depressed, small, @click='removeEndpoint(grp, ept.id)')
v-icon(left) mdi-close
span Delete
v-divider.ml-5(vertical)
.pl-5(style='flex: 1 1 100%;')
.d-flex
v-text-field.mr-2(
label='Path'
outlined
hint='Required - Path to the endpoint (e.g. /planets/{planetId})'
persistent-hint
v-model='ept.path'
)
v-text-field.ml-2(
label='Summary'
outlined
hint='Required - A short summary of the endpoint (a few words).'
persistent-hint
v-model='ept.summary'
)
template(v-if='ept.expanded')
v-text-field.mt-3(
label='Description'
outlined
v-model='ept.description'
)
v-system-bar.editor-api-sysbar(dark, status, color='grey darken-3')
.caption.editor-api-sysbar-locale {{locale.toUpperCase()}}
.caption.px-3 /{{path}}
template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer
.caption API Docs
v-spacer
.caption OpenAPI 3.0