<template>
  <div>
    <div v-bind:key="user.username" v-for="user in users">
      <UsersItems v-bind:user="user" v-on:edit-user="edituser" />
    </div>
  </div>
</template>

<script>
import { baseUri } from "../variables.js";
import UsersItems from "./UsersItems.vue";
export default {
  components: {
    UsersItems
  },
  data: () => ({
    users: JSON.parse(sessionStorage.getItem("users"))
  }),
  methods: {
    edituser(username) {
      alert("Not Implemented. TimeRecordId: " + username);
    }
  },
  created() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var usersInformation = JSON.parse(xhttp.responseText);
        console.log(usersInformation);
        console.log(usersInformation._embedded.users);
        sessionStorage.setItem(
          "users",
          JSON.stringify(usersInformation._embedded.users)
        );
      }
    };
    xhttp.open("GET", baseUri + "/users", false);

    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));

    xhttp.send(null);
    this.users = JSON.parse(sessionStorage.getItem("users"));
  }
};
</script>