Implement saving survey answers

Author: thecodeholic

app/Http/Controllers/SurveyController.php

@@ -2,11 +2,14 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\StoreSurveyAnswerRequest;
 use App\Http\Resources\SurveyResource;
 use App\Models\Survey;
 use App\Http\Requests\StoreSurveyRequest;
 use App\Http\Requests\UpdateSurveyRequest;
+use App\Models\SurveyAnswer;
 use App\Models\SurveyQuestion;
+use App\Models\SurveyQuestionAnswer;
 use Illuminate\Http\Request;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\File;
@@ -152,6 +155,36 @@ public function destroy(Survey $survey, Request $request)
  return response('', 204);
  }
 
+ public function storeAnswer(StoreSurveyAnswerRequest $request, Survey $survey)
+ {
+ $validated = $request->validated();
+// var_dump($validated, $survey);
+
+ $surveyAnswer = SurveyAnswer::create([
+ 'survey_id' => $survey->id,
+ 'start_date' => date('Y-m-d H:i:s'),
+ 'end_date' => date('Y-m-d H:i:s'),
+ ]);
+
+ foreach ($validated['answers'] as $questionId => $answer) {
+ $question = SurveyQuestion::where(['id' => $questionId, 'survey_id' => $survey->id])->get();
+ if (!$question) {
+ return response("Invalid question ID: \"$questionId\"", 400);
+ }
+
+ $data = [
+ 'survey_question_id' => $questionId,
+ 'survey_answer_id' => $surveyAnswer->id,
+ 'answer' => is_array($answer) ? json_encode($answer) : $answer
+ ];
+
+ $questionAnswer = SurveyQuestionAnswer::create($data);
+ }
+
+ return response("", 201);
+
+ }
+
  /**
  * Create a question and return
  *
@@ -254,4 +287,11 @@ private function saveImage($image)
 
  return $relativePath;
  }
+
+ public function createQuestionAnswer($data)
+ {
+ if (is_array($data['answer'])) {
+ $data['answer'] = json_encode($data['answer']);
+ }
+ }
 }

app/Http/Requests/StoreSurveyAnswerRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreSurveyAnswerRequest extends FormRequest
+{
+ /**
+ * Determine if the user is authorized to make this request.
+ *
+ * @return bool
+ */
+ public function authorize()
+ {
+ return true;
+ }
+
+ /**
+ * Get the validation rules that apply to the request.
+ *
+ * @return array
+ */
+ public function rules()
+ {
+ return [
+ 'answers' => 'required|array'
+ ];
+ }
+}

app/Models/SurveyAnswer.php

@@ -8,4 +8,9 @@
 class SurveyAnswer extends Model
 {
  use HasFactory;
+
+ public const CREATED_AT = null;
+ public const UPDATED_AT = null;
+
+ protected $fillable = ['survey_id', 'start_date', 'end_date'];
 }

app/Models/SurveyQuestionAnswer.php

@@ -8,4 +8,6 @@
 class SurveyQuestionAnswer extends Model
 {
  use HasFactory;
+
+ protected $fillable = ['survey_question_id', 'survey_answer_id', 'answer'];
 }

routes/api.php

@@ -24,6 +24,8 @@
  Route::get('/survey-by-slug/{survey:slug}', [\App\Http\Controllers\SurveyController::class, 'show']);
 });
 
+Route::post('/survey/{survey}/answer', [\App\Http\Controllers\SurveyController::class, 'storeAnswer']);
+
 Route::post('/register', [AuthController::class, 'register']);
 Route::post('/login', [AuthController::class, 'login']);
 

vue/src/store/index.js

@@ -107,6 +107,9 @@ const store = createStore({
  return res;
  });
  },
+ saveSurveyAnswer({commit}, {surveyId, answers}) {
+ return axiosClient.post(`/survey/${surveyId}/answer`, {answers});
+ }
  },
  mutations: {
  logout: (state) => {

vue/src/views/SurveyPublicView.vue

@@ -1,25 +1,40 @@
 <template>
  <div class="py-5 px-8">
  <div v-if="loading" class="flex justify-center">Loading...</div>
- <form @submit.prevent="submitSurvey" v-else>
- <div class="grid grid-cols-4">
+ <form @submit.prevent="submitSurvey" v-else class="container mx-auto">
+ <div class="grid grid-cols-6 items-center">
  <div class="mr-4">
  <img :src="survey.image_url" alt="" />
  </div>
- <div class="col-span-3">
- <h1 class="text-3xl">{{ survey.title }}</h1>
+ <div class="col-span-5">
+ <h1 class="text-3xl mb-3">{{ survey.title }}</h1>
+ <p class="text-gray-500 text-sm" v-html="survey.description"></p>
  </div>
  </div>
- <div v-for="(question, ind) of survey.questions" :key="question.id">
- <QuestionViewer v-model="questions[question.id]" :question="question" :index="ind" />
+
+ <div v-if="surveyFinished" class="py-8 px-6 bg-emerald-400 text-white w-[600px] mx-auto">
+ <div class="text-xl mb-3 font-semibold ">Thank you for participating in this survey.</div>
+ <button @click="submitAnotherResponse" type="button" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+ Submit another response
+ </button>
  </div>
+ <div v-else>
+ <hr class="my-3">
+ <div v-for="(question, ind) of survey.questions" :key="question.id">
+ <QuestionViewer
+ v-model="answers[question.id]"
+ :question="question"
+ :index="ind"
+ />
+ </div>
 
- <button
- type="submit"
- class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
- >
- Submit
- </button>
+ <button
+ type="submit"
+ class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+ >
+ Submit
+ </button>
+ </div>
  </form>
  </div>
 </template>
@@ -35,12 +50,29 @@ const store = useStore();
 const loading = computed(() => store.state.currentSurvey.loading);
 const survey = computed(() => store.state.currentSurvey.data);
 
-const questions = ref({});
+const surveyFinished = ref(false);
+
+const answers = ref({});
 
 store.dispatch("getSurveyBySlug", route.params.slug);
 
 function submitSurvey() {
- console.log(JSON.stringify(questions.value, undefined, 2));
+ console.log(JSON.stringify(answers.value, undefined, 2));
+ store
+ .dispatch("saveSurveyAnswer", {
+ surveyId: survey.value.id,
+ answers: answers.value,
+ })
+ .then((response) => {
+ if (response.status === 201) {
+ surveyFinished.value = true;
+ }
+ });
+}
+
+function submitAnotherResponse() {
+ answers.value = {};
+ surveyFinished.value = false;
 }
 </script>