From abbf877a24de18651204cbdacb2fcee0ecde9e8a Mon Sep 17 00:00:00 2001
From: Lauritz Tieste <84938977+Lauritz-Tieste@users.noreply.github.com>
Date: Thu, 23 May 2024 21:56:21 +0200
Subject: [PATCH] Implement page for challenge categories (#127)

---
 components/PageTitle.vue              |   2 +
 components/challenges/Table.vue       | 138 ++++++++++++++++++++++++++
 components/form/ChallengeCategory.vue | 125 +++++++++++++++++++++++
 components/navbar/Links.vue           |  48 ++++-----
 composables/challenges.ts             |  69 +++++++++++++
 locales/de.json                       |  16 ++-
 locales/en-US.json                    |  16 ++-
 pages/dashboard/challenges/[id].vue   |  47 +++++++++
 pages/dashboard/challenges/create.vue |  31 ++++++
 pages/dashboard/challenges/index.vue  |  70 +++++++++++++
 10 files changed, 528 insertions(+), 34 deletions(-)
 create mode 100644 components/challenges/Table.vue
 create mode 100644 components/form/ChallengeCategory.vue
 create mode 100644 composables/challenges.ts
 create mode 100644 pages/dashboard/challenges/[id].vue
 create mode 100644 pages/dashboard/challenges/create.vue
 create mode 100644 pages/dashboard/challenges/index.vue

diff --git a/components/PageTitle.vue b/components/PageTitle.vue
index 9798a78..a9fa1aa 100644
--- a/components/PageTitle.vue
+++ b/components/PageTitle.vue
@@ -47,6 +47,8 @@ export default defineComponent({
         return "Headings.ReportedTasks";
       case "dashboard-reported-tasks-id":
         return "Headings.ManageReport";
+      case "dashboard-challenges":
+        return "Headings.Challenges";
 
       default:
         return routeName;
diff --git a/components/challenges/Table.vue b/components/challenges/Table.vue
new file mode 100644
index 0000000..f3311bc
--- /dev/null
+++ b/components/challenges/Table.vue
@@ -0,0 +1,138 @@
+<template>
+  <Table :data="data" :loading="isLoading" :headers="headers">
+    <template #title="{ item }">
+      <div class="flex gap-2 md:gap-4 items-center max-w-[350px]">
+        <p class="clamp line-1 text-body-2">
+          {{ item?.title ?? "" }}
+        </p>
+      </div>
+    </template>
+
+    <template #description="{ item }">
+      <p class="clamp line-2 max-w-xl w-full">
+        {{ item?.description ?? "" }}
+      </p>
+    </template>
+
+    <template #actions="{ item }">
+      <div class="flex gap-3 justify-center">
+        <Icon @click="onclickDeleteItem(item)" class="cursor-pointer" rounded sm :icon="TrashIcon" />
+        <Icon @click="onclickEditItem(item)" class="cursor-pointer" rounded sm :icon="PencilIcon" />
+      </div>
+    </template>
+  </Table>
+</template>
+
+<script lang="ts">
+import type { Ref, PropType } from "vue";
+import { useI18n } from "vue-i18n";
+
+import {
+  ArrowTopRightOnSquareIcon,
+  XMarkIcon,
+  TrashIcon,
+  PencilIcon,
+} from "@heroicons/vue/24/outline/index.js";
+
+export default {
+  props: {
+    data: { type: Array as PropType<any[]>, default: [] },
+    loading: { type: Boolean, default: true },
+  },
+  components: {
+    ArrowTopRightOnSquareIcon,
+    XMarkIcon,
+    TrashIcon,
+    PencilIcon,
+  },
+  setup(props) {
+    const { t } = useI18n();
+
+    const isLoading = computed(() => {
+      return props.loading && props.data.length <= 0;
+    });
+
+    const headers = computed(() => {
+      let arrHeaders = [
+        {
+          label: "Headings.Title",
+          key: "title",
+        },
+        {
+          label: "Headings.Description",
+          key: "description",
+        },
+        {
+          label: "Headings.Actions",
+          key: "actions",
+          class: "text-center",
+        },
+      ];
+
+      return arrHeaders;
+    });
+
+    async function onclickDeleteItem(item: any) {
+      openDialog(
+        "warning",
+        "Dialogs.DeleteChallengeHeading",
+        "Dialogs.DeleteChallengeBody",
+        false,
+        {
+          label: "Dialogs.DeleteChallengeButton",
+          onclick: async () => {
+            setLoading(true);
+            const [success, error] = await deleteChallengeCategory(item.id);
+            setLoading(false);
+
+            success
+              ? openSnackbar(
+                "success",
+                "Dialogs.DeleteChallengeConfirmation"
+              )
+              : openSnackbar("error", error?.detail ?? "");
+          },
+        },
+        {
+          label: "Buttons.Cancel",
+          onclick: () => { },
+        }
+      );
+    }
+
+    const router = useRouter();
+    const challenge = useCodingChallenge();
+
+    function onclickEditItem(item: any) {
+      if (Boolean(!item) || Boolean(!item.id)) return;
+
+      challenge.value = item;
+      router.push(`/dashboard/challenges/${item.id}`);
+    }
+
+    return {
+      isLoading,
+      headers,
+      XMarkIcon,
+      TrashIcon,
+      PencilIcon,
+      onclickDeleteItem,
+      onclickEditItem,
+    };
+  },
+};
+</script>
+
+<style scoped>
+a {
+  @apply block w-fit pl-4 cursor-pointer;
+}
+
+a.pl-extra {
+  @apply pl-6;
+}
+
+.icon {
+  @apply h-6 w-6 md:h-7 md:w-7;
+}
+</style>
diff --git a/components/form/ChallengeCategory.vue b/components/form/ChallengeCategory.vue
new file mode 100644
index 0000000..3f3029b
--- /dev/null
+++ b/components/form/ChallengeCategory.vue
@@ -0,0 +1,125 @@
+<template>
+  <form class="grid grid-cols-1 md:grid-cols-2 gap-x-card gap-y-2" :class="{ 'form-submitting': form.submitting }"
+    @submit.prevent="onclickSubmitForm()" ref="refForm">
+
+    <h2 class="text-heading-3 md:col-span-2 mb-card flex gap-card items-center">
+      <span class="inline-block flex-shrink-0">{{ t("Headings.ChallengeCategoryInformation") }}</span>
+      <hr class="w-full" />
+    </h2>
+
+    <Input label="Headings.Title" v-model="form.title.value" @valid="form.title.valid = $event"
+      :rules="form.title.rules" />
+
+    <Input label="Headings.Description" v-model="form.description.value" @valid="form.description.valid = $event"
+      :rules="form.description.rules" />
+
+    <InputBtn :loading="form.submitting" class="md:col-span-2 self-end justify-self-end" @click="onclickSubmitForm()"
+      mt>
+      {{ t(!!data ? 'Headings.EditChallengeCategory' : 'Headings.CreateChallengeCategory') }}
+    </InputBtn>
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import type { PropType, Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { IForm } from '~/types/form';
+
+export default defineComponent({
+  props: { data: { type: Object as PropType<any>, default: null } },
+  setup(props) {
+    const { t } = useI18n();
+
+    // ============================================================= refs
+    const refForm = ref<HTMLFormElement | null>(null);
+
+    // ============================================================= reactive
+    const form = reactive<IForm>({
+      title: {
+        valid: false,
+        value: '',
+        rules: [
+          (v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.CompanyName',
+          (v: string) => !v || v.length >= 3 || 'Error.InputMinLength_3',
+          (v: string) => v.length <= 255 || 'Error.InputMaxLength_255',
+        ],
+      },
+      description: {
+        valid: true,
+        value: '',
+        rules: [(v: string) => v.length <= 255 || 'Error.InputMaxLength_255'],
+      },
+      submitting: false,
+      validate: () => {
+        let isValid = true;
+
+        for (const key in form) {
+          if (
+            key != 'validate' &&
+            key != 'body' &&
+            key != 'submitting' &&
+            !form[key].valid
+          ) {
+            isValid = false;
+          }
+        }
+
+        if (refForm.value) refForm.value.reportValidity();
+        return isValid;
+      },
+      body: () => {
+        let obj: any = {};
+        for (const key in form) {
+          if (key != 'validate' && key != 'body' && key != 'submitting')
+            obj[key] = form[key].value;
+        }
+        return obj;
+      },
+    });
+
+    // ============================================================= Pre-set Input fields
+    watch(
+      () => props.data,
+      (newValue, _) => {
+        if (!newValue) return;
+        form.title.value = newValue?.title ?? '';
+        form.description.value = newValue?.description ?? '';
+      },
+      { immediate: true, deep: true }
+    );
+    // ============================================================= functions
+    async function onclickSubmitForm() {
+      if (form.validate()) {
+        form.submitting = true;
+        const [success, error] = (props.data)
+          ? await editChallengeCategory(props.data.id, form.body())
+          : await createChallengeCategory(form.body());
+        form.submitting = false;
+
+        success ? successHandler(success) : errorHandler(error);
+      } else {
+        openSnackbar('error', 'Error.InvalidForm');
+      }
+    }
+
+    const router = useRouter();
+    function successHandler(res: any) {
+      router.push("/dashboard/challenges");
+    }
+
+    function errorHandler(res: any) {
+      openSnackbar('error', res?.detail ?? '');
+    }
+
+    return {
+      form,
+      onclickSubmitForm,
+      refForm,
+      t,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/components/navbar/Links.vue b/components/navbar/Links.vue
index b4641c3..831c578 100644
--- a/components/navbar/Links.vue
+++ b/components/navbar/Links.vue
@@ -1,40 +1,20 @@
 <template>
-  <aside
-    class="h-full w-72 lg:w-full bg-tertiary card shadow-2xl lg:shadow-none grid grid-rows-[auto_1fr_auto]"
-  >
+  <aside class="h-full w-72 lg:w-full bg-tertiary card shadow-2xl lg:shadow-none grid grid-rows-[auto_1fr_auto]">
     <NuxtLink to="/" class="flex gap-box items-center">
-      <img
-        src="/images/logo-text.png"
-        alt="bootstrap academy logo"
-        class="object-contain w-36 cursor-pointer"
-      />
-      <h6
-        class="w-fit mt-2 italic px-2 py-0.5 bg-info rounded text-white font-heading text-heading-5"
-      >
+      <img src="/images/logo-text.png" alt="bootstrap academy logo" class="object-contain w-36 cursor-pointer" />
+      <h6 class="w-fit mt-2 italic px-2 py-0.5 bg-info rounded text-white font-heading text-heading-5">
         Admin
       </h6>
     </NuxtLink>
 
     <nav class="mt-12 flex flex-col gap-8">
-      <NuxtLink
-        v-for="({ name, icon, label, pathname }, i) of links"
-        :key="i"
-        :to="pathname"
-        class="h-fit px-4 py-3 rounded"
-        @click.prevent="emit('closeMenu', true)"
-        :class="{
+      <NuxtLink v-for="({ name, icon, label, pathname }, i) of links" :key="i" :to="pathname"
+        class="h-fit px-4 py-3 rounded" @click.prevent="emit('closeMenu', true)" :class="{
           'active-link': activePathName == name,
-        }"
-      >
-        <IconText
-          lg
-          :icon="icon"
-          :fill="activePathName == name ? 'fill-white' : 'fill-accent'"
-          :iconColor="activePathName == name ? 'text-white' : 'text-accent'"
-          :labelColor="
-            activePathName == name ? 'text-white' : 'text-subheading'
-          "
-        >
+        }">
+        <IconText lg :icon="icon" :fill="activePathName == name ? 'fill-white' : 'fill-accent'"
+          :iconColor="activePathName == name ? 'text-white' : 'text-accent'" :labelColor="activePathName == name ? 'text-white' : 'text-subheading'
+            ">
           {{ t(label) }}
         </IconText>
       </NuxtLink>
@@ -53,6 +33,7 @@ import {
   BriefcaseIcon,
   Bars3Icon,
   BookOpenIcon,
+  TrophyIcon
 } from "@heroicons/vue/24/solid/index.js";
 import IconSkillTree from "~/components/icon/SkillTree.vue";
 
@@ -105,6 +86,12 @@ export default {
         label: "Links.ReportedTasks",
         pathname: "/dashboard/reported-tasks",
       },
+      {
+        name: "dashboard-challenges",
+        icon: TrophyIcon,
+        label: "Links.Challenges",
+        pathname: "/dashboard/challenges",
+      },
     ]);
 
     const route = useRoute();
@@ -121,7 +108,8 @@ export default {
 .active-link {
   background-color: var(--color-accent);
 }
-.active-link > * {
+
+.active-link>* {
   color: var(--color-white) !important;
   fill: var(--color-white) !important;
 }
diff --git a/composables/challenges.ts b/composables/challenges.ts
new file mode 100644
index 0000000..17d5fc3
--- /dev/null
+++ b/composables/challenges.ts
@@ -0,0 +1,69 @@
+import { useState } from "#app";
+
+export const useChallengeCategories = () =>
+  useState<any[]>("challenge-categories", () => []);
+
+export const useChallengeCategory = () =>
+  useState<any>("challenge-category", () => null);
+
+export async function getChallengeCategory(id: string) {
+  try {
+    const response = await GET(`/challenges/categories/${id}`);
+
+    const challengeCategory = useChallengeCategory();
+    challengeCategory.value = response ?? null;
+
+    return [response, null];
+  } catch (error: any) {
+    return [null, error.data];
+  }
+}
+
+export async function createChallengeCategory(body: any) {
+  try {
+    const response = await POST("/challenges/categories", body);
+
+    getChallengeCategories();
+
+    return [response, null];
+  } catch (error: any) {
+    return [null, error.data];
+  }
+}
+
+export async function editChallengeCategory(id: string, body: any) {
+  try {
+    const response = await PATCH(`/challenges/categories/${id}`, body);
+
+    getChallengeCategories();
+
+    return [response, null];
+  } catch (error: any) {
+    return [null, error.data];
+  }
+}
+
+export async function deleteChallengeCategory(id: string) {
+  try {
+    const response = await DELETE(`/challenges/categories/${id}`);
+
+    getChallengeCategories();
+
+    return [response, null];
+  } catch (error: any) {
+    return [null, error.data];
+  }
+}
+
+export async function getChallengeCategories() {
+  try {
+    const response = await GET(`/challenges/categories`);
+
+    const ChallengeCategories = useChallengeCategories();
+    ChallengeCategories.value = response ?? [];
+
+    return [response, null];
+  } catch (error: any) {
+    return [null, error.data];
+  }
+}
diff --git a/locales/de.json b/locales/de.json
index 3cc73e1..6556da2 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -96,7 +96,12 @@
 		"JobEnvironment": "Arbeitsumgebung",
 		"MatchingSolution": "Passende Lösung",
 		"TaskOwner": "Ersteller",
-		"reportedTasks": "Gemeldete Aufgaben"
+		"reportedTasks": "Gemeldete Aufgaben",
+		"Challenges": "Challenge-Kategorien",
+		"Title": "Titel",
+		"ChallengeCategoryInformation": "Informationen zur Challenge-Kategorie",
+		"CreateChallengeCategory": "Challenge-Kategorie erstellen",
+		"EditChallengeCategory": "Challenge-Kategorie bearbeiten"
 	},
 	"Body": {
 		"SearchByEmail": "Suche nach E-Mail",
@@ -204,13 +209,20 @@
 		"blockReporter": "Reporter blockieren",
 		"blockCreator": "Ersteller blockieren"
 	},
+	"Dialogs": {
+		"DeleteChallengeHeading": "Challenge-Kategorie löschen?",
+		"DeleteChallengeBody": "Sind Sie sicher, dass Sie diese Challenge-Kategorie löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+		"DeleteChallengeButton": "Ja, Challenge-Kategorie löschen",
+		"DeleteChallengeConfirmation": "Die Challenge-Kategorie wurde erfolgreich gelöscht."
+	},
 	"Links": {
 		"GoBack": "Zurück",
 		"Dashboard": "Dashboard",
 		"Users": "Benutzer",
 		"Jobs": "Jobs",
 		"SkillTree": "Skill-Baum",
-		"ReportedTasks": "Gemeldete Aufgaben"
+		"ReportedTasks": "Gemeldete Aufgaben",
+		"Challenges": "Challenge-Kategorien"
 	},
 	"Success": {
 		"ResolveReport": "Bericht erfolgreich gelöst",
diff --git a/locales/en-US.json b/locales/en-US.json
index 16660e5..5cb8be0 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -99,7 +99,12 @@
 		"JobEnvironment": "Job Environment",
 		"MatchingSolution": "Matching Solution",
 		"TaskOwner": "Task Owner",
-		"reportedTasks": "Reported Tasks"
+		"reportedTasks": "Reported Tasks",
+		"Challenges": "Challenge categories",
+		"Title": "Title",
+		"ChallengeCategoryInformation": "Information on the challenge category",
+		"CreateChallengeCategory": "Create challenge category",
+		"EditChallengeCategory": "Edit challenge category"
 	},
 	"Body": {
 		"SearchByEmail": "Search by email",
@@ -207,13 +212,20 @@
 		"blockReporter": "Block reporter",
 		"blockCreator": "Block creator"
 	},
+	"Dialogs": {
+		"DeleteChallengeHeading": "Delete challenge category?",
+		"DeleteChallengeBody": "Are you sure you want to delete this challenge category? This action cannot be undone.",
+		"DeleteChallengeButton": "Yes, Delete challenge category",
+		"DeleteChallengeConfirmation": "Challenge category has been deleted successfully."
+	},
 	"Links": {
 		"GoBack": "Go Back",
 		"Dashboard": "Dashboard",
 		"Users": "Users",
 		"Jobs": "Jobs",
 		"SkillTree": "Skill Tree",
-		"ReportedTasks": "Reported Tasks"
+		"ReportedTasks": "Reported Tasks",
+		"Challenges": "Challenge categories"
 	},
 	"Success": {
 		"ResolveReport": "Successfully Resolved Report",
diff --git a/pages/dashboard/challenges/[id].vue b/pages/dashboard/challenges/[id].vue
new file mode 100644
index 0000000..5256993
--- /dev/null
+++ b/pages/dashboard/challenges/[id].vue
@@ -0,0 +1,47 @@
+<template>
+  <main class="container pt-container pb-container grid place-items-center h-screen-inner min">
+
+    <Head>
+      <Title>{{ t("Headings.EditChallengeCategory") }}</Title>
+    </Head>
+
+    <article class="container-form bg-primary max-w-none">
+      <h1 class="text-heading-2 text-center mb-card">{{ t("Headings.EditChallengeCategory") }}</h1>
+      <FormChallengeCategory :data="challengeCategory" />
+    </article>
+  </main>
+</template>
+
+<script lang="ts">
+import type { Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+definePageMeta({
+  middleware: ['auth'],
+});
+
+export default {
+  head: {
+    title: 'Headings.EditChallengeCategory',
+  },
+  setup() {
+    const { t } = useI18n();
+
+    const route = useRoute();
+
+    const id = computed(() => {
+      return <string>(route?.params?.id ?? '');
+    });
+
+    const loading = ref(true);
+    const challengeCategory: Ref<any> = useChallengeCategory();
+
+    onMounted(async () => {
+      await getChallengeCategory(id.value);
+      loading.value = false;
+    });
+
+    return { t, id, loading, challengeCategory };
+  },
+};
+</script>
diff --git a/pages/dashboard/challenges/create.vue b/pages/dashboard/challenges/create.vue
new file mode 100644
index 0000000..603a6fa
--- /dev/null
+++ b/pages/dashboard/challenges/create.vue
@@ -0,0 +1,31 @@
+<template>
+  <main class="container pt-container pb-container grid place-items-center h-screen-inner min">
+
+    <Head>
+      <Title>{{ t("Headings.CreateChallengeCategory") }}</Title>
+    </Head>
+
+    <article class="container-form bg-primary max-w-none">
+      <h1 class="text-heading-2 text-center mb-card">{{ t("Headings.CreateChallengeCategory") }}</h1>
+      <FormChallengeCategory />
+    </article>
+  </main>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+
+definePageMeta({
+  middleware: ['auth'],
+});
+
+export default {
+  head: {
+    title: 'Headings.CreateChallengeCategory',
+  },
+  setup() {
+    const { t } = useI18n();
+    return { t };
+  },
+};
+</script>
diff --git a/pages/dashboard/challenges/index.vue b/pages/dashboard/challenges/index.vue
new file mode 100644
index 0000000..a39c7ec
--- /dev/null
+++ b/pages/dashboard/challenges/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <main>
+    <div ref="scrollRef"></div>
+    <PageTitle />
+
+    <Head>
+      <Title>{{ t("Headings.Challenges") }}</Title>
+    </Head>
+
+    <div class="flex justify-end mb-card">
+      <NuxtLink to="/dashboard/challenges/create" class="flex-shrink-0 w-fit">
+        <Btn :icon="PlusIcon">{{ t("Headings.CreateChallengeCategory") }}</Btn>
+      </NuxtLink>
+    </div>
+
+    <ChallengesTable :data="challengeCategories" :loading="loading" />
+
+    <ScrollToBtn :scrollRef="scrollRef" />
+  </main>
+</template>
+
+<script lang="ts">
+import { PlusIcon } from '@heroicons/vue/20/solid';
+import type { Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+definePageMeta({
+  middleware: ['auth'],
+  layout: 'dashboard',
+});
+
+export default {
+  head: {
+    title: 'Challenges',
+  },
+  setup() {
+    const { t } = useI18n();
+
+    const scrollRef = ref<HTMLElement | null>(null);
+
+    const challengeCategories: Ref<any[]> = useChallengeCategories();
+
+    const loading = ref(!(challengeCategories.value && challengeCategories.value.length > 0));
+
+    onMounted(async () => {
+      await getChallengeCategories();
+    });
+
+    const sortOptions = [
+      {
+        label: 'Latest',
+        value: 'latest',
+      },
+      {
+        label: 'Oldest',
+        value: 'oldest',
+      },
+    ];
+
+    return {
+      t,
+      loading,
+      challengeCategories,
+      sortOptions,
+      scrollRef,
+      PlusIcon
+    };
+  },
+};
+</script>