85 lines
3.7 KiB
HTML
85 lines
3.7 KiB
HTML
{% extends "portfolios/applications/base.html" %}
|
|
|
|
{% from "components/alert.html" import Alert %}
|
|
{% from "components/icon.html" import Icon %}
|
|
{% from "components/modal.html" import Modal %}
|
|
{% from "components/text_input.html" import TextInput %}
|
|
|
|
{% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}
|
|
|
|
{% block application_content %}
|
|
|
|
{% set modalName = "newApplicationConfirmation" %}
|
|
{% include "fragments/flash.html" %}
|
|
|
|
<div class='subheading'>{{ 'portfolios.applications.settings_heading' | translate }}</div>
|
|
|
|
<new-application inline-template v-bind:initial-data='{{ form.data|tojson }}' modal-name='{{ modalName }}'>
|
|
<form method="POST" action="{{ url_for('portfolios.create_application', portfolio_id=portfolio.id) }}" v-on:submit="handleSubmit">
|
|
<div class="panel">
|
|
<div class="panel__content">
|
|
|
|
{% call Modal(name=modalName, dismissable=False) %}
|
|
<h1>Create application !{ name }</h1>
|
|
|
|
<p>
|
|
When you click <em>{{ 'portfolios.applications.create_button_text' | translate }}</em>, the environments
|
|
<span v-for="(environment, index) in environments">
|
|
<strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
|
|
</span>
|
|
will be created as individual cloud resource groups under <strong>!{ name }</strong> application.
|
|
</p>
|
|
|
|
<div class='action-group'>
|
|
<button autofocus type='submit' class='action-group__action usa-button' tabindex='0'>{{ 'portfolios.applications.create_button_text' | translate }}</button>
|
|
<button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
|
|
</div>
|
|
{% endcall %}
|
|
|
|
{% include "fragments/edit_application_form.html" %}
|
|
|
|
<div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
|
|
<div v-cloak v-for="title in errors" :key="title">
|
|
{{ Alert(message=None, level="error", vue_template=True) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application-list-item">
|
|
<header>
|
|
<h2 class="block-list__title">{{ 'portfolios.applications.environments_heading' | translate }}</h2>
|
|
<p>
|
|
{{ 'portfolios.applications.environments_description' | translate }}
|
|
</p>
|
|
</header>
|
|
|
|
<ul>
|
|
<li v-for="(environment, i) in environments" class="application-edit__env-list-item">
|
|
<div class="usa-input">
|
|
<label :for="'environment_names-' + i">Environment Name</label>
|
|
<input type="text" :id="'environment_names-' + i" v-model="environment.name" placeholder="e.g. Development, Staging, Production"/>
|
|
<input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
|
|
</div>
|
|
<button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class='application-edit__env-list-item__remover'>
|
|
{{ Icon('trash') }}
|
|
<span>Remove</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="block-list__footer">
|
|
<button v-on:click="addEnvironment" class="icon-link" tabindex="0" type="button">Add another environment</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-group">
|
|
<button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.create_button_text' | translate }}</button>
|
|
</div>
|
|
</form>
|
|
</new-application>
|
|
|
|
{% endblock %}
|