create Test Creator

app/Http/Controllers/TestResultController.php

@@ -4,111 +4,121 @@ namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
+use App\Http\Requests\StoreTestResultRequest;
 use App\TestResult;
+use App\InputValue;
+use App\Input;
 
 class TestResultController extends Controller
 {
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
     public function index()
     {
         $TestResult = TestResult::with('testtype')->paginate(10);
         return response()->json(['TestResult' => $TestResult, 'LastPage' => $TestResult->lastPage()]);
     }
 
-    /**
-     * Show the form for creating a new resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
     public function create()
     {
         //
     }
 
-    /**
+    public function CreateChildFormValue($InputChild,$TestResultObj,$TestResultInfo)
-     * Store a newly created resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return \Illuminate\Http\Response
-     */
-    public function store(Request $request)
     {
-        $TestResult = [
+        // dd($TestResultInfo[$InputChild->name]);
-            'user_id' => Auth::user()->id,
+        // foreach ($Input->children as $InputChild) {
-            'autoclave_id' => $request->autoclave_id,
-            'test_type_id' => $request->test_type_id,
-            'result' => $request->result,
-            'verified' => 0,
-        ];
-        $TestResultObj = TestResult::create($TestResult);
-        $TestResultInfo = $request->info;
 
-        // $TestType = TestType::with('inputs')->where('id',$request->test_type_id)->first();
+        $TestResultInfo = $TestResultInfo[$InputChild->name];
-        $Inputs = Input::where('test_type_id',$request->test_type_id)->get();
+            if ($InputChild->type == 'Form') {
-        foreach ($Inputs as $Input) {
+
-            if ($Input->type == 'Select' || $Input->type == 'CheckBox') {
+                foreach ($InputChild->children as $InputChild2) {
-                $OptionIDs = $Input->options->pluck('id')->toArray();
+                    // dd($TestResultInfo[$InputChild2->name]);
-                $Value = $OptionIDs;
+                    $this->CreateChildFormValue($InputChild2,$TestResultObj,$TestResultInfo[$InputChild2->name]);
+                }
             }
-            else {
+            $Value = $TestResultInfo;
-                $Value = $TestResultInfo[$Input->name];
+            // dd($Value);
-            }
+            $InputValueObj = InputValue::create(['test_result_id' => $TestResultObj->id , 'input_id' => $InputChild['id'] , 'value' => $Value]);
-            $InputValueObj = InputValue::create(['test_result_id' => $TestResultObj->id , 'input_id' => $Input->id , 'value' => $Value]);
+            // dd(['test_result_id' => $TestResultObj->id , 'input_id' => $InputChild['id'] , 'value' => $Value]);
+        // }
+    }
+    public function store(StoreTestResultRequest $request)
+    {
+        try {
+            $return_value = \DB::transaction(function () use ($request) {
+
+                $TestResult = [
+                    'user_id' => auth('api')->user()->id,
+                    'autoclave_id' => $request->autoclave_id,
+                    'test_type_id' => $request->test_type_id,
+                    'result' => $request->result,
+                    'verified' => 0,
+                ];
+                $TestResultObj = TestResult::create($TestResult);
+                // $TestResultInfo = $request['info'];
+                $TestResultInfo = [];
+
+                $Inputs = Input::with('options','children')->where('test_type_id',$request->test_type_id)->get();
+
+                    foreach ($Inputs as $Input) {
+                        if ($Input['type'] == 'Form') {
+                            $TestResultInfo = $request[$Input->name];
+
+                            // $this->CreateChildFormValue($Input,$TestResultObj,$TestResultInfo);
+
+                            ///--------------------------------------------------
+                            foreach ($Input->children as $InputChild) {
+
+                                $this->CreateChildFormValue($InputChild,$TestResultObj,$TestResultInfo);
+                                ///--------------------------------------------------
+                                // $Value = $TestResultInfo[$InputChild->name];
+                                //
+                                // if ($InputChild->type == 'Form') {
+                                //     foreach ($InputChild->children as $InputChild2) {
+                                //         $Value = $TestResultInfo[$InputChild->name][$InputChild2->name];
+                                //         $InputValueObj = InputValue::create(['test_result_id' => $TestResultObj->id , 'input_id' => $InputChild2['id'] , 'value' => $Value]);
+                                //         return 'success';
+                                //     }
+                                //
+                                // }
+                                // $InputValueObj = InputValue::create(['test_result_id' => $TestResultObj->id , 'input_id' => $InputChild['id'] , 'value' => $Value]);
+                            }
+                            ///--------------------------------------------------
+                        }
+                        else {
+                            $TestResultInfo = $request->all();
+                        }
+                        $Value = $TestResultInfo[$Input->name];
+                        $InputValueObj = InputValue::create(['test_result_id' => $TestResultObj->id , 'input_id' => $Input->id , 'value' => $Value]);
+                    }
+
+            });
+        } catch (\Exception $e) {
+            return response()->json($e->getMessage(), 441);
         }
+        return \MessageResponse::success();
+
+
+
+        // }
+
     }
 
-    /**
-     * Display the specified resource.
-     *
-     * @param  int  $id
-     * @return \Illuminate\Http\Response
-     */
     public function show($id)
     {
         //
     }
 
-    /**
-     * Show the form for editing the specified resource.
-     *
-     * @param  int  $id
-     * @return \Illuminate\Http\Response
-     */
     public function edit($id)
     {
         //
     }
 
-    /**
+    public function update(StoreTestResultRequest $request, TestResult $TestResult)
-     * Update the specified resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  int  $id
-     * @return \Illuminate\Http\Response
-     */
-    public function update(Request $request, TestResult $TestResult)
     {
-        $this->validate($request, [
-            'user_id' => 'required',
-            'autoclave_id' => 'required',
-            'test_type_id' => 'required',
-            'result' => 'required',
-            'verified' => 'required',
-        ]);
         $TestResult->update($request->all());
         return response()->json(trans('messages.success'));
     }
 
-    /**
-     * Remove the specified resource from storage.
-     *
-     * @param  int  $id
-     * @return \Illuminate\Http\Response
-     */
     public function destroy($id)
     {
         //

app/Http/Controllers/TestTypeController.php

@@ -21,9 +21,14 @@ class TestTypeController extends Controller
         //
     }
 
+    //////////////////////////////////////////////////////////////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////////////////////////
+    ///////////////////////                Add TestType                      /////////////////////////
+    //////////////////////////////////////////////////////////////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////////////////////////
+
     public function CreateInput($Input,$TestType,$ParentID = null)
     {
-        // dd($Input['name'],$TestType->id,$ParentID);
         //---------------------------------------------Input
         $InputData = [
             'name' => $Input['name'],
@@ -57,24 +62,31 @@ class TestTypeController extends Controller
     }
     public function store(StoreTestTypeRequest $request)
     {
-        $TestType = [
+        try {
-            'name' => $request['name'],
+            $return_value = \DB::transaction(function () use ($request) {
-            'unique_code' => $request['unique_code'],
-            'user_id' => auth('api')->user()->id
-        ];
 
-        $TestType = TestType::create($TestType);
+                $TestType = [
-        $TestTypeInfo = $request['info'];
+                    'name' => $request['name'],
+                    'unique_code' => $request['unique_code'],
+                    'user_id' => auth('api')->user()->id
+                ];
 
-        foreach ($TestTypeInfo as $Input) {
+                $TestType = TestType::create($TestType);
+                $TestTypeInfo = $request['info'];
 
-            $InputObj = $this->CreateInput($Input,$TestType);
+                foreach ($TestTypeInfo as $Input) {
 
-            if ($Input['type'] == 'Form') {
+                    $InputObj = $this->CreateInput($Input,$TestType);
-                $this->CreateChildForm($Input,$TestType,$InputObj);
+
-            }
+                    if ($Input['type'] == 'Form') {
+                        $this->CreateChildForm($Input,$TestType,$InputObj);
+                    }
+                }
+            });
+        } catch (\Exception $e) {
+            return response()->json($e->getMessage(), 441);
         }
-        return response()->json(trans('messages.success'));
+        return \MessageResponse::success();
     }
 
     public function show($id)
@@ -84,39 +96,90 @@ class TestTypeController extends Controller
 
     public function edit($id)
     {
-        //
+        $TestType = TestType::with('inputs','inputs.children','inputs.children.children','inputs.options')->findOrFail($id);//?????
+
+        // $TestType = TestType::where('id',$id)->with('inputs','inputs.children','inputs.children.children','inputs.options')->whereHas('inputs' , function($query){
+        //     $query->where('parent_id',null);
+        // })->get();
+        return response()->json(['TestType' => $TestType]);
     }
 
-    public function update(Request $request, TestType $TestType)
+    //////////////////////////////////////////////////////////////////////////////////////////////////
-    {
+    //////////////////////////////////////////////////////////////////////////////////////////////////
-        $this->validate($request, [
+    ///////////////////////             Update TestType                      /////////////////////////
-            'name' => 'required|max:100|unique:test_types,'.$TestType->id,
+    //////////////////////////////////////////////////////////////////////////////////////////////////
-            'unique_code' => 'required|max:100|unique:test_types,'.$TestType->id,
+    //////////////////////////////////////////////////////////////////////////////////////////////////
-            'info.*.name'=>'required',
-            'info.*.type'=>'required',
-            'info.*.size'=>'required',
-            'info.*.parent_id'=>'nullable|numeric|exists:inputs',
-        ]);
-        $TestType = [
-            'name' => $request->name,
-            'unique_code' => $request->unique_code
-        ];
-        $TestType->update($TestType);
-        $TestTypeInfo = $request->info;
 
-        // foreach ($TestTypeInfo as $Input) {
+    public function UpdateInput($Input,$TestType,$ParentID = null)
-        //      if ($Input['id'] == 0) {
+    {
-                // $InputObj = $this->CreateInput($Input,$TestType);
+        //---------------------------------------------Input
-        //      }
+        $InputData = [
-                // else {
+            'name' => $Input['name'],
-                //     // code...
+            'type' => $Input['type'],
-                // }
+            'size' => $Input['size'],
-        //     $InputObj = $this->CreateInput($Input,$TestType);
+            'test_type_id' => $TestType->id,
-        //
+            'parent_id' => $ParentID
-        //     if ($Input->Type == 'Form') {
+        ];
-        //         $this->CreateChildForm($Input);
+        $InputObj = Input::where('id',$Input['id'])->update($InputData);
-        //     }
+        //---------------------------------------------Input
-        // }
+        //---------------------------------------------Option
+        if ($Input['type'] == 'CheckBox' || $Input['type'] == 'Select') {
+            foreach ($Input['options'] as $Option) {
+                if ($Option['id'] == 0) {//--new
+                    $Option = Option::create(['title' => $Option['title'] , 'input_id' => $InputObj->id]);
+                }
+                else {
+                    $Option = Option::where('id', $Option['id'])->update(['title' => $Option['title'] ]);
+                }
+
+            }
+        }
+        //---------------------------------------------Option
+        return $InputObj;
+
+    }
+    public function UpdateChildForm($Input,$TestType,$InputObj)
+    {
+        if (isset($Input['children'])) {
+            foreach ($Input['children'] as $InputChild) {
+                if ($InputChild['id'] == 0) {//--newChild
+
+                    $InputChildObj = $this->CreateInput($InputChild,$TestType,$InputObj->id);
+                    if (isset($InputChild['children'])) {
+                        $this->CreateChildForm($InputChild,$TestType,$InputChildObj);
+                    }
+                }
+                else {
+                    $InputChildObj = $this->UpdateInput($InputChild,$TestType,$InputObj->id);
+                    if (isset($InputChild['children'])) {
+                        $this->UpdateChildForm($InputChild,$TestType,$InputChildObj);
+                    }
+                }
+
+            }
+        }
+    }
+
+    public function update(StoreTestTypeRequest $request, TestType $TestType)
+    {
+        $TestTypeData = [
+            'name' => $request['name'],
+            'unique_code' => $request['unique_code'],
+        ];
+        $TestType->update($TestTypeData);
+        $TestTypeInfo = $request['info'];
+
+        foreach ($TestTypeInfo as $Input) {
+            if ($Input['id'] == 0) {//--new
+                $InputObj = $this->CreateInput($Input,$TestType);
+            }
+            else {
+                $InputObj = $this->UpdateInput($Input,$TestType);
+            }
+            if ($Input->Type == 'Form') {
+                $this->UpdateChildForm($Input,$TestType,$InputObj);
+            }
+        }
     }
 
     public function destroy($id)

public/mix-manifest.json

@@ -1,3 +1,3 @@
 {
-    "/vue/js/app.js": "/vue/js/app.js?id=83db251ea150b123e82c"
+    "/vue/js/app.js": "/vue/js/app.js?id=a95887553c9fae754f1c"
 }

public/vue/js/app.js

@@ -63769,7 +63769,7 @@ var toggle = function toggle(property) {
 var map = {
 	"./AddMedicalCenter.vue": [
 		"./resources/js/vue/views/AddMedicalCenter.vue",
-		0,
+		3,
 		6
 	],
 	"./AddNewTest.vue": [
@@ -63818,7 +63818,7 @@ var map = {
 	],
 	"./OperatorList.vue": [
 		"./resources/js/vue/views/OperatorList.vue",
-		0,
+		3,
 		15
 	],
 	"./Register.vue": [
@@ -63847,7 +63847,7 @@ var map = {
 	],
 	"./TestCreator.vue": [
 		"./resources/js/vue/views/TestCreator.vue",
-		3
+		0
 	],
 	"./Typography.vue": [
 		"./resources/js/vue/views/Typography.vue",

resources/js/app.js

@@ -1,33 +0,0 @@
-
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('./bootstrap');
-
-window.Vue = require('vue');
-
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
-
-// const files = require.context('./', true, /\.vue$/i);
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
-
-Vue.component('example-component', require('./components/ExampleComponent.vue').default);
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-
-const app = new Vue({
-    el: '#app'
-});

resources/js/bootstrap.js

@@ -1,56 +0,0 @@
-
-window._ = require('lodash');
-
-/**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
- */
-
-try {
-    window.Popper = require('popper.js').default;
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap');
-} catch (e) {}
-
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
-window.axios = require('axios');
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-/**
- * Next we will register the CSRF Token as a common header with Axios so that
- * all outgoing HTTP requests automatically have it attached. This is just
- * a simple convenience so we don't have to attach every token manually.
- */
-
-let token = document.head.querySelector('meta[name="csrf-token"]');
-
-if (token) {
-    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
-} else {
-    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
-}
-
-/**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
- */
-
-// import Echo from 'laravel-echo'
-
-// window.Pusher = require('pusher-js');
-
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     encrypted: true
-// });

resources/js/components/ExampleComponent.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card">
-                    <div class="card-header">Example Component</div>
-
-                    <div class="card-body">
-                        I'm an example component.
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>

resources/js/vue/views/TestCreator.vue

@@ -1,411 +1,372 @@
 <template>
-    <v-form id="ParentForm">
+  <v-form ref="form">
-        <v-container grid-list-xs>
+    <v-container grid-list-xs>
-
+      <material-card color="black" title="Add a New Test" class>
-            <material-card
+        <v-layout row wrap id="Form" class="ma-2">
-            color="black"
+          <v-flex xs12 md3 sm3>
-            title="Add a New Test"
+            <v-text-field name="name" v-model="form.name" label="Name" color="black" class="pa-2"></v-text-field>
-            class="">
+          </v-flex>
-            <v-layout row wrap id="Form" class="ma-2">
+          <v-flex xs12 md3 sm3>
-                <v-flex xs12 md3 sm3>
+            <v-text-field
-                    <v-text-field
+              name="uniquecode"
-                    name="name"
+              v-model="form.unique_code"
-                    label="Name"
+              label="Unique Code"
-                    color="black"
+              color="black"
-                    class="pa-2"
+              class="pa-2"
-                    ></v-text-field>
+            ></v-text-field>
-                </v-flex>
+          </v-flex>
-                <v-flex xs12 md3 sm3>
+        </v-layout>
-                    <v-text-field
+        <v-layout
-                    name="uniquecode"
+          row
-                    label="Unique Code"
+          wrap
-                    color="black"
+          class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative"
-                    class="pa-2"
+          :key="keyForm"
-                    ></v-text-field>
+          v-for="(info, keyForm) in form.info"
-                </v-flex>
+        >
-            </v-layout>
+          <v-layout row wrap id="Form" class="ma-2">
-            <v-layout row wrap class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative">
-                <v-layout row wrap id="Form" class="ma-2">
-                    <v-flex xs12 md3 sm3>
-                        <v-text-field
-                        name="inputname"
-                        label="Input Name"
-                        color="black"
-                        class="pa-2"
-                        ></v-text-field>
-                    </v-flex>
-                    <v-flex xs12 md3 sm3>
-                        <v-select
-                        :items="Items[0]"
-                        item-text="state"
-                        item-value="abbr"
-                        label="Type"
-                        v-model="SelectedType[0]"
-                        single-line
-                        color="black"
-                        class="pa-2"
-                        @change="DefaultValue(0, SelectedType[0])"
-                        ></v-select>
-                    </v-flex>
-                    <!-- Text Input Section -->
-                    <v-flex xs12 md3 sm3 v-if="SelectedType[0] === 'text'">
-                        <v-text-field
-                        name="size"
-                        label="Size"
-                        color="black"
-                        class="pa-2"
-                        id="InputSize"
-                        ></v-text-field>
-                    </v-flex>
-                </v-layout>
-                <!-- SelectBox Section -->
-                <v-layout class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" row wrap v-if="SelectedType[0] === 'select'">
-                    <v-layout row wrap class="WM-Relative WM-Width-Full">
-                        <v-flex xs12 md3 sm3 v-for="(SelectBox , Key) in ArraySelectBox[0]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
-                            <v-text-field
-                            name="title"
-                            label="Title"
-                            color="black"
-                            class="pa-2 Input"
-                            v-model="SelectBox.value"
-                            ></v-text-field>
-                            <v-btn
-                            absolute
-                            small
-                            right
-                            bottom
-                            color="pink"
-                            v-if="Key >= 1"
-                            @click="RemoveInput('ArraySelectBox', 0, Key)"
-                            >
-                            <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
-                            REMOVE</v-btn>
-                        </v-flex>
-                    </v-layout>
-                    <v-btn
-                    absolute
-                    right
-                    bottom
-                    small
-                    @click="InputDuplicate('ArraySelectBox', 0)"
-                    color="black"
-                    class="mb-2">
-                    <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-                    <span class="white--text">Add</span>
-                </v-btn>
-            </v-layout>
-            <!-- Checkbox Section -->
-            <v-layout row wrap class="pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[0] === 'checkbox'">
-                <v-layout row wrap class="WM-Width-Full WM-Relative">
-                    <v-flex xs12 sm3 md3 v-for="(Checkbox , Key) in ArrayCheckBox[0]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
-                        <v-text-field
-                        name="title"
-                        label="Title"
-                        color="black"
-                        class="pa-2 Input"
-                        v-model="Checkbox.value"
-                        ></v-text-field>
-                        <v-btn
-                        absolute
-                        small
-                        right
-                        bottom
-                        @click="RemoveInput('ArrayCheckBox', 0, Key)"
-                        v-if="Key >= 1"
-                        color="pink">
-                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
-                        <span class="white--text">REMOVE</span>
-                    </v-btn>
-                </v-flex>
-            </v-layout>
-            <v-btn
-            absolute
-            small
-            right
-            bottom
-            @click="InputDuplicate('ArrayCheckBox', 0)"
-            class="mb-2"
-            color="black">
-            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-            <span class="white--text">Add</span>
-        </v-btn>
-    </v-layout>
-    <!-- Form Section -->
-    <v-layout row wrap v-if="SelectedType[0] === 'form'" class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative">
-        <v-layout row wrap v-for="(Div , ArrayDivKey) in ArrayDiv" :key="ArrayDivKey" class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form">
             <v-flex xs12 md3 sm3>
-                <v-text-field
+              <v-text-field name="inputname" v-model="info.name" label="Input Name" color="black" class="pa-2"></v-text-field>
-                name="inputname"
-                label="Input Name"
-                color="black"
-                class="pa-2"
-                ></v-text-field>
             </v-flex>
             <v-flex xs12 md3 sm3>
-                <v-select
+              <v-select
-                :items="Items[1]"
+                :items="type"
                 item-text="state"
                 item-value="abbr"
                 label="Type"
-                v-model="SelectedType[1][ArrayDivKey]"
+                v-model="info.type"
                 single-line
                 color="black"
                 class="pa-2"
-                @change="DefaultValue(ArrayDivKey, SelectedType[1][ArrayDivKey])"
+                @change="changeType(keyForm, info.type)"
-                ></v-select>
+              ></v-select>
             </v-flex>
-            <v-flex xs12 md3 sm3 v-if="SelectedType[1][ArrayDivKey] === 'text'">
+            <!-- Text Input Section -->
-                <v-text-field
+            <v-flex xs12 md3 sm3>
+              <v-text-field
                 name="size"
                 label="Size"
+                v-model="info.size"
                 color="black"
                 class="pa-2"
-                id="InputSize"
+              ></v-text-field>
-                ></v-text-field>
             </v-flex>
-            <!-- Inner Form Selectbox Section  -->
+          </v-layout>
-            <v-layout row wrap class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[1][ArrayDivKey] === 'select'" >
+          <!-- SelectBox Section -->
-                <v-layout row wrap class="WM-Relative WM-Width-Full">
+          <v-layout
-                    <v-flex xs12 md3 sm3 v-for="(SelectBox , Key) in ArraySelectBox[ArrayDivKey]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
+            class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
-                        <v-text-field
+            row
-                        name="title"
+            wrap
-                        label="Title"
+            v-if="info.type === 'select' || info.type === 'checkbox'"
-                        color="black"
+          >
-                        class="pa-2 Input"
+            <v-layout row wrap class="WM-Relative WM-Width-Full" v-if="info['options'].length > 0">
-                        v-model="SelectBox.value"
+              <v-flex
-                        id="value"
+                xs12
-                        ></v-text-field>
+                md3
-                        <v-btn
+                sm3
-                        absolute
+                v-for="(selectbox , keySelect) in info['options']"
-                        small
+                :key="keySelect"
-                        right
+                class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
-                        bottom
+              >
-                        color="pink"
+                <v-text-field
-                        @click="RemoveInput('ArraySelectBox', ArrayDivKey, Key)"
+                  name="title"
-                        v-if="Key >= 1"
+                  label="Title"
-                        >
+                  color="black"
-                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                  class="pa-2 Input"
-                        REMOVE</v-btn>
+                  v-model="selectbox.title"
-                    </v-flex>
+                ></v-text-field>
-                </v-layout>
                 <v-btn
-                absolute
+                  absolute
-                right
+                  small
-                bottom
+                  right
-                small
+                  bottom
-                @click="InputDuplicate('ArraySelectBox', ArrayDivKey)"
+                  color="pink"
-                color="black">
+                  v-if="keySelect >= 1"
-                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                  @click="removeSelectbox(keyForm, keySelect)"
-                <span class="white--text">Add</span>
+                >
-            </v-btn>
+                  <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
-        </v-layout>
+                </v-btn>
-        <!-- Inner Form Checkbox Section -->
+              </v-flex>
-        <v-layout row wrap class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[1][ArrayDivKey] === 'checkbox'" >
-            <v-layout row wrap class="WM-Relative WM-Width-Full">
-                <v-flex xs12 md3 sm3 v-if="Key >= 0" v-for="(CheckBox , Key) in ArrayCheckBox[ArrayDivKey]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
-                    <v-text-field
-                    name="title"
-                    label="Title"
-                    color="black"
-                    class="pa-2 Input"
-                    v-model="CheckBox.value"
-                    id="value"
-                    ></v-text-field>
-                    <v-btn
-                    absolute
-                    small
-                    right
-                    bottom
-                    color="pink"
-                    @click="RemoveInput('ArrayCheckBox', ArrayDivKey, Key)"
-                    v-if="Key >= 1"
-                    >
-                    <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
-                    REMOVE</v-btn>
-                </v-flex>
             </v-layout>
             <v-btn
-            absolute
+              absolute
-            right
+              right
-            bottom
+              bottom
-            small
+              small
-            @click="InputDuplicate('ArrayCheckBox', ArrayDivKey)"
+              @click="addSelectbox(keyForm)"
-            color="black">
+              color="black"
-            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+              class="mb-2"
-            <span class="white--text">Add</span>
+            >
-        </v-btn>
+              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-    </v-layout>
+              <span class="white--text">Add</span>
-    <v-btn
+            </v-btn>
-    absolute
+          </v-layout>
-    small
+          <!-- Form Section -->
-    right
+          <v-layout
-    top
+            row
-    color="pink"
+            wrap
-    @click="Remove(ArrayDivKey)"
+            v-if="info.type === 'form'"
-    id="RemoveFormDuplicator"
+            class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative"
-    >
+          >
-    <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+            <v-layout
-    REMOVE</v-btn>
+              row
-</v-layout>
+              wrap
-<v-btn
+              v-for="(children , keychildren) in info.children"
-absolute
+              :key="keychildren"
-small
+              class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form"
-right
+            >
-bottom
+              <v-flex xs12 md3 sm3>
-color="cyan"
+                <v-text-field
-@click="Duplicator"
+                  name="name"
-id="FormDuplicator"
+                  v-model="children.name"
->
+                  label="Input Name"
-<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                  color="black"
-ADD</v-btn>
+                  class="pa-2"
-</v-layout>
+                ></v-text-field>
-<v-btn
+              </v-flex>
-absolute
+              <v-flex xs12 md3 sm3>
-right
+                <v-select
-bottom
+                  :items="type"
-small
+                  item-text="state"
-@click="InputDuplicate('ArrayForm', 0)"
+                  item-value="abbr"
-color="pink"
+                  label="Type"
-class="mb-2">
+                  v-model="children.type"
-<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                  single-line
-<span class="white--text">Add</span>
+                  color="black"
-</v-btn>
+                  class="pa-2"
-</v-layout>
+                  @change="changeTypeForm(keyForm, children.type, keychildren)"
-<v-layout row wrap align-center justify-center class="mt-4">
+                ></v-select>
-    <v-btn class="WM-CyanBlueGradient-BG" v-if="Hidden" style="padding:10px 60px">
+              </v-flex>
-        <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+              <v-flex xs12 md3 sm3>
-        <span class="white--text">Generate Form</span>
+                <v-text-field name="size" v-model="children.size" label="Size" color="black" class="pa-2" ></v-text-field>
-    </v-btn>
+              </v-flex>
-    <router-link to="/dashboard">
+              <!-- Inner Form Selectbox Section  -->
-        <v-btn
+              <v-layout
-        class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                row
-        <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                wrap
-        <span class="black--text">Back</span>
+                class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
-    </v-btn>
+                v-if="children.type === 'select' || children.type === 'checkbox'"
-</router-link>
+              >
-</v-layout>
+                <v-layout
-</material-card>
+                  row
-</v-container>
+                  wrap
-</v-form>
+                  class="WM-Relative WM-Width-Full"
+                  v-if="children['options'].length > 0"
+                >
+                  <v-flex
+                    xs12
+                    md3
+                    sm3
+                    v-for="(selectbox , keySelect) in children['options']"
+                    :key="keySelect"
+                    class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
+                  >
+                    <v-text-field
+                      name="title"
+                      label="Title"
+                      color="black"
+                      class="pa-2 Input"
+                      v-model="selectbox.title"
+                    ></v-text-field>
+                    <v-btn
+                      absolute
+                      small
+                      right
+                      bottom
+                      color="pink"
+                      @click="removeSelectboxForm(keyForm, keySelect, keychildren)"
+                      v-if="keySelect >= 1"
+                    >
+                      <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                    </v-btn>
+                  </v-flex>
+                </v-layout>
+                <v-btn
+                  absolute
+                  right
+                  bottom
+                  small
+                  @click="addSelectboxForm(keyForm, keychildren)"
+                  color="black"
+                >
+                  <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                  <span class="white--text">Add</span>
+                </v-btn>
+              </v-layout>
+              <v-btn
+                absolute
+                small
+                right
+                top
+                color="pink"
+                @click="removeForm(keyForm, keychildren)"
+                id="RemoveFormDuplicator"
+              >
+                <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+              </v-btn>
+            </v-layout>
+            <v-btn
+              absolute
+              small
+              right
+              bottom
+              color="cyan"
+              @click="duplicateForm(keyForm)"
+              id="FormDuplicator"
+            >
+              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
+            </v-btn>
+          </v-layout>
+
+          <v-layout
+            row
+            wrap
+            align-center
+            justify-center
+            class="mt-4"
+            v-if="(form.info.length -1)  == keyForm"
+          >
+            <v-btn absolute right bottom small @click="addInput" color="pink" class="mb-2">
+              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+              <span class="white--text">Add</span>
+            </v-btn>
+          </v-layout>
+        </v-layout>
+
+        <v-layout row wrap align-center justify-center class="mt-4">
+          <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="registerForm">
+            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+            <span class="white--text">Generate Form</span>
+          </v-btn>
+          <router-link to="/dashboard">
+            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+              <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+              <span class="black--text">Back</span>
+            </v-btn>
+          </router-link>
+        </v-layout>
+      </material-card>
+    </v-container>
+  </v-form>
 </template>
 <script>
+import { ApiService } from "@/services";
 export default {
-    name: "",
+  data() {
-    data () {
+    return {
-        return {
+      form: {
-            form : {},
+        name: "",
-            SelectedType : {0 : 0, 1 : {}},
+        unique_code: "",
-            InputDuplicator : {0:0},
+        info: [
-            ArrayInput : [{value:''}],
+          {
-            ArraySelectBox : [],
+            name: "",
-            ArrayCheckBox : [],
+            type: "",
-            ArrayForm : [],
+            size: ""
-            SelectBox : {},
+          }
-            CheckBox : {},
+        ]
-            ArrayDiv : [0],
+      },
-            Hidden : false,
+      type: [
-            select: { state: 'Text', abbr: 'text' },
+        { state: "Text", abbr: "text" },
-            Items: [
+        { state: "Checkbox", abbr: "checkbox" },
-                [
+        { state: "Select", abbr: "select" },
-                    { state: 'Text', abbr: 'text' },
+        { state: "Form", abbr: "form" }
-                    { state: 'Checkbox', abbr: 'checkbox' },
+      ]
-                    { state: 'Select', abbr: 'select' },
+    };
-                    { state: 'Form', abbr: 'form' },
+  },
-                ],
+  methods: {
-                [
+    changeType(infoIndex, selectedboxType) {
-                    { state: 'Text', abbr: 'text' },
+      if (selectedboxType == "select" || selectedboxType == "checkbox") {
-                    { state: 'Checkbox', abbr: 'checkbox' },
+        this.form.info[infoIndex]["options"] = [{ title: "" }];
-                    { state: 'Select', abbr: 'select' },
+      } else {
-                ]
+        this.form.info[infoIndex]["options"] = [];
-            ],
+      }
-        }
+      if (selectedboxType == "form") {
+        this.form.info[infoIndex]["children"] = [
+          { name: "", type: "", size: "" }
+        ];
+      }
     },
-    methods: {
+    removeSelectbox(infoIndex, selectboxOptions) {
-        Duplicator() {
+      let form = this.form;
-            this.ArrayDiv.push(this.ArrayDiv.length);
+      this.form = [];
-        },
+      form.info[infoIndex]["options"].splice(selectboxOptions, 1);
-        Remove (index) {
+      this.form = form;
-            this.ArrayDiv.splice(index, 1);
+    },
-        },
+    addSelectbox(infoIndex) {
-        RemoveInput (Type, ArrayDivindex, index) {
+      let form = this.form;
-            if (Type === 'ArraySelectBox') {
+      this.form = [];
-                this.ArraySelectBox[ArrayDivindex].splice(index, 1);
+      form.info[infoIndex]["options"].push({ title: "" });
-                this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
+      this.form = form;
-            }
+    },
-            else {
+    addInput() {
-                this.ArrayCheckBox[ArrayDivindex].splice(index, 1);
+      this.form.info.push({ name: "", type: "", size: "" });
-                this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
+    },
-            }
+    changeTypeForm(infoIndex, type, formLevel) {
-        },
+      if (type == "select" || type == "checkbox") {
-        InputDuplicate (Type, ArrayDivindex) {
+        let form = this.form;
-            if (Type === 'ArraySelectBox') {
+        this.form = "";
-                if (this.ArraySelectBox[ArrayDivindex] == undefined) {
+        form.info[infoIndex]["children"][formLevel]["options"] = [
-                    this.ArraySelectBox[ArrayDivindex] = [];
+          { title: "" }
-                }
+        ];
-                this.ArraySelectBox[ArrayDivindex].push({value : ''});
+        this.form = form;
-                this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
+      } else {
-            }
+        let form = this.form;
-            else if(Type === 'ArrayCheckBox'){
+        this.form = "";
-                if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
+        form.info[infoIndex]["children"][formLevel]["options"] = [];
-                    this.ArrayCheckBox[ArrayDivindex] = [];
+        this.form = form;
-                }
+      }
-                this.ArrayCheckBox[ArrayDivindex].push({value : ''});
+    },
-                this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
+    removeSelectboxForm(infoIndex, selectboxOptions, formLevel) {
-            }
+      let form = this.form;
-            else {
+      this.form = [];
-                if (this.ArrayForm[ArrayDivindex] == undefined) {
+      form.info[infoIndex]["children"][formLevel]["options"].splice(
-                    this.ArrayForm[ArrayDivindex] = [];
+        selectboxOptions,
-                }
+        1
-                else {
+      );
-                    this.ArrayForm[ArrayDivindex].push({value : ''});
+      this.form = form;
-                    this.CreateAgainArray(this.ArrayForm, 'ArrayForm');
+    },
-                }
+    addSelectboxForm(infoIndex, formLevel) {
-            }
+      let form = this.form;
-        },
+      this.form = [];
-        CreateAgainArray(arrayDiv, Type) {
+      form.info[infoIndex]["children"][formLevel]["options"].push({
-            let array = arrayDiv;
+        title: ""
-            if (Type === 'ArraySelectBox') {
+      });
-                this.ArraySelectBox = [];
+      this.form = form;
-                this.ArraySelectBox = array;
+    },
-            }
+    duplicateForm(infoIndex) {
-            else if(Type === 'ArrayCheckBox'){
+      let form = this.form;
-                this.ArrayCheckBox = [];
+      this.form = [];
-                this.ArrayCheckBox = array;
+      form.info[infoIndex]["children"].push({ name: "", type: "", size: "" });
-            }
+      this.form = form;
-            else {
+    },
-                this.ArrayForm = [];
+    removeForm(infoIndex, formLevel) {
-                this.ArrayForm = array;
+      let form = this.form;
-            }
+      this.form = [];
-        },
+      form.info[infoIndex]["children"].splice(formLevel, 1);
-        DefaultValue(ArrayDivindex, SelectedType) {
+      this.form = form;
-            this.Hidden = true;
+    },
-            if (SelectedType == 'select') {
+    async registerForm() {
-                if (this.ArraySelectBox[ArrayDivindex] == undefined) {
+      if (this.$refs.form.validate()) {
-                    this.ArraySelectBox[ArrayDivindex] = [];
+        const result = await ApiService.post("TestTypes", this.form);
-                    this.ArraySelectBox[ArrayDivindex].push({value : ''});
+        if (result && result.status == 200) {
-                }
+          this.$router.push("/dashboard");
-            } else if(SelectedType == 'checkbox') {
-                if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
-                    this.ArrayCheckBox[ArrayDivindex] = [];
-                    this.ArrayCheckBox[ArrayDivindex].push({value : ''});
-                }
-            }
         }
-
+      }
     }
-}
+
+  }
+};
 </script>
 <style lang="css" scoped>
 .WM-Border-Gray {
-    border-color: #aaa !important;
+  border-color: #aaa !important;
 }
 .WM-Color-LightGrey {
-    background-color : #F5F5F5;
+  background-color: #f5f5f5;
 }
 .v-btn--top.v-btn--absolute.v-btn--small {
-    top: -25px !important;
+  top: -25px !important;
 }
 .v-btn--bottom.v-btn--absolute.v-btn--small {
-    bottom: -24px !important;
+  bottom: -24px !important;
 }
 </style>