print and new types and multi image

This commit is contained in:
saeid
2019-07-15 11:30:02 +04:30
parent a8bc46151e
commit d3735c6d30
11 changed files with 67836 additions and 434 deletions
@@ -165,9 +165,9 @@ class TestResultController extends Controller
public function show($id)
{
$TestResult = TestResult::with('input_values', 'user')->select('result', 'verified', 'autoclave_id','user_id','id')->findOrFail($id);
$TestResult = TestResult::with('input_values', 'user.medical_center')->select('result', 'verified', 'autoclave_id','user_id','id', 'created_at')->findOrFail($id);
$options = [];
foreach ($TestResult->input_values as $key => $value) {
foreach ($TestResult->input_values as $value) {
$input = $value->input;
if ($input->parent_id != null && $input->parent['type'] == 'Form') {
+1
View File
@@ -13,6 +13,7 @@
"laravel/framework": "5.8.*",
"laravel/passport": "^7.2",
"laravel/tinker": "^1.0",
"milon/barcode": "^5.3",
"spatie/laravel-permission": "^2.36"
},
"require-dev": {
Generated
+50 -1
View File
@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "181bdb262cee4face3bcdcaea8f1a4cf",
"content-hash": "282319c473e3a4fae1950c36e3c9832a",
"packages": [
{
"name": "defuse/php-encryption",
@@ -1300,6 +1300,55 @@
],
"time": "2019-03-29T18:19:35+00:00"
},
{
"name": "milon/barcode",
"version": "5.3.6",
"source": {
"type": "git",
"url": "https://github.com/milon/barcode.git",
"reference": "ca2f3efbf46142ff7f7afe3b0f3660ea4a067576"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/milon/barcode/zipball/ca2f3efbf46142ff7f7afe3b0f3660ea4a067576",
"reference": "ca2f3efbf46142ff7f7afe3b0f3660ea4a067576",
"shasum": ""
},
"require": {
"illuminate/support": "5.*",
"php": ">=5.6.0"
},
"type": "library",
"autoload": {
"psr-0": {
"Milon\\Barcode": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"LGPL-3.0"
],
"authors": [
{
"name": "Nuruzzaman Milon",
"email": "contact@milon.im"
}
],
"description": "Barcode generator like Qr Code , PDF417,C39, C39+,C39E,C39E+,C93,S25,S25+,I25,I25+,C128,C128A,C128B,C128C,2-Digits UPC-Based Extention,5-Digits UPC-Based Extention,EAN 8,EAN 13,UPC-A,UPC-E,MSI (Variation of Plessey code) ",
"keywords": [
"CODABAR",
"CODE 128",
"CODE 39",
"barcode",
"datamatrix",
"ean",
"laravel",
"pdf417",
"qr code",
"qrcode"
],
"time": "2017-07-28T00:33:38+00:00"
},
{
"name": "monolog/monolog",
"version": "1.24.0",
+5
View File
@@ -14869,6 +14869,11 @@
"integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
"dev": true
},
"vue-html-to-paper": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/vue-html-to-paper/-/vue-html-to-paper-1.1.0.tgz",
"integrity": "sha512-ywxYfSg1y3Sv50POhfYPSv9ls0z4lrV/AuliJ2XmTguJvf7RAQTGnDHxfODK74Qj2gHsKgXqPvn5NtZ2Lti+uQ=="
},
"vue-i18n": {
"version": "7.8.1",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-7.8.1.tgz",
+1
View File
@@ -64,6 +64,7 @@
"vuex-router-sync": "^5.0.0"
},
"dependencies": {
"vue-html-to-paper": "^1.1.0",
"vuetify-upload-component": "^1.0.6"
}
}
+67120 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -33,7 +33,7 @@
export default {
data: () => ({
links: [
{ name: 'Powered By WillaMall', Link: 'https://www.willamall.com' },
// { name: 'Powered By WillaMall', Link: 'https://www.willamall.com' },
// { name: 'Home', Link: '/dashboard' },
// { name: 'Creative Tim', Link: 'https://www.creative-tim.com' },
// { name: 'About Us', Link: 'https://creative-tim.com/presentation' },
@@ -1,37 +1,67 @@
<template>
<v-container grid-list-xs>
<material-card color="black" title="Submit Test Result">
<material-card color="black" title="Submit Test Result" id="printMe">
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Common Info</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
<hr class="v-divider theme--light" />
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Auto Clave Id :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.autoclave_id }}</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{ data.autoclave_id }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Result :</span>
<v-icon class="green--text ml-2 caption">fas fa-check</v-icon>
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.result }}</span>
<span
class="headline ml-1"
style="letter-spacing:0 !important"
>{{ data.result }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">verify :</span>
<v-icon class="pink--text ml-2 caption">fas fa-times</v-icon>
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.verified }}</span>
<span
class="headline ml-1"
style="letter-spacing:0 !important"
>{{ data.verified }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Register User :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user.name }}</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{ data.user.name }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Date :</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{ data.created_at }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Medical Center :</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{ data.user.medical_center.name }}</span>
</div>
</v-flex>
</v-layout>
@@ -39,7 +69,7 @@
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Special Info</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
<hr class="v-divider theme--light" />
</v-flex>
<v-layout row wrap>
<template v-if="data.inputs">
@@ -51,7 +81,10 @@
:key="keyInputs"
>
<span class="title">{{keyInputs}} :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{inputData}}</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{inputData}}</span>
</v-flex>
</template>
<template v-if="data.options">
@@ -103,14 +136,16 @@
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
<hr class="v-divider theme--light" />
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<img :src="'/'+data.imagePath" style="width: 100%">
<img :src="'/'+data.imagePath" style="width: 100%" />
</v-flex>
</v-layout>
</v-layout>
</material-card>
<material-card>
<v-layout row wrap align-center justify-center v-if="$hasRole('Admin|Supervisor')">
<v-flex
class
@@ -134,6 +169,15 @@
<span class="black--text">UnVerify</span>
</v-btn>
</v-flex>
<v-flex class xs12 md2 sm2>
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
@click="print"
>
<v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
<span class="black--text">Print</span>
</v-btn>
</v-flex>
</v-layout>
</material-card>
</v-container>
@@ -159,6 +203,39 @@ export default {
this.setResultModal(result.data.data);
this.closeModal();
}
},
print() {
const prtHtml = document.getElementById("printMe").innerHTML;
// Get all stylesheets HTML
let stylesHtml = "";
for (const node of [
...document.querySelectorAll('link[rel="stylesheet"], style')
]) {
stylesHtml += node.outerHTML;
}
// Open the print window
const WinPrint = window.open(
"",
"",
"left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
);
WinPrint.document.write(`<!DOCTYPE html>
<html>
<head>
${stylesHtml}
</head>
<body>
${prtHtml}
</body>
</html>`);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
},
created() {
+44 -2
View File
@@ -52,18 +52,27 @@
class="pa-2"
></v-text-field>
</v-flex>
<v-flex xs12 sm4 md4>
<v-text-field
:items="result"
v-model="formData.cycle_number "
label="Cycle Number"
color="black"
class="pa-2"
></v-text-field>
</v-flex>
<v-flex xs12 sm4 md4>
<v-select
:items="result"
v-model="formData.result"
label="Resualt"
label="Result"
color="black"
class="pa-2"
></v-select>
</v-flex>
<v-flex xs12 sm4 md4>
<div v-if="!image">
<input type="file" class="inputfile" @change="onFileChange">
<input type="file" class="inputfile" @change="onFileChange" multiple>
<label for="file"><v-icon class="v-icon greylighten-3--text mr-2 caption IconHover">fas fa-chevron-right</v-icon>Choose a file</label>
</div>
<div v-else>
@@ -98,6 +107,38 @@
:value="optionValue.id"
></v-checkbox>
</v-container>
<v-container fluid v-if="item.type == 'Radiobutton'">
<p>{{ item.name }}</p>
<v-radio-group v-model="formData[item.name+'_'+item.id]">
<v-radio
v-for="(optionValue, keyOption) in item.options"
:key="keyOption"
:label="optionValue.title"
:value="optionValue.id"
></v-radio>
</v-radio-group>
</v-container>
<v-container fluid v-if="item.type == 'Switch'">
<v-switch
v-model="formData[item.name+'_'+item.id]"
:label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
></v-switch>
</v-container>
<v-container fluid v-if="item.type == 'Range'">
<v-flex xs12>
<v-slider
v-model="formData[item.name+'_'+item.id]"
:min="item.options[0].id"
:max="item.options[1].id"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
<v-container fluid v-if="item.type == 'Time'">
<v-flex xs12>
<v-time-picker v-model="formData[item.name+'_'+item.id]"></v-time-picker>
</v-flex>
</v-container>
<template v-if="item.type == 'Form'">
<v-container row md-12 sm-12 xs-12>
<v-layout row wrap>
@@ -177,6 +218,7 @@ export default {
formData : {
autoclave_id: "",
result: "",
cycle_number: "",
img: null,
test_type_id: "",
},
+14 -1
View File
@@ -74,7 +74,7 @@
<v-text-field
required
slot="activator"
label="FromDate"
label="UpToDate"
v-model="filter.upToPicker"
></v-text-field>
<v-date-picker
@@ -128,6 +128,10 @@
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span>
</v-btn>
<v-btn color="orange" class="mr-2" @click="generateBarcode(item.id)">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
<span>generate Barcode</span>
</v-btn>
<router-link
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
:to="{name: 'EditTestResult', params: {testResult: item.id}}"
@@ -295,6 +299,15 @@ export default {
this.medicalCenters = result.data.data.MedicalCenters;
this.testTypes = result.data.data.TestTypes;
}
},
async generateBarcode(id) {
const result = await ApiService.post(urls.Barcode(`Cssd-100 ${id}`));
if (result && result.status == 200) {
this.changeCurrentModal({
modal: "modal-barcode-barcode",
properties: { result }
});
}
}
},
computed: {
+511 -416
View File
@@ -1,441 +1,536 @@
<template>
<v-form ref="form">
<v-container grid-list-xs>
<material-card color="black" title="Add a New Test" class>
<v-layout row wrap class="ma-2">
<v-flex xs12 md3 sm3>
<v-text-field
name="name"
v-model="form.name"
label="Name"
color="black"
class="pa-2"
:rules="[rules.required]"
></v-text-field>
</v-flex>
<v-flex xs12 md3 sm3>
<v-text-field
:rules="[rules.required]"
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 class="ma-2">
<v-flex xs12 md3 sm3>
<v-text-field
name="inputname"
v-model="info.name"
label="Input Name"
color="black"
class="pa-2"
:rules="[rules.required]"
></v-text-field>
</v-flex>
<v-flex xs12 md3 sm3>
<v-select
:items="type"
item-text="state"
item-value="abbr"
label="Type"
v-bind="info.id !== 0 ? {disabled: true} : {disabled: false}"
v-model="info.type"
single-line
color="black"
class="pa-2"
@change="changeType(keyForm, info.type)"
></v-select>
</v-flex>
<!-- Text Input Section -->
<v-flex xs12 md3 sm3>
<v-select
:items="size"
item-text="state"
item-value="abbr"
label="Size"
v-model="info.size"
v-if="info.type !== 'Form'"
single-line
color="black"
class="pa-2"
></v-select>
</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="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
:rules="[rules.required]"
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"
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="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
:rules="[rules.required]"
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"
v-bind="children.id !== 0 ? {disabled: true} : {disabled: false}"
single-line
color="black"
class="pa-2"
@change="changeTypeForm(keyForm, children.type, keychildren)"
></v-select>
</v-flex>
<v-flex xs12 md3 sm3>
<v-select
:items="size"
item-text="state"
item-value="abbr"
label="Size"
v-if="children.type !== 'Form'"
v-model="children.size"
single-line
color="black"
class="pa-2"
></v-select>
</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"
:rules="[rules.required]"
></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-form ref="form">
<v-container grid-list-xs>
<material-card color="black" title="Add a New Test" class>
<v-layout row wrap class="ma-2">
<v-flex xs12 md3 sm3>
<v-text-field
name="name"
v-model="form.name"
label="Name"
color="black"
class="pa-2"
:rules="[rules.required]"
></v-text-field>
</v-flex>
<v-flex xs12 md3 sm3>
<v-text-field
:rules="[rules.required]"
name="uniquecode"
v-model="form.unique_code"
label="Unique Code"
color="black"
class="pa-2"
></v-text-field>
</v-flex>
</v-layout>
<v-btn
absolute
right
bottom
small
@click="addSelectboxForm(keyForm, keychildren)"
color="black"
<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-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)"
>
<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)">
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
</v-btn>
</v-layout>
<v-btn v-if="keyForm > 0" absolute small right top color="pink" @click="removeInput(keyForm)">
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
</v-btn>
<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 class="ma-2">
<v-flex xs12 md3 sm3>
<v-text-field
name="inputname"
v-model="info.name"
label="Input Name"
color="black"
class="pa-2"
:rules="[rules.required]"
></v-text-field>
</v-flex>
<v-flex xs12 md3 sm3>
<v-select
:items="type"
item-text="state"
item-value="abbr"
label="Type"
v-bind="info.id !== 0 ? {disabled: true} : {disabled: false}"
v-model="info.type"
single-line
color="black"
class="pa-2"
@change="changeType(keyForm, info.type)"
></v-select>
</v-flex>
<!-- Text Input Section -->
<v-flex xs12 md3 sm3>
<v-select
:items="size"
item-text="state"
item-value="abbr"
label="Size"
v-model="info.size"
v-if="info.type !== 'Form'"
single-line
color="black"
class="pa-2"
></v-select>
</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="info.type === 'Select' || info.type === 'Checkbox' || info.type === 'Radiobutton'"
>
<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
:rules="[rules.required]"
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"
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="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>
<v-layout
class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
row
wrap
v-if="info.type === 'Range'"
>
<v-layout
row
wrap
class="WM-Relative WM-Width-Full"
v-if="info['options'].length > 0"
>
<v-flex
xs12
md3
sm3
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
>
<v-text-field
:rules="[rules.required]"
name="from"
label="From"
color="black"
class="pa-2 Input"
v-model="info['options'][0].title"
></v-text-field>
</v-flex>
<v-flex
xs12
md3
sm3
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
>
<v-text-field
:rules="[rules.required]"
name="to"
label="To"
color="black"
class="pa-2 Input"
v-model="info['options'][1].title"
></v-text-field>
</v-flex>
</v-layout>
</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
:rules="[rules.required]"
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"
v-bind="children.id !== 0 ? {disabled: true} : {disabled: false}"
single-line
color="black"
class="pa-2"
@change="changeTypeForm(keyForm, children.type, keychildren)"
></v-select>
</v-flex>
<v-flex xs12 md3 sm3>
<v-select
:items="size"
item-text="state"
item-value="abbr"
label="Size"
v-if="children.type !== 'Form'"
v-model="children.size"
single-line
color="black"
class="pa-2"
></v-select>
</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' || children.type === 'Radiobutton'"
>
<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"
:rules="[rules.required]"
></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)"
>
<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)"
>
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
</v-btn>
</v-layout>
<v-btn
v-if="keyForm > 0 || form.info.length > 1"
absolute
small
right
top
color="pink"
@click="removeInput(keyForm)"
>
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
</v-btn>
<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>
<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";
import { urls } from "@/config/urls";
export default {
data() {
return {
form: {
name: "",
unique_code: "",
info: [
{
id: 0,
name: "",
type: "",
size: ""
}
]
},
type: [
{ state: "Text", abbr: "Text" },
{ state: "Checkbox", abbr: "Checkbox" },
{ state: "Select", abbr: "Select" },
{ state: "Form", abbr: "Form" }
],
size: [
{ state: "not Selected", abbr: "" },
{ state: "2 as 12", abbr: "md2 xs12" },
{ state: "3 as 12", abbr: "md3 xs12" },
{ state: "4 as 12", abbr: "md4 xs12" },
{ state: "6 as 12", abbr: "md6 xs12" },
{ state: "8 as 12", abbr: "md8 xs12" },
{ state: "10 as 12", abbr: "md10 xs12" },
{ state: "10 as 12", abbr: "md12 xs12" },
],
rules: {
required: value => !!value || "Required."
},
};
},
created() {
if (this.$route.params.testType) {
this.load(this.$route.params.testType);
}
},
methods: {
changeType(infoIndex, selectedboxType) {
if (selectedboxType == "Select" || selectedboxType == "Checkbox") {
this.form.info[infoIndex]["options"] = [{ id: 0, title: "" }];
} else {
this.form.info[infoIndex]["options"] = [];
}
if (selectedboxType == "Form") {
this.form.info[infoIndex]["children"] = [
{ id: 0, name: "", type: "", size: "" }
];
}
data() {
return {
form: {
name: "",
unique_code: "",
info: [
{
id: 0,
name: "",
type: "",
size: ""
}
]
},
type: [
{ state: "Text", abbr: "Text" },
{ state: "Checkbox", abbr: "Checkbox" },
{ state: "Select", abbr: "Select" },
{ state: "Radiobutton", abbr: "Radiobutton" },
{ state: "Switch", abbr: "Switch" },
{ state: "Range", abbr: "Range" },
{ state: "Time", abbr: "Time" },
{ state: "Form", abbr: "Form" }
],
size: [
{ state: "not Selected", abbr: "" },
{ state: "2 as 12", abbr: "md2 xs12" },
{ state: "3 as 12", abbr: "md3 xs12" },
{ state: "4 as 12", abbr: "md4 xs12" },
{ state: "6 as 12", abbr: "md6 xs12" },
{ state: "8 as 12", abbr: "md8 xs12" },
{ state: "10 as 12", abbr: "md10 xs12" },
{ state: "10 as 12", abbr: "md12 xs12" }
],
rules: {
required: value => !!value || "Required."
}
};
},
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({ id: 0, title: "" });
this.form = form;
},
addInput() {
this.form.info.push({ id: 0, name: "", type: "", size: "" });
},
changeTypeForm(infoIndex, type, formLevel) {
if (type == "Select" || type == "Checkbox") {
let form = this.form;
this.form = "";
form.info[infoIndex]["children"][formLevel]["options"] = [
{ id: 0, 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({
id: 0,
title: ""
});
this.form = form;
},
duplicateForm(infoIndex) {
let form = this.form;
this.form = [];
form.info[infoIndex]["children"].push({
id: 0,
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;
},
removeInput(infoIndex) {
let form = this.form;
this.form = [];
form.info.splice(infoIndex, 1);
this.form = form;
},
async registerForm() {
if (this.$refs.form.validate()) {
let result = null;
created() {
if (this.$route.params.testType) {
result = await ApiService.put(urls.updateTestType(this.$route.params.testType), this.form);
} else {
result = await ApiService.post(urls.storeTestType, this.form);
this.load(this.$route.params.testType);
}
if (result && result.status == 200) {
this.$router.push({ name: `Dashboard` });
},
methods: {
changeType(infoIndex, selectedboxType) {
if (selectedboxType == "Select" || selectedboxType == "Checkbox" || selectedboxType == "Radiobutton") {
this.form.info[infoIndex]["options"] = [{ id: 0, title: "" }];
} else if(selectedboxType == "Range") {
this.form.info[infoIndex]["options"] = [{ id: 0, from: "", to: "" }];
} else {
this.form.info[infoIndex]["options"] = [];
}
if (selectedboxType == "Form") {
this.form.info[infoIndex]["children"] = [
{ id: 0, name: "", type: "", size: "" }
];
}
},
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({ id: 0, title: "" });
this.form = form;
},
addInput() {
this.form.info.push({ id: 0, name: "", type: "", size: "" });
},
changeTypeForm(infoIndex, type, formLevel) {
if (type == "Select" || type == "Checkbox" || type == "Radiobutton") {
let form = this.form;
this.form = "";
form.info[infoIndex]["children"][formLevel]["options"] = [
{ id: 0, title: "" }
];
this.form = form;
} else if(type == "Rang") {
let form = this.form;
this.form = "";
form.info[infoIndex]["children"][formLevel]["options"] = [
{ id: 0, from: "", to: "" }
];
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({
id: 0,
title: ""
});
this.form = form;
},
duplicateForm(infoIndex) {
let form = this.form;
this.form = [];
form.info[infoIndex]["children"].push({
id: 0,
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;
},
removeInput(infoIndex) {
let form = this.form;
this.form = [];
form.info.splice(infoIndex, 1);
this.form = form;
},
async registerForm() {
if (this.$refs.form.validate()) {
let result = null;
if (this.$route.params.testType) {
result = await ApiService.put(
urls.updateTestType(this.$route.params.testType),
this.form
);
} else {
result = await ApiService.post(
urls.storeTestType,
this.form
);
}
if (result && result.status == 200) {
this.$router.push({ name: `Dashboard` });
}
}
},
async load(id) {
const result = await ApiService.get(urls.editTestType(id));
if (result.status == 200) {
this.form = result.data.data;
}
}
}
},
async load(id) {
const result = await ApiService.get(urls.editTestType(id));
if (result.status == 200) {
this.form = result.data.data;
}
},
}
}
};
</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>