personae/app/components/CharacterEditor.vue

<template>
  <div>
    <SpinnerModal
      v-if="isPending"
      :visible="true"
    />

    <EditorCard
      v-else
      name="character"
      :modelId="props.characterId"
      :action="props.action"
      :fields="characterFields"
      :initialValue="props.initialValue"
      :options="options"
      :isSaved="isSaved"
      :redirectBack="{ name: 'characters' }"
      :schema="schema"
      @create="create"
      @update="update"
      @delete="destroy"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  action: {
    type: String,
    default: "view",
    validator: (value) => _includes(["create", "update", "view"], value)
  },

  characterId: {
    type: String,
    required: false,
    validator: (value, props) => props.action === "create" || isPresent(value)
  },

  initialValue: {
    type: Object,
    default: {},
    required: false
  }
})

const toast = useToast()
const { createCharacter } = useCreateCharacter()
const { updateCharacter } = useUpdateCharacter()
const { deleteCharacter } = useDeleteCharacter()

const { data: options, isPending } = useQuery(characterOptionsQuery)

const schema =
  props.action === "create" ? createCharacterSchema : updateCharacterSchema

const isSaved = ref(false)

async function create(character) {
  createCharacter(character)
  isSaved.value = true

  toast.add({
    severity: "success",
    summary: "Saved.",
    detail: "The character is saved.",
    life: 3000
  })

  await navigateTo({ name: "characters" })
}

async function update(editedFields) {
  updateCharacter(props.characterId, editedFields)
  isSaved.value = true

  toast.add({
    severity: "success",
    summary: "Updated.",
    detail: "The character is updated.",
    life: 3000
  })

  await navigateTo({ name: "characters" })
}

async function destroy() {
  deleteCharacter(props.characterId)
  isSaved.value = true

  toast.add({
    severity: "success",
    summary: "Deleted.",
    detail: "The character is deleted.",
    life: 3000
  })

  await navigateTo({ name: "characters" })
}
</script>

<style scoped></style>