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}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user