Finish creating question form.

chrux · Jul 24, 2019 · ad3ca37 · ad3ca37
1 parent 2cda45b
commit ad3ca37
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 63 deletions.
diff --git a/app/Http/Controllers/QuestionController.php b/app/Http/Controllers/QuestionController.php
@@ -2,7 +2,7 @@
 
 namespace App\Http\Controllers;
 
-use App\Question;
+use App\Models\Question;
 use Illuminate\Http\Request;
 
 class QuestionController extends Controller
@@ -24,7 +24,7 @@ public function __construct()
      */
     public function index()
     {
-        return view('questions.index');
+        return view('questions.index', ['questions' => Question::all()]);
     }
 
     /**
@@ -45,13 +45,20 @@ public function create()
      */
     public function store(Request $request)
     {
-        //
+        $question = new Question;
+        $question->title = $request['title'];
+        $question->description = $request['description'];
+        $question->maxCheck = $request['maxCheck'] ?? 1;
+        $question->save();
+        $question->options()->createMany($request['options']);
+
+        return $question;
     }
 
     /**
      * Display the specified resource.
      *
-     * @param  \App\Question  $question
+     * @param  \App\Models\Question  $question
      * @return \Illuminate\Http\Response
      */
     public function show(Question $question)
@@ -62,7 +69,7 @@ public function show(Question $question)
     /**
      * Show the form for editing the specified resource.
      *
-     * @param  \App\Question  $question
+     * @param  \App\Models\Question  $question
      * @return \Illuminate\Http\Response
      */
     public function edit(Question $question)
@@ -74,22 +81,27 @@ public function edit(Question $question)
      * Update the specified resource in storage.
      *
      * @param  \Illuminate\Http\Request  $request
-     * @param  \App\Question  $question
+     * @param  \App\Models\Question  $question
      * @return \Illuminate\Http\Response
      */
     public function update(Request $request, Question $question)
     {
-        //
+        $question->title = $request->question['title'];
+        $question->description = $request->question['description'];
+        $question->maxCheck = $request->question['maxCheck'] ?? 1;
+        $question->save();
+
+        return $question;
     }
 
     /**
      * Remove the specified resource from storage.
      *
-     * @param  \App\Question  $question
+     * @param  \App\Models\Question  $question
      * @return \Illuminate\Http\Response
      */
     public function destroy(Question $question)
     {
-        //
+        $question->delete();
     }
 }
diff --git a/app/Models/Question.php b/app/Models/Question.php
@@ -6,7 +6,7 @@
 
 class Question extends Model
 {
-    protected $fillable = [ 'title', 'description', ];
+    protected $fillable = [ 'title', ];
 
     /**
      * A poll has many options related to

diff --git a/database/migrations/2019_07_22_035029_create_questions_table.php b/database/migrations/2019_07_22_035029_create_questions_table.php
@@ -16,7 +16,7 @@ public function up()
         Schema::create('questions', function (Blueprint $table) {
             $table->bigIncrements('id');
             $table->string('title');
-            $table->string('description');
+            $table->string('description')->nullable();
             $table->integer('maxCheck')->default(1);
             $table->timestamps();
         });

diff --git a/resources/js/components/FormOptionItemComponent.vue b/resources/js/components/FormOptionItemComponent.vue
@@ -30,6 +30,7 @@ export default {
   },
   methods: {
     handleKey(e) {
+      e && e.preventDefault();
       if (e.keyCode === 13) {
         this.$emit('enter', this.option);
       }

diff --git a/resources/js/components/FormQuestionComponent.vue b/resources/js/components/FormQuestionComponent.vue
@@ -2,57 +2,59 @@
   <div class="row justify-content-center">
     <div class="col-md-8">
       <h1 class="text-center">{{ $t('New Question') }}</h1>
-      <form action="" method="post" v-on:submit.prevent="newQuestion()">
-        <div class="container-fluid">
-          <div class="form-group row mt-3">
-            <div class="col">
-              <input type="text" class="form-control" name="question[title]" :placeholder="$t('Question')" v-model="questionTitle" autofocus>
-            </div>
+      <div class="container-fluid">
+        <div class="form-group row mt-3">
+          <div class="col">
+            <input type="text" class="form-control" name="question[title]" :placeholder="$t('Question')" v-model="question.title" autofocus>
           </div>
-          <div class="form-group row mt-3">
-            <div class="col">
-              <input type="text" class="form-control" name="question[description]" :placeholder="$t('(Optional) Description')">
-            </div>
-          </div>
-          <div class="form-group row mt-3">
-            <div class="col">
-              <input type="number" class="form-control" name="question[maxCheck]" aria-describedby="questionMaxCheck" :placeholder="$t('(Optional) Default: 1. Maximum number of options to be selected')">
-              <small id="questionMaxCheck" class="form-text text-muted">
-                {{ $t('Enter 0 (zero) to do not limit the maximum.') }}
-              </small>
-            </div>
+        </div>
+        <div class="form-group row mt-3">
+          <div class="col">
+            <input type="text" class="form-control" name="question[description]" :placeholder="$t('(Optional) Description')" v-model="question.description">
           </div>
-          <div class="row">
-            <div class="col">
-              <h3>Options</h3>
-            </div>
+        </div>
+        <div class="form-group row mt-3">
+          <div class="col">
+            <input type="number" class="form-control" name="question[maxCheck]" aria-describedby="questionMaxCheck" :placeholder="$t('(Optional) Default: 1. Maximum number of options to be selected')" v-model="question.maxCheck">
+            <small id="questionMaxCheck" class="form-text text-muted">
+              {{ $t('Enter 0 (zero) to do not limit the maximum.') }}
+            </small>
           </div>
-          <div class="options">
-            <form-option-item
-              v-for="(choice, index) in choices"
-              :key="index"
-              :number="index+1"
-              :option="choice.option"
-              :isRemovable="choice.isRemovable"
-              ref="optionInputs"
-              @enter="handleEnter"
-              @remove="removeOption"></form-option-item>
+        </div>
+        <div class="row">
+          <div class="col">
+            <h3>Options</h3>
           </div>
-          <div class="row mt-3">
-            <div class="col">
-              <small id="questionMaxCheck" class="form-text text-muted">
-                {{ $t('Enter to add a new option') }}
-              </small>
-            </div>
+        </div>
+        <div class="options">
+          <form-option-item
+            v-for="(choice, index) in choices"
+            :key="index"
+            :number="index+1"
+            :option="choice.option"
+            :isRemovable="choice.isRemovable"
+            ref="optionInputs"
+            @enter="handleEnter"
+            @remove="removeOption"></form-option-item>
+        </div>
+        <div class="row mt-3">
+          <div class="col">
+            <small id="questionMaxCheck" class="form-text text-muted">
+              {{ $t('Enter to add a new option') }}
+            </small>
           </div>
-          <hr />
-          <div class="row mt-3">
-            <div class="col-md-4 ml-auto">
-              <button class="btn btn-primary btn-lg btn-block" type="submit" v-bind:disabled="!isValid">{{ $t('Create') }}</button>
-            </div>
+        </div>
+        <hr />
+        <div class="row mt-3">
+          <div class="col-md-4 ml-auto">
+            <button
+              class="btn btn-primary btn-lg btn-block"
+              type="button"
+              :disabled="!isValid"
+              @click="newQuestion">{{ $t('Create') }}</button>
           </div>
         </div>
-      </form>
+      </div>
     </div>
   </div>
 </template>
@@ -64,7 +66,11 @@ export default {
   },
   data() {
     return {
-      questionTitle: '',
+      question: {
+        title: '',
+        description: '',
+        maxCheck: null
+      },
       // Show 2 empty options by default
       choices: [
         { option: { title: '' } },
@@ -74,14 +80,20 @@ export default {
   },
   computed: {
     isValid() {
-      return this.questionTitle &&
+      return this.question.title &&
         this.choices.filter(choice => choice.option.title.trim().length > 0).length >= 2;
     }
   },
   methods: {
     newQuestion() {
-      console.log(this.questionTitle);
-      console.log(this.choices);
+      const params = Object.assign({},
+        this.question,
+        { options: this.choices
+          .filter(choice => choice.option.title.trim().length > 0)
+          .map(choice => Object.assign({}, choice.option) ) });
+      axios.post('/questions', params)
+        .then(() => window.location.href = '/questions');
+        // .catch(e => console.log('e', e));
     },
     addOption() {
       this.choices.push({ option: { title: '' }, isRemovable: true });

diff --git a/resources/views/questions/index.blade.php b/resources/views/questions/index.blade.php
@@ -15,9 +15,9 @@
         @foreach ($questions as $question)
         <div class="card">
           <div class="card-body">
-            <h5 class="card-title">Card title</h5>
-            <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
-            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+            <h5 class="card-title">{{ $question->title }}</h5>
+            <p class="card-text">{{ $question->description }}</p>
+            <p class="card-text"><small class="text-muted">Created {{ $question->created_at->format("F jS, Y \a\\t h:ia") }}</small></p>
           </div>
         </div>
         @endforeach

diff --git a/routes/web.php b/routes/web.php
@@ -22,4 +22,6 @@
 })->name('home');
 
 Route::resource('questions', 'QuestionController');
-// middleware('auth')->
+    // ->only(['index', 'create', 'show', 'edit']);
+// Route::apiResource('questions', 'QuestionController');
+// middleware('auth')->