frontend:locale & subscription handling
This commit is contained in:
Alex
@@ -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