From 8bef73575692619633d0ff4bbf4ffc964d63dd80 Mon Sep 17 00:00:00 2001
From: HumanoidSandvichDispenser <humanoidsandvichdispenser@gmail.com>
Date: Sun, 24 Nov 2024 15:45:42 -0800
Subject: [PATCH] Improve user experience

---
 availabili.tf/src/components/PlayerCard.vue     |  8 ++++----
 availabili.tf/src/components/PlayerTeamCard.vue | 15 +++++++++++----
 availabili.tf/src/stores/schedule.test.ts       |  2 ++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/availabili.tf/src/components/PlayerCard.vue b/availabili.tf/src/components/PlayerCard.vue
index 9403c1e..f13a501 100644
--- a/availabili.tf/src/components/PlayerCard.vue
+++ b/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,
         };
diff --git a/availabili.tf/src/components/PlayerTeamCard.vue b/availabili.tf/src/components/PlayerTeamCard.vue
index 98796c2..ae1b360 100644
--- a/availabili.tf/src/components/PlayerTeamCard.vue
+++ b/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>
diff --git a/availabili.tf/src/stores/schedule.test.ts b/availabili.tf/src/stores/schedule.test.ts
index 77eb609..7aa06c2 100644
--- a/availabili.tf/src/stores/schedule.test.ts
+++ b/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);