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)
     {
+        // dd($TestResultInfo[$InputChild->name]);
+        // foreach ($Input->children as $InputChild) {
+
+        $TestResultInfo = $TestResultInfo[$InputChild->name];
+            if ($InputChild->type == 'Form') {
+
+                foreach ($InputChild->children as $InputChild2) {
+                    // dd($TestResultInfo[$InputChild2->name]);
+                    $this->CreateChildFormValue($InputChild2,$TestResultObj,$TestResultInfo[$InputChild2->name]);
+                }
+            }
+            $Value = $TestResultInfo;
+            // dd($Value);
+            $InputValueObj = InputValue::create(['test_result_id' => $TestResultObj->id , 'input_id' => $InputChild['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::user()->id,
+                    '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 = $request['info'];
+                $TestResultInfo = [];
+
+                $Inputs = Input::with('options','children')->where('test_type_id',$request->test_type_id)->get();
 
-        // $TestType = TestType::with('inputs')->where('id',$request->test_type_id)->first();
-        $Inputs = Input::where('test_type_id',$request->test_type_id)->get();
                     foreach ($Inputs as $Input) {
-            if ($Input->type == 'Select' || $Input->type == 'CheckBox') {
+                        if ($Input['type'] == 'Form') {
-                $OptionIDs = $Input->options->pluck('id')->toArray();
+                            $TestResultInfo = $request[$Input->name];
-                $Value = $OptionIDs;
+
+                            // $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 {
-                $Value = $TestResultInfo[$Input->name];
+                            $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,6 +62,9 @@ class TestTypeController extends Controller
     }
     public function store(StoreTestTypeRequest $request)
     {
+        try {
+            $return_value = \DB::transaction(function () use ($request) {
+
                 $TestType = [
                     'name' => $request['name'],
                     'unique_code' => $request['unique_code'],
@@ -74,7 +82,11 @@ class TestTypeController extends Controller
                         $this->CreateChildForm($Input,$TestType,$InputObj);
                     }
                 }
-        return response()->json(trans('messages.success'));
+            });
+        } catch (\Exception $e) {
+            return response()->json($e->getMessage(), 441);
+        }
+        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,73 +1,78 @@
 <template>
-    <v-form id="ParentForm">
+  <v-form ref="form">
     <v-container grid-list-xs>
-
+      <material-card color="black" title="Add a New Test" class>
-            <material-card
-            color="black"
-            title="Add a New Test"
-            class="">
         <v-layout row wrap id="Form" class="ma-2">
           <v-flex xs12 md3 sm3>
-                    <v-text-field
+            <v-text-field name="name" v-model="form.name" label="Name" color="black" class="pa-2"></v-text-field>
-                    name="name"
-                    label="Name"
-                    color="black"
-                    class="pa-2"
-                    ></v-text-field>
           </v-flex>
           <v-flex xs12 md3 sm3>
             <v-text-field
               name="uniquecode"
+              v-model="form.unique_code"
               label="Unique Code"
               color="black"
               class="pa-2"
             ></v-text-field>
           </v-flex>
         </v-layout>
-            <v-layout row wrap class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative">
+        <v-layout
+          row
+          wrap
+          class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative"
+          :key="keyForm"
+          v-for="(info, keyForm) in form.info"
+        >
           <v-layout row wrap id="Form" class="ma-2">
             <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
-                        :items="Items[0]"
+                :items="type"
                 item-text="state"
                 item-value="abbr"
                 label="Type"
-                        v-model="SelectedType[0]"
+                v-model="info.type"
                 single-line
                 color="black"
                 class="pa-2"
-                        @change="DefaultValue(0, SelectedType[0])"
+                @change="changeType(keyForm, info.type)"
               ></v-select>
             </v-flex>
             <!-- Text Input Section -->
-                    <v-flex xs12 md3 sm3 v-if="SelectedType[0] === 'text'">
+            <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-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
-                    <v-layout row wrap class="WM-Relative WM-Width-Full">
+            class="ma-3 pa-3 WM-Border WM-Border-Black 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">
+            row
+            wrap
+            v-if="info.type === 'select' || info.type === 'checkbox'"
+          >
+            <v-layout row wrap class="WM-Relative WM-Width-Full" v-if="info['options'].length > 0">
+              <v-flex
+                xs12
+                md3
+                sm3
+                v-for="(selectbox , keySelect) in info['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.value"
+                  v-model="selectbox.title"
                 ></v-text-field>
                 <v-btn
                   absolute
@@ -75,67 +80,44 @@
                   right
                   bottom
                   color="pink"
-                            v-if="Key >= 1"
+                  v-if="keySelect >= 1"
-                            @click="RemoveInput('ArraySelectBox', 0, Key)"
+                  @click="removeSelectbox(keyForm, keySelect)"
                 >
-                            <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                  <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
-                            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)"
+              small
+              @click="addSelectbox(keyForm)"
+              color="black"
               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
-        <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">
+            row
+            wrap
+            v-if="info.type === 'form'"
+            class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative"
+          >
+            <v-layout
+              row
+              wrap
+              v-for="(children , keychildren) in info.children"
+              :key="keychildren"
+              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
-                name="inputname"
+                  name="name"
+                  v-model="children.name"
                   label="Input Name"
                   color="black"
                   class="pa-2"
@@ -143,37 +125,47 @@
               </v-flex>
               <v-flex xs12 md3 sm3>
                 <v-select
-                :items="Items[1]"
+                  :items="type"
                   item-text="state"
                   item-value="abbr"
                   label="Type"
-                v-model="SelectedType[1][ArrayDivKey]"
+                  v-model="children.type"
                   single-line
                   color="black"
                   class="pa-2"
-                @change="DefaultValue(ArrayDivKey, SelectedType[1][ArrayDivKey])"
+                  @change="changeTypeForm(keyForm, children.type, keychildren)"
                 ></v-select>
               </v-flex>
-            <v-flex xs12 md3 sm3 v-if="SelectedType[1][ArrayDivKey] === 'text'">
+              <v-flex xs12 md3 sm3>
-                <v-text-field
+                <v-text-field name="size" v-model="children.size" label="Size" color="black" class="pa-2" ></v-text-field>
-                name="size"
-                label="Size"
-                color="black"
-                class="pa-2"
-                id="InputSize"
-                ></v-text-field>
               </v-flex>
               <!-- Inner Form Selectbox Section  -->
-            <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'" >
+              <v-layout
-                <v-layout row wrap class="WM-Relative WM-Width-Full">
+                row
-                    <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">
+                wrap
+                class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
+                v-if="children.type === 'select' || children.type === 'checkbox'"
+              >
+                <v-layout
+                  row
+                  wrap
+                  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.value"
+                      v-model="selectbox.title"
-                        id="value"
                     ></v-text-field>
                     <v-btn
                       absolute
@@ -181,47 +173,11 @@
                       right
                       bottom
                       color="pink"
-                        @click="RemoveInput('ArraySelectBox', ArrayDivKey, Key)"
+                      @click="removeSelectboxForm(keyForm, keySelect, keychildren)"
-                        v-if="Key >= 1"
+                      v-if="keySelect >= 1"
                     >
-                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                      <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
-                        REMOVE</v-btn>
-                    </v-flex>
-                </v-layout>
-                <v-btn
-                absolute
-                right
-                bottom
-                small
-                @click="InputDuplicate('ArraySelectBox', ArrayDivKey)"
-                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>
-        <!-- Inner Form Checkbox Section -->
-        <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
@@ -229,8 +185,9 @@
                   right
                   bottom
                   small
-            @click="InputDuplicate('ArrayCheckBox', ArrayDivKey)"
+                  @click="addSelectboxForm(keyForm, keychildren)"
-            color="black">
+                  color="black"
+                >
                   <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                   <span class="white--text">Add</span>
                 </v-btn>
@@ -241,11 +198,11 @@
                 right
                 top
                 color="pink"
-    @click="Remove(ArrayDivKey)"
+                @click="removeForm(keyForm, keychildren)"
                 id="RemoveFormDuplicator"
               >
-    <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
-    REMOVE</v-btn>
+              </v-btn>
             </v-layout>
             <v-btn
               absolute
@@ -253,32 +210,35 @@ small
               right
               bottom
               color="cyan"
-@click="Duplicator"
+              @click="duplicateForm(keyForm)"
               id="FormDuplicator"
             >
-<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
-ADD</v-btn>
+            </v-btn>
           </v-layout>
-<v-btn
+
-absolute
+          <v-layout
-right
+            row
-bottom
+            wrap
-small
+            align-center
-@click="InputDuplicate('ArrayForm', 0)"
+            justify-center
-color="pink"
+            class="mt-4"
-class="mb-2">
+            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" v-if="Hidden" style="padding:10px 60px">
+          <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
+            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-        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>
@@ -289,118 +249,119 @@ class="mb-2">
   </v-form>
 </template>
 <script>
+import { ApiService } from "@/services";
 export default {
-    name: "",
   data() {
     return {
-            form : {},
+      form: {
-            SelectedType : {0 : 0, 1 : {}},
+        name: "",
-            InputDuplicator : {0:0},
+        unique_code: "",
-            ArrayInput : [{value:''}],
+        info: [
-            ArraySelectBox : [],
+          {
-            ArrayCheckBox : [],
+            name: "",
-            ArrayForm : [],
+            type: "",
-            SelectBox : {},
+            size: ""
-            CheckBox : {},
-            ArrayDiv : [0],
-            Hidden : false,
-            select: { state: 'Text', abbr: 'text' },
-            Items: [
-                [
-                    { state: 'Text', abbr: 'text' },
-                    { state: 'Checkbox', abbr: 'checkbox' },
-                    { state: 'Select', abbr: 'select' },
-                    { state: 'Form', abbr: 'form' },
-                ],
-                [
-                    { state: 'Text', abbr: 'text' },
-                    { state: 'Checkbox', abbr: 'checkbox' },
-                    { state: 'Select', abbr: 'select' },
-                ]
-            ],
           }
+        ]
+      },
+      type: [
+        { state: "Text", abbr: "text" },
+        { state: "Checkbox", abbr: "checkbox" },
+        { state: "Select", abbr: "select" },
+        { state: "Form", abbr: "form" }
+      ]
+    };
   },
   methods: {
-        Duplicator() {
+    changeType(infoIndex, selectedboxType) {
-            this.ArrayDiv.push(this.ArrayDiv.length);
+      if (selectedboxType == "select" || selectedboxType == "checkbox") {
-        },
+        this.form.info[infoIndex]["options"] = [{ title: "" }];
-        Remove (index) {
+      } else {
-            this.ArrayDiv.splice(index, 1);
+        this.form.info[infoIndex]["options"] = [];
-        },
-        RemoveInput (Type, ArrayDivindex, index) {
-            if (Type === 'ArraySelectBox') {
-                this.ArraySelectBox[ArrayDivindex].splice(index, 1);
-                this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
       }
-            else {
+      if (selectedboxType == "form") {
-                this.ArrayCheckBox[ArrayDivindex].splice(index, 1);
+        this.form.info[infoIndex]["children"] = [
-                this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
+          { name: "", type: "", size: "" }
+        ];
       }
     },
-        InputDuplicate (Type, ArrayDivindex) {
+    removeSelectbox(infoIndex, selectboxOptions) {
-            if (Type === 'ArraySelectBox') {
+      let form = this.form;
-                if (this.ArraySelectBox[ArrayDivindex] == undefined) {
+      this.form = [];
-                    this.ArraySelectBox[ArrayDivindex] = [];
+      form.info[infoIndex]["options"].splice(selectboxOptions, 1);
-                }
+      this.form = form;
-                this.ArraySelectBox[ArrayDivindex].push({value : ''});
+    },
-                this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
+    addSelectbox(infoIndex) {
-            }
+      let form = this.form;
-            else if(Type === 'ArrayCheckBox'){
+      this.form = [];
-                if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
+      form.info[infoIndex]["options"].push({ title: "" });
-                    this.ArrayCheckBox[ArrayDivindex] = [];
+      this.form = form;
-                }
+    },
-                this.ArrayCheckBox[ArrayDivindex].push({value : ''});
+    addInput() {
-                this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
+      this.form.info.push({ name: "", type: "", size: "" });
-            }
+    },
-            else {
+    changeTypeForm(infoIndex, type, formLevel) {
-                if (this.ArrayForm[ArrayDivindex] == undefined) {
+      if (type == "select" || type == "checkbox") {
-                    this.ArrayForm[ArrayDivindex] = [];
+        let form = this.form;
-                }
+        this.form = "";
-                else {
+        form.info[infoIndex]["children"][formLevel]["options"] = [
-                    this.ArrayForm[ArrayDivindex].push({value : ''});
+          { title: "" }
-                    this.CreateAgainArray(this.ArrayForm, 'ArrayForm');
+        ];
-                }
+        this.form = form;
+      } else {
+        let form = this.form;
+        this.form = "";
+        form.info[infoIndex]["children"][formLevel]["options"] = [];
+        this.form = form;
       }
     },
-        CreateAgainArray(arrayDiv, Type) {
+    removeSelectboxForm(infoIndex, selectboxOptions, formLevel) {
-            let array = arrayDiv;
+      let form = this.form;
-            if (Type === 'ArraySelectBox') {
+      this.form = [];
-                this.ArraySelectBox = [];
+      form.info[infoIndex]["children"][formLevel]["options"].splice(
-                this.ArraySelectBox = array;
+        selectboxOptions,
-            }
+        1
-            else if(Type === 'ArrayCheckBox'){
+      );
-                this.ArrayCheckBox = [];
+      this.form = form;
-                this.ArrayCheckBox = array;
-            }
-            else {
-                this.ArrayForm = [];
-                this.ArrayForm = array;
-            }
     },
-        DefaultValue(ArrayDivindex, SelectedType) {
+    addSelectboxForm(infoIndex, formLevel) {
-            this.Hidden = true;
+      let form = this.form;
-            if (SelectedType == 'select') {
+      this.form = [];
-                if (this.ArraySelectBox[ArrayDivindex] == undefined) {
+      form.info[infoIndex]["children"][formLevel]["options"].push({
-                    this.ArraySelectBox[ArrayDivindex] = [];
+        title: ""
-                    this.ArraySelectBox[ArrayDivindex].push({value : ''});
+      });
-                }
+      this.form = form;
-            } else if(SelectedType == 'checkbox') {
+    },
-                if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
+    duplicateForm(infoIndex) {
-                    this.ArrayCheckBox[ArrayDivindex] = [];
+      let form = this.form;
-                    this.ArrayCheckBox[ArrayDivindex].push({value : ''});
+      this.form = [];
+      form.info[infoIndex]["children"].push({ name: "", type: "", size: "" });
+      this.form = form;
+    },
+    removeForm(infoIndex, formLevel) {
+      let form = this.form;
+      this.form = [];
+      form.info[infoIndex]["children"].splice(formLevel, 1);
+      this.form = form;
+    },
+    async registerForm() {
+      if (this.$refs.form.validate()) {
+        const result = await ApiService.post("TestTypes", this.form);
+        if (result && result.status == 200) {
+          this.$router.push("/dashboard");
         }
       }
     }
 
   }
-}
+};
 </script>
 <style lang="css" scoped>
 .WM-Border-Gray {
   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;