pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

confirmation modal for deleting an application

Browse Source 
- adds delete-confirmation Vue component
- refactors some button styles to make them globally available
This commit is contained in:
dandds
2019-04-10 13:43:29 -04:00
parent 0bde431a70
commit 2b06e281ae
7 changed files with 136 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/fragments/admin/members_edit.html
View File

@@ -12,7 +12,7 @@
{% elif ppoc %}
{% set archive_button_class = 'usa-button-disabled' %}
{% else %}
{% set archive_button_class = 'usa-button-secondary' %}
{% set archive_button_class = 'button-danger-outline' %}
{% endif %}
</td>

91
templates/portfolios/applications/edit.html
View File

@@ -1,7 +1,9 @@
{% extends "portfolios/applications/base.html" %}
{% from "components/alert.html" import Alert %}
{% from "components/text_input.html" import TextInput %}
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}
@@ -14,6 +16,58 @@
<div class="panel__content">
{% include "fragments/applications/edit_application_form.html" %}
{{ form.csrf_token }}
<p>
{{ "fragments.edit_application_form.explain" | translate }}
</p>
<div class="form-row">
<div class="form-col form-col--half">
{{ TextInput(form.name) }}
</div>
<div class="form-col form-col--half">
{% if user_can(permissions.DELETE_APPLICATION) %}
<div class="usa-input">
<label for="delete-application">
<div class="usa-input__title">
&nbsp;
</div>
</label>
<input
id="delete-application"
type="button"
v-on:click="openModal('delete-application')"
class='usa-button button-danger-outline'
value="{{ "portfolios.applications.delete.button" | translate }}"
>
</div>
{% endif %}
</div>
</div>
<div class="form-row">
<div class="form-col form-col--half">
{{ TextInput(form.description, paragraph=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>
{% for environment in application.environments %}
<li class="application-edit__env-list-item">
<div class="usa-input input--disabled">
<label>Environment Name</label>
<input type="text" disabled value="{{ environment.name }}" readonly />
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="panel__footer">
@@ -36,5 +90,42 @@
</div>
</div>
</div>
{% if user_can(permissions.DELETE_APPLICATION) %}
{% call Modal(name="delete-application") %}
<h1>{{ "portfolios.applications.delete.header" | translate }}</h1>
{{
Alert(
title="portfolios.applications.delete.alert.title" | translate,
message="portfolios.applications.delete.alert.message" | translate,
level="warning"
)
}}
<delete-confirmation inline-template>
<div>
<div class="usa-input">
<label for="deleted-text">
<span class="usa-input__help">
{{ "common.delete_confirm" | translate }}
</span>
</label>
<input id="deleted-text" v-model="deleteText">
</div>
<div class="action-group">
<form method="POST" action="{{ url_for('portfolios.delete_application', portfolio_id=portfolio.id, application_id=application.id) }}">
{{ form.csrf_token }}
<button class="usa-button button-danger" v-bind:disabled="!valid">
{{ "portfolios.applications.delete.button" | translate }}
</button>
</form>
<div class="action-group">
<a v-on:click="deleteText = ''; $root.closeModal('delete-application')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
</div>
</div>
</div>
</delete-confirmation>
{% endcall %}
{% endif %}
{% endblock %}