From 8ea8574f3fa3a9dd8976c1d5d374b48b96f650b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Manuel=20Forc=C3=A9n=20Mu=C3=B1oz?= <manuforcen@gmail.com>
Date: Mon, 17 Feb 2025 18:27:17 +0100
Subject: [PATCH] Added member list

---
 ui/src/main.ts        | 12 ++++++++-
 ui/src/views/Plan.vue | 62 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 71 insertions(+), 3 deletions(-)

diff --git a/ui/src/main.ts b/ui/src/main.ts
index e182721..4b6c2fe 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -8,7 +8,16 @@ import router from './router';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { faGear, faPenToSquare, faCheck, faPlus, faFloppyDisk, faTrash, faEye } from '@fortawesome/free-solid-svg-icons';
+import {
+  faGear,
+  faPenToSquare,
+  faCheck,
+  faPlus,
+  faFloppyDisk,
+  faTrash,
+  faEye,
+  faXmark
+} from '@fortawesome/free-solid-svg-icons';
 
 library.add(faGear);
 library.add(faPenToSquare);
@@ -17,6 +26,7 @@ library.add(faPlus);
 library.add(faFloppyDisk);
 library.add(faTrash);
 library.add(faEye);
+library.add(faXmark);
 
 const app = createApp(App)
 
diff --git a/ui/src/views/Plan.vue b/ui/src/views/Plan.vue
index b26cfc3..7b5abd4 100644
--- a/ui/src/views/Plan.vue
+++ b/ui/src/views/Plan.vue
@@ -14,7 +14,10 @@ const plan_name = ref('');
 const organizer = ref('');
 const description = ref('');
 
+const members = ref([]);
 const polls = ref([]);
+const newPoll = ref(false);
+const membersShown = ref(false);
 
 fetch('/api/plans/' + plan_id, {
   headers: {
@@ -27,6 +30,13 @@ fetch('/api/plans/' + plan_id, {
     description.value = x.description;
   })
 
+fetch('/api/plans/' + plan_id + '/members', {
+  headers: {
+    'Authorization': 'Basic ' + btoa(account.account + ':')
+  }
+}).then(x => x.json())
+  .then(x => members.value = x);
+
 fetch('/api/plans/' + plan_id + '/polls', {
   headers: {
     'Authorization': 'Basic ' + btoa(account.account + ':')
@@ -35,6 +45,22 @@ fetch('/api/plans/' + plan_id + '/polls', {
   .then(x => {
     polls.value = x;
   });
+
+function openDialog() {
+  newPoll.value = true;
+}
+
+function closeDialog() {
+  newPoll.value = false;
+}
+
+function showMembers() {
+  membersShown.value = true;
+}
+
+function hideMembers() {
+  membersShown.value = false;
+}
 </script>
 
 <template>
@@ -44,11 +70,43 @@ fetch('/api/plans/' + plan_id + '/polls', {
       <h1 class="text-xl my-4">Plan {{ plan_name }}</h1>
       <h2>Organizado por {{ organizer }}</h2>
       <p>{{ description }}</p>
+      <p class="cursor-pointer" @click="showMembers()">{{ members.length }} participantes</p>
     </div>
   </header>
-  <div class="flex flex-col my-4 p-4">
-    <h1 class="p-4 bg-gray-700 rounded-t-xl text-lg">Polls</h1>
+  <div class="flex flex-col my-4" v-if="membersShown">
+    <h1 class="p-4 bg-gray-700 rounded-t-xl text-lg grow flex flex-row items-center">
+      <span class="grow">Members</span>
+      <button @click="hideMembers()"><font-awesome-icon :icon="['fas', 'xmark']" /></button>
+    </h1>
     <div class="p-4 bg-gray-800 rounded-b-xl">
+      <div class="flex items-center my-1" v-for="member in members">
+        <img class="w-6 h-6 border">
+        <span class="px-2 grow">{{ member.name || member.username }}</span>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col my-4">
+    <h1 class="p-4 bg-gray-700 rounded-t-xl text-lg grow">Schedule</h1>
+    <div class="p-4 bg-gray-800 rounded-b-xl"></div>
+  </div>
+  <div class="flex flex-col my-4">
+    <h1 class="p-4 bg-gray-700 rounded-t-xl text-lg grow">Expenses</h1>
+    <div class="p-4 bg-gray-800 rounded-b-xl"></div>
+  </div>
+  <div class="flex flex-col my-4">
+    <h1 class="p-4 bg-gray-700 rounded-t-xl text-lg grow flex">
+      <span class="grow">Polls</span>
+      <button @click="openDialog()">
+        <font-awesome-icon :icon="['fas', 'plus']" />
+      </button>
+    </h1>
+    <div class="p-4 bg-gray-800 rounded-b-xl">
+      <div class="b" v-if="newPoll">
+        Hello
+        <button @click="closeDialog()">
+          <font-awesome-icon :icon="['fas', 'plus']" />
+        </button>
+      </div>
       <PollList :polls="polls" />
     </div>
   </div>