apl-slapdash/src/components/Rosters.vue

<template>
<h1 class="text-2xl font-bold uppercase mb-10">rosters 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">Name</th>
        <th class="border border-gray-400 text-left px-8 py-4">Logo</th>
        <th class="border border-gray-400 text-left px-8 py-4">Players</th>
      </tr>
    </thead>
    <tbody>
      <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.rosters" :key="e._id">
        <td class="border border-gray-400 text-left px-8 py-4">{{ e.name }}</td>
        <td class="border border-gray-400 text-left px-8 py-4"><img class="w-12 h-12" :src="e.logo" :alt="e.name"></td>
        <td class="border border-gray-400 text-left px-8 py-4">
          <table v-if="e.players">
            <tbody>
              <tr v-for="p in e.players" :key="p._id">
                <td>{{ p.name }}: {{ p.account }}</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <h2 class="text-lg font-bold">Create / Update</h2>
    <form name="form" @submit.prevent="form">
      <p class="mt-4">Roster 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 />
      <p class="mt-4">Roster logo</p>
      <input v-model="logo" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
      <fieldset v-for="(n, i) in playersLocal.length" :key="i" class="border border-gray-400 rounded px-6 my-4">
        <legend>Player Info</legend>
        <p class="mt-4">Player name</p>
        <input v-model="playersLocal[n - 1].name" @change="logThis" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
        <p class="mt-4">Player account name</p>
        <input v-model="playersLocal[n - 1].account" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
      </fieldset>
      <button @click.prevent="addPlayer()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add player</button>
      <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, toRaw } from 'vue'
import { create, update, del } from '../utils/websocket'

export default {
  setup() {
    const store = inject('store')

    const item = ref('')
    const name = ref('')
    const logo = ref('')
    const playersLocal = ref([])

    console.log(playersLocal)

    const setItem = (e) => {
      item.value = e._id
      name.value = e.name
      logo.value = e.logo
      e.players.forEach(p => {
        if (playersLocal.value.length !== e.players.length) {
          playersLocal.value.push({
            _id: p._id,
            name: p.name,
            account: p.account,
          })
        }
      })
    }
    
    const addPlayer = () => {
      playersLocal.value.push({
        name: '',
        account: '', 
      })
    }

    const logThis = () => {
      console.log(store.state.rosters)
    }

    const reset = () => {
      item.value = ''
      name.value = ''
      logo.value = ''
      playersLocal.value = []
    }

    const form = () => {
      if (item.value !== '') {
        update('rosters', item.value, {
          name: name.value,
          logo: logo.value,
          players: playersLocal.value,
        })
      } else if (name.value !== '') {
        create('rosters', {
          name: name.value,
          logo: logo.value,
          players: playersLocal.value,
        })
      }
      reset()
    }
    
    const delForm = () => {
      if (item.value) {
        del('rosters', item.value)
        reset()
      }
    }

    return {
      store,
      item,
      name,
      logo,
      playersLocal,
      setItem,
      form,
      delForm,
      addPlayer,
      logThis,
    }
  },
}
</script>

<style>
.item:hover {
  @apply bg-gray-300 cursor-pointer;
}
.item.active {
  @apply bg-gray-400;
}
</style>