edit panes: remove footer buttons, export save() for header
parent components now call save() from sidebar header action instead of embedded cancel/save buttons
This commit is contained in:
parent
4418157ca0
commit
7558aef509
3 changed files with 9 additions and 148 deletions
|
|
@ -10,7 +10,6 @@
|
|||
*/
|
||||
import type { Summon } from '$lib/types/api/entities'
|
||||
import DetailsSection from '$lib/components/sidebar/details/DetailsSection.svelte'
|
||||
import Button from '$lib/components/ui/Button.svelte'
|
||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||
|
||||
export interface SummonEditValues {
|
||||
|
|
@ -30,13 +29,9 @@
|
|||
currentValues: SummonEditValues
|
||||
/** Callback when save is clicked */
|
||||
onSave?: (updates: SummonEditUpdates) => void
|
||||
/** Callback when cancel is clicked */
|
||||
onCancel?: () => void
|
||||
/** Whether save is in progress */
|
||||
saving?: boolean
|
||||
}
|
||||
|
||||
let { summonData, currentValues, onSave, onCancel, saving = false }: Props = $props()
|
||||
let { summonData, currentValues, onSave }: Props = $props()
|
||||
|
||||
// Internal state
|
||||
let uncapLevel = $state(currentValues.uncapLevel)
|
||||
|
|
@ -67,20 +62,14 @@
|
|||
transcendenceStep = newStage
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
// Export save function so parent can call it from header button
|
||||
export function save() {
|
||||
const updates: SummonEditUpdates = {
|
||||
uncapLevel,
|
||||
transcendenceStep
|
||||
}
|
||||
onSave?.(updates)
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
// Reset to original values
|
||||
uncapLevel = currentValues.uncapLevel
|
||||
transcendenceStep = currentValues.transcendenceStep
|
||||
onCancel?.()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="summon-edit-pane">
|
||||
|
|
@ -101,19 +90,6 @@
|
|||
</div>
|
||||
</DetailsSection>
|
||||
</div>
|
||||
|
||||
<div class="edit-footer">
|
||||
<Button variant="secondary" onclick={handleCancel} disabled={saving}>Cancel</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
element={elementName}
|
||||
elementStyle={!!elementName}
|
||||
onclick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -123,7 +99,6 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: spacing.$unit-2x;
|
||||
}
|
||||
|
||||
.edit-sections {
|
||||
|
|
@ -137,16 +112,4 @@
|
|||
.section-content {
|
||||
padding: spacing.$unit;
|
||||
}
|
||||
|
||||
.edit-footer {
|
||||
display: flex;
|
||||
gap: spacing.$unit-2x;
|
||||
padding: spacing.$unit-2x;
|
||||
border-top: 1px solid var(--border-secondary);
|
||||
flex-shrink: 0;
|
||||
|
||||
:global(button) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
import WeaponKeySelect from '$lib/components/sidebar/edit/WeaponKeySelect.svelte'
|
||||
import AwakeningSelect from '$lib/components/sidebar/edit/AwakeningSelect.svelte'
|
||||
import AxSkillSelect from '$lib/components/sidebar/edit/AxSkillSelect.svelte'
|
||||
import Button from '$lib/components/ui/Button.svelte'
|
||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||
import { getElementIcon } from '$lib/utils/images'
|
||||
import { seriesHasWeaponKeys, getSeriesSlug } from '$lib/utils/weaponSeries'
|
||||
|
|
@ -60,13 +59,9 @@
|
|||
currentValues: WeaponEditValues
|
||||
/** Callback when save is clicked */
|
||||
onSave?: (updates: WeaponEditUpdates) => void
|
||||
/** Callback when cancel is clicked */
|
||||
onCancel?: () => void
|
||||
/** Whether save is in progress */
|
||||
saving?: boolean
|
||||
}
|
||||
|
||||
let { weaponData, currentValues, onSave, onCancel, saving = false }: Props = $props()
|
||||
let { weaponData, currentValues, onSave }: Props = $props()
|
||||
|
||||
// Internal state
|
||||
let uncapLevel = $state(currentValues.uncapLevel)
|
||||
|
|
@ -166,7 +161,8 @@
|
|||
transcendenceStep = newStage
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
// Export save function so parent can call it from header button
|
||||
export function save() {
|
||||
const updates: WeaponEditUpdates = {
|
||||
uncapLevel,
|
||||
transcendenceStep
|
||||
|
|
@ -213,26 +209,6 @@
|
|||
|
||||
onSave?.(updates)
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
// Reset to original values
|
||||
uncapLevel = currentValues.uncapLevel
|
||||
transcendenceStep = currentValues.transcendenceStep
|
||||
element = currentValues.element ?? weaponData?.element ?? 0
|
||||
weaponKey1 = currentValues.weaponKey1Id
|
||||
weaponKey2 = currentValues.weaponKey2Id
|
||||
weaponKey3 = currentValues.weaponKey3Id
|
||||
selectedAwakening = currentValues.awakening?.type
|
||||
awakeningLevel = currentValues.awakening?.level ?? 1
|
||||
axSkills =
|
||||
currentValues.axSkills.length > 0
|
||||
? currentValues.axSkills
|
||||
: [
|
||||
{ modifier: -1, strength: 0 },
|
||||
{ modifier: -1, strength: 0 }
|
||||
]
|
||||
onCancel?.()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="weapon-edit-pane">
|
||||
|
|
@ -332,19 +308,6 @@
|
|||
</DetailsSection>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="edit-footer">
|
||||
<Button variant="secondary" onclick={handleCancel} disabled={saving}>Cancel</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
element={elementName}
|
||||
elementStyle={!!elementName}
|
||||
onclick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -354,7 +317,6 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: spacing.$unit-2x;
|
||||
}
|
||||
|
||||
.edit-sections {
|
||||
|
|
@ -374,16 +336,4 @@
|
|||
flex-direction: column;
|
||||
gap: spacing.$unit-2x;
|
||||
}
|
||||
|
||||
.edit-footer {
|
||||
display: flex;
|
||||
gap: spacing.$unit-2x;
|
||||
padding: spacing.$unit-2x;
|
||||
border-top: 1px solid var(--border-secondary);
|
||||
flex-shrink: 0;
|
||||
|
||||
:global(button) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
import RingsSelect from './edit/RingsSelect.svelte'
|
||||
import EarringSelect from './edit/EarringSelect.svelte'
|
||||
import PerpetuityToggle from './edit/PerpetuityToggle.svelte'
|
||||
import Button from '$lib/components/ui/Button.svelte'
|
||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||
|
||||
export interface CharacterEditValues {
|
||||
|
|
@ -57,19 +56,13 @@
|
|||
showPerpetuity?: boolean
|
||||
/** Callback when save is clicked, receives API-formatted updates */
|
||||
onSave?: (updates: CharacterEditUpdates) => void
|
||||
/** Callback when cancel is clicked */
|
||||
onCancel?: () => void
|
||||
/** Whether save is in progress (disables buttons) */
|
||||
saving?: boolean
|
||||
}
|
||||
|
||||
let {
|
||||
characterData,
|
||||
currentValues,
|
||||
showPerpetuity = true,
|
||||
onSave,
|
||||
onCancel,
|
||||
saving = false
|
||||
onSave
|
||||
}: Props = $props()
|
||||
|
||||
// Internal state - initialized from currentValues
|
||||
|
|
@ -143,7 +136,8 @@
|
|||
transcendenceStep = newStage
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
// Export save function so parent can call it from header button
|
||||
export function save() {
|
||||
const updates: CharacterEditUpdates = {
|
||||
uncapLevel,
|
||||
transcendenceStep,
|
||||
|
|
@ -173,26 +167,6 @@
|
|||
|
||||
onSave?.(updates)
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
// Reset to original values
|
||||
uncapLevel = currentValues.uncapLevel
|
||||
transcendenceStep = currentValues.transcendenceStep
|
||||
selectedAwakening = currentValues.awakening?.type
|
||||
awakeningLevel = currentValues.awakening?.level ?? 1
|
||||
rings =
|
||||
currentValues.rings.length > 0
|
||||
? currentValues.rings
|
||||
: [
|
||||
{ modifier: 1, strength: 0 },
|
||||
{ modifier: 2, strength: 0 },
|
||||
{ modifier: 0, strength: 0 },
|
||||
{ modifier: 0, strength: 0 }
|
||||
]
|
||||
earring = currentValues.earring ?? undefined
|
||||
perpetuity = currentValues.perpetuity
|
||||
onCancel?.()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="character-edit-pane">
|
||||
|
|
@ -270,19 +244,6 @@
|
|||
</DetailsSection>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="edit-footer">
|
||||
<Button variant="secondary" onclick={handleCancel} disabled={saving}>Cancel</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
element={elementName}
|
||||
elementStyle={!!elementName}
|
||||
onclick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -292,7 +253,6 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: spacing.$unit-2x;
|
||||
}
|
||||
|
||||
.edit-sections {
|
||||
|
|
@ -306,16 +266,4 @@
|
|||
.section-content {
|
||||
padding: spacing.$unit;
|
||||
}
|
||||
|
||||
.edit-footer {
|
||||
display: flex;
|
||||
gap: spacing.$unit-2x;
|
||||
padding: spacing.$unit-2x;
|
||||
border-top: 1px solid var(--border-secondary);
|
||||
flex-shrink: 0;
|
||||
|
||||
:global(button) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue