From 25070fc60095a569c1f036f4801ffcb410261e8d Mon Sep 17 00:00:00 2001
From: Kamil Piech <kamil.piech@blumilk.pl>
Date: Tue, 10 Sep 2024 15:57:39 +0200
Subject: [PATCH] #27 - faq page (#134)

* #27 - feat: added faq page

* #27 - fix: fix

* #27 - fix: code review fixes

* #27 - fix: code review frontend fixes

* #27 - feat: added empty state section for public side of the site

* - resolving conflicts

---------

Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com>
---
 .../Controllers/Public/ContactController.php  |  5 --
 app/Http/Controllers/Public/FaqController.php | 20 +++++++
 .../js/Pages/Dashboard/ContactInfo/Index.vue  |  2 +-
 resources/js/Pages/Dashboard/Course/Index.vue |  2 +-
 .../Pages/Dashboard/CourseSemester/Index.vue  |  2 +-
 .../CourseSemester/Student/Index.vue          |  2 +-
 resources/js/Pages/Dashboard/FAQ/Index.vue    |  2 +-
 resources/js/Pages/Dashboard/Field/Index.vue  |  2 +-
 resources/js/Pages/Dashboard/News/Index.vue   |  2 +-
 resources/js/Pages/Dashboard/Section/Show.vue |  2 +-
 .../js/Pages/Dashboard/Semester/Index.vue     |  2 +-
 .../js/Pages/Dashboard/Student/Index.vue      |  2 +-
 resources/js/Pages/Public/Contact.vue         |  9 ----
 resources/js/Pages/Public/Course/Index.vue    |  2 +
 resources/js/Pages/Public/Faq.vue             | 53 +++++++++++++++++++
 resources/js/Pages/Public/News/Index.vue      | 15 ++----
 resources/js/Pages/Public/News/News.vue       |  4 +-
 .../{ => EmptyState}/EmptyState.vue           |  0
 .../EmptyState/Public/EmptyState.vue          | 16 ++++++
 routes/web.php                                |  2 +
 20 files changed, 110 insertions(+), 36 deletions(-)
 create mode 100644 app/Http/Controllers/Public/FaqController.php
 create mode 100644 resources/js/Pages/Public/Faq.vue
 rename resources/js/Shared/Components/{ => EmptyState}/EmptyState.vue (100%)
 create mode 100644 resources/js/Shared/Components/EmptyState/Public/EmptyState.vue

diff --git a/app/Http/Controllers/Public/ContactController.php b/app/Http/Controllers/Public/ContactController.php
index 61835275..e22b8ccf 100644
--- a/app/Http/Controllers/Public/ContactController.php
+++ b/app/Http/Controllers/Public/ContactController.php
@@ -18,12 +18,7 @@ public function __invoke(): Response
         $contactInfos = ContactInfo::query()->get();
 
         return inertia("Public/Contact", [
-            "title" => $settings->teacher_titles,
-            "name" => $settings->teacher_name,
             "email" => $settings->teacher_email,
-            "department" => $settings->department_name,
-            "university" => $settings->university_name,
-            "universityLogo" => asset("cwup-full.png"),
             "contactInfos" => $contactInfos->map(fn(ContactInfo $contactInfo): ContactInfoData => ContactInfoData::fromModel($contactInfo)),
         ]);
     }
diff --git a/app/Http/Controllers/Public/FaqController.php b/app/Http/Controllers/Public/FaqController.php
new file mode 100644
index 00000000..a1de51f2
--- /dev/null
+++ b/app/Http/Controllers/Public/FaqController.php
@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Keating\Http\Controllers\Public;
+
+use Inertia\Response;
+use Keating\Models\Faq;
+
+class FaqController
+{
+    public function __invoke(): Response
+    {
+        $faqs = Faq::query()->get();
+
+        return inertia("Public/Faq", [
+            "faqs" => $faqs,
+        ]);
+    }
+}
diff --git a/resources/js/Pages/Dashboard/ContactInfo/Index.vue b/resources/js/Pages/Dashboard/ContactInfo/Index.vue
index c6d1fc02..d13608e9 100644
--- a/resources/js/Pages/Dashboard/ContactInfo/Index.vue
+++ b/resources/js/Pages/Dashboard/ContactInfo/Index.vue
@@ -6,7 +6,7 @@ import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import Pagination from '@/Shared/Components/Pagination.vue'
 import Button from '@/Shared/Components/Buttons/Button.vue'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { ref } from 'vue'
 import { PencilSquareIcon, XCircleIcon } from '@heroicons/vue/24/outline'
diff --git a/resources/js/Pages/Dashboard/Course/Index.vue b/resources/js/Pages/Dashboard/Course/Index.vue
index 1a839c2f..c0bc8a08 100644
--- a/resources/js/Pages/Dashboard/Course/Index.vue
+++ b/resources/js/Pages/Dashboard/Course/Index.vue
@@ -5,7 +5,7 @@ import TableWrapper from '@/Shared/Components/Table/TableWrapper.vue'
 import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import Button from '@/Shared/Components/Buttons/Button.vue'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { ref } from 'vue'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
diff --git a/resources/js/Pages/Dashboard/CourseSemester/Index.vue b/resources/js/Pages/Dashboard/CourseSemester/Index.vue
index acfaec8b..f9317be7 100644
--- a/resources/js/Pages/Dashboard/CourseSemester/Index.vue
+++ b/resources/js/Pages/Dashboard/CourseSemester/Index.vue
@@ -5,7 +5,7 @@ import TableWrapper from '@/Shared/Components/Table/TableWrapper.vue'
 import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import Button from '@/Shared/Components/Buttons/Button.vue'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { ref } from 'vue'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
diff --git a/resources/js/Pages/Dashboard/CourseSemester/Student/Index.vue b/resources/js/Pages/Dashboard/CourseSemester/Student/Index.vue
index 643053b6..c70dde8c 100644
--- a/resources/js/Pages/Dashboard/CourseSemester/Student/Index.vue
+++ b/resources/js/Pages/Dashboard/CourseSemester/Student/Index.vue
@@ -6,7 +6,7 @@ import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import Pagination from '@/Shared/Components/Pagination.vue'
 import Button from '@/Shared/Components/Buttons/Button.vue'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { ref, watch } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
diff --git a/resources/js/Pages/Dashboard/FAQ/Index.vue b/resources/js/Pages/Dashboard/FAQ/Index.vue
index 107c9c9f..3d4807bb 100644
--- a/resources/js/Pages/Dashboard/FAQ/Index.vue
+++ b/resources/js/Pages/Dashboard/FAQ/Index.vue
@@ -5,7 +5,7 @@ import TableWrapper from '@/Shared/Components/Table/TableWrapper.vue'
 import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import Button from '@/Shared/Components/Buttons/Button.vue'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { ref } from 'vue'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
diff --git a/resources/js/Pages/Dashboard/Field/Index.vue b/resources/js/Pages/Dashboard/Field/Index.vue
index c4d44b0a..674eca14 100644
--- a/resources/js/Pages/Dashboard/Field/Index.vue
+++ b/resources/js/Pages/Dashboard/Field/Index.vue
@@ -5,7 +5,7 @@ import TableWrapper from '@/Shared/Components/Table/TableWrapper.vue'
 import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import Button from '@/Shared/Components/Buttons/Button.vue'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { ref } from 'vue'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
diff --git a/resources/js/Pages/Dashboard/News/Index.vue b/resources/js/Pages/Dashboard/News/Index.vue
index d9a47c40..4b62f019 100644
--- a/resources/js/Pages/Dashboard/News/Index.vue
+++ b/resources/js/Pages/Dashboard/News/Index.vue
@@ -6,7 +6,7 @@ import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import Pagination from '@/Shared/Components/Pagination.vue'
 import Button from '@/Shared/Components/Buttons/Button.vue'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { ref, watch } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
diff --git a/resources/js/Pages/Dashboard/Section/Show.vue b/resources/js/Pages/Dashboard/Section/Show.vue
index e0413428..d24fee68 100644
--- a/resources/js/Pages/Dashboard/Section/Show.vue
+++ b/resources/js/Pages/Dashboard/Section/Show.vue
@@ -9,7 +9,7 @@ import { useForm } from '@inertiajs/inertia-vue3'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
 import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
 import { PencilSquareIcon, XCircleIcon } from '@heroicons/vue/24/outline'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableHeader from '@/Shared/Components/Table/TableHeader.vue'
diff --git a/resources/js/Pages/Dashboard/Semester/Index.vue b/resources/js/Pages/Dashboard/Semester/Index.vue
index e57ee896..72bcc8e9 100644
--- a/resources/js/Pages/Dashboard/Semester/Index.vue
+++ b/resources/js/Pages/Dashboard/Semester/Index.vue
@@ -5,7 +5,7 @@ import TableWrapper from '@/Shared/Components/Table/TableWrapper.vue'
 import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import Button from '@/Shared/Components/Buttons/Button.vue'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { ref } from 'vue'
 import { Method } from '@inertiajs/inertia'
diff --git a/resources/js/Pages/Dashboard/Student/Index.vue b/resources/js/Pages/Dashboard/Student/Index.vue
index 60a6d358..35811a97 100644
--- a/resources/js/Pages/Dashboard/Student/Index.vue
+++ b/resources/js/Pages/Dashboard/Student/Index.vue
@@ -6,7 +6,7 @@ import TableRow from '@/Shared/Components/Table/TableRow.vue'
 import TableCell from '@/Shared/Components/Table/TableCell.vue'
 import Pagination from '@/Shared/Components/Pagination.vue'
 import Button from '@/Shared/Components/Buttons/Button.vue'
-import EmptyState from '@/Shared/Components/EmptyState.vue'
+import EmptyState from '@/Shared/Components/EmptyState/EmptyState.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { ref, watch } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
diff --git a/resources/js/Pages/Public/Contact.vue b/resources/js/Pages/Public/Contact.vue
index 762ba99d..c46e0e35 100644
--- a/resources/js/Pages/Public/Contact.vue
+++ b/resources/js/Pages/Public/Contact.vue
@@ -7,15 +7,7 @@ import ContactItem from '@/Shared/Components/ContactItem.vue'
 import { NoSymbolIcon } from '@heroicons/vue/24/outline'
 
 defineProps({
-  title: String,
-  name: String,
   email: String,
-  department: String,
-  university: String,
-  universityLogo: String,
-  sectionSettings: Object,
-  about: Array,
-  counters: Array,
   contactInfos: Array,
 })
 </script>
@@ -36,7 +28,6 @@ defineProps({
               Informacje kontaktowe.
             </template>
           </SectionHeader>
-          <img src="/cwup.png" alt="" class="pointer-events-none absolute right-0 z-0 hidden w-1/2 opacity-10 lg:mt-16 lg:block xl:mt-10 2xl:mt-0">
           <div class="mx-auto mt-10 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
             <div class="mx-auto max-w-7xl text-center lg:mx-0 lg:flex-auto ">
               <div v-if="email" class="mx-auto max-w-2xl py-6 text-left lg:mx-0 xl:py-3">
diff --git a/resources/js/Pages/Public/Course/Index.vue b/resources/js/Pages/Public/Course/Index.vue
index 67f5f2dd..7a4a61a5 100644
--- a/resources/js/Pages/Public/Course/Index.vue
+++ b/resources/js/Pages/Public/Course/Index.vue
@@ -76,6 +76,8 @@ defineProps({
                 </template>
               </TableWrapper>
             </div>
+
+            <EmptyState v-if="courses.length === 0" description="Brak kursów" />
           </div>
         </div>
       </div>
diff --git a/resources/js/Pages/Public/Faq.vue b/resources/js/Pages/Public/Faq.vue
new file mode 100644
index 00000000..ef076bf2
--- /dev/null
+++ b/resources/js/Pages/Public/Faq.vue
@@ -0,0 +1,53 @@
+<script setup>
+import PublicLayout from '@/Layouts/PublicLayout.vue'
+import BackgroundGrid from '@/Components/BackgroundGrid.vue'
+import SectionHeader from '@/Components/SectionHeader.vue'
+import { QuestionMarkCircleIcon } from '@heroicons/vue/24/outline'
+import { Head } from '@inertiajs/inertia-vue3'
+import DOMPurify from 'dompurify'
+import EmptyState from '@/Shared/Components/EmptyState/Public/EmptyState.vue'
+
+defineProps({
+  faqs: Object,
+})
+</script>
+
+<template>
+  <Head title="FAQ" />
+
+  <PublicLayout>
+    <div class="relative isolate bg-white">
+      <BackgroundGrid />
+      <div class="py-24 sm:py-32">
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+          <SectionHeader>
+            <template #header>
+              FAQ
+            </template>
+            <template #subheader>
+              Często zadawane pytania i odpowiedzi na nie.
+            </template>
+          </SectionHeader>
+
+          <div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none">
+            <div v-for="(faq, index) in faqs" :key="index" class="mb-5 border-b-2 pb-5">
+              <div class="flex items-center justify-between text-lg font-semibold text-gray-600">
+                <div class="flex w-[90%] items-center gap-2">
+                  <QuestionMarkCircleIcon class="size-7" />
+                  <span>{{ faq.question }}</span>
+                </div>
+              </div>
+              <div class="text-md flex items-center justify-between bg-white px-4 pt-3 font-normal text-gray-600">
+                <!-- eslint-disable vue/no-v-html -->
+                <p class="prose max-w-full text-gray-600" v-html="DOMPurify.sanitize(faq.answer)" />
+                <!-- eslint-enable vue/no-v-html -->
+              </div>
+            </div>
+
+            <EmptyState v-if="faqs.length === 0" description="Brak pytań i odpowiedzi" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </PublicLayout>
+</template>
diff --git a/resources/js/Pages/Public/News/Index.vue b/resources/js/Pages/Public/News/Index.vue
index e3fbc4d3..8b6f6a27 100644
--- a/resources/js/Pages/Public/News/Index.vue
+++ b/resources/js/Pages/Public/News/Index.vue
@@ -1,11 +1,11 @@
 <script setup>
 import PublicLayout from '@/Layouts/PublicLayout.vue'
-import BackgroundGrid from '../../../Components/BackgroundGrid.vue'
-import SectionHeader from '../../../Components/SectionHeader.vue'
-import Pagination from '../../../Components/Pagination.vue'
+import BackgroundGrid from '@/Components/BackgroundGrid.vue'
+import SectionHeader from '@/Components/SectionHeader.vue'
+import Pagination from '@/Components/Pagination.vue'
 import DOMPurify from 'dompurify'
-import { NoSymbolIcon } from '@heroicons/vue/24/outline'
 import { Head } from '@inertiajs/inertia-vue3'
+import EmptyState from '@/Shared/Components/EmptyState/Public/EmptyState.vue'
 
 defineProps({
   paginator: Object,
@@ -49,12 +49,7 @@ defineProps({
             </article>
           </div>
 
-          <div v-if="paginator.data.length === 0" class="text-center">
-            <NoSymbolIcon class="mx-auto size-12 text-gray-400" />
-            <h3 class="mt-2 text-sm font-semibold text-gray-900">
-              Brak aktualności
-            </h3>
-          </div>
+          <EmptyState v-if="paginator.data.length === 0" description="Brak aktualności" />
 
           <div v-if="paginator.data.length > 0" class="mt-24 flex justify-center">
             <Pagination :pagination="paginator" />
diff --git a/resources/js/Pages/Public/News/News.vue b/resources/js/Pages/Public/News/News.vue
index 932496a1..df9360a2 100644
--- a/resources/js/Pages/Public/News/News.vue
+++ b/resources/js/Pages/Public/News/News.vue
@@ -1,7 +1,7 @@
 <script setup>
 import PublicLayout from '@/Layouts/PublicLayout.vue'
-import BackgroundGrid from '../../../Components/BackgroundGrid.vue'
-import SectionHeader from '../../../Components/SectionHeader.vue'
+import BackgroundGrid from '@/Components/BackgroundGrid.vue'
+import SectionHeader from '@/Components/SectionHeader.vue'
 import { Head } from '@inertiajs/inertia-vue3'
 import DOMPurify from 'dompurify'
 
diff --git a/resources/js/Shared/Components/EmptyState.vue b/resources/js/Shared/Components/EmptyState/EmptyState.vue
similarity index 100%
rename from resources/js/Shared/Components/EmptyState.vue
rename to resources/js/Shared/Components/EmptyState/EmptyState.vue
diff --git a/resources/js/Shared/Components/EmptyState/Public/EmptyState.vue b/resources/js/Shared/Components/EmptyState/Public/EmptyState.vue
new file mode 100644
index 00000000..1e4af9c4
--- /dev/null
+++ b/resources/js/Shared/Components/EmptyState/Public/EmptyState.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { NoSymbolIcon } from '@heroicons/vue/24/outline'
+
+defineProps({
+  description: String,
+})
+</script>
+
+<template>
+  <div class="text-center">
+    <NoSymbolIcon class="mx-auto size-12 text-gray-400" />
+    <h3 class="mt-2 text-sm font-semibold text-gray-900">
+      {{ description }}
+    </h3>
+  </div>
+</template>
diff --git a/routes/web.php b/routes/web.php
index 736d15ed..112d23c0 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -22,6 +22,7 @@
 use Keating\Http\Controllers\Dashboard\StudentController;
 use Keating\Http\Controllers\Public\ContactController;
 use Keating\Http\Controllers\Public\CourseController as PublicCourseController;
+use Keating\Http\Controllers\Public\FaqController as PublicFaqController;
 use Keating\Http\Controllers\Public\GradeController as PublicGradeController;
 use Keating\Http\Controllers\Public\HomeController;
 use Keating\Http\Controllers\Public\LoginController;
@@ -33,6 +34,7 @@
 Route::get("/oceny/{semester?}/{course?}/{group?}/{index?}", PublicGradeController::class);
 Route::get("/kursy", [PublicCourseController::class, "index"]);
 Route::get("/kursy/{slug}", [PublicCourseController::class, "get"]);
+Route::get("/faq", PublicFaqController::class);
 Route::get("/kontakt", ContactController::class);
 
 Route::middleware("guest")->group(function (): void {