dropdown and projection for account

frontend/src/views/CreateTimerecord.vue

@@ -1,29 +1,34 @@
 <template >
-  <v-container id = "createRecordListen">
+  <v-container id="createRecordListen">
     <v-card align-center>
       <h3 class="text-center display-2 logowhite--text">Details</h3>
 
-      <v-form>
-        
-        <v-text-field
-          label="type"
-          v-model="newtype"
-          name="type"
-          prepend-icon="mdi-currency-usd"
-          type="text"
-          color="primary"
-        />
-        <v-text-field
-          label="Accountname"
-          v-model="accountname"
-          name="accountname"
-          prepend-icon="mdi-account-tie"
-          type="text"
-          color="primary"
-        />
-      </v-form>
       <v-row>
-        <v-col cols="12" sm="6" >
+        <v-col cols="6">
+          <v-select
+            v-model="newtype"
+            :items="types"
+            menu-props="auto"
+            label="Type"
+            hide-details
+            prepend-icon="mdi-currency-usd"
+            single-line
+          ></v-select>
+        </v-col>
+        <v-col cols="6">
+          <v-select
+            v-model="accountname"
+            :items="accounts"
+            menu-props="auto"
+            label="Account"
+            hide-details
+            prepend-icon="mdi-account-tie"
+            single-line
+          ></v-select>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12" sm="6">
           <v-menu
             ref="menu"
             v-model="menu"
@@ -49,7 +54,7 @@
             </v-date-picker>
           </v-menu>
         </v-col>
-        <v-col cols="12" sm="6" >
+        <v-col cols="12" sm="6">
           <v-menu
             ref="menu2"
             v-model="menu2"
@@ -153,6 +158,8 @@ export default {
     menutime2: false,
     menu: false,
     menu2: false,
+     types: [ "PAID" ,"BREAK"],
+     accounts: "",
     user: sessionStorage.getItem("timeTrackAccountListUserId"),
     newstartdate: "",
     newenddate: "",
@@ -228,8 +235,39 @@ export default {
       }
     }
   },
+  created (){
+    var accountsxhttp = new XMLHttpRequest();
+    var accounts;
+      accountsxhttp.onreadystatechange = function() {
+        if ((this.status == 200) & (this.readyState == 4)) {
+          accounts = JSON.parse(accountsxhttp.responseText);
+          accounts = accounts._embedded.accounts;
+        
+        }
+      };
+      accountsxhttp.open(
+        "GET",
+        baseUri +
+          "/accounts/search/findByUsername?username=" +
+          sessionStorage.getItem("username") ,
+        false
+      );
+      accountsxhttp.setRequestHeader("Content-Type", "application/json");
+
+      accountsxhttp.setRequestHeader(
+        "Authorization",
+        sessionStorage.getItem("jwt")
+      );
+      accountsxhttp.send(null);
+      var accountnames =[];
+      for (let index = 0; index < accounts.length; index++) {              
+        accountnames[index] = accounts[index].name;
+        
+      }
+      this.accounts =accountnames;
+  },
   mounted() {
-        var listen =  document.getElementById('createRecordListen');
+    var listen = document.getElementById("createRecordListen");
 
     listen.addEventListener("keyup", e => {
       if (e.keyCode === 13) {

frontend/src/views/EditTimerecord.vue

@@ -3,16 +3,17 @@
     <v-card align-center>
       <h3 class="text-center display-2 logowhite--text">Details</h3>
 
-      <v-form>
-        <v-text-field
-          label="type"
+     <v-col cols="6">
+        <v-select
           v-model="newtype"
-          name="type"
+          :items="types"
+          menu-props="auto"
+          label="Type"
+          hide-details
           prepend-icon="mdi-currency-usd"
-          type="text"
-          color="primary"
-        />
-      </v-form>
+          single-line
+        ></v-select>
+      </v-col>
       <v-row>
         <v-col cols="12" sm="6" >
           <v-menu
@@ -143,6 +144,7 @@ export default {
     menutime2: false,
     menu: false,
     menu2: false,
+    types: [ "PAID" ,"BREAK"],
     type: "",
     stardate: "",
     enddate: "",

frontend/src/views/TimeRecordItem.vue

@@ -35,7 +35,7 @@
           <v-col></v-col>
            <v-col cols="2">
             <v-card color="background" elevation="0">
-              <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeRecord.accountname}}</pre>
+              <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeRecord.account}}</pre>
             </v-card>
           </v-col>
           <v-col></v-col>

frontend/src/views/TimeRecords.vue

@@ -79,14 +79,15 @@ export default {
       "GET",
       baseUri +
         "/records/search/allForUser?username=" +
-        sessionStorage.getItem("username"),
+        sessionStorage.getItem("username") +
+        "&projection=overview",
       false
     );
 
     xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
 
     xhttp.send(null);
-    //duration
+
     for (let index = 0; index < records.length; index++) {
       var record = records[index];
       var time = record.duration;
@@ -95,23 +96,6 @@ export default {
 
       var min = time % 60;
       record.duration = hours + "h " + min + "min";
-
-      var accxhttp = new XMLHttpRequest();
-      var acc = "";
-      accxhttp.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
-          acc = JSON.parse(accxhttp.responseText);
-
-          acc = acc.name;
-        }
-      };
-      accxhttp.open("GET", records[index]._links.self.href + "/account", false);
-
-      accxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-
-      accxhttp.send(null);
-      records[index].accountname = acc;
-
       var start = record.startdate;
 
       start = start.split("T");