generated from alphane/template
168 lines
3.8 KiB
Vue
168 lines
3.8 KiB
Vue
<template>
|
|
<v-menu>
|
|
<template #activator="{ props: menuProps }">
|
|
<v-btn
|
|
icon
|
|
variant="text"
|
|
density="comfortable"
|
|
size="default"
|
|
v-bind="menuProps"
|
|
>
|
|
<v-icon icon="mdi-dots-vertical" />
|
|
</v-btn>
|
|
</template>
|
|
<v-list density="compact">
|
|
<v-list-item
|
|
prepend-icon="mdi-pencil-outline"
|
|
title="Edit"
|
|
@click="openEdit"
|
|
/>
|
|
<v-list-item
|
|
prepend-icon="mdi-delete-outline"
|
|
title="Delete"
|
|
class="text-error"
|
|
@click="showDelete = true"
|
|
/>
|
|
</v-list>
|
|
</v-menu>
|
|
|
|
<v-dialog
|
|
v-model="showEdit"
|
|
width="500"
|
|
>
|
|
<v-form
|
|
ref="editFormRef"
|
|
@submit.prevent="updateFlashcard"
|
|
>
|
|
<v-card>
|
|
<v-card-title>Edit Flashcard</v-card-title>
|
|
<v-card-text class="d-flex flex-column ga-2">
|
|
<v-textarea
|
|
v-model="editFront"
|
|
label="Front"
|
|
rows="3"
|
|
auto-grow
|
|
:rules="[required]"
|
|
/>
|
|
<v-textarea
|
|
v-model="editBack"
|
|
label="Back"
|
|
rows="3"
|
|
auto-grow
|
|
:rules="[required]"
|
|
/>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
variant="text"
|
|
text="Cancel"
|
|
@click="showEdit = false"
|
|
/>
|
|
<v-btn
|
|
type="submit"
|
|
color="primary"
|
|
variant="flat"
|
|
:loading="isSubmitting"
|
|
text="Save"
|
|
/>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-form>
|
|
</v-dialog>
|
|
|
|
<v-dialog
|
|
v-model="showDelete"
|
|
width="400"
|
|
>
|
|
<v-card>
|
|
<v-card-title>Delete Flashcard</v-card-title>
|
|
<v-card-text>Are you sure you want to delete this flashcard?</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
variant="text"
|
|
text="Cancel"
|
|
@click="showDelete = false"
|
|
/>
|
|
<v-btn
|
|
color="error"
|
|
variant="flat"
|
|
:loading="isSubmitting"
|
|
text="Delete"
|
|
@click="deleteFlashcard"
|
|
/>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue"
|
|
import { VForm } from "vuetify/components"
|
|
|
|
import { required } from "@/utils/validators"
|
|
import flashcardsApi, { type Flashcard } from "@/api/flashcards-api"
|
|
import useSnack from "@/use/use-snack"
|
|
|
|
const props = defineProps<{ flashcard: Flashcard }>()
|
|
|
|
const emit = defineEmits<{
|
|
updated: [flashcard: Flashcard]
|
|
deleted: [flashcardId: number]
|
|
}>()
|
|
|
|
const snack = useSnack()
|
|
const isSubmitting = ref(false)
|
|
|
|
// Edit
|
|
const showEdit = ref(false)
|
|
const editFront = ref("")
|
|
const editBack = ref("")
|
|
const editFormRef = ref<InstanceType<typeof VForm> | null>(null)
|
|
|
|
function openEdit() {
|
|
editFront.value = props.flashcard.front
|
|
editBack.value = props.flashcard.back
|
|
showEdit.value = true
|
|
}
|
|
|
|
async function updateFlashcard() {
|
|
if (!editFormRef.value) return
|
|
const { valid } = await editFormRef.value.validate()
|
|
if (!valid) return
|
|
|
|
try {
|
|
isSubmitting.value = true
|
|
const { flashcard } = await flashcardsApi.update(props.flashcard.id, {
|
|
front: editFront.value,
|
|
back: editBack.value,
|
|
})
|
|
emit("updated", flashcard)
|
|
showEdit.value = false
|
|
snack.success("Flashcard updated")
|
|
} catch {
|
|
snack.error("Failed to update flashcard")
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
// Delete
|
|
const showDelete = ref(false)
|
|
|
|
async function deleteFlashcard() {
|
|
try {
|
|
isSubmitting.value = true
|
|
await flashcardsApi.delete(props.flashcard.id)
|
|
emit("deleted", props.flashcard.id)
|
|
showDelete.value = false
|
|
snack.success("Flashcard deleted")
|
|
} catch {
|
|
snack.error("Failed to delete flashcard")
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
</script>
|