#68 - Student interface for answering tests frontend

app/Actions/CloseQuizSubmissionAction.php

@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Actions;
+
+use App\Models\QuizSubmission;
+use Carbon\Carbon;
+
+class CloseQuizSubmissionAction
+{
+    public function execute(QuizSubmission $submission): void
+    {
+        $submission->closed_at = Carbon::now();
+        $submission->save();
+    }
+}

app/Http/Controllers/QuizSubmissionController.php

@@ -4,20 +4,29 @@
 
 namespace App\Http\Controllers;
 
+use App\Actions\CloseQuizSubmissionAction;
 use App\Http\Resources\QuizSubmissionResource;
 use App\Models\QuizSubmission;
+use Illuminate\Http\RedirectResponse;
 use Inertia\Inertia;
 use Inertia\Response;
 
 class QuizSubmissionController extends Controller
 {
     public function show(QuizSubmission $quizSubmission): Response
     {
-        $quizSubmission->load(["answerRecords.question.answers", "quiz"]);
+        $quizSubmission->load(["answerRecords.question.answers"]);
 
         return Inertia::render("User/Quiz", ["submission" => QuizSubmissionResource::make($quizSubmission)]);
     }
 
+    public function close(QuizSubmission $quizSubmission, CloseQuizSubmissionAction $action): RedirectResponse
+    {
+        $action->execute($quizSubmission);
+
+        return redirect()->route("submissions.result", $quizSubmission->id)->with("status", "Test został oddany.");
+    }
+
     public function result(QuizSubmission $quizSubmission): Response
     {
         $quizSubmission->load(["answerRecords.question.answers", "quiz"]);

app/Http/Resources/QuizSubmissionResource.php

@@ -16,6 +16,7 @@ public function toArray(Request $request): array
             "name" => $this->quiz->name,
             "createdAt" => $this->created_at,
             "updatedAt" => $this->updated_at,
+            "openedAt" => $this->quiz->scheduled_at,
             "closedAt" => $this->closed_at,
             "closed" => $this->isClosed,
             "quiz" => $this->quiz_id,

app/Models/AnswerRecord.php

@@ -21,7 +21,7 @@
  * @property bool $isCorrect
  * @property QuizSubmission $quizSubmission
  * @property Question $question
- * @property Answer $answer
+ * @property ?Answer $answer
  */
 class AnswerRecord extends Model
 {

app/Policies/QuizSubmissionPolicy.php

@@ -14,6 +14,11 @@ public function view(User $user, QuizSubmission $quizSubmission): bool
         return $user->id === $quizSubmission->user_id;
     }
 
+    public function close(User $user, QuizSubmission $quizSubmission): bool
+    {
+        return $user->id === $quizSubmission->user_id && !$quizSubmission->isClosed;
+    }
+
     public function result(User $user, QuizSubmission $quizSubmission): bool
     {
         return $user->id === $quizSubmission->user_id && $quizSubmission->isClosed;

database/seeders/DatabaseSeeder.php

@@ -22,6 +22,7 @@ public function run(): void
         ]);
 
         Quiz::factory()->locked()->count(5)->create(["scheduled_at" => Carbon::now()->addMonth()]);
+        Quiz::factory()->locked()->create(["name" => "6 Minutes", "scheduled_at" => Carbon::now(), "duration" => 6]);
 
         $quiz = Quiz::factory()->locked()->create(["name" => "Test Quiz", "scheduled_at" => Carbon::now(), "duration" => 2]);
         $questions = Question::factory()->count(10)->create(["quiz_id" => $quiz->id]);

package.json

@@ -15,6 +15,7 @@
         "@inertiajs/vue3": "^1.2.0",
         "@tailwindcss/forms": "^0.5.8",
         "@tailwindcss/typography": "^0.5.15",
+        "@vueuse/core": "^11.0.3",
         "dayjs": "^1.11.13",
         "laravel-vite-plugin": "^1.0.5",
         "lodash": "^4.17.21",

resources/js/Helpers/Plurals.ts

@@ -0,0 +1,13 @@
+export const usePlurals = (singular: string, pluralNominativ: string, pluralGenitive: string) => (value: number) => {
+  value = Math.abs(value)
+
+  if (value === 1) {
+    return singular
+  }
+
+  if (value % 10 >= 2 && value % 10 <= 4 && (value % 100 < 10 || value % 100 >= 20)) {
+    return pluralNominativ
+  }
+
+  return pluralGenitive
+}

resources/js/Helpers/Time.ts

@@ -0,0 +1,46 @@
+import {type TimeObject} from '@/Types/TimeObject'
+import dayjs, { type Dayjs } from 'dayjs'
+import {usePlurals} from '@/Helpers/Plurals'
+
+export function calcSecondsBetweenDates(from: string | number | Dayjs = 0, to: string | number | Dayjs = 0): number {
+  return dayjs(from).diff(dayjs(to), 's')
+}
+
+export function calcSecondsLeftToDate(date: string | number | Dayjs = 0): number {
+  return Math.max(calcSecondsBetweenDates(date, dayjs()), 0)
+}
+
+export function secondsToHour(seconds: number): TimeObject {
+  return {
+    'h': Math.floor(seconds / 3600),
+    'm': Math.floor(seconds % 3600  / 60),
+    's': seconds % 60,
+  }
+}
+
+const translateLeft = usePlurals('Pozostała', 'Pozostały', 'Pozostało')
+const translateSecondsLeft = usePlurals('sekunda', 'sekundy', 'sekund')
+const translateMinutesLeft = usePlurals('minuta', 'minuty', 'minut')
+const translateHoursLeft = usePlurals('godzina', 'godziny', 'godzin')
+
+export function timeToString(time: TimeObject, withLeft = false): string {
+  const { s, m, h } = time
+
+  if (h <= 0 && m <= 0) {
+    return `${withLeft ? translateLeft(s) : ''} ${s} ${translateSecondsLeft(s)}`.trimStart()
+  }
+
+  if (h <= 0 && m < 10 && s > 0 ) {
+    return `${withLeft ? translateLeft(m) : ''} ${m} ${translateMinutesLeft(m)} i ${s} ${translateSecondsLeft(s)}`.trimStart()
+  }
+
+  if (h <= 0) {
+    return `${withLeft ? translateLeft(m) : ''} ${m} ${translateMinutesLeft(m)}`.trimStart()
+  }
+
+  if (h <= 0 && m > 0) {
+    return `${withLeft ? translateLeft(h) : ''} ${h} ${translateHoursLeft(h)} i ${m} ${translateMinutesLeft(m)}`.trimStart()
+  }
+
+  return `${withLeft ? translateLeft(h) : ''} ${h} ${translateHoursLeft(h)}`.trimStart()
+}

resources/js/Helpers/Timer.ts

@@ -0,0 +1,17 @@
+import {computed, ref} from 'vue'
+import {calcSecondsLeftToDate, secondsToHour, timeToString} from '@/Helpers/Time'
+
+export function useTimer(to: string | number, timeout: () => void) {
+  const left = ref(calcSecondsLeftToDate(to))
+
+  const interval = setInterval(() => {
+    left.value = Math.max(0, left.value - 1)
+
+    if (left.value === 0) {
+      timeout()
+      clearInterval(interval)
+    }
+  }, 1000)
+
+  return computed(() => timeToString(secondsToHour(left.value), true))
+}

resources/js/Layouts/AdminLayout.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import type {Page} from '@/Types/Page'
 import BaseLayout from '@/Layouts/BaseLayout.vue'
 import {type PageProps} from '@/Types/PageProps'

resources/js/Layouts/BaseLayout.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import type {Page} from '@/Types/Page'
 import Header from '@/components/Common/Header.vue'
 import Footer from '@/components/Common/Footer.vue'

resources/js/Layouts/GuestLayout.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import BaseLayout from '@/Layouts/BaseLayout.vue'
 import type {PageProps} from '@/Types/PageProps'
 

resources/js/Layouts/UserLayout.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import type {Page} from '@/Types/Page'
 import BaseLayout from '@/Layouts/BaseLayout.vue'
 import type {PageProps} from '@/Types/PageProps'

resources/js/Pages/Admin/Quizzes.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
 import {Head} from '@inertiajs/vue3'
+import {type Quiz} from '@/Types/Quiz'
+import LinkButton from '@/components/Common/LinkButton.vue'
+
+defineProps<{ quizzes: Quiz[] }>()
 </script>
 
 <template>
   <Head>
     <title>Testy</title>
   </Head>
-
   Quizzes - CRUD
+
+  <div class="w-4/5">
+    <div v-for="quiz in quizzes" :key="quiz.id" class="m-4 bg-white w-100 rounded-2xl p-4 border shadow flex gap-4 items-center justify-between">
+      <b>{{ quiz.name }}</b>
+      <LinkButton :href="`/admin/quizzes/${quiz.id}/ranking`" small>Ranking</LinkButton>
+    </div>
+  </div>
 </template>

resources/js/Pages/Admin/Ranking.vue

@@ -1,37 +1,25 @@
 <script setup lang="ts">
-
 import {computed, ref} from 'vue'
-import { defineProps } from 'vue'
 import type { QuizRankingProps} from '@/Types/Ranking'
-import { useForm } from '@inertiajs/vue3'
+import FormButton from '@/components/Common/FormButton.vue'
 
 const props = defineProps<QuizRankingProps>()
 
-const form = useForm({})
-
 const quiz = ref(props.quiz)
 const rankings = ref(props.rankings)
 
 const sortedRankings = computed(() => {
   return [...rankings.value].sort((a, b) => b.points - a.points)
 })
-function publish() {
-  form.post(`/admin/quizzes/${quiz.value.id}/ranking/publish`)
-}
-function unpublish() {
-  form.post(`/admin/quizzes/${quiz.value.id}/ranking/unpublish`)
-}
 </script>
 
 <template>
   <div>
     <h1>Ranking Quizu: {{ quiz.name }}</h1>
-    <form @submit.prevent="publish">
-      <button type="submit">Publikuj</button>
-    </form>
-    <form @submit.prevent="unpublish">
-      <button type="submit">Wycofaj publikacje</button>
-    </form>
+    <div class="flex gap-4">
+      <FormButton method="post" :href="`/admin/quizzes/${quiz.id}/ranking/publish`" small preserve-scroll>Publikuj</FormButton>
+      <FormButton method="post" :href="`/admin/quizzes/${quiz.id}/ranking/unpublish`" small preserve-scroll>Wycofaj publikacje</FormButton>
+    </div>
     <table>
       <thead>
         <tr>

resources/js/Pages/Auth/VerifyEmail.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import {useForm} from '@inertiajs/vue3'
 
 const form = useForm({})

resources/js/Pages/Home.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 import {ref, provide, watch} from 'vue'
 import Footer from '@/components/Common/Footer.vue'
 import AuthBanner from '@/components/Home/AuthBanner.vue'