student-gr

src/pages/student-grievance.vue

@@ -1,5 +1,96 @@
 <template>
     <div>
-        <div>1</div>
+        <section class="container mx-auto p-4 mb-48">
+            <h1 class="text-center text-4xl py-16 font-semibold text-blue-700">Students Suggestions/Grievance Form</h1>
+            <div class=" bg-blue-100  rounded-3xl">
+                <h1 class="p-2 text-red-800">All fields are Mandatory*</h1>
+                <div v-if="sccQry">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 place-items-center gap-4 lg:gap-32 p-10">
+                        <div class="grid gap-6 w-full">
+                            <input v-model="name" type="text" placeholder="Your Name*" class="input input-bordered input-primary w-full rounded-md" />
+                            <input v-model="phone_number" type="number" placeholder="Phone Number*" class="input input-bordered input-primary w-full rounded-md" />
+                            <input v-model="student_id" type="text" placeholder="Student ID*" class="input input-bordered input-primary w-full rounded-md" />
+                            <input v-model="semester" type="text" placeholder="Semester*" class="input input-bordered input-primary w-full rounded-md" />
+                            <input v-model="department" type="text" placeholder="Department" class="input input-bordered input-primary w-full rounded-md" />
+                        </div>
+                        <div class="grid w-full h-full">
+                            <textarea v-model="message" class="textarea textarea-bordered rounded-md p-4" placeholder="Write your Suggestions/Grievance here........ "></textarea>
+                        </div>
+                    </div>
+                    <div class="flex justify-center pb-8">
+                        <button @click="savesccQry" class="bg-blue-700 p-2 px-8 text-xl text-white rounded-lg">Send Now</button>
+                    </div>
+                </div>
+                <div v-else>Thank You!</div>
+            </div>
+        </section>
     </div>
-</template>
+</template>
+<script>
+export default {
+    setup(){
+    // const route = useRoute();
+    useHead({
+        title: 'Teenybeans Preschool Curriculum - Administrators',
+        meta: [
+            {
+                name: `title`,
+                content: `Complete Preschool Business Solutions for Smart Operation`
+            },
+            {
+                name: `description`,
+                content: `Discover the best preschool solution for managing your preschool and digitizing the teaching process. Contact us for further assistance.`
+            },
+        ],
+    })
+},
+  data() {
+    return {
+      isLoading: true,
+      name:null,
+      phone_number:null,
+      student_id:null,
+      department: null,
+      message: null,
+      sccQry:true,
+      
+    //   contact_form:{}
+    }
+  },
+  mounted: function () {
+    // this.getItemByCategory()
+    // console.log(this.smProducts)
+    // console.log(this.$route.query.cat)
+    // console.log(this.fruits)
+    
+  },
+  methods: {
+    savesccQry() {
+        let formData = new FormData();
+        formData.append('Name', this.name);
+        formData.append('Phone', this.phone_number);
+        formData.append('Student_ID', this.student_id);
+        fromData.append('department', this.department)
+        fromData.append('message', this.message)
+        formData.append('formName', 'scc-Students_Suggestions/Grievance_Form');
+        fetch('https://api8.siliconpin.com/admin/content/scc_grievance_form', 
+            {
+                method: 'POST',
+                // headers: { 
+                // 'Content-Type': 'multipart/form-data',
+                // // 'Authorization': 'Bearer my-token',
+                // // 'My-Custom-Header': 'foobar'
+                // },
+                body: formData,
+            }
+        )
+        .then(response => response.json())
+        .then(data => {
+            // console.log(data)
+        });
+        // formData=""
+        this.sccQry=false
+    },
+  }
+}
+</script>