crator and messageResponse

2026-10-13 20:31:06 +03:30 · 2019-04-24 21:20:12 +04:30
parent df660dd7d4
commit fc162db99b
29 changed files with 460 additions and 817 deletions
@@ -2,12 +2,20 @@
  <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-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"></v-text-field>
+            <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"
@@ -23,9 +31,16 @@
          :key="keyForm"
          v-for="(info, keyForm) in form.info"
        >
-          <v-layout row wrap id="Form" class="ma-2">
+          <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"></v-text-field>
+              <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
@@ -42,13 +57,16 @@
            </v-flex>
            <!-- Text Input Section -->
            <v-flex xs12 md3 sm3>
-              <v-text-field
-                name="size"
-                label="Size"
+              <v-select
+                :items="size"
+                item-text="state"
+                item-value="abbr"
+                label="Type"
                v-model="info.size"
+                single-line
                color="black"
                class="pa-2"
-              ></v-text-field>
+              ></v-select>
            </v-flex>
          </v-layout>
          <!-- SelectBox Section -->
@@ -56,7 +74,7 @@
            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-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
@@ -68,6 +86,7 @@
                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"
@@ -104,7 +123,7 @@
          <v-layout
            row
            wrap
-            v-if="info.type === 'form'"
+            v-if="info.type === 'Form'"
            class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative"
          >
            <v-layout
@@ -116,6 +135,7 @@
            >
              <v-flex xs12 md3 sm3>
                <v-text-field
+                  :rules="[rules.required]"
                  name="name"
                  v-model="children.name"
                  label="Input Name"
@@ -137,14 +157,23 @@
                ></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-select
+                  :items="size"
+                  item-text="state"
+                  item-value="abbr"
+                  label="Type"
+                  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-if="children.type === 'Select' || children.type === 'Checkbox'"
              >
                <v-layout
                  row
@@ -166,6 +195,7 @@
                      color="black"
                      class="pa-2 Input"
                      v-model="selectbox.title"
+                      :rules="[rules.required]"
                    ></v-text-field>
                    <v-btn
                      absolute
@@ -199,24 +229,17 @@
                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-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
@@ -258,6 +281,7 @@ export default {
        unique_code: "",
        info: [
          {
+            id: 0,
            name: "",
            type: "",
            size: ""
@@ -265,23 +289,35 @@ export default {
        ]
      },
      type: [
-        { 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" },
+        { state: "Form", abbr: "Form" }
+      ],
+      size: [
+        { state: "not Selected", abbr: "" },
+        { state: "2 as 12", abbr: "col-md-2" },
+        { state: "3 as 12", abbr: "col-md-3" },
+        { state: "4 as 12", abbr: "col-md-4" },
+        { state: "6 as 12", abbr: "col-md-6" },
+        { state: "8 as 12", abbr: "col-md-8" },
+        { state: "10 as 12", abbr: "col-md-10" }
+      ],
+      rules: {
+        required: value => !!value || "Required."
+      }
    };
  },
  methods: {
    changeType(infoIndex, selectedboxType) {
-      if (selectedboxType == "select" || selectedboxType == "checkbox") {
+      if (selectedboxType == "Select" || selectedboxType == "Checkbox") {
        this.form.info[infoIndex]["options"] = [{ title: "" }];
      } else {
        this.form.info[infoIndex]["options"] = [];
      }
-      if (selectedboxType == "form") {
+      if (selectedboxType == "Form") {
        this.form.info[infoIndex]["children"] = [
-          { name: "", type: "", size: "" }
+          { id: 0, name: "", type: "", size: "" }
        ];
      }
    },
@@ -298,10 +334,10 @@ export default {
      this.form = form;
    },
    addInput() {
-      this.form.info.push({ name: "", type: "", size: "" });
+      this.form.info.push({ id: 0, name: "", type: "", size: "" });
    },
    changeTypeForm(infoIndex, type, formLevel) {
-      if (type == "select" || type == "checkbox") {
+      if (type == "Select" || type == "Checkbox") {
        let form = this.form;
        this.form = "";
        form.info[infoIndex]["children"][formLevel]["options"] = [
@@ -335,7 +371,12 @@ export default {
    duplicateForm(infoIndex) {
      let form = this.form;
      this.form = [];
-      form.info[infoIndex]["children"].push({ name: "", type: "", size: "" });
+      form.info[infoIndex]["children"].push({
+        id: 0,
+        name: "",
+        type: "",
+        size: ""
+      });
      this.form = form;
    },
    removeForm(infoIndex, formLevel) {
@@ -344,15 +385,20 @@ export default {
      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()) {
        const result = await ApiService.post("TestTypes", this.form);
        if (result && result.status == 200) {
-          this.$router.push("/dashboard");
+          this.$router.push({ name: `Dashboard` });
        }
      }
    }
-
  }
 };
 </script>