Ruderverein-Donau-Linz/rowt
1
1
Fork 1
Code Issues 54 Pull Requests Actions Packages Projects Wiki Activity

[TASK] add input group element with interaction
All checks were successful
CI/CD Pipeline / test (push) Successful in 14m49s
Details
CI/CD Pipeline / deploy-staging (push) Has been skipped
Details
CI/CD Pipeline / deploy-main (push) Has been skipped
Details

Browse Source
This commit is contained in:
Marie Birner 2025-05-02 17:24:40 +02:00
parent a73bbf059f
commit c47b1988b2
6 changed files with 109 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/main.ts
View File

@ -24,6 +24,7 @@ document.addEventListener("DOMContentLoaded", function () {
reloadPage();
setCurrentdate(<HTMLInputElement>document.querySelector("#departure"));
initDropdown();
editReadOnlyField();
});
function changeTheme() {
@ -40,6 +41,25 @@ function changeTheme() {
}
}
function editReadOnlyField() {
const editBtns = document.querySelectorAll(
'.edit-js'
);
if (editBtns) {
Array.prototype.forEach.call(editBtns, (btn: HTMLButtonElement) => {
btn.addEventListener("click", function () {
let wrapper = btn.parentElement;
let input = wrapper?.querySelector('input');
wrapper?.classList.toggle('editable')
input?.toggleAttribute('readonly');
if(!input?.hasAttribute('readonly')) input?.focus();
});
});
}
}
/***
* init javascript
* 1) detect native color scheme or use set theme in local storage

4
frontend/scss/components/_btns.scss
View File

@ -28,4 +28,8 @@
&[aria-pressed='true'] {
@apply outline outline-2 outline-offset-2 outline-primary-600 bg-primary-100 text-primary-950;
}
&-hidden {
@apply hidden;
}
}

9
frontend/scss/components/_important.scss
View File

@ -2,3 +2,12 @@
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
}
.rounded-l-none-important {
border-bottom-left-radius: 0px !important;
border-top-left-radius: 0px !important;
}
.rounded-none-important {
border-radius: 0px !important;
}

19
frontend/scss/components/_input.scss
View File

@ -2,6 +2,25 @@
@apply relative block w-full bg-white dark:bg-black border-0 py-1.5 px-2 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
}
.input-group {
@apply flex;
input[readonly] {
opacity: .7;
}
&.editable {
input[type="reset"],
input[type="submit"] {
@apply block;
}
button[type="button"] {
@apply hidden;
}
}
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;

92
templates/admin/user/view.html.tera
View File

@ -16,44 +16,23 @@
{% endif %}
</div>
<div class="py-3">
<ul>
<ul class="grid gap-3">
<li>
Mail: {{ user.mail }}
{% if allowed_to_edit %}
<details>
<summary>✏️</summary>
<form action="/admin/user/{{ user.id }}/change-mail" method="post">
{{ macros::input(label='Neue Mailadresse', name='mail', type="text", value=user.mail) }}
<input value="Ändern" type="submit" class="btn btn-primary ml-1" />
</form>
</details>
{% endif %}
<form action="/admin/user/{{ user.id }}/change-mail" method="post">
{{ macros::inputgroup(label='Mailadresse', name='mail', type="text", value=user.mail, readonly=not allowed_to_edit) }}
</form>
</li>
<li>
<form action="/admin/user/{{ user.id }}/change-phone" method="post">
{{ macros::inputgroup(label='Telefonnummer', name='phone', type="text", value=user.phone, readonly=not allowed_to_edit) }}
</form>
</li>
<li>
<form action="/admin/user/{{ user.id }}/change-nickname" method="post">
{{ macros::inputgroup(label='Spitzname', name='nickname', type="text", value=user.nickname, readonly=not allowed_to_edit) }}
</form>
</li>
<li>Notizen: to be replaced with activity :-)</li>
<li>
Telefon: {{ user.phone }}
{% if allowed_to_edit %}
<details>
<summary>✏️</summary>
<form action="/admin/user/{{ user.id }}/change-phone" method="post">
{{ macros::input(label='Neue Telefonnummer', name='phone', type="text", value=user.phone) }}
<input value="Ändern" type="submit" class="btn btn-primary ml-1" />
</form>
</details>
{% endif %}
</li>
<li>
Spitzname: {{ user.nickname }}
{% if allowed_to_edit %}
<details>
<summary>✏️</summary>
<form action="/admin/user/{{ user.id }}/change-nickname" method="post">
{{ macros::input(label='Neuer Spitzname', name='nickname', type="text", value=user.nickname) }}
<input value="Ändern" type="submit" class="btn btn-primary ml-1" />
</form>
</details>
{% endif %}
</li>
</ul>
</div>
<div class="py-3">
@ -147,44 +126,23 @@
<h2 class="h2">Vereinsmitglied</h2>
<div class="mx-2 divide-y divide-gray-200 dark:divide-primary-600">
<div class="py-3">
<ul class="list-disc ms-4">
<ul class="grid gap-3">
<li>
Mitglied seit: {{ user.member_since_date }}
{% if allowed_to_edit %}
<details>
<summary>✏️</summary>
<form action="/admin/user/{{ user.id }}/change-member-since" method="post">
{{ macros::input(label='Mitglied seit', name='member_since', type="date", value=user.member_since_date) }}
<input value="Ändern" type="submit" class="btn btn-primary ml-1" />
</form>
</details>
{% endif %}
<form action="/admin/user/{{ user.id }}/change-member-since" method="post">
{{ macros::inputgroup(label='Mitglied seit', name='member_since', type="date", value=user.member_since_date, readonly=not allowed_to_edit) }}
</form>
</li>
<li>
Geburtsdatum: {{ user.birthdate }}
{% if allowed_to_edit %}
<details>
<summary>✏️</summary>
<form action="/admin/user/{{ user.id }}/change-birthdate" method="post">
{{ macros::input(label='Geburtstag', name='birthdate', type="date", value=user.birthdate) }}
<input value="Ändern" type="submit" class="btn btn-primary ml-1" />
</form>
</details>
{% endif %}
<form action="/admin/user/{{ user.id }}/change-birthdate" method="post">
{{ macros::inputgroup(label='Geburtsdatum', name='birthdate', type="date", value=user.birthdate, readonly=not allowed_to_edit) }}
</form>
</li>
<li>
Adresse: {{ user.address }}
{% if allowed_to_edit %}
<details>
<summary>✏️</summary>
<form action="/admin/user/{{ user.id }}/change-address" method="post">
{{ macros::input(label='Neue Adresse', name='address', type="text", value=user.address) }}
<input value="Ändern" type="submit" class="btn btn-primary ml-1" />
</form>
</details>
{% endif %}
<form action="/admin/user/{{ user.id }}/change-address" method="post">
{{ macros::inputgroup(label='Adresse', name='address', type="text", value=user.address, readonly=not allowed_to_edit) }}
</form>
</li>
<li>
<li>
Familie:
{% for family in families %}
{% if user.family_id == family.id %}{{ family.names }}{% endif %}

33
templates/includes/macros.html.tera
View File

@ -174,9 +174,40 @@ function setChoiceByLabel(choicesInstance, label) {
{% if autofocus %}autofocus{% endif %}
{% if accept %}accept="{{ accept }}"{% endif %}
{% if pattern %}pattern="{{ pattern }}"{% endif %}
{% if readonly %}readonly{% endif %}>
{% if readonly %}readonly{% endif %}/>
</div>
{% endmacro input %}
{% macro inputgroup(label, name, type, required=false, class='', value='', min='', hide_label=false, id='', autofocus=false, wrapper_class='', pattern='', readonly=false, accept='') %}
<div class="{{ wrapper_class }}">
<label for="{{ name }}"
class="{% if hide_label %} sr-only {% else %} text-sm text-gray-600 dark:text-white {% endif %}">
{{ label }}
</label>
<div class="input-group">
<input {% if type=='datetime-local' %}onclick='if (!this.value) setCurrentdate(this)'{% endif %}
{% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %}
name="{{ name }}"
type="{{ type }}"
{% if required %}required{% endif %}
value="{{ value }}"
class="input {% if readonly %}rounded-md{% else %}rounded-l-md{% endif %} {{ class }}"
placeholder="{% if hide_label %}{{ label }}{% endif %}"
{% if min is defined %}min="{{ min }}"{% endif %}
{% if autofocus %}autofocus{% endif %}
{% if accept %}accept="{{ accept }}"{% endif %}
{% if pattern %}pattern="{{ pattern }}"{% endif %}
readonly/>
{% if allowed_to_edit %}
<button type="button" class="btn btn-primary rounded-l-none-important edit-js">Ändern</button>
<input value="x" type="reset" class="edit-js btn btn-alert btn-hidden rounded-none-important"/>
<input value="💾" type="submit" class="btn btn-primary btn-hidden rounded-l-none-important" />
{% endif %}
</div>
</div>
{% endmacro inputgroup %}
{% macro checkbox(label, name, id='', checked=false, class='', disabled=false, readonly=false) %}
<label for="{{ name }}{{ id }}"
class="flex items-center cursor-pointer text-black dark:text-white hover:text-gray-900 dark:hover:text-gray-100 {{ class }}">