c

src/components/QuestionIdentifier.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <section class="container-fluid bg-green-600 mb-16">
+            <div class="container mx-auto px-4">
+                <h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
+            </div>
+        </section>
+        <section class="container mx-auto px-4 max-w-2xl">
+            <div class="shadow-lg rounded-xl p-6">
+                <p class="text-center">Add Question Identifier</p>
+                <form @submit.prevent="saveIdentifier()" name="identifierForm">
+                    <div class="flex flex-col">
+                        <label for="identifierName" class="mt-4 ">Identifier Name:</label>
+                        <input v-model="identifierName" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierName" name="identifierName" type="text" placeholder="Identifier Name" required />
+                        <label for="identifierNumber" class="mt-4 ">Identifier Number:</label>
+                        <input v-model="identifierNumber" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierNumber" name="identifierNumber" type="text" min="1" placeholder="Identifier Number"  />
+                        <div><input value="Add" type="submit" class="mt-4 rounded-lg bg-green-500 py-1.5 text-white font-bold px-6 float-right" /></div>
+                    </div>
+                </form>
+            </div>
+        </section>
+        <section class="container mx-auto px-4 mt-6 md:mt-16">
+           <div class="flex justify-center">
+            <table class="border-2">
+                <tr>
+                    <th class="border-2">Sl No.</th>
+                    <th class="border-2">Identifier</th>
+                    <th class="border-2">Number</th>
+                    <th class="border-2">Action</th>
+                </tr>
+                <tr v-for="(items, index) in idfrData" :key="index">
+                    <td class="border-2">{{ index + 1 }}</td>
+                    <td class="border-2">{{ items.identifier_name }}</td>
+                    <td class="border-2">{{ items.identifier_number }}</td>
+                    <td class="border-2 flex flex-row gap-x-2">
+                        <a href="">Edit</a>
+                        <a href="">Delete</a>
+                    </td>
+                </tr>
+            </table>
+           </div> 
+        </section>
+    </div>
+  </template>
+  <script>
+    export default {
+        data(){
+            return{
+                identifierName: "",
+                identifierNumber: "",
+                idfrData: null,
+            };
+        },
+        methods:{
+            saveIdentifier() {
+                fetch('https://api8.siliconpin.com/items/question_identifier', {
+                    method: 'POST',
+                    headers:{
+                        'Content-Type' : 'application/json'
+                    },
+                    body: JSON.stringify({
+                        status: 'published',
+                        identifier_name: this.identifierName,
+                        identifier_number: this.identifierNumber,
+                    })
+                })
+                .then(response => {
+                    if(response.ok){
+                        return response.json();
+                        console.log(response)
+                    }
+                    return Promise.reject(response)
+                })
+                .then(json => {
+
+                })
+                .catch((response) => {
+                    console.log(response.status, response.statusText);
+                    response.json().then((json) => {
+                        console.log(json.errors[0].message);
+                    })
+                })
+            }
+
+        },
+        mounted(){
+            fetch('https://api8.siliconpin.com/items/question_identifier')
+            .then(response => response.json())
+            .then(data => {
+                this.idfrData = data.data;
+                console.log(this.idfrData)
+            })
+            .catch(error => {
+                console.error("Something Wrong", error)
+            })
+        }
+    }
+  </script>