Rearrange create transaction page
ci/woodpecker/push/woodpecker Pipeline was successful
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details
This commit is contained in:
jChenvan
parent
e3029fcb23
commit
4c1fb3bda6
|
|
@ -21,6 +21,7 @@
|
|||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
{% block styles %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Skip link for keyboard accessibility -->
|
||||
|
|
@ -94,9 +95,9 @@
|
|||
</footer>
|
||||
</div>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/hotkeys.js') }}"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
<script nonce="{{ csp_nonce() }}">
|
||||
// Add ARIA attributes to dynamically created elements
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,27 @@
|
|||
|
||||
{% block title %}{% if transaction %}Edit{% else %}New{% endif %} Transaction - Project Ploughshares{% endblock %}
|
||||
|
||||
{% block styles %}
|
||||
<style>
|
||||
#sources {
|
||||
background-color: gray;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.empty-message > * {
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-5">
|
||||
<div class="card">
|
||||
|
|
@ -11,146 +32,165 @@
|
|||
<div class="card-body">
|
||||
<form action="{{ url_for('create_transaction') if not transaction else url_for('update_transaction', id=transaction.id) }}" method="post" class="needs-validation" novalidate>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="transaction_type">Transaction Type</label>
|
||||
<input type="text" class="form-control" id="transaction_type" name="transaction_type" value="{{ transaction.transaction_type if transaction else '' }}" list="transaction_type_options" required>
|
||||
<datalist id="transaction_type_options">
|
||||
<option value="Grant">
|
||||
<option value="Contract">
|
||||
<option value="Donation">
|
||||
<option value="Investment">
|
||||
<option value="Loan">
|
||||
<option value="Subsidy">
|
||||
<option value="Tax Credit">
|
||||
<option value="Rebate">
|
||||
</datalist>
|
||||
<div class="invalid-feedback">Please enter a transaction type.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="company_division">Company Division</label>
|
||||
<input type="text" class="form-control" id="company_division" name="company_division" value="{{ transaction.company_division if transaction else '' }}" required>
|
||||
<div class="invalid-feedback">Please enter a company division.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address_1">Address 1</label>
|
||||
<input type="text" class="form-control" id="address_1" name="address_1" value="{{ transaction.address_1 if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address_2">Address 2</label>
|
||||
<input type="text" class="form-control" id="address_2" name="address_2" value="{{ transaction.address_2 if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city" name="city" value="{{ transaction.city if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="province">Province</label>
|
||||
<select class="form-select" id="province" name="province">
|
||||
<option value="" {% if not transaction or not transaction.province %}selected{% endif %}>Select a province</option>
|
||||
<option value="AB" {% if transaction and transaction.province == 'AB' %}selected{% endif %}>Alberta</option>
|
||||
<option value="BC" {% if transaction and transaction.province == 'BC' %}selected{% endif %}>British Columbia</option>
|
||||
<option value="MB" {% if transaction and transaction.province == 'MB' %}selected{% endif %}>Manitoba</option>
|
||||
<option value="NB" {% if transaction and transaction.province == 'NB' %}selected{% endif %}>New Brunswick</option>
|
||||
<option value="NL" {% if transaction and transaction.province == 'NL' %}selected{% endif %}>Newfoundland and Labrador</option>
|
||||
<option value="NS" {% if transaction and transaction.province == 'NS' %}selected{% endif %}>Nova Scotia</option>
|
||||
<option value="NT" {% if transaction and transaction.province == 'NT' %}selected{% endif %}>Northwest Territories</option>
|
||||
<option value="NU" {% if transaction and transaction.province == 'NU' %}selected{% endif %}>Nunavut</option>
|
||||
<option value="ON" {% if transaction and transaction.province == 'ON' %}selected{% endif %}>Ontario</option>
|
||||
<option value="PE" {% if transaction and transaction.province == 'PE' %}selected{% endif %}>Prince Edward Island</option>
|
||||
<option value="QC" {% if transaction and transaction.province == 'QC' %}selected{% endif %}>Quebec</option>
|
||||
<option value="SK" {% if transaction and transaction.province == 'SK' %}selected{% endif %}>Saskatchewan</option>
|
||||
<option value="YT" {% if transaction and transaction.province == 'YT' %}selected{% endif %}>Yukon</option>
|
||||
<option value="Other" {% if transaction and transaction.province == 'Other' %}selected{% endif %}>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="region">Region</label>
|
||||
<input type="text" class="form-control" id="region" name="region" value="{{ transaction.region if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="postal_code">Postal Code</label>
|
||||
<input type="text" class="form-control" id="postal_code" name="postal_code" value="{{ transaction.postal_code if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="is_primary" name="is_primary" {% if transaction and transaction.is_primary %}checked{% endif %}>
|
||||
<label class="form-check-label" for="is_primary">Is Primary</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="source_date">Source Date</label>
|
||||
<input type="date" class="form-control" id="source_date" name="source_date" value="{{ transaction.source_date.strftime('%Y-%m-%d') if transaction and transaction.source_date else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="source_description">Source Description</label>
|
||||
<textarea class="form-control" id="source_description" name="source_description" rows="3">{{ transaction.source_description if transaction else '' }}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="grant_type">Grant Type</label>
|
||||
<input type="text" class="form-control" id="grant_type" name="grant_type" value="{{ transaction.grant_type if transaction else '' }}" list="grant_type_options">
|
||||
<datalist id="grant_type_options">
|
||||
<option value="Research">
|
||||
<option value="Development">
|
||||
<option value="Innovation">
|
||||
<option value="Education">
|
||||
<option value="Infrastructure">
|
||||
<option value="Healthcare">
|
||||
<option value="Environmental">
|
||||
<option value="Social">
|
||||
<option value="Cultural">
|
||||
<option value="Economic">
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea class="form-control" id="description" name="description" rows="3">{{ transaction.description if transaction else '' }}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="amount">Amount</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" step="0.01" min="0" class="form-control" id="amount" name="amount" value="{{ transaction.amount if transaction else '' }}" placeholder="0.00">
|
||||
<div>
|
||||
<h4>Transaction Info</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="transaction_type">Transaction Type</label>
|
||||
<input type="text" class="form-control" id="transaction_type" name="transaction_type" value="{{ transaction.transaction_type if transaction else '' }}" list="transaction_type_options" required>
|
||||
<datalist id="transaction_type_options">
|
||||
<option value="Grant">
|
||||
<option value="Contract">
|
||||
<option value="Donation">
|
||||
<option value="Investment">
|
||||
<option value="Loan">
|
||||
<option value="Subsidy">
|
||||
<option value="Tax Credit">
|
||||
<option value="Rebate">
|
||||
</datalist>
|
||||
<div class="invalid-feedback">Please enter a transaction type.</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="is_primary" name="is_primary" {% if transaction and transaction.is_primary %}checked{% endif %}>
|
||||
<label class="form-check-label" for="is_primary">Is Primary</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="amount">Amount</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" step="0.01" min="0" class="form-control" id="amount" name="amount" value="{{ transaction.amount if transaction else '' }}" placeholder="0.00">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="recipient">Recipient</label>
|
||||
<input type="text" class="form-control" id="recipient" name="recipient" value="{{ transaction.recipient if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="commodity_class">Commodity Class</label>
|
||||
<input type="text" class="form-control" id="commodity_class" name="commodity_class" value="{{ transaction.commodity_class if transaction else '' }}" list="commodity_class_options">
|
||||
<datalist id="commodity_class_options">
|
||||
<option value="Agricultural">
|
||||
<option value="Automotive">
|
||||
<option value="Chemical">
|
||||
<option value="Construction">
|
||||
<option value="Defense">
|
||||
<option value="Electronics">
|
||||
<option value="Energy">
|
||||
<option value="Financial">
|
||||
<option value="Food">
|
||||
<option value="Healthcare">
|
||||
<option value="Industrial">
|
||||
<option value="Information Technology">
|
||||
<option value="Manufacturing">
|
||||
<option value="Mining">
|
||||
<option value="Pharmaceutical">
|
||||
<option value="Retail">
|
||||
<option value="Telecommunications">
|
||||
<option value="Transportation">
|
||||
<option value="Utilities">
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contract_number">Contract Number</label>
|
||||
<input type="text" class="form-control" id="contract_number" name="contract_number" value="{{ transaction.contract_number if transaction else '' }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="source_date">Source Date</label>
|
||||
<input type="date" class="form-control" id="source_date" name="source_date" value="{{ transaction.source_date.strftime('%Y-%m-%d') if transaction and transaction.source_date else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="source_description">Source Description</label>
|
||||
<textarea class="form-control" id="source_description" name="source_description" rows="3">{{ transaction.source_description if transaction else '' }}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="grant_type">Grant Type</label>
|
||||
<input type="text" class="form-control" id="grant_type" name="grant_type" value="{{ transaction.grant_type if transaction else '' }}" list="grant_type_options">
|
||||
<datalist id="grant_type_options">
|
||||
<option value="Research">
|
||||
<option value="Development">
|
||||
<option value="Innovation">
|
||||
<option value="Education">
|
||||
<option value="Infrastructure">
|
||||
<option value="Healthcare">
|
||||
<option value="Environmental">
|
||||
<option value="Social">
|
||||
<option value="Cultural">
|
||||
<option value="Economic">
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea class="form-control" id="description" name="description" rows="3">{{ transaction.description if transaction else '' }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="recipient">Recipient</label>
|
||||
<input type="text" class="form-control" id="recipient" name="recipient" value="{{ transaction.recipient if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="commodity_class">Commodity Class</label>
|
||||
<input type="text" class="form-control" id="commodity_class" name="commodity_class" value="{{ transaction.commodity_class if transaction else '' }}" list="commodity_class_options">
|
||||
<datalist id="commodity_class_options">
|
||||
<option value="Agricultural">
|
||||
<option value="Automotive">
|
||||
<option value="Chemical">
|
||||
<option value="Construction">
|
||||
<option value="Defense">
|
||||
<option value="Electronics">
|
||||
<option value="Energy">
|
||||
<option value="Financial">
|
||||
<option value="Food">
|
||||
<option value="Healthcare">
|
||||
<option value="Industrial">
|
||||
<option value="Information Technology">
|
||||
<option value="Manufacturing">
|
||||
<option value="Mining">
|
||||
<option value="Pharmaceutical">
|
||||
<option value="Retail">
|
||||
<option value="Telecommunications">
|
||||
<option value="Transportation">
|
||||
<option value="Utilities">
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contract_number">Contract Number</label>
|
||||
<input type="text" class="form-control" id="contract_number" name="contract_number" value="{{ transaction.contract_number if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="comments">Comments</label>
|
||||
<textarea class="form-control" id="comments" name="comments" rows="3">{{ transaction.comments if transaction else '' }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Seller Info</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="company_division">Company/Division</label>
|
||||
<input type="text" class="form-control" id="company_division" name="company_division" value="{{ transaction.company_division if transaction else '' }}" required>
|
||||
<div class="invalid-feedback">Please enter a company division.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address_1">Address 1</label>
|
||||
<input type="text" class="form-control" id="address_1" name="address_1" value="{{ transaction.address_1 if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address_2">Address 2</label>
|
||||
<input type="text" class="form-control" id="address_2" name="address_2" value="{{ transaction.address_2 if transaction else '' }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="province">Province</label>
|
||||
<select class="form-select" id="province" name="province">
|
||||
<option value="" {% if not transaction or not transaction.province %}selected{% endif %}>Select a province</option>
|
||||
<option value="AB" {% if transaction and transaction.province == 'AB' %}selected{% endif %}>Alberta</option>
|
||||
<option value="BC" {% if transaction and transaction.province == 'BC' %}selected{% endif %}>British Columbia</option>
|
||||
<option value="MB" {% if transaction and transaction.province == 'MB' %}selected{% endif %}>Manitoba</option>
|
||||
<option value="NB" {% if transaction and transaction.province == 'NB' %}selected{% endif %}>New Brunswick</option>
|
||||
<option value="NL" {% if transaction and transaction.province == 'NL' %}selected{% endif %}>Newfoundland and Labrador</option>
|
||||
<option value="NS" {% if transaction and transaction.province == 'NS' %}selected{% endif %}>Nova Scotia</option>
|
||||
<option value="NT" {% if transaction and transaction.province == 'NT' %}selected{% endif %}>Northwest Territories</option>
|
||||
<option value="NU" {% if transaction and transaction.province == 'NU' %}selected{% endif %}>Nunavut</option>
|
||||
<option value="ON" {% if transaction and transaction.province == 'ON' %}selected{% endif %}>Ontario</option>
|
||||
<option value="PE" {% if transaction and transaction.province == 'PE' %}selected{% endif %}>Prince Edward Island</option>
|
||||
<option value="QC" {% if transaction and transaction.province == 'QC' %}selected{% endif %}>Quebec</option>
|
||||
<option value="SK" {% if transaction and transaction.province == 'SK' %}selected{% endif %}>Saskatchewan</option>
|
||||
<option value="YT" {% if transaction and transaction.province == 'YT' %}selected{% endif %}>Yukon</option>
|
||||
<option value="Other" {% if transaction and transaction.province == 'Other' %}selected{% endif %}>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city" name="city" value="{{ transaction.city if transaction else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="postal_code">Postal Code</label>
|
||||
<input type="text" class="form-control" id="postal_code" name="postal_code" value="{{ transaction.postal_code if transaction else '' }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Sources <button type="button" class="btn btn-primary new-source">+</button></h4>
|
||||
<div id="sources">
|
||||
<div class="empty-message">
|
||||
<h3>No Documents</h3>
|
||||
<p>Press "+" to add some</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary mt-3">Submit</button>
|
||||
<a href="{{ url_for('index') }}" class="btn btn-secondary mt-3">Cancel</a>
|
||||
|
|
@ -158,4 +198,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script nonce="{{ csp_nonce }}">
|
||||
console.log("COOL");
|
||||
const newSourceButton = document.querySelector(".new-source");
|
||||
const emptyMessage = document.querySelector(".empty-message");
|
||||
|
||||
newSourceButton.addEventListener("click", () => {
|
||||
emptyMessage.style.display = "none";
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue