#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 <[email protected]>
blumilksoftware · Sep 10, 2024 · 25070fc · 25070fc
1 parent c17ff35
commit 25070fc
Show file tree

Hide file tree

Showing 20 changed files with 110 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...urces/js/Shared/Components/EmptyState.vue → ...ared/Components/EmptyState/EmptyState.vue b/...urces/js/Shared/Components/EmptyState.vue → ...ared/Components/EmptyState/EmptyState.vue
diff --git a/resources/js/Shared/Components/EmptyState/Public/EmptyState.vue 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
@@ -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 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,6 +76,8 @@ defineProps({ @@
                     </template>
                   </TableWrapper>
                 </div>
+                <EmptyState v-if="courses.length === 0" description="Brak kursów" />
               </div>
             </div>
           </div>
@@ Expand Down @@