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:
parent
0bde431a70
commit
2b06e281ae
15
js/components/delete_confirmation.js
Normal file
15
js/components/delete_confirmation.js
Normal file
@ -0,0 +1,15 @@
|
||||
export default {
|
||||
name: 'delete-confirmation',
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
deleteText: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
valid: function() {
|
||||
return this.deleteText.toLowerCase() === 'delete'
|
||||
},
|
||||
},
|
||||
}
|
@ -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() {
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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">
|
||||
|
||||
</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 %}
|
||||
|
@ -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.
|
||||
|
Loading…
x
Reference in New Issue
Block a user