#27 - faq page

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,
+        ]);
+    }
+}

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'

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'

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'

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'

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'

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'

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'

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'

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'

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'

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>

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>

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" />

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'
 

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>

routes/web.php

@@ -21,6 +21,7 @@
 use Keating\Http\Controllers\Dashboard\SettingController;
 use Keating\Http\Controllers\Dashboard\StudentController;
 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;
@@ -32,6 +33,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::middleware("guest")->group(function (): void {
     Route::get("/login", [LoginController::class, "create"])->name("login");