cssd-back/resources/js/vue/views/TestCreator.vue

<template>
  <v-form id="ParentForm">
    <v-container grid-list-xs>
      <material-card
        color="black"
        title="Add a New Test"
        class="">
        <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="name"
                label="Name"
                color="black"
                class="pa-2"
                id="name"
              ></v-text-field>
            </v-flex>
            <v-flex xs12 md3 sm3>
              <v-select
                :items="Items[0]"
                item-text="state"
                item-value="abbr"
                label="Type"
                v-model="SelectedType[0]"
                single-line
                color="black"
                class="pa-2"
                @change="DefaultValue(0, SelectedType[0])"
              ></v-select>
            </v-flex>
            <!-- Text Input Section -->
            <v-flex xs12 md3 sm3 v-if="SelectedType[0] === 'text'">
              <v-text-field
                name="size"
                label="Size"
                color="black"
                class="pa-2"
                id="InputSize"
              ></v-text-field>
            </v-flex>
          </v-layout>
          <!-- SelectBox Section -->
          <v-layout class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" row wrap v-if="SelectedType[0] === 'select'">
            <v-layout row wrap class="WM-Relative WM-Width-Full">
              <v-flex xs12 md3 sm3 v-for="(SelectBox , Key) in ArraySelectBox[0]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
                <v-text-field
                  name="title"
                  label="Title"
                  color="black"
                  class="pa-2 Input"
                  v-model="SelectBox.value"
                ></v-text-field>
                <v-btn
                  absolute
                  small
                  right
                  bottom
                  color="pink"
                  v-if="Key >= 1"
                  @click="RemoveInput('ArraySelectBox', 0, Key)"
                  >
                  <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                REMOVE</v-btn>
              </v-flex>
            </v-layout>
            <v-btn
              absolute
              right
              bottom
              small
              @click="InputDuplicate('ArraySelectBox', 0)"
              color="black"
              class="mb-2">
              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
              <span class="white--text">Add</span>
            </v-btn>
          </v-layout>
          <!-- Checkbox Section -->
          <v-layout row wrap class="pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[0] === 'checkbox'">
            <v-layout row wrap class="WM-Width-Full WM-Relative">
              <v-flex xs12 sm3 md3 v-for="(Checkbox , Key) in ArrayCheckBox[0]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
                <v-text-field
                  name="title"
                  label="Title"
                  color="black"
                  class="pa-2 Input"
                  v-model="Checkbox.value"
                ></v-text-field>
                <v-btn
                  absolute
                  small
                  right
                  bottom
                  @click="RemoveInput('ArrayCheckBox', 0, Key)"
                  v-if="Key >= 1"
                  color="pink">
                  <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                  <span class="white--text">REMOVE</span>
                </v-btn>
              </v-flex>
            </v-layout>
            <v-btn
              absolute
              small
              right
              bottom
              @click="InputDuplicate('ArrayCheckBox', 0)"
              class="mb-2"
              color="black">
            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
            <span class="white--text">Add</span>
            </v-btn>
          </v-layout>
          <!-- Form Section -->
          <v-layout row wrap v-if="SelectedType[0] === 'form'" class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative">
            <v-layout row wrap v-for="(Div , ArrayDivKey) in ArrayDiv" :key="ArrayDivKey" class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form">
              <v-flex xs12 md3 sm3>
                <v-text-field
                  class="pa-2"
                  name="name"
                  label="Name"
                  id=""
                ></v-text-field>
              </v-flex>
              <v-flex xs12 md3 sm3>
                <v-select
                :items="Items[1]"
                item-text="state"
                item-value="abbr"
                label="Type"
                v-model="SelectedType[1][ArrayDivKey]"
                single-line
                color="black"
                class="pa-2"
                @change="DefaultValue(ArrayDivKey, SelectedType[1][ArrayDivKey])"
                ></v-select>
              </v-flex>
              <v-flex xs12 md3 sm3 v-if="SelectedType[1][ArrayDivKey] === 'text'">
                <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 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-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
                  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>
</template>
<script>
export default {
  name: "",
  data () {
    return {
      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' },
        ]
      ],
    }
  },
  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 : ''});
        }
      }
    }

  }
}
</script>
<style lang="css" scoped>
.WM-Border-Gray {
  border-color: #aaa !important;
}
.WM-Color-LightGrey {
  background-color : #F5F5F5;
}
.v-btn--top.v-btn--absolute.v-btn--small {
    top: -25px !important;
}
.v-btn--bottom.v-btn--absolute.v-btn--small {
    bottom: -24px !important;
}
</style>