source: ReserveNGo-frontend/src/components/Project/AddRestaurant.vue

<script>
import { useRouter } from 'vue-router'
import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
import { userStore } from '@/PiniaStores/UserStore.js'


export default {
  data() {
    return {
      router: useRouter(),
      name: '',
      url: 'http://localhost:8080/api/admin/add',
      restaurantStore: restaurantStore(),
      userStore: userStore(),
    }
  },
  methods: {
    async addRestaurant() {
      await fetch(this.url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': this.userStore.getToken
        },
        body: JSON.stringify({
          name: this.name,
        })
      }).then((response) => response.json())
        .then(json => {this.restaurantStore.newRestaurant(json)})

    }
  }
}
</script>

<template>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-4">
        <form v-on:submit.prevent="addRestaurant">
          <div class="mb-3">
            <label for="name" class="form-label" >Restaurant name</label>
            <input v-model="this.name" type="text" id="name" name="name" class="form-control" placeholder="Name" required>
          </div>
          <button type="submit" class="btn btn-primary">Add Restaurant</button>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped></style>