add: carEditForm
This commit is contained in:
Alex
252
frontend/src/lib/components/CarEditForm.svelte
Normal file
252
frontend/src/lib/components/CarEditForm.svelte
Normal file
@@ -0,0 +1,252 @@
|
|||||||
|
<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 { hasPrivilige, receive, send } from '$lib/utils/helpers';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
|
import { defaultCar } from '$lib/utils/defaults';
|
||||||
|
import { PERMISSIONS } from '$lib/utils/constants';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
/** @type {import('../../routes/auth/about/[id]/$types').ActionData} */
|
||||||
|
export let form;
|
||||||
|
|
||||||
|
/** @type {App.Locals['user'] } */
|
||||||
|
export let editor;
|
||||||
|
|
||||||
|
/** @type {App.Types['car'] | null} */
|
||||||
|
export let car;
|
||||||
|
|
||||||
|
console.log('Opening car modal with:', car);
|
||||||
|
$: car = car || { ...defaultCar() };
|
||||||
|
$: isLoading = car === undefined || editor === undefined;
|
||||||
|
let isUpdating = false;
|
||||||
|
let readonlyUser = !hasPrivilige(editor, PERMISSIONS.Update);
|
||||||
|
|
||||||
|
const TABS = ['car.car', 'insurance', 'car.damages'];
|
||||||
|
let activeTab = TABS[0];
|
||||||
|
|
||||||
|
/** @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.car_data')} />
|
||||||
|
{:else if editor && car}
|
||||||
|
<form class="content" action="?/updateCar" method="POST" use:enhance={handleUpdate}>
|
||||||
|
<input name="susbscription[id]" type="hidden" bind:value={car.id} />
|
||||||
|
<h1 class="step-title" style="text-align: center;">
|
||||||
|
{car.id ? $t('car.edit') : $t('car.create')}
|
||||||
|
</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="button-container">
|
||||||
|
{#each TABS as tab}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="button-dark"
|
||||||
|
class:active={activeTab === tab}
|
||||||
|
on:click={() => (activeTab = tab)}
|
||||||
|
>
|
||||||
|
{$t(tab)}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="tab-content" style="display: {activeTab === 'car.car' ? 'block' : 'none'}">
|
||||||
|
<InputField
|
||||||
|
name="car[name]"
|
||||||
|
label={$t('name')}
|
||||||
|
bind:value={car.name}
|
||||||
|
placeholder={$t('placeholder.car_name')}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[brand]"
|
||||||
|
label={$t('car.brand')}
|
||||||
|
bind:value={car.brand}
|
||||||
|
placeholder={$t('placeholder.car_brand')}
|
||||||
|
required={true}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[model]"
|
||||||
|
label={$t('car.model')}
|
||||||
|
bind:value={car.model}
|
||||||
|
placeholder={$t('placeholder.car_model')}
|
||||||
|
required={true}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[color]"
|
||||||
|
label={$t('color')}
|
||||||
|
bind:value={car.color}
|
||||||
|
placeholder={$t('placeholder.car_color')}
|
||||||
|
required={true}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[licence_plate]"
|
||||||
|
label={$t('car.licence_plate')}
|
||||||
|
bind:value={car.licence_plate}
|
||||||
|
placeholder={$t('placeholder.car_licence_plate')}
|
||||||
|
required={true}
|
||||||
|
toUpperCase={true}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[price]"
|
||||||
|
type="number"
|
||||||
|
label={$t('price')}
|
||||||
|
bind:value={car.price}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[rate]"
|
||||||
|
type="number"
|
||||||
|
label={$t('car.leasing_rate')}
|
||||||
|
bind:value={car.rate}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[start_date]"
|
||||||
|
type="date"
|
||||||
|
label={$t('car.start_date')}
|
||||||
|
bind:value={car.start_date}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[end_date]"
|
||||||
|
type="date"
|
||||||
|
label={$t('car.end_date')}
|
||||||
|
bind:value={car.end_date}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[notes]"
|
||||||
|
type="textarea"
|
||||||
|
label={$t('notes')}
|
||||||
|
bind:value={car.notes}
|
||||||
|
placeholder={$t('placeholder.notes', {
|
||||||
|
values: { name: car.name || car.brand + ' ' + car.model }
|
||||||
|
})}
|
||||||
|
rows={10}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="tab-content" style="display: {activeTab === 'insurance' ? 'block' : 'none'}">
|
||||||
|
{#each car.insurances as insurance}
|
||||||
|
<InputField
|
||||||
|
name="car[insurance][company]"
|
||||||
|
label={$t('company')}
|
||||||
|
bind:value={insurance.company}
|
||||||
|
placeholder={$t('placeholder.company')}
|
||||||
|
required={true}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[insurance][reference]"
|
||||||
|
label={$t('insurance.reference')}
|
||||||
|
bind:value={insurance.reference}
|
||||||
|
placeholder={$t('placeholder.insurance_reference')}
|
||||||
|
required={true}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[insurance][start_date]"
|
||||||
|
type="date"
|
||||||
|
label={$t('start')}
|
||||||
|
bind:value={insurance.start_date}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[insurance][end_date]"
|
||||||
|
type="date"
|
||||||
|
label={$t('end')}
|
||||||
|
bind:value={insurance.end_date}
|
||||||
|
readonly={readonlyUser}
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
name="car[insurance][notes]"
|
||||||
|
type="textarea"
|
||||||
|
label={$t('notes')}
|
||||||
|
bind:value={insurance.notes}
|
||||||
|
placeholder={$t('placeholder.notes', {
|
||||||
|
values: { name: insurance.company || '' }
|
||||||
|
})}
|
||||||
|
rows={10}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="button-container">
|
||||||
|
{#if isUpdating}
|
||||||
|
<SmallLoader width={30} message={$t('loading.updating')} />
|
||||||
|
{: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>
|
||||||
Reference in New Issue
Block a user