You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<template>
|
|
<h1 class="text-2xl font-bold uppercase mb-10">events management</h1>
|
|
<div class="grid grid-cols-2 gap-x-8">
|
|
<table class="table-auto">
|
|
<thead>
|
|
<tr>
|
|
<th class="border border-gray-400 text-left px-8 py-4">ID</th>
|
|
<th class="border border-gray-400 text-left px-8 py-4">Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.events" :key="e._id">
|
|
<td class="border border-gray-400 text-left px-8 py-4">{{ e._id }}</td>
|
|
<td class="border border-gray-400 text-left px-8 py-4">{{ e.name }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div>
|
|
<h2 class="text-lg font-bold">Create / Update</h2>
|
|
<form name="form" @submit.prevent="form">
|
|
<p class="mt-4">Event name</p>
|
|
<input v-model="name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
|
|
<button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
|
|
<button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { inject, ref } from 'vue'
|
|
import { create, update, del } from '../utils/websocket'
|
|
|
|
export default {
|
|
setup() {
|
|
const store = inject('store')
|
|
|
|
const item = ref('')
|
|
const name = ref('')
|
|
|
|
const setItem = (e) => {
|
|
item.value = e._id
|
|
name.value = e.name
|
|
}
|
|
|
|
const reset = () => {
|
|
item.value = ''
|
|
name.value = ''
|
|
}
|
|
|
|
const form = () => {
|
|
if (item.value !== '') {
|
|
update('events', item.value, {
|
|
name: name.value,
|
|
})
|
|
} else if (name.value !== '') {
|
|
create('events', {
|
|
name: name.value,
|
|
})
|
|
}
|
|
reset()
|
|
}
|
|
|
|
const delForm = () => {
|
|
if (item.value) {
|
|
del('events', item.value)
|
|
reset()
|
|
}
|
|
}
|
|
|
|
return {
|
|
store,
|
|
item,
|
|
name,
|
|
setItem,
|
|
form,
|
|
delForm,
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.item:hover {
|
|
@apply bg-gray-300 cursor-pointer;
|
|
}
|
|
.item.active {
|
|
@apply bg-gray-400;
|
|
}
|
|
</style>
|