Added member list

apis/plans.go

@@ -36,7 +36,7 @@ func listPlans(c *gin.Context) {
 	if u == nil {
 		return
 	}
-	plans, err := u.GetPlans(db)
+	plans, err := u.ListPlans(db)
 	if err == nil {
 		c.JSON(http.StatusOK, plans)
 	} else {

core/users.go

@@ -6,7 +6,7 @@ import (
 	"gorm.io/gorm"
 )
 
-func (u *User) GetPlans(orm *gorm.DB) ([]Plan, error) {
+func (u *User) ListPlans(orm *gorm.DB) ([]Plan, error) {
 	var plans []Plan
 	err := orm.Debug().Table("plans p").
 		Select("p.*").

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)
 

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>