Improve user experience

availabili.tf/src/components/PlayerCard.vue

@@ -37,11 +37,11 @@ function onClick() {
       rosterStore.selectPlayerForRole(undefined, props.roleTitle);
     } else {
       if (props.isRinger) {
-        const ringerPlayer: PlayerTeamRole = {
-          steamId: -1,
+        const ringerPlayer: PlayerTeamRoleFlat = {
+          steamId: "0",
           name: "Ringer",
-          role: props.roleTitle,
-          main: false,
+          role: props.roleTitle ?? "",
+          isMain: false,
           availability: 1,
           playtime: -1,
         };

availabili.tf/src/components/PlayerTeamCard.vue

@@ -59,6 +59,10 @@ function updateRoles() {
   teamsStore.updateRoles(props.team.id, props.player.steamId, updatedRoles.value);
 }
 
+function cancelEdit() {
+  isEditing.value = false;
+}
+
 const isUnavailable = computed(() => {
   return props.player?.availability[0] == 0 &&
     props.player?.availability[1] == 0;
@@ -126,7 +130,7 @@ const rightIndicator = computed(() => {
         <svg-icon v-if="player.isTeamLeader" type="mdi" :path="mdiCrown" />
       </div>
     </td>
-    <td>
+    <td :colspan="isEditing ? 2 : 1">
       <div class="role-icons flex-middle">
         <div class="role-buttons" v-if="isEditing">
           <RoleTag
@@ -155,17 +159,20 @@ const rightIndicator = computed(() => {
         </span>
       </div>
     </td>
-    <td>
+    <td v-if="!isEditing">
       <span :class="{ 'aside': player.playtime == 0}">
         {{ player.playtime.toFixed(1) }} hours
       </span>
     </td>
-    <td>
+    <!--td>
       {{ new Date(player.createdAt).toLocaleString() }}
-    </td>
+    </td-->
     <td>
       <div class="edit-group">
         <template v-if="isEditing">
+          <button class="editing" @click="cancelEdit()">
+            <i class="bi bi-x-lg" />
+          </button>
           <button class="editing" @click="updateRoles()">
             <i class="bi bi-check-lg" />
           </button>

availabili.tf/src/stores/schedule.test.ts

@@ -15,6 +15,7 @@ describe("Schedule store", () => {
       id: 0,
       tzTimezone: "Asia/Kolkata",
       minuteOffset: 10,
+      createdAt: "",
     });
 
     expect(test1.get("minutes")).toEqual(40);
@@ -24,6 +25,7 @@ describe("Schedule store", () => {
       id: 0,
       tzTimezone: "America/New_York",
       minuteOffset: 30,
+      createdAt: "",
     });
 
     expect(test2.get("minutes")).toEqual(30);