frontend:locale & subscription handling
This commit is contained in:
Alex
13
frontend/src/app.d.ts
vendored
13
frontend/src/app.d.ts
vendored
@@ -3,12 +3,12 @@
|
||||
interface Subscription {
|
||||
id: number | -1;
|
||||
name: string | '';
|
||||
details?: string | '';
|
||||
conditions?: string | '';
|
||||
monthly_fee?: number | -1;
|
||||
hourly_rate?: number | -1;
|
||||
included_hours_per_year?: number | 0;
|
||||
included_hours_per_month?: number | 0;
|
||||
details: string | '';
|
||||
conditions: string | '';
|
||||
monthly_fee: number | 0;
|
||||
hourly_rate: number | 0;
|
||||
included_hours_per_year: number | 0;
|
||||
included_hours_per_month: number | 0;
|
||||
}
|
||||
|
||||
interface Membership {
|
||||
@@ -79,6 +79,7 @@ declare global {
|
||||
}
|
||||
interface Types {
|
||||
licenceCategory: LicenceCategory;
|
||||
subscription: Subscription;
|
||||
}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
|
||||
180
frontend/src/lib/components/SubscriptionEditForm.svelte
Normal file
180
frontend/src/lib/components/SubscriptionEditForm.svelte
Normal file
@@ -0,0 +1,180 @@
|
||||
<script>
|
||||
import InputField from '$lib/components/InputField.svelte';
|
||||
import SmallLoader from '$lib/components/SmallLoader.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { applyAction, enhance } from '$app/forms';
|
||||
import { receive, send } from '$lib/utils/helpers';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
/** @type {import('../../routes/auth/about/[id]/$types').ActionData} */
|
||||
export let form;
|
||||
|
||||
/** @type {App.Locals['user'] } */
|
||||
export let user;
|
||||
|
||||
/** @type {App.Types['subscription'] | null} */
|
||||
export let subscription;
|
||||
|
||||
/** @type {App.Types['subscription']} */
|
||||
const blankSubscription = {
|
||||
id: 0,
|
||||
name: '',
|
||||
details: '',
|
||||
conditions: '',
|
||||
monthly_fee: 0,
|
||||
hourly_rate: 0,
|
||||
included_hours_per_year: 0,
|
||||
included_hours_per_month: 0
|
||||
};
|
||||
|
||||
$: {
|
||||
if (subscription !== undefined) {
|
||||
subscription = subscription === null ? { ...blankSubscription } : { ...subscription };
|
||||
}
|
||||
}
|
||||
$: isLoading = subscription === undefined || user === undefined;
|
||||
let isUpdating = false;
|
||||
|
||||
/** @type {import('../../routes/auth/about/[id]/$types').SubmitFunction} */
|
||||
const handleUpdate = async () => {
|
||||
isUpdating = true;
|
||||
return async ({ result }) => {
|
||||
isUpdating = false;
|
||||
if (result.type === 'success' || result.type === 'redirect') {
|
||||
dispatch('close');
|
||||
} else {
|
||||
document.querySelector('.modal .container')?.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
await applyAction(result);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if isLoading}
|
||||
<SmallLoader width={30} message={$t('loading.subscription_data')} />
|
||||
{:else if user && subscription}
|
||||
<form class="content" action="?/updateSubscription" method="POST" use:enhance={handleUpdate}>
|
||||
<input name="usbscription[id]" type="hidden" bind:value={subscription.id} />
|
||||
<h1 class="step-title" style="text-align: center;">{$t('subscritption.edit')}</h1>
|
||||
{#if form?.errors}
|
||||
{#each form?.errors as error (error.id)}
|
||||
<h4
|
||||
class="step-subtitle warning"
|
||||
in:receive|global={{ key: error.id }}
|
||||
out:send|global={{ key: error.id }}
|
||||
>
|
||||
{$t(error.field) + ': ' + $t(error.key)}
|
||||
</h4>
|
||||
{/each}
|
||||
{/if}
|
||||
<div class="tab-content" style="display: block">
|
||||
<InputField
|
||||
name="subscription[name]"
|
||||
label={$t('subscription.name')}
|
||||
bind:value={subscription.name}
|
||||
placeholder={$t('placeholder.subscription_name')}
|
||||
required={true}
|
||||
readonly={user.role_id < 8}
|
||||
/>
|
||||
<InputField
|
||||
name="subscription[details]"
|
||||
label={$t('details')}
|
||||
type="textarea"
|
||||
bind:value={subscription.details}
|
||||
placeholder={$t('placeholder.subscription_details')}
|
||||
required={true}
|
||||
/>
|
||||
<InputField
|
||||
name="subscription[conditions]"
|
||||
type="textarea"
|
||||
label={$t('subscription.conditions')}
|
||||
bind:value={subscription.conditions}
|
||||
placeholder={$t('placeholder.subscription_conditions')}
|
||||
readonly={user.role_id < 8}
|
||||
/>
|
||||
<InputField
|
||||
name="subscription[monthly_fee]"
|
||||
type="number"
|
||||
label={$t('subscription.monthly_fee')}
|
||||
bind:value={subscription.monthly_fee}
|
||||
placeholder={$t('placeholder.subscription_monthly_fee')}
|
||||
required={true}
|
||||
readonly={user.role_id < 8}
|
||||
/>
|
||||
<InputField
|
||||
name="subscription[hourly_rate]"
|
||||
type="number"
|
||||
label={$t('subscription.hourly_rate')}
|
||||
bind:value={subscription.hourly_rate}
|
||||
required={true}
|
||||
readonly={user.role_id < 8}
|
||||
/>
|
||||
<InputField
|
||||
name="subscription[included_hours_per_year]"
|
||||
type="number"
|
||||
label={$t('subscription.included_hours_per_year')}
|
||||
bind:value={subscription.included_hours_per_year}
|
||||
readonly={user.role_id < 8}
|
||||
/>
|
||||
<InputField
|
||||
name="included_hours_per_month"
|
||||
type="number"
|
||||
label={$t('subscription.included_hours_per_month')}
|
||||
bind:value={subscription.included_hours_per_month}
|
||||
readonly={user.role_id < 8}
|
||||
/>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
{#if isUpdating}
|
||||
<SmallLoader width={30} message={'Aktualisiere...'} />
|
||||
{:else}
|
||||
<button type="button" class="button-dark" on:click={() => dispatch('cancel')}>
|
||||
{$t('cancel')}</button
|
||||
>
|
||||
<button type="submit" class="button-dark">{$t('confirm')}</button>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.tab-content {
|
||||
padding: 1rem;
|
||||
border-radius: 0 0 3px 3px;
|
||||
background-color: var(--surface0);
|
||||
border: 1px solid var(--surface1);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-container button {
|
||||
flex: 1 1 0;
|
||||
min-width: 120px;
|
||||
max-width: calc(50% - 5px);
|
||||
background-color: var(--surface1);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--overlay0);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.button-container button:hover {
|
||||
background-color: var(--surface2);
|
||||
border-color: var(--lavender);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.button-container button {
|
||||
flex-basis: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -38,7 +38,13 @@
|
||||
parent_member_id: 0,
|
||||
subscription_model: {
|
||||
id: 0,
|
||||
name: ''
|
||||
name: '',
|
||||
details: '',
|
||||
conditions: '',
|
||||
monthly_fee: 0,
|
||||
hourly_rate: 0,
|
||||
included_hours_per_month: 0,
|
||||
included_hours_per_year: 0
|
||||
}
|
||||
},
|
||||
licence: {
|
||||
@@ -278,7 +284,7 @@
|
||||
<InputField
|
||||
name="user[email]"
|
||||
type="email"
|
||||
label={$t('email')}
|
||||
label={$t('user.email')}
|
||||
bind:value={localUser.email}
|
||||
placeholder={$t('placeholder.email')}
|
||||
required={true}
|
||||
@@ -403,29 +409,29 @@
|
||||
<InputField
|
||||
name="user[membership][subscription_model][name]"
|
||||
type="select"
|
||||
label={$t('subscription_model')}
|
||||
label={$t('subscription.subscription')}
|
||||
bind:value={localUser.membership.subscription_model.name}
|
||||
options={subscriptionModelOptions}
|
||||
/>
|
||||
<div class="subscription-info">
|
||||
<div class="subscription-column">
|
||||
<p>
|
||||
<strong>{$t('monthly_fee')}:</strong>
|
||||
<strong>{$t('subscription.monthly_fee')}:</strong>
|
||||
{selectedSubscriptionModel?.monthly_fee || '-'} €
|
||||
</p>
|
||||
<p>
|
||||
<strong>{$t('hourly_rate')}:</strong>
|
||||
<strong>{$t('subscription.hourly_rate')}:</strong>
|
||||
{selectedSubscriptionModel?.hourly_rate || '-'} €
|
||||
</p>
|
||||
{#if selectedSubscriptionModel?.included_hours_per_year}
|
||||
<p>
|
||||
<strong>{$t('included_hours_per_year')}:</strong>
|
||||
<strong>{$t('subscription.included_hours_per_year')}:</strong>
|
||||
{selectedSubscriptionModel?.included_hours_per_year}
|
||||
</p>
|
||||
{/if}
|
||||
{#if selectedSubscriptionModel?.included_hours_per_month}
|
||||
<p>
|
||||
<strong>{$t('included_hours_per_month')}:</strong>
|
||||
<strong>{$t('subscription.included_hours_per_month')}:</strong>
|
||||
{selectedSubscriptionModel?.included_hours_per_month}
|
||||
</p>
|
||||
{/if}
|
||||
@@ -437,7 +443,7 @@
|
||||
</p>
|
||||
{#if selectedSubscriptionModel?.conditions}
|
||||
<p>
|
||||
<strong>{$t('conditions')}:</strong>
|
||||
<strong>{$t('subscription.conditions')}:</strong>
|
||||
{selectedSubscriptionModel?.conditions}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
@@ -32,7 +32,10 @@ export default {
|
||||
licence_number: 'Auf dem Führerschein unter Feld 5',
|
||||
issued_date: 'Ausgabedatum unter Feld 4a',
|
||||
expiration_date: 'Ablaufdatum unter Feld 4b',
|
||||
issuing_country: 'Ausstellendes Land'
|
||||
issuing_country: 'Ausstellendes Land',
|
||||
subscription_name: 'Name des Tarifmodells',
|
||||
subscription_details: 'Beschreibe das Tarifmodell...',
|
||||
subscription_conditions: 'Beschreibe die Bedingungen zur Nutzung...'
|
||||
},
|
||||
validation: {
|
||||
required: 'Eingabe benötigt',
|
||||
@@ -107,6 +110,21 @@ export default {
|
||||
status: 'Status',
|
||||
role: 'Nutzerrolle'
|
||||
},
|
||||
subscription: {
|
||||
name: 'Modellname',
|
||||
edit: 'Modell bearbeiten',
|
||||
subscription: 'Tarifmodell',
|
||||
subscriptions: 'Tarifmodelle',
|
||||
conditions: 'Bedingungen',
|
||||
monthly_fee: 'Monatliche Gebühr',
|
||||
hourly_rate: 'Stundensatz',
|
||||
included_hours_per_year: 'Inkludierte Stunden pro Jahr',
|
||||
included_hours_per_month: 'Inkludierte Stunden pro Monat'
|
||||
},
|
||||
loading: {
|
||||
user_data: 'Lade Nutzerdaten',
|
||||
subscription_data: 'Lade Modelldaten'
|
||||
},
|
||||
cancel: 'Abbrechen',
|
||||
confirm: 'Bestätigen',
|
||||
actions: 'Aktionen',
|
||||
@@ -120,10 +138,7 @@ export default {
|
||||
issued_date: 'Ausgabedatum',
|
||||
expiration_date: 'Ablaufdatum',
|
||||
country: 'Land',
|
||||
monthly_fee: 'Monatliche Gebühr',
|
||||
hourly_rate: 'Stundensatz',
|
||||
details: 'Details',
|
||||
conditions: 'Bedingungen',
|
||||
unknown: 'Unbekannt',
|
||||
notes: 'Notizen',
|
||||
address: 'Straße & Hausnummer',
|
||||
@@ -132,7 +147,6 @@ export default {
|
||||
forgot_password: 'Passwort vergessen?',
|
||||
password: 'Passwort',
|
||||
password_repeat: 'Passwort wiederholen',
|
||||
email: 'Email',
|
||||
company: 'Firma',
|
||||
login: 'Anmeldung',
|
||||
profile: 'Profil',
|
||||
@@ -140,7 +154,6 @@ export default {
|
||||
bankaccount: 'Kontodaten',
|
||||
first_name: 'Vorname',
|
||||
last_name: 'Nachname',
|
||||
name: 'Name',
|
||||
phone: 'Telefonnummer',
|
||||
dateofbirth: 'Geburtstag',
|
||||
status: 'Status',
|
||||
@@ -152,11 +165,8 @@ export default {
|
||||
iban: 'IBAN',
|
||||
bic: 'BIC',
|
||||
mandate_reference: 'SEPA Mandat',
|
||||
subscriptions: 'Tarifmodelle',
|
||||
payments: 'Zahlungen',
|
||||
add_new: 'Neu',
|
||||
included_hours_per_year: 'Inkludierte Stunden pro Jahr',
|
||||
included_hours_per_month: 'Inkludierte Stunden pro Monat',
|
||||
|
||||
// For payments section
|
||||
payment: {
|
||||
|
||||
@@ -91,7 +91,15 @@ export function processFormData(rawData) {
|
||||
parent_member_id: Number(rawData.user.membership?.parent_member_id) || 0,
|
||||
subscription_model: {
|
||||
id: Number(rawData.user.membership?.subscription_model?.id) || 0,
|
||||
name: String(rawData.user.membership?.subscription_model?.name) || ''
|
||||
name: String(rawData.user.membership?.subscription_model?.name) || '',
|
||||
details: String(rawData.user.membership?.subscription_model?.details) || '',
|
||||
conditions: String(rawData.user.membership?.subscription_model?.conditions) || '',
|
||||
hourly_rate: Number(rawData.user.membership?.subscription_model?.hourly_rate) || 0,
|
||||
monthly_fee: Number(rawData.user.membership?.subscription_model?.monthly_fee) || 0,
|
||||
included_hours_per_month:
|
||||
Number(rawData.user.membership?.subscription_model?.included_hours_per_month) || 0,
|
||||
included_hours_per_year:
|
||||
Number(rawData.user.membership?.subscription_model?.included_hours_per_year) || 0
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/** @type {import('./$types').LayoutLoad} */
|
||||
export async function load({ fetch, url, data }) {
|
||||
const { users } = data;
|
||||
return {
|
||||
users: data.users,
|
||||
user: data.user,
|
||||
};
|
||||
export async function load({ data }) {
|
||||
return {
|
||||
users: data.users,
|
||||
user: data.user
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,32 +1,50 @@
|
||||
<script>
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import UserEditForm from '$lib/components/UserEditForm.svelte';
|
||||
import SubscriptionEditForm from '$lib/components/SubscriptionEditForm.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
/** @type {import('./$types').ActionData} */
|
||||
export let form;
|
||||
|
||||
$: ({ users = [], licence_categories = [], subscriptions = [], payments = [] } = $page.data);
|
||||
$: ({
|
||||
user = [],
|
||||
users = [],
|
||||
licence_categories = [],
|
||||
subscriptions = [],
|
||||
payments = []
|
||||
} = $page.data);
|
||||
|
||||
let activeSection = 'users';
|
||||
/** @type{App.Locals['user'] | null} */
|
||||
let selectedUser = null;
|
||||
/** @type{App.Types['subscription'] | null} */
|
||||
let selectedSubscription = null;
|
||||
let showModal = false;
|
||||
|
||||
/**
|
||||
* Opens the edit modal for the selected user.
|
||||
* @param {App.Locals['user'] | null} user The user to edit.
|
||||
*/
|
||||
const openEditModal = (user) => {
|
||||
const openEditUserModal = (user) => {
|
||||
selectedUser = user;
|
||||
console.dir(selectedUser);
|
||||
showModal = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Opens the edit modal for the selected subscription.
|
||||
* @param {App.Types['subscription'] | null} subscription The user to edit.
|
||||
*/
|
||||
const openEditSubscriptionModal = (subscription) => {
|
||||
selectedSubscription = subscription;
|
||||
showModal = true;
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
showModal = false;
|
||||
selectedUser = null;
|
||||
selectedSubscription = null;
|
||||
if (form) {
|
||||
form.errors = undefined;
|
||||
}
|
||||
@@ -62,7 +80,7 @@
|
||||
on:click={() => setActiveSection('subscriptions')}
|
||||
>
|
||||
<i class="fas fa-clipboard-list"></i>
|
||||
{$t('subscriptions')}
|
||||
{$t('subscription.subscriptions')}
|
||||
<span class="nav-badge">{subscriptions.length}</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -83,7 +101,7 @@
|
||||
{#if activeSection === 'users'}
|
||||
<div class="section-header">
|
||||
<h2>{$t('users')}</h2>
|
||||
<button class="btn primary" on:click={() => openEditModal(null)}>
|
||||
<button class="btn primary" on:click={() => openEditUserModal(null)}>
|
||||
<i class="fas fa-plus"></i>
|
||||
{$t('add_new')}
|
||||
</button>
|
||||
@@ -103,11 +121,11 @@
|
||||
<td>{user.id}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('name')}</th>
|
||||
<th>{$t('user.name')}</th>
|
||||
<td>{user.first_name} {user.last_name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('email')}</th>
|
||||
<th>{$t('user.email')}</th>
|
||||
<td>{user.email}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -117,7 +135,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="button-group">
|
||||
<button class="btn primary" on:click={() => openEditModal(user)}>
|
||||
<button class="btn primary" on:click={() => openEditUserModal(user)}>
|
||||
<i class="fas fa-edit"></i>
|
||||
{$t('edit')}
|
||||
</button>
|
||||
@@ -132,11 +150,13 @@
|
||||
</div>
|
||||
{:else if activeSection === 'subscriptions'}
|
||||
<div class="section-header">
|
||||
<h2>{$t('subscriptions')}</h2>
|
||||
<button class="btn primary" on:click={() => openEditModal(null)}>
|
||||
<i class="fas fa-plus"></i>
|
||||
{$t('add_new')}
|
||||
</button>
|
||||
<h2>{$t('subscription.subscriptions')}</h2>
|
||||
{#if user.role_id == 8}
|
||||
<button class="btn primary" on:click={() => openEditUserModal(null)}>
|
||||
<i class="fas fa-plus"></i>
|
||||
{$t('add_new')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="accordion">
|
||||
{#each subscriptions as subscription}
|
||||
@@ -148,7 +168,7 @@
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{$t('monthly_fee')}</th>
|
||||
<th>{$t('subscription.monthly_fee')}</th>
|
||||
<td
|
||||
>{subscription.monthly_fee !== -1
|
||||
? subscription.monthly_fee + '€'
|
||||
@@ -156,7 +176,7 @@
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('hourly_rate')}</th>
|
||||
<th>{$t('subscription.hourly_rate')}</th>
|
||||
<td
|
||||
>{subscription.hourly_rate !== -1
|
||||
? subscription.hourly_rate + '€'
|
||||
@@ -164,11 +184,11 @@
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('included_hours_per_year')}</th>
|
||||
<th>{$t('subscription.included_hours_per_year')}</th>
|
||||
<td>{subscription.included_hours_per_year || 0}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('included_hours_per_month')}</th>
|
||||
<th>{$t('subscription.included_hours_per_month')}</th>
|
||||
<td>{subscription.included_hours_per_month || 0}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -176,11 +196,28 @@
|
||||
<td>{subscription.details || '-'}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('conditions')}</th>
|
||||
<th>{$t('subscription.conditions')}</th>
|
||||
<td>{subscription.conditions || '-'}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{#if user.role_id == 8}
|
||||
<div class="button-group">
|
||||
<button
|
||||
class="btn primary"
|
||||
on:click={() => openEditSubscriptionModal(subscription)}
|
||||
>
|
||||
<i class="fas fa-edit"></i>
|
||||
{$t('edit')}
|
||||
</button>
|
||||
{#if !users.some(/** @param{App.Locals['user']} user */ (user) => user.membership?.subscription_model?.id === subscription.id)}
|
||||
<button class="btn danger">
|
||||
<i class="fas fa-trash"></i>
|
||||
{$t('delete')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</details>
|
||||
{/each}
|
||||
@@ -217,14 +254,24 @@
|
||||
|
||||
{#if showModal}
|
||||
<Modal on:close={close}>
|
||||
<UserEditForm
|
||||
{form}
|
||||
user={selectedUser}
|
||||
{subscriptions}
|
||||
{licence_categories}
|
||||
on:cancel={close}
|
||||
on:close={close}
|
||||
/>
|
||||
{#if selectedUser}
|
||||
<UserEditForm
|
||||
{form}
|
||||
user={selectedUser}
|
||||
{subscriptions}
|
||||
{licence_categories}
|
||||
on:cancel={close}
|
||||
on:close={close}
|
||||
/>
|
||||
{:else if selectedSubscription}
|
||||
<SubscriptionEditForm
|
||||
{form}
|
||||
{user}
|
||||
subscription={selectedSubscription}
|
||||
on:cancel={close}
|
||||
on:close={close}
|
||||
/>
|
||||
{/if}
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
<!-- - Create a table or list view of all users.
|
||||
- Implement a search or filter functionality.
|
||||
- Add a modal component for editing user details (reuse the modal from about/[id]). -->
|
||||
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import Modal from "$lib/components/Modal.svelte";
|
||||
import UserEditForm from "$lib/components/UserEditForm.svelte";
|
||||
import { t } from "svelte-i18n";
|
||||
|
||||
import { page } from "$app/stores";
|
||||
|
||||
import "static/css/bootstrap.min.css";
|
||||
import "static/js/bootstrapv5/bootstrap.bundle.min.js";
|
||||
/** @type {import('./$types').ActionData} */
|
||||
export let form;
|
||||
|
||||
$: ({ user, users, licence_categories, subscriptions } = $page.data);
|
||||
|
||||
/** @type(App.Locals['user'] | null) */
|
||||
let selectedUser = null;
|
||||
let showModal = false;
|
||||
|
||||
/**
|
||||
* Opens the edit modal for the selected user.
|
||||
* @param {App.Locals['user']} user The user to edit.
|
||||
*/
|
||||
const openEditModal = (user) => {
|
||||
selectedUser = user;
|
||||
showModal = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Opens the delete modal for the selected user.
|
||||
* @param {App.Locals['user']} user The user to edit.
|
||||
*/
|
||||
const openDelete = (user) => {};
|
||||
|
||||
const close = () => {
|
||||
showModal = false;
|
||||
selectedUser = null;
|
||||
if (form) {
|
||||
form.errors = undefined;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="admin-users-page">
|
||||
<h1>{$t("user.management")}</h1>
|
||||
|
||||
<div class="search-filter" />
|
||||
|
||||
<table class="user-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{$t("user.id")}</th>
|
||||
<th>{$t("name")}</th>
|
||||
<th>{$t("email")}</th>
|
||||
<th>{$t("status")}</th>
|
||||
<th>{$t("actions")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each users as user}
|
||||
<tr>
|
||||
<td>{user.id}</td>
|
||||
<td>{user.first_name} {user.last_name}</td>
|
||||
<td>{user.email}</td>
|
||||
<td>{$t("userStatus." + user.status)}</td>
|
||||
<td>
|
||||
<button on:click={() => openEditModal(user)}>{$t("edit")}</button>
|
||||
<button on:click={() => openDelete(user)}>{$t("delete")}</button>
|
||||
</td>
|
||||
</tr>{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pagination" />
|
||||
|
||||
{#if showModal}
|
||||
<Modal on:close={close}>
|
||||
<UserEditForm
|
||||
{form}
|
||||
user={selectedUser}
|
||||
{subscriptions}
|
||||
{licence_categories}
|
||||
on:cancel={close}
|
||||
/>
|
||||
</Modal>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user