Polevoy_Network_Programming/frontend/src/components/Admin.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row mb-5">
                <p class='is-center h2'>Профили</p>
            </div>
            <div class="row mb-5">
                <div class="col"></div>
                <div class="col-10 is-center">
                    <button class="button primary" data-bs-toggle="modal" data-bs-target="#customerCreate">
                        Добавить нового пользователя
                    </button>
                </div>
                <div class="col"></div>
            </div>

            <p class='h3 is-center row mb-5'>Список профилей</p>
            <div class="row">
                <div class="col">
                    <div class="row card mb-3">
                        <div class="row">
                            <div class="col-3 is-left h3 fw-bold">ID</div>
                            <div class="col-3 is-center h3 fw-bold">Никнейм</div>
                            <div class="col-3 is-right h3 fw-bold">Пароль</div>
                            <div class="col-2"></div>
                            <div class="col-1"></div>
                        </div>
                    </div>
                    <div v-for="customer in customers" class="row card mb-3">
                        <div class="row">
                            <div class="col-3 is-left h3">{{ customer.id }}</div>
                            <router-link :to="{name: 'Customers', params: {'id': customer.id}}" class="col-3 is-center h3">{{ customer.username }}</router-link>
                            <div class="col-3 is-right h3">
                                <span style="text-overflow: ellipsis; overflow: hidden; max-width: 10ch; white-space: nowrap">
                                    {{ customer.password }}
                                </span>
                            </div>

                            <button style="max-width: 66px; max-height: 38px;" v-on:click="prepareEditModal(customer)" class="button primary outline is-right" data-bs-toggle="modal" data-bs-target="#customerEdit">
                                <i class="fa fa-pencil" aria-hidden="true">
                                </i>
                            </button>

                            <div class="col-1 is-right">
                                <button class="button dark outline is-right" v-on:click="deleteCustomer(customer)" style="max-width: 66px; max-height: 38px;">
                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="customerCreate" tabindex="-1" role="dialog" aria-labelledby="customerCreateLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customerCreateLabel">Создать профиль</h5>
                </div>
                <div class="modal-body text-center">
                    <p>Логин</p>
                    <textarea name="username" v-model="newCustomer.username" cols="30" rows="1"></textarea>
                    <p>Пароль</p>
                    <textarea name="password" v-model="newCustomer.password" id="passwordTextC" cols="30" rows="1"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                    <button type="button" v-on:click="createCustomer()" class="btn btn-primary" data-bs-dismiss="modal">Сохранить</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="customerEdit" tabindex="-1" role="dialog" aria-labelledby="customerEditLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="edit-customer-form">
                <div class="modal-header">
                    <h5 class="modal-title" id="customerEditLabel">Редактировать профиль</h5>
                </div>
                <div class="modal-body text-center">
                    <p>Логин</p>
                    <textarea name="username" v-model="editedCustomer.username" cols="30" rows="1"></textarea>
                    <p>Пароль</p>
                    <textarea name="password" v-model="editedCustomer.password" cols="30" rows="1"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                    <button type="button" v-on:click="editCustomer()" class="btn btn-primary" data-bs-dismiss="modal">Изменить</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
      data() {
          return {
              editedCustomer: {
                  id: -1,
                  username: '',
                  password: ''
              },
              newCustomer: {
                  id: -1,
                  username: '',
                  password: ''
              },
              customers: [],
              currentCustomerId: -1
          }
      },
      methods: {
          async updateCustomers() {
              const response = await fetch(
                  "http://localhost:8080/api/1.0/customer",
                  {
                      method: "GET",
                      headers: {
                          "Authorization": "Bearer " + localStorage.getItem("token")
                      }
                  }
              )

              this.customers = await response.json()
          },
          async createCustomer() {
              const response = await fetch(
                  "http://localhost:8080/api/1.0/customer",
                  {
                      method: "POST",
                      headers: {
                          'Content-Type': 'application/json',
                          "Authorization": "Bearer " + localStorage.getItem("token")
                      },
                      body: JSON.stringify({
                          "username": this.newCustomer.username,
                          "password": this.newCustomer.password
                      })
                  }
              )

              await this.updateCustomers()
          },
          async editCustomer() {
              const response = await fetch(
                  "http://localhost:8080/api/1.0/customer/" + this.editedCustomer.id,
                  {
                      method: "PUT",
                      headers: {
                          'Content-Type': 'application/json',
                          "Authorization": "Bearer " + localStorage.getItem("token")
                      },
                      body: JSON.stringify({
                          "username": this.editedCustomer.username,
                          "password": this.editedCustomer.password
                      })
                  }
              )

              if (this.currentCustomerId == this.editedCustomer.id) {
                  localStorage.clear()
                  document.dispatchEvent(new Event("token_changed"))
                  this.$router.replace("login")
              }

              await this.updateCustomers()
          },
          async deleteCustomer(customer) {
              const response = await fetch(
                  "http://localhost:8080/api/1.0/customer/" + customer.id,
                  {
                      method: "DELETE",
                      headers: {
                          "Authorization": "Bearer " + localStorage.getItem("token")
                      }
                  }
              )

              if (this.currentCustomerId == this.editedCustomer.id) {
                  localStorage.clear()
                  document.dispatchEvent(new Event("token_changed"))
                  this.$router.replace("login")
              }

              await this.updateCustomers()
          },
          async prepareEditModal(customer) {
              this.editedCustomer.username = customer.username
              this.editedCustomer.id = customer.id
          },
          async getCurrentCustomer() {
              const response = await fetch(
                  "http://localhost:8080/api/1.0/customer/me",
                  {
                      method: "GET",
                      headers: {
                          "Authorization": "Bearer " + localStorage.getItem("token")
                      }
                  }
              )

              this.currentCustomerId = (await response.json())['id']
          }
      },
      async beforeMount() {
          if (localStorage.getItem("role") !== "ADMIN") {
              this.$router.replace("login")
          }
          if (!localStorage.getItem("token") === null) {
              this.$router.replace("login")
          }

          await this.getCurrentCustomer()

          await this.updateCustomers()
      }
  }
</script>

<style>

</style>