shack/pages/shelves/shelf.page.vue

87 lines
1.4 KiB
Vue

<template>
<div class="content">
<h3>{{ shelf.slug }}</h3>
<ul class="posts nolist">
<li
v-for="post in posts"
:key="post.id"
>
<Post
:post="post"
:shelf="shelf"
/>
</li>
</ul>
<form
class="form compose"
@submit.prevent="submitPost"
>
<div class="form-row">
<input
v-model="title"
placeholder="Title"
class="input"
>
</div>
<div class="form-row">
<input
v-model="link"
class="input"
placeholder="Link"
>
</div>
<div class="form-row">
<textarea
v-model="body"
placeholder="Body"
class="input body"
/>
</div>
<div class="form-actions">
<button class="button button-submit">Post</button>
</div>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Post from '../../components/posts/post.vue';
import * as api from '../../assets/js/api';
import { navigate } from '../../assets/js/navigate';
import { usePageContext } from '../../renderer/usePageContext';
const { pageData, routeParams } = usePageContext();
const {
shelf,
posts,
} = pageData;
const title = ref();
const link = ref();
const body = ref();
async function submitPost() {
const post = await api.post(`/shelves/${routeParams.id}/posts`, {
title: title.value,
link: link.value,
body: body.value,
});
navigate(`/s/${shelf.slug}/post/${post.id}`);
}
</script>
<style scoped>
.posts {
margin-bottom: 1rem;
}
</style>