Alex/GoMembership
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

frontend moved select fields to themed coloring, added permissions to usereditmodal

Browse Source
This commit is contained in:
Alex
2025-02-20 10:16:48 +01:00
parent d5a8b16e43
commit 03b3683b63
4 changed files with 56 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/components/InputField.svelte
View File

@@ -38,7 +38,7 @@
export let readonly = false; export let readonly = false;
/** @type {string} */ /** @type {string} */
export let backgroundColor = '--surface0'; // New prop for background color export let backgroundColor = '--surface0';
/** /**
* @param {Event} event - The input event * @param {Event} event - The input event
@@ -110,7 +110,7 @@
$: error = validateField(name, value, required); $: error = validateField(name, value, required);
$: selectedOption = options.find((option) => option.value == value); $: selectedOption = options.find((option) => option.value == value);
$: selectedColor = selectedOption ? selectedOption.color : ''; $: selectedColor = selectedOption ? `var(${selectedOption.color})` : '';
</script> </script>
<div <div
@@ -143,6 +143,7 @@
{required} {required}
class="input select" class="input select"
style={selectedColor ? `color: ${selectedColor};` : ''} style={selectedColor ? `color: ${selectedColor};` : ''}
disabled={readonly}
> >
{#each options as option} {#each options as option}
<option value={option.value}>{option.label}</option> <option value={option.value}>{option.label}</option>
@@ -270,6 +271,7 @@
.select { .select {
padding-right: 1.5em; padding-right: 1.5em;
background-color: var(--surface0); background-color: var(--surface0);
font-weight: bold;
} }
.input-error-container { .input-error-container {
display: flex; display: flex;

80
frontend/src/lib/components/UserEditForm.svelte
View File

@@ -70,6 +70,9 @@
/** @type {App.Locals['user'] | null} */ /** @type {App.Locals['user'] | null} */
export let user; export let user;
/** @type {Number} */
export let role_id;
/** @type {App.Locals['user'] } */ /** @type {App.Locals['user'] } */
let localUser; let localUser;
@@ -94,29 +97,28 @@
export let licence_categories; export let licence_categories;
const userStatusOptions = [ const userStatusOptions = [
{ value: 1, label: $t('userStatus.1'), color: '#b1b1b1' }, // Grey for "Nicht verifiziert" { value: 1, label: $t('userStatus.1'), color: '--subtext1' }, // Grey for "Nicht verifiziert"
{ value: 2, label: $t('userStatus.2'), color: '#90EE90' }, // Light green for "Verifiziert" { value: 2, label: $t('userStatus.2'), color: '--light-green' }, // Light green for "Verifiziert"
{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv" { value: 3, label: $t('userStatus.3'), color: '--green' }, // Green for "Aktiv"
{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv" { value: 4, label: $t('userStatus.4'), color: '--pink' }, // Pink for "Passiv"
{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert" { value: 5, label: $t('userStatus.5'), color: '--red' } // Red for "Deaktiviert"
]; ];
const userRoleOptions = [ const userRoleOptions = [
{ value: 0, label: $t('userRole.0'), color: '#b1b1b1' }, // Grey for "Mitglied" { value: 0, label: $t('userRole.0'), color: '--subtext1' }, // Grey for "Nicht verifiziert"
{ value: 1, label: $t('userRole.1'), color: '#00bc00' }, // Green for "Betrachter" { value: 1, label: $t('userRole.1'), color: '--light-green' }, // Light green for "Verifiziert"
{ value: 4, label: $t('userRole.4'), color: '#FFC0CB' }, // Pink for "Bearbeiter" { value: 4, label: $t('userRole.4'), color: '--green' }, // Green for "Aktiv"
{ value: 8, label: $t('userRole.8'), color: '#FF4646' } // Red for "Admin" { value: 8, label: $t('userRole.8'), color: '--pink' } // Pink for "Passiv"
]; ];
const membershipStatusOptions = [ const membershipStatusOptions = [
{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv" { value: 3, label: $t('userStatus.3'), color: '--green' }, // Green for "Aktiv"
{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv" { value: 4, label: $t('userStatus.4'), color: '--pink' }, // Pink for "Passiv"
{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert" { value: 5, label: $t('userStatus.5'), color: '--red' } // Red for "Deaktiviert"
]; ];
const licenceStatusOptions = [ const licenceStatusOptions = [
{ value: 1, label: $t('userStatus.1'), color: '#b1b1b1' }, // Grey for "Nicht verifiziert" { value: 1, label: $t('userStatus.1'), color: '--subtext1' }, // Grey for "Nicht verifiziert"
{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv" { value: 3, label: $t('userStatus.3'), color: '--green' }, // Green for "Aktiv"
{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv" { value: 4, label: $t('userStatus.4'), color: '--pink' }, // Pink for "Passiv"
{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert" { value: 5, label: $t('userStatus.5'), color: '--red' } // Red for "Deaktiviert"
]; ];
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -211,13 +213,6 @@
{/each} {/each}
{/if} {/if}
<input
type="hidden"
hidden
name="user[profile_picture]"
bind:value={localUser.profile_picture}
/>
<div class="button-container"> <div class="button-container">
{#each TABS as tab} {#each TABS as tab}
<button <button
@@ -237,6 +232,7 @@
label={$t('status')} label={$t('status')}
bind:value={localUser.status} bind:value={localUser.status}
options={userStatusOptions} options={userStatusOptions}
readonly={role_id === 0}
/> />
{#if localUser.role_id === 8} {#if localUser.role_id === 8}
<InputField <InputField
@@ -269,6 +265,7 @@
bind:value={localUser.first_name} bind:value={localUser.first_name}
placeholder={$t('placeholder.first_name')} placeholder={$t('placeholder.first_name')}
required={true} required={true}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[last_name]" name="user[last_name]"
@@ -276,6 +273,7 @@
bind:value={localUser.last_name} bind:value={localUser.last_name}
placeholder={$t('placeholder.last_name')} placeholder={$t('placeholder.last_name')}
required={true} required={true}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[company]" name="user[company]"
@@ -304,6 +302,7 @@
label={$t('dateofbirth')} label={$t('dateofbirth')}
bind:value={localUser.dateofbirth} bind:value={localUser.dateofbirth}
placeholder={$t('placeholder.dateofbirth')} placeholder={$t('placeholder.dateofbirth')}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[address]" name="user[address]"
@@ -323,16 +322,18 @@
bind:value={localUser.city} bind:value={localUser.city}
placeholder={$t('placeholder.city')} placeholder={$t('placeholder.city')}
/> />
<InputField {#if localUser.role_id > 0}
name="user[notes]" <InputField
type="textarea" name="user[notes]"
label={$t('notes')} type="textarea"
bind:value={localUser.notes} label={$t('notes')}
placeholder={$t('placeholder.notes', { bind:value={localUser.notes}
values: { name: localUser.first_name || '' } placeholder={$t('placeholder.notes', {
})} values: { name: localUser.first_name || '' }
rows={10} })}
/> rows={10}
/>
{/if}
</div> </div>
<div class="tab-content" style="display: {activeTab === 'licence' ? 'block' : 'none'}"> <div class="tab-content" style="display: {activeTab === 'licence' ? 'block' : 'none'}">
<InputField <InputField
@@ -341,6 +342,7 @@
label={$t('status')} label={$t('status')}
bind:value={localUser.licence.status} bind:value={localUser.licence.status}
options={licenceStatusOptions} options={licenceStatusOptions}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[licence][number]" name="user[licence][number]"
@@ -349,6 +351,7 @@
bind:value={localUser.licence.number} bind:value={localUser.licence.number}
placeholder={$t('placeholder.licence_number')} placeholder={$t('placeholder.licence_number')}
toUpperCase={true} toUpperCase={true}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[licence][issued_date]" name="user[licence][issued_date]"
@@ -356,6 +359,7 @@
label={$t('issued_date')} label={$t('issued_date')}
bind:value={localUser.licence.issued_date} bind:value={localUser.licence.issued_date}
placeholder={$t('placeholder.issued_date')} placeholder={$t('placeholder.issued_date')}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[licence][expiration_date]" name="user[licence][expiration_date]"
@@ -363,12 +367,14 @@
label={$t('expiration_date')} label={$t('expiration_date')}
bind:value={localUser.licence.expiration_date} bind:value={localUser.licence.expiration_date}
placeholder={$t('placeholder.expiration_date')} placeholder={$t('placeholder.expiration_date')}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[licence][country]" name="user[licence][country]"
label={$t('country')} label={$t('country')}
bind:value={localUser.licence.country} bind:value={localUser.licence.country}
placeholder={$t('placeholder.issuing_country')} placeholder={$t('placeholder.issuing_country')}
readonly={role_id === 0}
/> />
<div class="licence-categories"> <div class="licence-categories">
<h3>{$t('licence_categories')}</h3> <h3>{$t('licence_categories')}</h3>
@@ -407,6 +413,7 @@
label={$t('status')} label={$t('status')}
bind:value={localUser.membership.status} bind:value={localUser.membership.status}
options={membershipStatusOptions} options={membershipStatusOptions}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[membership][subscription_model][name]" name="user[membership][subscription_model][name]"
@@ -414,6 +421,7 @@
label={$t('subscription.subscription')} label={$t('subscription.subscription')}
bind:value={localUser.membership.subscription_model.name} bind:value={localUser.membership.subscription_model.name}
options={subscriptionModelOptions} options={subscriptionModelOptions}
readonly={role_id === 0}
/> />
<div class="subscription-info"> <div class="subscription-info">
<div class="subscription-column"> <div class="subscription-column">
@@ -457,6 +465,7 @@
label={$t('start')} label={$t('start')}
bind:value={localUser.membership.start_date} bind:value={localUser.membership.start_date}
placeholder={$t('placeholder.start_date')} placeholder={$t('placeholder.start_date')}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[membership][end_date]" name="user[membership][end_date]"
@@ -464,6 +473,7 @@
label={$t('end')} label={$t('end')}
bind:value={localUser.membership.end_date} bind:value={localUser.membership.end_date}
placeholder={$t('placeholder.end_date')} placeholder={$t('placeholder.end_date')}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[membership][parent_member_id]" name="user[membership][parent_member_id]"
@@ -471,6 +481,7 @@
label={$t('parent_member_id')} label={$t('parent_member_id')}
bind:value={localUser.membership.parent_member_id} bind:value={localUser.membership.parent_member_id}
placeholder={$t('placeholder.parent_member_id')} placeholder={$t('placeholder.parent_member_id')}
readonly={role_id === 0}
/> />
</div> </div>
<div class="tab-content" style="display: {activeTab === 'bankaccount' ? 'block' : 'none'}"> <div class="tab-content" style="display: {activeTab === 'bankaccount' ? 'block' : 'none'}">
@@ -505,6 +516,7 @@
label={$t('mandate_reference')} label={$t('mandate_reference')}
bind:value={localUser.bank_account.mandate_reference} bind:value={localUser.bank_account.mandate_reference}
placeholder={$t('placeholder.mandate_reference')} placeholder={$t('placeholder.mandate_reference')}
readonly={role_id === 0}
/> />
<InputField <InputField
name="user[bank_account][mandate_date_signed]" name="user[bank_account][mandate_date_signed]"

7
frontend/src/lib/css/styles.min.css vendored
View File

@@ -9,7 +9,8 @@
--maroon: #eba0ac; --maroon: #eba0ac;
--peach: #fab387; --peach: #fab387;
--yellow: #f9e2af; --yellow: #f9e2af;
--green: #a6e3a1; --light-green: #b5e8b0;
--green: #3a8f46;
--teal: #94e2d5; --teal: #94e2d5;
--sky: #89dceb; --sky: #89dceb;
--sapphire: #74c7ec; --sapphire: #74c7ec;
@@ -40,7 +41,8 @@
--bright-maroon: #e64553; --bright-maroon: #e64553;
--bright-peach: #fe640b; --bright-peach: #fe640b;
--bright-yellow: #df8e1d; --bright-yellow: #df8e1d;
--bright-green: #40a02b; --bright-light-green: #52b05d;
--bright-green: #1b9200;
--bright-teal: #179299; --bright-teal: #179299;
--bright-sky: #04a5e5; --bright-sky: #04a5e5;
--bright-sapphire: #209fb5; --bright-sapphire: #209fb5;
@@ -72,6 +74,7 @@
--maroon: var(--bright-maroon); --maroon: var(--bright-maroon);
--peach: var(--bright-peach); --peach: var(--bright-peach);
--yellow: var(--bright-yellow); --yellow: var(--bright-yellow);
--light-green: var(--bright-light-green);
--green: var(--bright-green); --green: var(--bright-green);
--teal: var(--bright-teal); --teal: var(--bright-teal);
--sky: var(--bright-sky); --sky: var(--bright-sky);

1
frontend/src/routes/auth/about/[id]/+page.svelte
View File

@@ -93,6 +93,7 @@
{licence_categories} {licence_categories}
on:close={close} on:close={close}
on:cancel={close} on:cancel={close}
role_id={user.role_id}
/> />
</Modal> </Modal>
{/if} {/if}