Polarcraft/web/pages/player-store.vue

<template>
  <div class="mt-5 text-primary">
    <Modal
      v-if="storeModal.open"
      title="Create new store"
      :delete="!storeModal.new"
      @submit="submitModal"
      @delete="deleteStore"
      @close="storeModal.open = false"
    >
      <Input v-model="storeModal.name" background-class="bg-neutral-800">Store name</Input> 
      <div class="flex gap-x-5">
        <Input v-model="storeModal.coords.x" background-class="bg-neutral-800">Coordinate X</Input> 
        <Input v-model="storeModal.coords.z" background-class="bg-neutral-800">Coordinate Z</Input> 
      </div>
      <h2 class="font-bold">Items</h2>
      <div class="max-h-56 space-y-3 overflow-scroll">
        <div v-for="item, index in storeModal.items" :key="item.name" class="flex gap-2">
          <Input v-model="item.displayName" background-class="bg-neutral-800">Name</Input>
          <Input v-model="item.price" background-class="bg-neutral-800">Price per quantity</Input>
          <Button type="danger" @click="storeModal.items.splice(index, 1)"><Icon size="1.5em" name="ph:trash" class="-my-2" /></Button>
        </div>
      </div>
      <Button class="" @click="storeModal.items.push({ displayName: '', price: '' })">Add Item</Button>
    </Modal>
    <h1 class="pb-10 text-2xl font-bold text-primary">
      Player Stores
    </h1>
    <div class="fixed bottom-10 right-10">
      <Button class="fixed" @click="openStoreModal(true)">
        Create Store
      </Button>
    </div>
    <div class="flex flex-wrap gap-10">
      <div v-for="store in stores" :key="store._id.toString()" class="h-min w-96 rounded-lg bg-neutral-800 text-gray-200 shadow relative">
        <div v-if="store.ownerId === user._id" class="absolute right-5 top-5 hover:cursor-pointer" @click="openStoreModal(false, store)">
          <Icon name="ph:pencil-simple" size="1.6em" />
        </div>
        <div class="p-5 pb-3">
          <div class="flex items-center">
            <img :src="'https://api.mineatar.io/face/' + store.owner.minecraft.uuid + '?scale=3'" class="mr-2 aspect-square rounded">
            {{ store.owner.username }}
          </div>
          <h2 class="text-2xl font-bold text-primary">
            {{ store.name }}
            <span class="text-sm font-medium">({{ store.coords.x }}, {{ store.coords.z }})</span>
          </h2>
        </div>
        <h2 class="ml-3 text-xl font-bold">Items</h2>
        <div class="divide-y divide-neutral-600 rounded-lg bg-neutral-700 px-4 pt-2 pb-2">
          <div v-for="item in store.items" :key="item.displayname" class="py-1">
            <b>{{ item.displayName }}</b> for <b>{{ item.price }}</b>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  middleware: ["auth"]
})

const user = useState('user')

useHead({ title: 'Player Stores | Polarcraft' })

const { data: stores } = await useFetch('/api/store');

const storeModal = ref({
  open: false,
  name: '',
  new: false,
  id: '',
  coords: {
    x: '',
    z: '',
  },
  items: [
    { displayName: '', price: '' }
  ],
})

const openStoreModal = (newStore, store) => {
  storeModal.value.open = true;

  if (newStore === true) {
    storeModal.value.name = '';
    storeModal.value.items = [
      { displayName: '', price: '' }
    ];

    storeModal.value.coords = { x: '', z: '' }

    storeModal.value.new = true
  } else {
    storeModal.value.new = false

    storeModal.value.items = []
    store.items.forEach(item => {
      storeModal.value.items.push(item);
    })

    storeModal.value.name = store.name
    storeModal.value.id = store._id
    storeModal.value.coords.x = store.coords.x
    storeModal.value.coords.z = store.coords.z
  }

}

const submitModal = async () => {
  try {
    const store = await $fetch('/api/store', {
      method: 'POST',
      body: { name: storeModal.value.name, coords: storeModal.value.coords, items: storeModal.value.items, id: storeModal.value.id || null }
    })

    if (storeModal.value.id) {
      const oldStore = stores.value.filter(a => a._id === storeModal.value.id)[0]

      oldStore.name = storeModal.value.name;
      oldStore.coords = storeModal.value.coords;
      oldStore.items = storeModal.value.items;
    } else {
      store.owner = user
      stores.value.push(store)
    }

    storeModal.value.open = false

    useToast().success('Succesvol store aangemaakt')
  } catch (e) {
    console.log(e)
    useToast().error(e.statusMessage)
  }
}

const deleteStore = async () => {
  try {
    await $fetch('/api/store', {
      method: 'DELETE',
      body: { id: storeModal.value.id }
    })



    stores.value = stores.value.filter(a => a._id !== storeModal.value.id)

    storeModal.value.open = false
    useToast().success('Succesvol store verwijderd')
  } catch (e) {
    console.log(e)
    useToast().error(e.statusMessage)
  }
}
</script>