frontend:locale & subscription handling
This commit is contained in:
Alex
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}
|
||||
|
||||
Reference in New Issue
Block a user