98 lines
4.1 KiB
Vue
98 lines
4.1 KiB
Vue
<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> |