confirmation modal for deleting an application

- 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

View File

@ -0,0 +1,15 @@
export default {
name: 'delete-confirmation',
data: function() {
return {
deleteText: '',
}
},
computed: {
valid: function() {
return this.deleteText.toLowerCase() === 'delete'
},
},
}

View File

@ -35,6 +35,7 @@ import DateSelector from './components/date_selector'
import SidenavToggler from './components/sidenav_toggler'
import KoReview from './components/forms/ko_review'
import BaseForm from './components/forms/base_form'
import DeleteConfirmation from './components/delete_confirmation'
Vue.config.productionTip = false
@ -72,6 +73,7 @@ const app = new Vue({
SidenavToggler,
KoReview,
BaseForm,
DeleteConfirmation,
},
mounted: function() {

View File

@ -213,12 +213,6 @@
border-top: 0;
padding: 3 * $gap 2 * $gap;
.usa-button-secondary {
color: $color-red;
background-color: $color-red-lightest;
box-shadow: inset 0 0 0 1px $color-red;
}
.usa-button-disabled {
color: $color-gray-medium;
background-color: $color-gray-lightest;
@ -271,10 +265,6 @@
height: 4rem;
}
.usa-button-danger {
background: $color-red;
}
select {
padding-left: 1.2rem
}

View File

@ -11,3 +11,23 @@ button,
opacity: 0.75;
}
}
.button-danger {
background: $color-red;
&:hover {
background-color: $color-red-darkest;
}
}
.button-danger-outline, input[type="button"].button-danger-outline {
color: $color-red;
background-color: $color-red-lightest;
box-shadow: inset 0 0 0 1px $color-red;
&:hover {
color: white;
background-color: $color-red-darkest;
box-shadow: inset 0 0 0 1px $color-red-darkest;
}
}

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>

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 %}

View File

@ -43,6 +43,7 @@ common:
contracting_officer: Contracting Officer
security_officer: Security Officer
contracting_officer_representative: Contracting Officer Representative
delete_confirm: "Please type the word DELETE to confirm:"
components:
modal:
close: Close
@ -599,6 +600,12 @@ portfolios:
name: Name
members: Members
add_environment: Add New Environment
delete:
button: Delete Application
header: Are you sure you want to delete this application?
alert:
title: Warning! This action is permanent.
message: You will lose access to this application and all of its reporting and metrics tools. The activity log will be retained.
admin:
portfolio_members_title: Portfolio members
portfolio_members_subheading: These members have different levels of access to the portfolio.