Merge pull request #41 from Savage-Aim/team-join-no-chars

Update Team Member Form for when User has no Characters

backend/api/consumers.py

@@ -46,6 +46,8 @@ def bis(self, event):
             'reloadUrls': [
                 f'/characters/{event["char"]}/',
                 f'/characters/{event["char"]}/bis_list/{event["id"]}/',
+                '/team/join/',
+                '/team/new/',
             ],
         }
         self.send(text_data=json.dumps(payload))
@@ -56,7 +58,11 @@ def character(self, event):
         """
         payload = {
             'model': 'character',
-            'reloadUrls': [f'/characters/{event["id"]}/'],
+            'reloadUrls': [
+                f'/characters/{event["id"]}/',
+                '/team/join/',
+                '/team/new/',
+            ],
         }
         self.send(text_data=json.dumps(payload))
 
@@ -96,6 +102,9 @@ def team(self, event):
         """
         payload = {
             'model': 'team',
-            'reloadUrls': [f'/team/{event["id"]}/'],
+            'reloadUrls': [
+                f'/team/{event["id"]}/',
+                f'/team/join/{event["invite_code"]}/',
+            ],
         }
         self.send(text_data=json.dumps(payload))

backend/api/views/bis_list.py

@@ -103,7 +103,10 @@ def put(self, request: Request, character_id: int, pk: int) -> Response:
         # Send a WS updates for BIS and Teams
         self._send_to_user(char.user, {'type': 'bis', 'char': char.id, 'id': serializer.instance.pk})
         for tm in obj.teammember_set.all():
-            self._send_to_team(tm.team, {'type': 'team', 'id': str(tm.team.id)})
+            self._send_to_team(
+                tm.team,
+                {'type': 'team', 'id': str(tm.team.id), 'invite_code': str(tm.team.invite_code)},
+            )
 
         # Sync lists, if any requested
         self._sync_lists(serializer.instance, request.GET.getlist('sync'))

backend/api/views/character.py

@@ -85,7 +85,10 @@ def put(self, request: Request, pk: int) -> Response:
         # Send WS updates
         self._send_to_user(request.user, {'type': 'character', 'id': obj.id})
         for tm in obj.teammember_set.all():
-            self._send_to_team(tm.team, {'type': 'team', 'id': str(tm.team.id)})
+            self._send_to_team(
+                tm.team,
+                {'type': 'team', 'id': str(tm.team.id), 'invite_code': str(tm.team.invite_code)},
+            )
 
         return Response(status=204)
 
@@ -158,7 +161,10 @@ def delete(self, request: Request, pk: int) -> Response:
         # Send WS updates
         self._send_to_user(request.user, {'type': 'character', 'id': char_id})
         for tm in teams:
-            self._send_to_team(tm.team, {'type': 'team', 'id': str(tm.team.id)})
+            self._send_to_team(
+                tm.team,
+                {'type': 'team', 'id': str(tm.team.id), 'invite_code': str(tm.team.invite_code)},
+            )
             # Potential need to clean up here, but I don't feel like it's too big of an issue
 
         return Response(status=204)

backend/api/views/team.py

@@ -69,7 +69,7 @@ def post(self, request: Request) -> Response:
         )
 
         # Websocket stuff
-        self._send_to_user(request.user, {'type': 'team', 'id': str(obj.id)})
+        self._send_to_user(request.user, {'type': 'team', 'id': str(obj.id), 'invite_code': str(obj.invite_code)})
 
         # With everything created, return the Team ID
         return Response({'id': obj.id}, status=201)
@@ -116,7 +116,7 @@ def put(self, request: Request, pk: str) -> Response:
         obj.make_lead(obj.members.get(pk=team_lead_id))
 
         # Websocket stuff
-        self._send_to_team(obj, {'type': 'team', 'id': str(obj.id)})
+        self._send_to_team(obj, {'type': 'team', 'id': str(obj.id), 'invite_code': str(obj.invite_code)})
         for tm in obj.members.all():
             self._send_to_user(tm.character.user, {'type': 'character', 'id': tm.character.pk})
         return Response(status=204)
@@ -149,7 +149,7 @@ def delete(self, request: Request, pk: str) -> Response:
         obj.disband()
 
         # Websocket stuff
-        self._send_to_team(obj, {'type': 'team', 'id': team_id})
+        self._send_to_team(obj, {'type': 'team', 'id': team_id, 'invite_code': str(obj.invite_code)})
         for tm in members:
             self._send_to_user(tm.character.user, {'type': 'character', 'id': tm.character.pk})
         return Response(status=204)
@@ -206,7 +206,7 @@ def post(self, request: Request, invite_code: str) -> Response:
         notifier.team_join(tm.character, obj)
 
         # Websocket stuff
-        self._send_to_team(obj, {'type': 'team', 'id': str(obj.id)})
+        self._send_to_team(obj, {'type': 'team', 'id': str(obj.id), 'invite_code': str(obj.invite_code)})
         for tm in obj.members.all():
             self._send_to_user(tm.character.user, {'type': 'character', 'id': tm.character.pk})
 

backend/api/views/team_member.py

@@ -55,7 +55,7 @@ def put(self, request: Request, team_id: str, pk: id) -> Response:
         obj.save()
 
         # Websocket stuff
-        self._send_to_team(obj.team, {'type': 'team', 'id': str(obj.team.id)})
+        self._send_to_team(obj.team, {'type': 'team', 'id': str(obj.team.id), 'invite_code': str(obj.team.invite_code)})
         for tm in obj.team.members.all():
             self._send_to_user(tm.character.user, {'type': 'character', 'id': tm.character.pk})
 
@@ -106,7 +106,7 @@ def delete(self, request: Request, team_id: str, pk: id) -> Response:
         obj.team.remove_character(obj.character, kick)
 
         # Websocket stuff
-        self._send_to_team(team, {'type': 'team', 'id': str(team.id)})
+        self._send_to_team(team, {'type': 'team', 'id': str(team.id), 'invite_code': str(team.invite_code)})
         for tm in team.members.all():
             self._send_to_user(tm.character.user, {'type': 'character', 'id': tm.character.pk})
 
@@ -148,7 +148,7 @@ def put(self, request: Request, team_id: str, pk: id) -> Response:
         obj.save()
 
         # Websocket stuff
-        self._send_to_team(obj.team, {'type': 'team', 'id': str(obj.team.id)})
+        self._send_to_team(obj.team, {'type': 'team', 'id': str(obj.team.id), 'invite_code': str(obj.team.invite_code)})
         for tm in obj.team.members.all():
             self._send_to_user(tm.character.user, {'type': 'character', 'id': tm.character.pk})
 

backend/api/views/team_proxy.py

@@ -57,7 +57,7 @@ def post(self, request: Request, team_id: str) -> Response:
         team.members.create(character=char_serializer.instance, bis_list=bis_serializer.instance)
 
         # Websocket stuff
-        self._send_to_team(team, {'type': 'team', 'id': str(team.id)})
+        self._send_to_team(team, {'type': 'team', 'id': str(team.id), 'invite_code': str(team.invite_code)})
         for tm in team.members.all():
             self._send_to_user(tm.character.user, {'type': 'character', 'id': tm.character.pk})
 
@@ -111,7 +111,7 @@ def put(self, request: Request, team_id: str, pk: int) -> Response:
         # Send a WS updates for BIS and Teams
         self._send_to_user(obj.character.user, {'type': 'bis', 'char': obj.character.id, 'id': serializer.instance.pk})
         for tm in team.members.all():
-            self._send_to_team(team, {'type': 'team', 'id': str(tm.team.id)})
+            self._send_to_team(team, {'type': 'team', 'id': str(team.id), 'invite_code': str(team.invite_code)})
 
         return Response(status=204)
 

frontend/src/components/modals/changelog.vue

@@ -62,6 +62,7 @@
         </ul>
       </p>
       <p>Fixed issue where certain parts of the Edit Proxy page were not displaying information correctly.</p>
+      <p>Team Create and Join pages now have special handling for when the user has no Characters yet.</p>
 
     </div>
   </div>

frontend/src/components/team/member_manager.vue

@@ -40,17 +40,20 @@ import TeamMember from '@/interfaces/team_member'
 @Component
 export default class TeamMemberManager extends Vue {
   @Prop()
-  userIsLead!: boolean
+  member!: TeamMember
 
   @Prop()
-  member!: TeamMember
+  teamId!: string
+
+  @Prop()
+  userIsLead!: boolean
 
   editPermissions(): void {
-    this.$modal.show(Permissions, { member: this.member, teamId: this.$route.params.id }, { }, { closed: () => { this.$emit('reload') } })
+    this.$modal.show(Permissions, { member: this.member, teamId: this.teamId }, { }, { closed: () => { this.$emit('reload') } })
   }
 
   kick(): void {
-    this.$modal.show(KickFromTeam, { details: this.member, teamId: this.$route.params.id }, { }, { closed: () => { this.$emit('reload') } })
+    this.$modal.show(KickFromTeam, { details: this.member, teamId: this.teamId }, { }, { closed: () => { this.$emit('reload') } })
   }
 }
 </script>

frontend/src/components/team/proxy_manager.vue

@@ -42,11 +42,14 @@ export default class ProxyMemberManager extends Vue {
   @Prop()
   member!: TeamMember
 
+  @Prop()
+  teamId!: string
+
   @Prop()
   userHasPermission!: boolean
 
   kick(): void {
-    this.$modal.show(KickFromTeam, { details: this.member, teamId: this.$route.params.id }, { }, { closed: () => { this.$emit('reload') } })
+    this.$modal.show(KickFromTeam, { details: this.member, teamId: this.teamId }, { }, { closed: () => { this.$emit('reload') } })
   }
 }
 </script>

frontend/src/views/team/create.vue

@@ -20,18 +20,31 @@
             </div>
           </div>
           <div class="field">
-              <label class="label" for="tier">Tier</label>
-              <div class="select is-fullwidth" :class="{'is-danger': errors.tier_id !== undefined}">
-                <select v-model="tierId" id="tier">
-                  <option value="-1">Select a Tier</option>
-                  <option v-for="tier in $store.state.tiers" :key="tier.id" :value="tier.id">{{ tier.name }}</option>
-                </select>
-              </div>
-              <p v-if="errors.tier_id !== undefined" class="help is-danger">{{ errors.tier_id[0] }}</p>
+            <label class="label" for="tier">Tier</label>
+            <div class="select is-fullwidth" :class="{'is-danger': errors.tier_id !== undefined}">
+              <select v-model="tierId" id="tier">
+                <option value="-1">Select a Tier</option>
+                <option v-for="tier in $store.state.tiers" :key="tier.id" :value="tier.id">{{ tier.name }}</option>
+              </select>
             </div>
-            <div class="divider"><i class="material-icons icon">expand_more</i> Team Leader <i class="material-icons icon">expand_more</i></div>
-          <TeamMemberForm ref="form" :bis-list-id-errors="errors.bis_list_id" :character-id-errors="errors.character_id" />
-          <button class="button is-success" @click="create">Create!</button>
+            <p v-if="errors.tier_id !== undefined" class="help is-danger">{{ errors.tier_id[0] }}</p>
+          </div>
+          <div class="divider"><i class="material-icons icon">expand_more</i> Team Leader <i class="material-icons icon">expand_more</i></div>
+          <TeamMemberForm ref="form" :bis-list-id-errors="errors.bis_list_id" :character-id-errors="errors.character_id" v-if="characters.length" />
+          <template v-else>
+            <p class="no-chars-message">Your account currently has no Characters.</p>
+            <p class="no-chars-message">Clicking the "Add Character" button below will open the page to add a new Character to your account in another tab.</p>
+            <p class="no-chars-message">When your Character has been imported and verified this page will automatically update with them to allow you to select them to be your Team Leader Character!</p>
+            <a href="/characters/new/" target="_blank" class="button is-success is-fullwidth">
+              <span class="icon-text">
+                <span class="icon"><i class="material-icons">open_in_new</i></span>
+                <span>Add Character</span>
+              </span>
+            </a>
+          </template>
+        </div>
+        <div class="card-footer">
+          <a class="card-footer-item has-text-success" @click="create">Create Team</a>
         </div>
       </div>
     </div>
@@ -41,6 +54,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import TeamMemberForm from '@/components/team/member_form.vue'
+import { Character } from '@/interfaces/character'
 import { TeamCreateErrors, TeamCreateResponse } from '@/interfaces/responses'
 import SavageAimMixin from '@/mixins/savage_aim_mixin'
 
@@ -63,6 +77,10 @@ export default class TeamJoin extends SavageAimMixin {
     return (this.$refs.form as TeamMemberForm).bisListId
   }
 
+  get characters(): Character[] {
+    return this.$store.state.characters
+  }
+
   get characterId(): string {
     return (this.$refs.form as TeamMemberForm).characterId
   }
@@ -105,8 +123,15 @@ export default class TeamJoin extends SavageAimMixin {
       this.$notify({ text: `Error ${e} when attempting to create a Team.`, type: 'is-danger' })
     }
   }
+
+  async load(): Promise<void> {
+    this.$forceUpdate()
+  }
 }
 </script>
 
 <style lang="scss">
+.no-chars-message {
+  margin-bottom: 0.25rem;
+}
 </style>

frontend/src/views/team/join.vue

@@ -31,10 +31,33 @@
               <div class="card-header">
                 <div class="card-header-title">Select a Character and BIS List</div>
               </div>
-              <div class="card-content">
+              <div class="card-content" v-if="characters.length">
                 <TeamMemberForm ref="form" :bis-list-id-errors="errors.bis_list_id" :character-id-errors="errors.character_id" />
                 <button class="button is-success" @click="join">Join!</button>
               </div>
+              <div class="card-content content" v-else>
+                <p>
+                  Your account currently has no Characters. You have two choices as to how you proceed;
+                  <ol>
+                    <li>
+                      If a Character you own is listed in the Claim a Proxy card <span class="is-hidden-desktop">below</span><span class="is-hidden-touch">to the right</span>, you may click on them to attempt to claim them.
+                      <br />
+                      When verified, you will have automatically joined the Team and will not need to visit this page again.
+                    </li>
+                    <li>
+                      If your Character isn't present as a Proxy, you may click the button below to open the Add Character page in a new tab.
+                      <br />
+                      When added and verified, return to this tab and this page should have instantly updated to display a dropdown with your new Character in it.
+                    </li>
+                  </ol>
+                </p>
+                <a href="/characters/new/" target="_blank" class="button is-success is-fullwidth">
+                  <span class="icon-text">
+                    <span class="icon"><i class="material-icons">open_in_new</i></span>
+                    <span>Add Character</span>
+                  </span>
+                </a>
+              </div>
             </div>
           </div>
 
@@ -99,6 +122,10 @@ export default class TeamJoin extends SavageAimMixin {
     return (this.$refs.form as TeamMemberForm).bisListId
   }
 
+  get characters(): Character[] {
+    return this.$store.state.characters
+  }
+
   get characterId(): string {
     return (this.$refs.form as TeamMemberForm).characterId
   }
@@ -117,10 +144,10 @@ export default class TeamJoin extends SavageAimMixin {
   }
 
   created(): void {
-    this.fetchTeam()
+    this.fetchTeam(false)
   }
 
-  async fetchTeam(): Promise<void> {
+  async fetchTeam(reload: boolean): Promise<void> {
     // Load the team data from the API
     try {
       const response = await fetch(this.url)
@@ -129,6 +156,7 @@ export default class TeamJoin extends SavageAimMixin {
         this.team = (await response.json()) as Team
         this.teamLoaded = true
         document.title = `Join ${this.team.name} - Savage Aim`
+        if (reload) this.$forceUpdate()
       }
       else if (response.status === 404) {
         // Handle 404s ourselves to go back to the create/join page with a warning
@@ -176,6 +204,10 @@ export default class TeamJoin extends SavageAimMixin {
       this.$notify({ text: `Error ${e} when attempting to create BIS List.`, type: 'is-danger' })
     }
   }
+
+  async load(): Promise<void> {
+    this.fetchTeam(true)
+  }
 }
 </script>
 

frontend/src/views/team/management.vue

@@ -31,7 +31,7 @@
               <div class="card-header-title">Team Members</div>
             </div>
             <div class="card-content">
-              <TeamMemberManager :member="member" :user-is-lead="userIsTeamLead" v-for="member in realMembers()" :key="member.id" v-on:reload="() => { fetchTeam(true) }" />
+              <TeamMemberManager :team-id="teamId" :member="member" :user-is-lead="userIsTeamLead" v-for="member in realMembers()" :key="member.id" v-on:reload="() => { fetchTeam(true) }" />
             </div>
           </div>
         </div>
@@ -48,7 +48,7 @@
               </div>
             </div>
             <div class="card-content">
-              <ProxyMemberManager :member="member" :user-has-permission="userHasProxyManagerPermission" v-for="member in proxyMembers()" :key="member.id" v-on:reload="() => { fetchTeam(true) }" />
+              <ProxyMemberManager :team-id="teamId" :member="member" :user-has-permission="userHasProxyManagerPermission" v-for="member in proxyMembers()" :key="member.id" v-on:reload="() => { fetchTeam(true) }" />
             </div>
           </div>
         </div>