Convert chart of accounts configuration page to Tailwind CSS

This commit is contained in:
RunasSudo 2024-04-04 17:28:28 +11:00
parent 65ed39c02b
commit 27c6087a53
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A

View File

@ -1,5 +1,5 @@
{# DrCr: Web-based double-entry bookkeeping framework {# DrCr: Web-based double-entry bookkeeping framework
Copyright (C) 2022–2023 Lee Yingtong Li (RunasSudo) Copyright (C) 2022–2024 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by it under the terms of the GNU Affero General Public License as published by
@ -15,16 +15,18 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
#} #}
{% extends 'base.html' %} {% extends 'base_tailwind.html' %}
{% block title %}Chart of accounts{% endblock %} {% block title %}Chart of accounts{% endblock %}
{% block content %} {% block content %}
<h1 class="h2 mt-4 mb-2">Chart of accounts</h1> <h1 class="text-3xl text-gray-900">
Chart of accounts
</h1>
<form method="POST"> <form method="POST">
<div class="d-flex py-2 bg-white sticky-top"> <div class="my-2 py-2 flex gap-x-2 items-baseline bg-white sticky top-0">
<div class="me-2"> <div>
<select class="form-select" name="kind"> <select class="mt-2 block w-full border-0 py-1 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600" name="kind">
{% for plugin_name, plugin_account_kinds in account_kinds_by_plugin.items() %} {% for plugin_name, plugin_account_kinds in account_kinds_by_plugin.items() %}
<optgroup label="{{ plugin_name }}"> <optgroup label="{{ plugin_name }}">
{% for account_kind in plugin_account_kinds %} {% for account_kind in plugin_account_kinds %}
@ -35,26 +37,26 @@
</select> </select>
</div> </div>
<div> <div>
<button type="submit" class="btn btn-primary" formaction="{{ url_for('account_add_kind') }}">Add kind</button> <button formaction="{{ url_for('account_add_kind') }}" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700" type="submit">Add type</button>
</div> </div>
</div> </div>
<table class="table"> <table class="min-w-full">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
<th>Account</th> <th class="py-0.5 text-gray-900 font-semibold text-start">Account</th>
<th>Associated types</th> <th class="py-0.5 text-gray-900 font-semibold text-start">Associated types</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for account in accounts %} {% for account in accounts %}
<tr> <tr class="border-t border-gray-300">
<td><input type="checkbox" name="sel-account" value="{{ account }}"></td> <td class="py-0.5 text-gray-900 align-baseline"><input class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600 -mt-0.5" type="checkbox" name="sel-account" value="{{ account }}"></td>
<td>{{ account }}</td> <td class="py-0.5 text-gray-900 align-baseline">{{ account }}</td>
<td> <td class="py-0.5 text-gray-900 align-baseline">
{% if account in account_configurations %} {% if account in account_configurations %}
<ul class="mb-0"> <ul class="list-disc ml-5">
{% for account_configuration in account_configurations[account] %} {% for account_configuration in account_configurations[account] %}
<li>{{ account_kinds_map[account_configuration.kind] }}</li> <li>{{ account_kinds_map[account_configuration.kind] }}</li>
{% endfor %} {% endfor %}