From 9da58cdadb5e8d351ca071ff95cfa7c2fb301395 Mon Sep 17 00:00:00 2001
From: Jarlem Red de Peralta <lmoa.jhdp@gmail.com>
Date: Tue, 8 Nov 2022 01:00:01 +0800
Subject: [PATCH] chore(tag): prepare creation page

---
 pages/tag/create.page.vue | 90 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)

diff --git a/pages/tag/create.page.vue b/pages/tag/create.page.vue
index e69de29bb..2a8fdbb74 100644
--- a/pages/tag/create.page.vue
+++ b/pages/tag/create.page.vue
@@ -0,0 +1,90 @@
+<template>
+	<ListRedirector resource-type="tag"/>
+
+	<ReceivedErrors v-if="receivedErrors.length" :received-errors="receivedErrors"/>
+	<ReceivedSuccessMessages
+		v-if="successMessages.length"
+		:received-success-messages="successMessages"/>
+	<form @submit.prevent="createDepartment">
+		<label class="block">
+			Tag name:
+			<input
+				id="full-name"
+				v-model="tagName"
+				class="border-solid"
+				type="text"/>
+		</label>
+
+		<label class="block">
+			May admit students:
+			<input
+				id="may-admit"
+				v-model="mayAdmit"
+				type="checkbox"/>
+		</label>
+		<input type="submit" value="Create department"/>
+	</form>
+</template>
+
+<style>
+</style>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+
+import type { UnitError } from "$/types/server"
+
+import convertToTitle from "$/string/convert_to_title"
+import DepartmentFetcher from "$@/fetchers/department"
+
+import ListRedirector from "@/resource_management/list_redirector.vue"
+import ReceivedErrors from "@/helpers/message_handlers/received_errors.vue"
+import ReceivedSuccessMessages from "@/helpers/message_handlers/received_success_messages.vue"
+
+const fullName = ref("")
+const acronym = ref("")
+const mayAdmit = ref(false)
+
+const fetcher = new DepartmentFetcher()
+const receivedErrors = ref<string[]>([])
+const successMessages = ref<string[]>([])
+
+const tagName = computed<string>({
+	"get": () => fullName.value,
+	set(newValue: string): void {
+		fullName.value = convertToTitle(newValue)
+	}
+})
+
+const capitalAcronym = computed<string>({
+	"get": () => acronym.value,
+	set(newValue: string): void {
+		acronym.value = newValue.toUpperCase()
+	}
+})
+
+function createDepartment() {
+	fetcher.create({
+		"acronym": acronym.value,
+		"fullName": fullName.value,
+		"mayAdmit": mayAdmit.value
+	})
+	.then(() => {
+		if (receivedErrors.value.length) receivedErrors.value = []
+		successMessages.value.push("Department has been created successfully!")
+	})
+	.catch(({ body }) => {
+		if (successMessages.value.length) successMessages.value = []
+		if (body) {
+			const { errors } = body
+			receivedErrors.value = errors.map((error: UnitError) => {
+				const readableDetail = error.detail
+
+				return readableDetail
+			})
+		} else {
+			receivedErrors.value = [ "an error occured" ]
+		}
+	})
+}
+</script>