From 8ec7a09193bc1859a279b8c247ac86016ab913b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Tue, 26 Sep 2023 22:30:30 -0400
Subject: [PATCH] feat(components): create reusable components to be used for
 listing stories

this includes - individual story information - the list itself (duh) - a component for displaying key-value pairs delimited by `: `
---
 components/listings/metaItem.vue    |   9 ++
 components/listings/singleStory.vue | 240 ++++++++++++++++++++++++++++
 components/listings/stories.vue     |  52 ++++++
 3 files changed, 301 insertions(+)
 create mode 100644 components/listings/metaItem.vue
 create mode 100644 components/listings/singleStory.vue
 create mode 100644 components/listings/stories.vue

diff --git a/components/listings/metaItem.vue b/components/listings/metaItem.vue
new file mode 100644
index 0000000..dd94a0b
--- /dev/null
+++ b/components/listings/metaItem.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const props = defineProps<{ label?: string }>()
+</script>
+
+<template>
+	<span>
+		<b>{{ label }}</b>: <slot/>
+	</span>
+</template>
\ No newline at end of file
diff --git a/components/listings/singleStory.vue b/components/listings/singleStory.vue
new file mode 100644
index 0000000..e92375e
--- /dev/null
+++ b/components/listings/singleStory.vue
@@ -0,0 +1,240 @@
+<script lang="ts" setup>
+import type { IStory } from "~/models/stories/index";
+import { format } from "date-fns";
+import icon from "../icon.vue";
+import { theme } from "ant-design-vue";
+import metaItem from "./metaItem.vue";
+
+const { useToken } = theme;
+const { token } = useToken()
+const dark = inject<Ref<boolean>>("dark")
+let prop = defineProps<{ story: IStory, last?: boolean }>()
+const idxo = ((prop.last || false) ? prop.story.chapters.length : 1) - 1
+console.log("posti->", prop.story.chapters[ prop.story.chapters.length - 1 ])
+const shortDate = format(Date.parse(
+	prop.story.chapters[ prop.story.chapters.length - 1 ].posted.toString()
+),
+	"yyyy/MM/dd"
+)
+const longDate = format(Date.parse(
+	prop.story.chapters[ prop.story.chapters.length - 1 ].posted.toString()
+),
+	"iiii',' yyyy-MM-dd"
+)
+</script>
+<template>
+	<a-card>
+		<template #title>
+			<div style="padding-top: 1em; padding-bottom: 0.8em;">
+				<NuxtLink :to="`/story/${story._id}/${idxo + 1}`">
+					{{ story.title }}
+				</NuxtLink>
+				<div style="display: flex; font-size: 0.9em; align-items: baseline;" class="headerthing">
+					<span>
+						a
+					</span>
+					<div style="" v-for="(band, idx) in story.chapters[ idxo ].bands.filter(a => !!a)">
+						<span>
+							<NuxtLink :to="`/band/${band._id}`">
+								{{ band.name }}
+							</NuxtLink>{{ idx < story.chapters[ idxo ].bands.length - 1 ? ", " : "" }}
+						</span>
+					</div>
+					<span>
+						fic by
+					</span>
+					<span>
+						<NuxtLink :to="`/user/${story.author._id}`">
+							{{ story.author.username }}
+						</NuxtLink>
+					</span>
+				</div>
+			</div>
+		</template>
+		<div v-html="story.chapters[ idxo ].summary"/>
+		<a-card v-if="story.ficmas != null" class="ficmasBlurb lessPadding">
+			Written as a gift for 
+			<NuxtLink :to="`/user/${story.ficmas.wisher?._id || 1}`">
+				{{ story.ficmas.wisher?.username || "<...>" }}
+			</NuxtLink> as part of {{ story.ficmas.year }}&rsquo;s
+			<span v-if="story.ficmas.anniversary">
+				Anniversary Ficmas Fest
+			</span>
+			<span v-else>
+				A Very Kinky Rockfic Ficmas Fest.
+			</span>
+		</a-card>
+		<a-card v-if="story.challenge != null" :style="{
+			background: story.challenge.color
+		}" class="lessPadding">
+			Entry for the
+			<NuxtLink :to="`/challenge/${story.challenge._id}`">
+				{{ story.challenge.name }}
+			</NuxtLink>
+			challenge.
+		</a-card>
+		<a-divider :style="{ borderColor: token[ 'pink-5' ], marginBottom: '1em' }"/>
+		<div class="storyMeta">
+			<div class="inner">
+				<span v-if="story.chapters.length > 1">
+					<NuxtLink :to="`/story/${story._id}/chapters`">
+						{{ story.chapters.length }} chapters
+					</NuxtLink>
+				</span>
+				<span v-else>
+					{{ story.chapters.length }} chapter
+				</span>
+				<span>
+					{{ story.chapters[ idxo ].nsfw ? "Adult" : "Not so adult" }}
+				</span>
+				<span>
+					{{ story.completed ? "Completed" : "WIP" }}
+				</span>
+			</div>
+
+			<div class="outer">
+				<meta-item :span="1" label="Genre(s)">
+					 {{ story.chapters[ idxo ].genre.join(", ") }} 
+				</meta-item>
+				<meta-item label="Characters">
+					{{ story.chapters[ idxo ].characters.join(", ") }}
+				</meta-item>
+				<meta-item label="Relationship(s)">
+					<div style="display: inline-block" v-for="(rel, idx) in story.chapters[ idxo ].relationships">
+						<span>
+							{{ Array.isArray(rel) ? rel.join("/") : rel }}
+							{{ idx < story.chapters[ idxo ].relationships.length - 1 ? "," : "" }}
+						</span>
+					</div>
+					<span v-if="story.chapters[ idxo ].relationships.length < 1">
+						<i>N/A</i>
+					</span>
+				</meta-item>
+				<meta-item label="Last updated">
+					<a-tooltip>
+						<template #title>
+							{{ longDate }}
+						</template>
+						{{ shortDate }}
+					</a-tooltip>
+				</meta-item>
+			</div>
+		</div>
+		<div class="stats">
+			<span>
+				<span class="staticon">
+					<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#ff2883" :size="12" name="heart"/>
+				</span>
+				<span>
+					{{ story.favs }}
+				</span>
+			</span>
+			<span>
+				<span class="staticon">
+					<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#1787d7" :size="12" name="book-open" />
+				</span>
+				<span>
+					{{ story.views }}
+				</span>
+			</span>
+			<span>
+				<span class="staticon">
+					<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#51e07c" :size="12" name="thumbs-up" />
+				</span>
+				<span>
+					{{ story.recs }}
+				</span>
+			</span>
+			<span>
+				<span class="staticon">
+					<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#c2d420" :size="12" name="download" />
+				</span>
+				<span>
+					{{ story.downloads }}
+				</span>
+			</span>
+			<span>
+				<span class="staticon">
+					<icon istyle="solid" icolor="#0083aa" :size="12" name="comment" />
+				</span>
+				<span>
+					{{ story.reviews }}
+				</span>
+			</span>
+		</div>
+	</a-card>
+</template>
+<style>
+.lessPadding>.ant-card-body {
+	padding: 0.8em !important;
+}
+
+.ant-descriptions-view tr {
+	border: none;
+}
+
+.ant-descriptions-item {
+	padding-bottom: 0 !important;
+}
+
+.storyMeta .ant-descriptions-item-container,
+.storyMeta .ant-descriptions-item-container>* {
+	font-size: 1em !important;
+}
+</style>
+<style scoped>
+.stats {
+	padding-top: 0.25em;
+}
+
+.stats>*+* {
+	margin-left: 0.5em;
+}
+
+.stats>*>*+* {
+	margin-left: 0.5em;
+}
+
+.headerthing>*+* {
+	margin-left: 0.3em;
+	font-size: 0.9em !important;
+}
+
+hr {
+	background-color: #aaa !important;
+	border: none !important;
+}
+
+.ficmasBlurb {
+	background-color: #13b658;
+	color: white;
+	/* border-radius:  */
+}
+
+.ficmasBlurb a {
+	color: #000;
+	font-weight: bold;
+}
+
+.ficmasBlurb a:hover {
+	text-decoration: underline;
+}
+
+.storyMeta {
+	display: flex;
+	flex-direction: column;
+	font-size: 0.857em !important;
+}
+
+.storyMeta .outer {
+	display: flex;
+	flex-direction: column;
+	margin-top: 0.5em;
+}
+
+.storyMeta .inner>*+*::before {
+	content: "♪";
+	color: #ff2883;
+	margin: 0 0.7em;
+}
+</style>
\ No newline at end of file
diff --git a/components/listings/stories.vue b/components/listings/stories.vue
new file mode 100644
index 0000000..d026c92
--- /dev/null
+++ b/components/listings/stories.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+;
+import singleStory from '~/components/listings/singleStory.vue';
+const route = useRoute()
+let curPage = ref(route.query.page || 1)
+const props = defineProps<{ prefix: string; }>()
+let { data }: any = await useApiFetch(`${props.prefix}/stories`, {
+	query: {
+		page: curPage
+	}
+})
+let rdata = ref(data)
+const pagiChange = async (page, pageSize) => {
+	curPage.value = page;
+	// await navigateTo({
+	// 	path: useRoute().fullPath,
+	// 	query: {
+	// 		page
+	// 	}
+	// })
+	// let { data }: any = await useApiFetch(`${props.prefix}/stories`, {
+	// 	query: {
+	// 		page: curPage
+	// 	}
+	// })
+	// rdata.value = data;
+}
+</script>
+<template>
+	<a-list :pagination="{
+		defaultPageSize: 20,
+		total: rdata.total,
+		defaultCurrent: curPage as number,
+		// onChange: pagiChange,
+		hideOnSinglePage: true,
+		showSizeChanger: false
+	}" :data-source="rdata.stories" item-layout="vertical">
+		<template #renderItem="{ item }">
+			<!-- {{ item.title }} -->
+			<single-story :story="item"/>
+		</template>
+	</a-list>
+</template>
+<style scoped>
+.ant-list-items>*+* {
+	margin-top: 1.2em;
+}
+
+.ant-pagination {
+	text-align: center;
+}
+</style>
\ No newline at end of file