styling
This commit is contained in:
Alex
@@ -1,156 +1,156 @@
|
||||
<script>
|
||||
import Modal from "$lib/components/Modal.svelte";
|
||||
import UserEditForm from "$lib/components/UserEditForm.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { page } from "$app/stores";
|
||||
import { t } from "svelte-i18n";
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import UserEditForm from '$lib/components/UserEditForm.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
/** @type {import('./$types').ActionData} */
|
||||
export let form;
|
||||
/** @type {import('./$types').ActionData} */
|
||||
export let form;
|
||||
|
||||
$: ({ user, licence_categories, subscriptions } = $page.data);
|
||||
$: ({ user, licence_categories, subscriptions } = $page.data);
|
||||
|
||||
let showModal = false;
|
||||
let showModal = false;
|
||||
|
||||
const open = () => (showModal = true);
|
||||
const close = () => {
|
||||
showModal = false;
|
||||
if (form) {
|
||||
form.errors = undefined;
|
||||
}
|
||||
};
|
||||
const open = () => (showModal = true);
|
||||
const close = () => {
|
||||
showModal = false;
|
||||
if (form) {
|
||||
form.errors = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
console.dir(user);
|
||||
});
|
||||
onMount(() => {
|
||||
console.dir(user);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="hero-container">
|
||||
<div class="user-info">
|
||||
{#if user.status}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Status:</span>
|
||||
<span class="value block-value">
|
||||
<span
|
||||
>{$t(`userStatus.${user.status}`, {
|
||||
default: "unknown status",
|
||||
})}</span
|
||||
>
|
||||
<span
|
||||
>{$t(`userRole.${user.role_id}`, { default: "unknown role" })}</span
|
||||
>
|
||||
</span>
|
||||
</h3>
|
||||
{/if}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Name:</span>
|
||||
<span class="value">{`${user.first_name} ${user.last_name}`}</span>
|
||||
</h3>
|
||||
{#if user.email}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Email:</span>
|
||||
<span class="value">{user.email}</span>
|
||||
</h3>
|
||||
{/if}
|
||||
{#if user.address}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Adresse:</span>
|
||||
<span class="value block-value">
|
||||
<span>{user.address}</span>
|
||||
<span>{`${user.zip_code} ${user.city}`}</span>
|
||||
</span>
|
||||
</h3>
|
||||
{/if}
|
||||
{#if user.phone}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Telefon:</span>
|
||||
<span class="value">{user.phone}</span>
|
||||
</h3>
|
||||
{/if}
|
||||
{#if user.date_of_birth}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Geburtstag:</span>
|
||||
<span class="value">{user.date_of_birth}</span>
|
||||
</h3>
|
||||
{/if}
|
||||
{#if user.notes}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">{$t("notes")}:</span>
|
||||
<span class="value">{user.notes}</span>
|
||||
</h3>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="user-info">
|
||||
{#if user.status}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Status:</span>
|
||||
<span class="value block-value">
|
||||
<span
|
||||
>{$t(`userStatus.${user.status}`, {
|
||||
default: 'unknown status'
|
||||
})}</span
|
||||
>
|
||||
<span>{$t(`userRole.${user.role_id}`, { default: 'unknown role' })}</span>
|
||||
</span>
|
||||
</h3>
|
||||
{/if}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Name:</span>
|
||||
<span class="value">{`${user.first_name} ${user.last_name}`}</span>
|
||||
</h3>
|
||||
{#if user.email}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Email:</span>
|
||||
<span class="value">{user.email}</span>
|
||||
</h3>
|
||||
{/if}
|
||||
{#if user.address}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Adresse:</span>
|
||||
<span class="value block-value">
|
||||
<span>{user.address}</span>
|
||||
<span>{`${user.zip_code} ${user.city}`}</span>
|
||||
</span>
|
||||
</h3>
|
||||
{/if}
|
||||
{#if user.phone}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Telefon:</span>
|
||||
<span class="value">{user.phone}</span>
|
||||
</h3>
|
||||
{/if}
|
||||
{#if user.date_of_birth}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">Geburtstag:</span>
|
||||
<span class="value">{user.date_of_birth}</span>
|
||||
</h3>
|
||||
{/if}
|
||||
{#if user.notes}
|
||||
<h3 class="hero-subtitle subtitle info-row">
|
||||
<span class="label">{$t('notes')}:</span>
|
||||
<span class="value">{user.notes}</span>
|
||||
</h3>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="hero-buttons-container">
|
||||
<button class="button-dark" on:click={open}>Ändern</button>
|
||||
</div>
|
||||
<div class="hero-buttons-container">
|
||||
<button class="button-dark" on:click={open}>Ändern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showModal}
|
||||
<Modal on:close={close}>
|
||||
<UserEditForm
|
||||
{form}
|
||||
{user}
|
||||
{subscriptions}
|
||||
{licence_categories}
|
||||
on:cancel={close}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal on:close={close}>
|
||||
<UserEditForm {form} {user} {subscriptions} {licence_categories} on:cancel={close} />
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.hero-container .hero-subtitle:not(:last-of-type) {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
.hero-container .hero-subtitle:not(:last-of-type) {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.hero-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem 1rem;
|
||||
align-items: start;
|
||||
text-align: left;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.user-info {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem 1rem;
|
||||
align-items: start;
|
||||
text-align: left;
|
||||
margin-top: 1rem;
|
||||
color: var(--text);
|
||||
background-color: var(--surface0);
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--surface1);
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: contents;
|
||||
}
|
||||
.info-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.label {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
padding-right: 1rem;
|
||||
color: var(--lavender);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
text-align: left;
|
||||
}
|
||||
.value {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
text-align: left;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.block-value {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.block-value {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
color: var(--subtext0);
|
||||
}
|
||||
|
||||
.hero-buttons-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.hero-buttons-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.user-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.label,
|
||||
.value {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.label,
|
||||
.value {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
<script>
|
||||
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 Modal from '$lib/components/Modal.svelte';
|
||||
import UserEditForm from '$lib/components/UserEditForm.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
/** @type {import('./$types').ActionData} */
|
||||
export let form;
|
||||
/** @type {import('./$types').ActionData} */
|
||||
export let form;
|
||||
|
||||
$: ({
|
||||
user,
|
||||
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;
|
||||
let showModal = false;
|
||||
let activeSection = 'users';
|
||||
/** @type{App.Locals['user'] | null} */
|
||||
let selectedUser = 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) => {
|
||||
selectedUser = user;
|
||||
console.dir(selectedUser);
|
||||
showModal = true;
|
||||
};
|
||||
/**
|
||||
* Opens the edit modal for the selected user.
|
||||
* @param {App.Locals['user'] | null} user The user to edit.
|
||||
*/
|
||||
const openEditModal = (user) => {
|
||||
selectedUser = user;
|
||||
console.dir(selectedUser);
|
||||
showModal = true;
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
showModal = false;
|
||||
selectedUser = null;
|
||||
if (form) {
|
||||
form.errors = undefined;
|
||||
}
|
||||
};
|
||||
const close = () => {
|
||||
showModal = false;
|
||||
selectedUser = null;
|
||||
if (form) {
|
||||
form.errors = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* sets the active admin section for display
|
||||
* @param {string} section The new active section.
|
||||
*/
|
||||
const setActiveSection = (section) => {
|
||||
activeSection = section;
|
||||
};
|
||||
/**
|
||||
* sets the active admin section for display
|
||||
* @param {string} section The new active section.
|
||||
*/
|
||||
const setActiveSection = (section) => {
|
||||
activeSection = section;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
@@ -57,7 +57,7 @@
|
||||
class="nav-link {activeSection === 'users' ? 'active' : ''}"
|
||||
on:click={() => setActiveSection('users')}
|
||||
>
|
||||
<i class="fas fa-users" />
|
||||
<i class="fas fa-users"></i>
|
||||
<span class="nav-badge">{users.length}</span>
|
||||
{$t('users')}
|
||||
</button>
|
||||
@@ -67,7 +67,7 @@
|
||||
class="nav-link {activeSection === 'subscriptions' ? 'active' : ''}"
|
||||
on:click={() => setActiveSection('subscriptions')}
|
||||
>
|
||||
<i class="fas fa-clipboard-list" />
|
||||
<i class="fas fa-clipboard-list"></i>
|
||||
<span class="nav-badge">{subscriptions.length}</span>
|
||||
{$t('subscriptions')}
|
||||
</button>
|
||||
@@ -77,7 +77,7 @@
|
||||
class="nav-link {activeSection === 'payments' ? 'active' : ''}"
|
||||
on:click={() => setActiveSection('payments')}
|
||||
>
|
||||
<i class="fas fa-credit-card" />
|
||||
<i class="fas fa-credit-card"></i>
|
||||
{$t('payments')}
|
||||
</button>
|
||||
</li>
|
||||
@@ -90,7 +90,7 @@
|
||||
<div class="section-header">
|
||||
<h2>{$t('users')}</h2>
|
||||
<button class="btn primary" on:click={() => openEditModal(null)}>
|
||||
<i class="fas fa-plus" />
|
||||
<i class="fas fa-plus"></i>
|
||||
{$t('add_new')}
|
||||
</button>
|
||||
</div>
|
||||
@@ -124,11 +124,11 @@
|
||||
</table>
|
||||
<div class="button-group">
|
||||
<button class="btn primary" on:click={() => openEditModal(user)}>
|
||||
<i class="fas fa-edit" />
|
||||
<i class="fas fa-edit"></i>
|
||||
{$t('edit')}
|
||||
</button>
|
||||
<button class="btn danger">
|
||||
<i class="fas fa-trash" />
|
||||
<i class="fas fa-trash"></i>
|
||||
{$t('delete')}
|
||||
</button>
|
||||
</div>
|
||||
@@ -140,7 +140,7 @@
|
||||
<div class="section-header">
|
||||
<h2>{$t('subscriptions')}</h2>
|
||||
<button class="btn primary" on:click={() => openEditModal(null)}>
|
||||
<i class="fas fa-plus" />
|
||||
<i class="fas fa-plus"></i>
|
||||
{$t('add_new')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user