Create SurveyResourceDashboard.php

Author: thecodeholic

app/Http/Controllers/DashboardController.php

@@ -3,7 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Http\Resources\SurveyAnswerResource;
-use App\Http\Resources\SurveyResource;
+use App\Http\Resources\SurveyResourceDashboard;
 use App\Models\Survey;
 use App\Models\SurveyAnswer;
 use Illuminate\Http\Request;
@@ -13,13 +13,20 @@ class DashboardController extends Controller
  public function index(Request $request)
  {
  $user = $request->user();
+
+ // Total Number of Surveys
  $total = Survey::query()->where('user_id', $user->id)->count();
+
+ // Latest Survey
  $latest = Survey::query()->where('user_id', $user->id)->latest('created_at')->first();
+
+ // Total Number of answers
  $totalAnswers = SurveyAnswer::query()
  ->join('surveys', 'survey_answers.survey_id', '=', 'surveys.id')
  ->where('surveys.user_id', $user->id)
  ->count();
 
+ // Latest 5 answer
  $latestAnswers = SurveyAnswer::query()
  ->join('surveys', 'survey_answers.survey_id', '=', 'surveys.id')
  ->where('surveys.user_id', $user->id)
@@ -29,7 +36,7 @@ public function index(Request $request)
 
  return [
  'totalSurveys' => $total,
- 'latestSurvey' => $latest ? new SurveyResource($latest) : null,
+ 'latestSurvey' => $latest ? new SurveyResourceDashboard($latest) : null,
  'totalAnswers' => $totalAnswers,
  'latestAnswers' => SurveyAnswerResource::collection($latestAnswers)
  ];

app/Http/Resources/SurveyResourceDashboard.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Support\Facades\URL;
+use Nette\Utils\DateTime;
+
+class SurveyResourceDashboard extends JsonResource
+{
+ /**
+ * Transform the resource into an array.
+ *
+ * @param \Illuminate\Http\Request $request
+ * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
+ */
+ public function toArray($request)
+ {
+ return [
+ 'id' => $this->id,
+ 'image_url' => $this->image ? URL::to($this->image) : null,
+ 'title' => $this->title,
+ 'slug' => $this->slug,
+ 'status' => $this->status !== 'draft',
+ 'created_at' => (new DateTime($this->created_at))->format('Y-m-d H:i:s'),
+ 'expire_date' => $this->expire_date,
+ 'questions' => $this->questions()->count(),
+ 'answers' => $this->answers()->count()
+ ];
+ }
+}

vue/src/views/Dashboard.vue

@@ -5,7 +5,6 @@
  v-else
  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 text-gray-700"
  >
- <!-- <pre>{{data}}</pre> -->
  <div
  class="bg-white shadow-md p-3 text-center flex flex-col animate-fade-in-down order-1 lg:order-2"
  style="animation-delay: 0.1s"
@@ -39,12 +38,24 @@
  />
  <h3 class="font-bold text-xl mb-3">{{ data.latestSurvey.title }}</h3>
  <div class="flex justify-between text-sm mb-1">
- <div>Upload Date:</div>
+ <div>Create Date:</div>
  <div>{{ data.latestSurvey.created_at }}</div>
  </div>
+ <div class="flex justify-between text-sm mb-1">
+ <div>Expire Date:</div>
+ <div>{{ data.latestSurvey.expire_date }}</div>
+ </div>
+ <div class="flex justify-between text-sm mb-1">
+ <div>Status:</div>
+ <div>{{ data.latestSurvey.status ? 'Active' : 'Draft' }}</div>
+ </div>
+ <div class="flex justify-between text-sm mb-1">
+ <div>Questions:</div>
+ <div>{{ data.latestSurvey.questions }}</div>
+ </div>
  <div class="flex justify-between text-sm mb-3">
  <div>Answers:</div>
- <div>{{ data.totalAnswers }}</div>
+ <div>{{ data.latestSurvey.answers }}</div>
  </div>
  <div class="flex justify-between">
  <router-link
@@ -87,8 +98,6 @@
  View Answers
  </button>
  </div>
-
- <!-- <SurveyListItem :survey="data.latestSurvey" class="row-span-2"/> -->
  </div>
  <div
  class="bg-white shadow-md p-3 row-span-2 order-4 lg:order-3 animate-fade-in-down"
@@ -100,31 +109,31 @@
  <a
  href="javascript:void(0)"
  class="text-sm text-blue-500 hover:decoration-blue-500"
- >View all</a
  >
+ View all
+ </a>
  </div>
  <a
  href="#"
  v-for="answer of data.latestAnswers"
  :key="answer.id"
- class="block p-2 hover:bg-gray-100/90 cursor-pointer :bg-gray-200"
+ class="block p-2 hover:bg-gray-100/90"
  >
  <div class="font-semibold">{{ answer.survey.title }}</div>
- <small
- >Answer Made at:
- <i class="font-semibold">{{ answer.end_date }}</i></small
- >
+ <small>
+ Answer Made at:
+ <i class="font-semibold">{{ answer.end_date }}</i>
+ </small>
  </a>
  </div>
  </div>
  </PageComponent>
 </template>
 
 <script setup>
-import { computed } from "@vue/reactivity";
-import { useStore } from "vuex";
 import PageComponent from "../components/PageComponent.vue";
-import SurveyListItem from "../components/SurveyListItem.vue";
+import { computed } from "vue";
+import { useStore } from "vuex";
 
 const store = useStore();