create Test Creator

This commit is contained in:
saeid
2019-04-23 20:40:43 +04:30
parent e8196ceb39
commit d23c5f134b
11 changed files with 3783 additions and 2820 deletions
+79 -69
View File
@@ -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()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
public function CreateChildFormValue($InputChild,$TestResultObj,$TestResultInfo)
{
$TestResult = [
'user_id' => Auth::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;
// dd($TestResultInfo[$InputChild->name]);
// foreach ($Input->children as $InputChild) {
// $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') {
$OptionIDs = $Input->options->pluck('id')->toArray();
$Value = $OptionIDs;
$TestResultInfo = $TestResultInfo[$InputChild->name];
if ($InputChild->type == 'Form') {
foreach ($InputChild->children as $InputChild2) {
// dd($TestResultInfo[$InputChild2->name]);
$this->CreateChildFormValue($InputChild2,$TestResultObj,$TestResultInfo[$InputChild2->name]);
}
}
else {
$Value = $TestResultInfo[$Input->name];
}
$InputValueObj = InputValue::create(['test_result_id' => $TestResultObj->id , 'input_id' => $Input->id , 'value' => $Value]);
$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('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)
{
//
}
/**
* 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)
public function update(StoreTestResultRequest $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)
{
//
+107 -44
View File
@@ -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 = [
'name' => $request['name'],
'unique_code' => $request['unique_code'],
'user_id' => auth('api')->user()->id
];
try {
$return_value = \DB::transaction(function () use ($request) {
$TestType = TestType::create($TestType);
$TestTypeInfo = $request['info'];
$TestType = [
'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') {
$this->CreateChildForm($Input,$TestType,$InputObj);
}
$InputObj = $this->CreateInput($Input,$TestType);
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, [
'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;
//////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////// Update TestType /////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
// foreach ($TestTypeInfo as $Input) {
// if ($Input['id'] == 0) {
// $InputObj = $this->CreateInput($Input,$TestType);
// }
// else {
// // code...
// }
// $InputObj = $this->CreateInput($Input,$TestType);
//
// if ($Input->Type == 'Form') {
// $this->CreateChildForm($Input);
// }
// }
public function UpdateInput($Input,$TestType,$ParentID = null)
{
//---------------------------------------------Input
$InputData = [
'name' => $Input['name'],
'type' => $Input['type'],
'size' => $Input['size'],
'test_type_id' => $TestType->id,
'parent_id' => $ParentID
];
$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)
Vendored
+1263 -719
View File
File diff suppressed because it is too large Load Diff
+1263
View File
File diff suppressed because it is too large Load Diff
Vendored
+731 -1497
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -1,3 +1,3 @@
{
"/vue/js/app.js": "/vue/js/app.js?id=83db251ea150b123e82c"
"/vue/js/app.js": "/vue/js/app.js?id=a95887553c9fae754f1c"
}
+3 -3
View File
@@ -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",
-33
View File
@@ -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'
});
-56
View File
@@ -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
// });
@@ -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>
+336 -375
View File
@@ -1,411 +1,372 @@
<template>
<v-form id="ParentForm">
<v-container grid-list-xs>
<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
name="name"
label="Name"
color="black"
class="pa-2"
></v-text-field>
</v-flex>
<v-flex xs12 md3 sm3>
<v-text-field
name="uniquecode"
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 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-form ref="form">
<v-container grid-list-xs>
<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 name="name" v-model="form.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"
: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
name="inputname"
label="Input Name"
color="black"
class="pa-2"
></v-text-field>
<v-text-field name="inputname" v-model="info.name" label="Input Name" color="black" class="pa-2"></v-text-field>
</v-flex>
<v-flex xs12 md3 sm3>
<v-select
:items="Items[1]"
<v-select
: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])"
></v-select>
@change="changeType(keyForm, info.type)"
></v-select>
</v-flex>
<v-flex xs12 md3 sm3 v-if="SelectedType[1][ArrayDivKey] === 'text'">
<v-text-field
<!-- Text Input Section -->
<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 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 row wrap class="WM-Relative WM-Width-Full">
<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">
<v-text-field
name="title"
label="Title"
color="black"
class="pa-2 Input"
v-model="SelectBox.value"
id="value"
></v-text-field>
<v-btn
absolute
small
right
bottom
color="pink"
@click="RemoveInput('ArraySelectBox', 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-layout>
<!-- SelectBox Section -->
<v-layout
class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
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.title"
></v-text-field>
<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>
absolute
small
right
bottom
color="pink"
v-if="keySelect >= 1"
@click="removeSelectbox(keyForm, keySelect)"
>
<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('ArrayCheckBox', 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>
<v-btn
absolute
small
right
top
color="pink"
@click="Remove(ArrayDivKey)"
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="Duplicator"
id="FormDuplicator"
>
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
ADD</v-btn>
</v-layout>
<v-btn
absolute
right
bottom
small
@click="InputDuplicate('ArrayForm', 0)"
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 row wrap align-center justify-center class="mt-4">
<v-btn class="WM-CyanBlueGradient-BG" v-if="Hidden" style="padding:10px 60px">
<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>
absolute
right
bottom
small
@click="addSelectbox(keyForm)"
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>
<!-- Form Section -->
<v-layout
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="name"
v-model="children.name"
label="Input Name"
color="black"
class="pa-2"
></v-text-field>
</v-flex>
<v-flex xs12 md3 sm3>
<v-select
:items="type"
item-text="state"
item-value="abbr"
label="Type"
v-model="children.type"
single-line
color="black"
class="pa-2"
@change="changeTypeForm(keyForm, children.type, keychildren)"
></v-select>
</v-flex>
<v-flex xs12 md3 sm3>
<v-text-field name="size" v-model="children.size" label="Size" color="black" class="pa-2" ></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="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.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 () {
return {
form : {},
SelectedType : {0 : 0, 1 : {}},
InputDuplicator : {0:0},
ArrayInput : [{value:''}],
ArraySelectBox : [],
ArrayCheckBox : [],
ArrayForm : [],
SelectBox : {},
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' },
]
],
}
data() {
return {
form: {
name: "",
unique_code: "",
info: [
{
name: "",
type: "",
size: ""
}
]
},
type: [
{ state: "Text", abbr: "text" },
{ state: "Checkbox", abbr: "checkbox" },
{ state: "Select", abbr: "select" },
{ state: "Form", abbr: "form" }
]
};
},
methods: {
changeType(infoIndex, selectedboxType) {
if (selectedboxType == "select" || selectedboxType == "checkbox") {
this.form.info[infoIndex]["options"] = [{ title: "" }];
} else {
this.form.info[infoIndex]["options"] = [];
}
if (selectedboxType == "form") {
this.form.info[infoIndex]["children"] = [
{ name: "", type: "", size: "" }
];
}
},
methods: {
Duplicator() {
this.ArrayDiv.push(this.ArrayDiv.length);
},
Remove (index) {
this.ArrayDiv.splice(index, 1);
},
RemoveInput (Type, ArrayDivindex, index) {
if (Type === 'ArraySelectBox') {
this.ArraySelectBox[ArrayDivindex].splice(index, 1);
this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
}
else {
this.ArrayCheckBox[ArrayDivindex].splice(index, 1);
this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
}
},
InputDuplicate (Type, ArrayDivindex) {
if (Type === 'ArraySelectBox') {
if (this.ArraySelectBox[ArrayDivindex] == undefined) {
this.ArraySelectBox[ArrayDivindex] = [];
}
this.ArraySelectBox[ArrayDivindex].push({value : ''});
this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
}
else if(Type === 'ArrayCheckBox'){
if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
this.ArrayCheckBox[ArrayDivindex] = [];
}
this.ArrayCheckBox[ArrayDivindex].push({value : ''});
this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
}
else {
if (this.ArrayForm[ArrayDivindex] == undefined) {
this.ArrayForm[ArrayDivindex] = [];
}
else {
this.ArrayForm[ArrayDivindex].push({value : ''});
this.CreateAgainArray(this.ArrayForm, 'ArrayForm');
}
}
},
CreateAgainArray(arrayDiv, Type) {
let array = arrayDiv;
if (Type === 'ArraySelectBox') {
this.ArraySelectBox = [];
this.ArraySelectBox = array;
}
else if(Type === 'ArrayCheckBox'){
this.ArrayCheckBox = [];
this.ArrayCheckBox = array;
}
else {
this.ArrayForm = [];
this.ArrayForm = array;
}
},
DefaultValue(ArrayDivindex, SelectedType) {
this.Hidden = true;
if (SelectedType == 'select') {
if (this.ArraySelectBox[ArrayDivindex] == undefined) {
this.ArraySelectBox[ArrayDivindex] = [];
this.ArraySelectBox[ArrayDivindex].push({value : ''});
}
} else if(SelectedType == 'checkbox') {
if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
this.ArrayCheckBox[ArrayDivindex] = [];
this.ArrayCheckBox[ArrayDivindex].push({value : ''});
}
}
removeSelectbox(infoIndex, selectboxOptions) {
let form = this.form;
this.form = [];
form.info[infoIndex]["options"].splice(selectboxOptions, 1);
this.form = form;
},
addSelectbox(infoIndex) {
let form = this.form;
this.form = [];
form.info[infoIndex]["options"].push({ title: "" });
this.form = form;
},
addInput() {
this.form.info.push({ name: "", type: "", size: "" });
},
changeTypeForm(infoIndex, type, formLevel) {
if (type == "select" || type == "checkbox") {
let form = this.form;
this.form = "";
form.info[infoIndex]["children"][formLevel]["options"] = [
{ title: "" }
];
this.form = form;
} else {
let form = this.form;
this.form = "";
form.info[infoIndex]["children"][formLevel]["options"] = [];
this.form = form;
}
},
removeSelectboxForm(infoIndex, selectboxOptions, formLevel) {
let form = this.form;
this.form = [];
form.info[infoIndex]["children"][formLevel]["options"].splice(
selectboxOptions,
1
);
this.form = form;
},
addSelectboxForm(infoIndex, formLevel) {
let form = this.form;
this.form = [];
form.info[infoIndex]["children"][formLevel]["options"].push({
title: ""
});
this.form = form;
},
duplicateForm(infoIndex) {
let form = this.form;
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;
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>