~cypheon/nextcloud-chores-app: src/views/TeamOverview.vue - sourcehut git


                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
<div>
  <h2>Team Overview - {{store.team.name}}</h2>
  <h3>Members</h3>
  <table>
    <tr v-for="(member) in store.team.members" :key="member.member">
      <td class="user-points-cell">
        {{ member.points }} 🎈 points
      </td>
      <td>
      <UserBubble
        :size="48"
        :user="member.member"
        :displayName="member.displayName"
        >
        <template #title v-if="member.member !== store.team.owner">
          <a href="#"
             title="Remove user"
             class="icon-close remove-member"
             @click="removeUser(member.member)" ></a>
        </template>
      </UserBubble>
      </td>
    </tr>
  </table>
  <h3>Invitations</h3>
  <div v-if="store.team.invites.length > 0">
    <p>The following users are currently invited:</p>
    <ul>
      <li v-for="(invitee) in store.team.invites" :key="(invitee.userId)">
        <UserBubble
          :size="48"
          :user="invitee.userId"
          :displayName="invitee.userId"
          >
        <template #title>
          <a href="#"
             title="Cancel invite"
             class="icon-close remove-member"
             @click="removeUser(invitee.userId)" ></a>
        </template>
      </UserBubble>
      </li>
    </ul>
  </div>
  <div>
    <form>
      <input class="no-close"
             type="text"
             placeholder="Invite User"
             v-model="inviteUsername" required />
      <input type="submit" class="icon-confirm"
             value=" " @click="inviteUser" />
    </form>
  </div>
</div>
</template>

<script>

import { UserBubble } from '@nextcloud/vue';

export default {
  name: 'TeamOverview',
  components: {
    UserBubble,
  },
  data() {
    return {
      store: this.$root.$data.globalStore,
      inviteUsername: "",
    }
  },
  mounted: async function() {
    this.store.loadTeamData();
  },
  methods: {
    inviteUser() {
      this.store.createUserInvitation(this.inviteUsername)
        .then(() => {
          this.inviteUsername = "";
        }
      );
      return false;
    },
    removeUser(username) {
      console.log(`NOT IMPLEMENTED: remove user from team: ${username}`);
      return false;
    },
  },
}
</script>

<style>
.user-points-cell {
  padding: 0 1rem;
}

.remove-member {
  height: 100%;
  display: block;
  margin-right: .5rem;
}
h3 {
  font-weight: bold;
}
</style>