extract DeleteTeamDialog component
This commit is contained in:
parent
492307530a
commit
7dae71965a
2 changed files with 70 additions and 55 deletions
47
src/lib/components/dialogs/DeleteTeamDialog.svelte
Normal file
47
src/lib/components/dialogs/DeleteTeamDialog.svelte
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script lang="ts">
|
||||
import Dialog from '$lib/components/ui/Dialog.svelte'
|
||||
import ModalHeader from '$lib/components/ui/ModalHeader.svelte'
|
||||
import ModalBody from '$lib/components/ui/ModalBody.svelte'
|
||||
import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
partyName: string
|
||||
deleting?: boolean
|
||||
onDelete: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
let { open = $bindable(), partyName, deleting = false, onDelete, onCancel }: Props = $props()
|
||||
</script>
|
||||
|
||||
<Dialog bind:open>
|
||||
{#snippet children()}
|
||||
<ModalHeader title="Delete {partyName}?" />
|
||||
<ModalBody>
|
||||
<p class="message">Are you sure you want to permanently delete this team?</p>
|
||||
</ModalBody>
|
||||
<ModalFooter
|
||||
{onCancel}
|
||||
cancelDisabled={deleting}
|
||||
primaryAction={{
|
||||
label: deleting ? 'Deleting...' : 'Yes, delete',
|
||||
onclick: onDelete,
|
||||
destructive: true,
|
||||
disabled: deleting
|
||||
}}
|
||||
/>
|
||||
{/snippet}
|
||||
</Dialog>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/typography' as *;
|
||||
|
||||
.message {
|
||||
margin: 0;
|
||||
font-size: $font-regular;
|
||||
line-height: 1.4;
|
||||
color: var(--text-primary);
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -63,6 +63,7 @@
|
|||
import { transformSkillsToArray } from '$lib/utils/jobSkills'
|
||||
import { findNextEmptySlot, SLOT_NOT_FOUND } from '$lib/utils/gridHelpers'
|
||||
import ConflictDialog from '$lib/components/dialogs/ConflictDialog.svelte'
|
||||
import DeleteTeamDialog from '$lib/components/dialogs/DeleteTeamDialog.svelte'
|
||||
import type { ConflictData } from '$lib/types/api/conflict'
|
||||
import { isConflictResponse, createConflictData } from '$lib/types/api/conflict'
|
||||
|
||||
|
|
@ -743,9 +744,11 @@
|
|||
transcendenceStep?: number,
|
||||
_editKey?: string
|
||||
) {
|
||||
if (uncapLevel === undefined) return
|
||||
try {
|
||||
await updateCharacterUncap.mutateAsync({
|
||||
id: gridCharacterId,
|
||||
partyId: party.id,
|
||||
partyShortcode: party.shortcode,
|
||||
uncapLevel,
|
||||
transcendenceStep
|
||||
|
|
@ -761,9 +764,11 @@
|
|||
transcendenceStep?: number,
|
||||
_editKey?: string
|
||||
) {
|
||||
if (uncapLevel === undefined) return
|
||||
try {
|
||||
await updateWeaponUncap.mutateAsync({
|
||||
id: gridWeaponId,
|
||||
partyId: party.id,
|
||||
partyShortcode: party.shortcode,
|
||||
uncapLevel,
|
||||
transcendenceStep
|
||||
|
|
@ -779,9 +784,11 @@
|
|||
transcendenceStep?: number,
|
||||
_editKey?: string
|
||||
) {
|
||||
if (uncapLevel === undefined) return
|
||||
try {
|
||||
await updateSummonUncap.mutateAsync({
|
||||
id: gridSummonId,
|
||||
partyId: party.id,
|
||||
partyShortcode: party.shortcode,
|
||||
uncapLevel,
|
||||
transcendenceStep
|
||||
|
|
@ -1021,42 +1028,26 @@
|
|||
/>
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{#snippet children()}
|
||||
<button class="btn-secondary" onclick={() => (editDialogOpen = false)} disabled={loading}>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn-primary" onclick={savePartyTitle} disabled={loading || !editingTitle.trim()}>
|
||||
{loading ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</ModalFooter>
|
||||
<ModalFooter
|
||||
onCancel={() => (editDialogOpen = false)}
|
||||
cancelDisabled={loading}
|
||||
primaryAction={{
|
||||
label: loading ? 'Saving...' : 'Save',
|
||||
onclick: savePartyTitle,
|
||||
disabled: loading || !editingTitle.trim()
|
||||
}}
|
||||
/>
|
||||
{/snippet}
|
||||
</Dialog>
|
||||
|
||||
<!-- Delete Confirmation Dialog -->
|
||||
<Dialog bind:open={deleteDialogOpen}>
|
||||
{#snippet children()}
|
||||
<ModalHeader title="Delete Party" />
|
||||
<ModalBody>
|
||||
<div class="delete-confirmation">
|
||||
<p>Are you sure you want to delete this party?</p>
|
||||
<p><strong>{party.name || 'Unnamed Party'}</strong></p>
|
||||
<p class="warning">⚠️ This action cannot be undone.</p>
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{#snippet children()}
|
||||
<button class="btn-secondary" onclick={() => (deleteDialogOpen = false)} disabled={deleting}>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn-danger" onclick={deleteParty} disabled={deleting}>
|
||||
{deleting ? 'Deleting...' : 'Delete Party'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</ModalFooter>
|
||||
{/snippet}
|
||||
</Dialog>
|
||||
<DeleteTeamDialog
|
||||
bind:open={deleteDialogOpen}
|
||||
partyName={party.name || 'Untitled'}
|
||||
{deleting}
|
||||
onDelete={deleteParty}
|
||||
onCancel={() => (deleteDialogOpen = false)}
|
||||
/>
|
||||
|
||||
<!-- Conflict Resolution Dialog -->
|
||||
<ConflictDialog
|
||||
|
|
@ -1434,27 +1425,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Delete confirmation styles
|
||||
.delete-confirmation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit;
|
||||
text-align: center;
|
||||
padding: $unit 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--text-primary);
|
||||
font-size: $font-medium;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: $error;
|
||||
font-size: $font-small;
|
||||
margin-top: $unit-half;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue