puffpastry-frontend/src/components/modals/IssueModal.vue

<template>
  <Modal header="New Issue" @submitted="submit">
    <slot>
      <div class="my-3">
        <input type="text" class="w-full border-gray-300 border border-solid py-2 px-2.5" placeholder="Title" aria-label="Title" v-model="title" />
      </div>
      <div class="my-3">
        <PostBuilder @text-change="assignDescription" />
      </div>
    </slot>
  </Modal>
</template>

<script setup lang="ts" generic="T extends ContentModal">

import { useFetch } from "../../composables/useFetch.ts";
import { useSession } from "../../composables/useSession.ts";
import Modal from "./Modal.vue";
import { ref } from "vue";
import { AddIssueRequest, AddIssueResponse } from "../../types/issue.ts";
import PostBuilder from "../PostBuilder.vue";
import { ContentModal } from "../../composables/useModal.ts";

const title = ref('');
const description = ref<string[]>(['']);

const { post } = useFetch();

const submit = async () => {
  const { getSessionId } = useSession();

  const sessionId = getSessionId();
  if (sessionId) {
    await post<AddIssueRequest, AddIssueResponse>('/issues/create', {
      title: title.value,
      paragraphs: description.value
    });
  }
}

const assignDescription = (paragraphs: string[]) => {
  description.value = paragraphs;
}
</script>

<style scoped>

</style>