If admin prop enable editing & more info.

Leveraging the new api supporting CRUD we check if admin prop is true
and display edit, update and delete buttons.

frontend/ui/Attendees.vue

@@ -1,12 +1,45 @@
 <template>
-  <div class="attendees" v-if="attendees.length > 0">
-    <div class="attendees-container" ref="attendees">
-      <div class="attendee" v-for="(attendee, index) in flipList(attendees)" :key="index">
-        <span class="attendee-name">{{ attendee.name }}</span>
-        <div class="red-raffle raffle-element small">{{ attendee.red }}</div>
-        <div class="blue-raffle raffle-element small">{{ attendee.blue }}</div>
-        <div class="green-raffle raffle-element small">{{ attendee.green }}</div>
-        <div class="yellow-raffle raffle-element small">{{ attendee.yellow }}</div>
+  <div v-if="attendees.length > 0" class="attendee-container">
+    <div class="attendee" v-for="(attendee, index) in flipList(attendees)" :key="index">
+      <div class="attendee-info">
+        <router-link class="attendee-name" :to="`/highscore/${attendee.name}`">
+          {{ attendee.name }}
+        </router-link>
+
+        <div v-if="admin" class="flex column justify-center margin-top-sm">
+          <span>Phone: {{ attendee.phoneNumber }}</span>
+          <span>Has won: {{ attendee.winner }}</span>
+        </div>
+
+        <div class="raffle-container">
+          <div class="red-raffle raffle-element small">{{ attendee.red }}</div>
+          <div class="blue-raffle raffle-element small">{{ attendee.blue }}</div>
+          <div class="green-raffle raffle-element small">{{ attendee.green }}</div>
+          <div class="yellow-raffle raffle-element small">{{ attendee.yellow }}</div>
+        </div>
+      </div>
+
+      <div v-if="admin" class="attendee-admin">
+        <button class="vin-button small" @click="editingAttendee = editingAttendee == attendee ? false : attendee">
+          {{ editingAttendee == attendee ? "Lukk" : "Rediger" }}
+        </button>
+      </div>
+
+      <div v-if="editingAttendee == attendee" class="attendee-edit">
+        <div class="label-div" v-for="key in Object.keys(attendee)" :key="key">
+          <label>{{ key }}</label>
+          <input type="text" v-model="attendee[key]" :placeholder="key" />
+        </div>
+
+        <div v-if="editingAttendee == attendee">
+          <button class="vin-button small warning" @click="updateAttendee(attendee)">
+            Oppdater deltaker
+          </button>
+
+          <button class="vin-button small danger" @click="deleteAttendee(attendee)">
+            Slett deltaker
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -17,33 +50,79 @@ export default {
   props: {
     attendees: {
       type: Array
+    },
+    admin: {
+      type: Boolean,
+      default: false
     }
   },
-  methods: {
-    flipList: (list) => list.slice().reverse()
+  data() {
+    return {
+      editingAttendee: undefined
+    };
   },
-  watch: {
-    attendees: {
-      deep: true,
-      handler() {
-        if (this.$refs && this.$refs.history) {
-          setTimeout(() => {
-            this.$refs.attendees.scrollTop = this.$refs.attendees.scrollHeight;
-          }, 50);
-        }
-      }
+  methods: {
+    flipList: list => list.slice().reverse(),
+    updateAttendee(updatedAttendee) {
+      const options = {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ attendee: updatedAttendee })
+      };
+
+      fetch(`/api/lottery/attendee/${updatedAttendee._id}`, options)
+        .then(resp => resp.json())
+        .then(response => {
+          this.editingAttendee = null;
+
+          const { message, success } = response;
+
+          if (success) {
+            this.$toast.info({
+              title: response.message
+            });
+          } else {
+            this.$toast.error({
+              title: response.message
+            });
+          }
+        });
+    },
+    deleteAttendee(deletedAttendee) {
+      const options = {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ attendee: deletedAttendee })
+      };
+
+      fetch(`/api/lottery/attendee/${deletedAttendee._id}`, options)
+        .then(resp => resp.json())
+        .then(response => {
+          this.editingAttendee = null;
+
+          const { message, success } = response;
+
+          if (success) {
+            this.$toast.info({
+              title: response.message
+            });
+          } else {
+            this.$toast.error({
+              title: response.message
+            });
+          }
+        });
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/global.scss";
-@import "../styles/variables.scss";
-@import "../styles/media-queries.scss";
+@import "@/styles/variables.scss";
+@import "@/styles/media-queries.scss";
 
 .attendee-name {
-  width: 60%;
+  font-size: 1.1rem;
 }
 
 hr {
@@ -51,45 +130,60 @@ hr {
   width: 100%;
 }
 
-.raffle-element {
-  font-size: 0.75rem;
-  width: 45px;
-  height: 45px;
-  display: flex;
-  justify-content: center;
+.attendee-container {
   align-items: center;
-  font-weight: bold;
-  font-size: 0.75rem;
-  text-align: center;
-
-  &:not(:last-of-type) {
-    margin-right: 1rem;
-  }
-}
-
-.attendees {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: auto;
-}
-
-.attendees-container {
-  width: 100%;
   height: 100%;
-  overflow-y: scroll;
-  max-height: 550px;
+
+  padding: 1rem;
+
+  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
 }
 
 .attendee {
+  padding: 0.5rem;
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin: 0 auto;
+
+  @include mobile {
+    align-items: center;
+    justify-content: center;
+  }
 
   &:not(:last-of-type) {
     border-bottom: 2px solid #d7d8d7;
   }
+
+  &:not(:first-of-type) {
+    margin-top: 0.5rem;
+  }
+
+  button {
+    margin-bottom: 0.5rem;
+  }
+
+  &-info {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+
+    @include mobile {
+      flex-direction: column;
+    }
+  }
+
+  &-edit {
+    button {
+      margin-top: 0.5rem;
+    }
+  }
+
+  .raffle-container {
+    display: flex;
+    flex-direction: row;
+  }
 }
 </style>