Refactor EditModal component to use adventureToEdit prop instead of individual props
This commit is contained in:
@@ -1,15 +1,12 @@
|
||||
<script lang="ts">
|
||||
export let editId: number = NaN;
|
||||
export let editName: string = "";
|
||||
export let editLocation: string = "";
|
||||
export let editdate: string = "";
|
||||
export let adventureToEdit: Adventure;
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import type { Adventure } from "$lib/utils/types";
|
||||
const dispatch = createEventDispatcher();
|
||||
import { onMount } from "svelte";
|
||||
let modal: HTMLDialogElement;
|
||||
|
||||
let originalName = editName;
|
||||
let originalName = adventureToEdit.name;
|
||||
|
||||
onMount(() => {
|
||||
modal = document.getElementById("my_modal_1") as HTMLDialogElement;
|
||||
@@ -19,14 +16,8 @@
|
||||
});
|
||||
|
||||
function submit() {
|
||||
const adventureEdited: Adventure = {
|
||||
id: editId,
|
||||
name: editName,
|
||||
location: editLocation,
|
||||
date: editdate,
|
||||
};
|
||||
dispatch("submit", adventureEdited);
|
||||
console.log(adventureEdited);
|
||||
dispatch("submit", adventureToEdit);
|
||||
console.log(adventureToEdit);
|
||||
}
|
||||
|
||||
function close() {
|
||||
@@ -56,7 +47,7 @@
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
bind:value={editName}
|
||||
bind:value={adventureToEdit.name}
|
||||
class="input input-bordered w-full max-w-xs"
|
||||
/>
|
||||
</div>
|
||||
@@ -65,7 +56,7 @@
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
bind:value={editLocation}
|
||||
bind:value={adventureToEdit.location}
|
||||
class="input input-bordered w-full max-w-xs"
|
||||
/>
|
||||
</div>
|
||||
@@ -74,7 +65,7 @@
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
bind:value={editdate}
|
||||
bind:value={adventureToEdit.date}
|
||||
class="input input-bordered w-full max-w-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -78,6 +78,10 @@
|
||||
<button class="btn btn-primary my-2 md:my-0 md:mr-4" on:click={goToLog}
|
||||
>My Log</button
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary my-2 md:my-0 md:mr-4"
|
||||
on:click={() => goto("/planner")}>Planner</button
|
||||
>
|
||||
{/if}
|
||||
<button
|
||||
class="btn btn-primary my-2 md:my-0 md:mr-4"
|
||||
|
||||
Reference in New Issue
Block a user