mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-12 06:31:06 +03:30
create Test Creator
This commit is contained in:
saeid
Vendored
-33
@@ -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'
|
||||
});
|
||||
Vendored
-56
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user