feat(scoreboard): add per-field save icons for player overrides

src/dashboard/example/components/ScoreboardPanel.vue

@@ -135,6 +135,38 @@ const rightCanSave = computed(
     && !playerExistsByGamertag(scoreboardStore.scoreboard.rightNameOverride),
 );
 
+const leftTeamChanged = computed(() => {
+  const player = leftSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.team !== scoreboardStore.scoreboard.leftTeamOverride;
+});
+
+const rightTeamChanged = computed(() => {
+  const player = rightSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.team !== scoreboardStore.scoreboard.rightTeamOverride;
+});
+
+const leftCountryChanged = computed(() => {
+  const player = leftSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.country !== scoreboardStore.scoreboard.leftCountryOverride;
+});
+
+const rightCountryChanged = computed(() => {
+  const player = rightSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.country !== scoreboardStore.scoreboard.rightCountryOverride;
+});
+
 const leftPendingGamertag = computed(() => {
   const override = scoreboardStore.scoreboard.leftNameOverride.trim();
   if (override) {
@@ -151,26 +183,33 @@ const rightPendingGamertag = computed(() => {
   return rightSelectedPlayer.value?.gamertag ?? '';
 });
 
-const leftHasSelectedPlayerChanges = computed(() => {
+const leftNameChanged = computed(() => {
   const player = leftSelectedPlayer.value;
   if (!player) {
     return false;
   }
-  return player.gamertag !== leftPendingGamertag.value
+  return player.gamertag !== leftPendingGamertag.value;
-    || player.team !== scoreboardStore.scoreboard.leftTeamOverride
-    || player.country !== scoreboardStore.scoreboard.leftCountryOverride;
 });
 
-const rightHasSelectedPlayerChanges = computed(() => {
+const rightNameChanged = computed(() => {
   const player = rightSelectedPlayer.value;
   if (!player) {
     return false;
   }
-  return player.gamertag !== rightPendingGamertag.value
+  return player.gamertag !== rightPendingGamertag.value;
-    || player.team !== scoreboardStore.scoreboard.rightTeamOverride
-    || player.country !== scoreboardStore.scoreboard.rightCountryOverride;
 });
 
+const leftCanSaveNameChange = computed(
+  () => leftNameChanged.value && !playerExistsByGamertag(leftPendingGamertag.value),
+);
+
+const rightCanSaveNameChange = computed(
+  () => rightNameChanged.value && !playerExistsByGamertag(rightPendingGamertag.value),
+);
+
+const leftShowsNameSave = computed(() => leftCanSave.value || leftCanSaveNameChange.value);
+const rightShowsNameSave = computed(() => rightCanSave.value || rightCanSaveNameChange.value);
+
 const startLeftCustomPlayer = () => {
   const wasCustom = scoreboardStore.scoreboard.leftPlayerId === CUSTOM_LEFT_PLAYER_ID;
   scoreboardStore.scoreboard.leftPlayerId = CUSTOM_LEFT_PLAYER_ID;
@@ -372,7 +411,39 @@ const saveRightPlayer = () => {
   rightInput.value = gamertag;
 };
 
-const saveLeftSelectedPlayerChanges = () => {
+const saveLeftNameChange = () => {
+  const playerId = scoreboardStore.scoreboard.leftPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  if (!leftCanSaveNameChange.value) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
+    gamertag: leftPendingGamertag.value,
+  });
+  scoreboardStore.scoreboard.leftNameOverride = '';
+};
+
+const saveRightNameChange = () => {
+  const playerId = scoreboardStore.scoreboard.rightPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  if (!rightCanSaveNameChange.value) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
+    gamertag: rightPendingGamertag.value,
+  });
+  scoreboardStore.scoreboard.rightNameOverride = '';
+};
+
+const saveLeftTeamChange = () => {
   const playerId = scoreboardStore.scoreboard.leftPlayerId;
   const player = playersStore.players[playerId];
   if (!player) {
@@ -380,14 +451,11 @@ const saveLeftSelectedPlayerChanges = () => {
   }
   playersStore.upsertPlayer(playerId, {
     ...player,
-    gamertag: leftPendingGamertag.value,
     team: scoreboardStore.scoreboard.leftTeamOverride,
-    country: scoreboardStore.scoreboard.leftCountryOverride,
   });
-  scoreboardStore.scoreboard.leftNameOverride = '';
 };
 
-const saveRightSelectedPlayerChanges = () => {
+const saveRightTeamChange = () => {
   const playerId = scoreboardStore.scoreboard.rightPlayerId;
   const player = playersStore.players[playerId];
   if (!player) {
@@ -395,11 +463,48 @@ const saveRightSelectedPlayerChanges = () => {
   }
   playersStore.upsertPlayer(playerId, {
     ...player,
-    gamertag: rightPendingGamertag.value,
     team: scoreboardStore.scoreboard.rightTeamOverride,
+  });
+};
+
+const saveLeftCountryChange = () => {
+  const playerId = scoreboardStore.scoreboard.leftPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
+    country: scoreboardStore.scoreboard.leftCountryOverride,
+  });
+};
+
+const saveRightCountryChange = () => {
+  const playerId = scoreboardStore.scoreboard.rightPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
     country: scoreboardStore.scoreboard.rightCountryOverride,
   });
-  scoreboardStore.scoreboard.rightNameOverride = '';
+};
+
+const onLeftNameSave = () => {
+  if (leftCanSave.value) {
+    saveLeftPlayer();
+    return;
+  }
+  saveLeftNameChange();
+};
+
+const onRightNameSave = () => {
+  if (rightCanSave.value) {
+    saveRightPlayer();
+    return;
+  }
+  saveRightNameChange();
 };
 
 
@@ -504,14 +609,38 @@ watchEffect(() => {
               @focus="onLeftFocus"
               @blur="onLeftBlur"
               @update:model-value="onLeftSelect"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="leftShowsNameSave"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="onLeftNameSave"
+                />
+              </template>
+            </QSelect>
             <QInput
               v-model="scoreboardStore.scoreboard.leftTeamOverride"
               label="Team"
               dense
               outlined
               class="q-mt-sm"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="leftTeamChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveLeftTeamChange"
+                />
+              </template>
+            </QInput>
             <QSelect
               v-model="scoreboardStore.scoreboard.leftCountryOverride"
               v-model:input-value="leftCountryInput"
@@ -530,23 +659,19 @@ watchEffect(() => {
               outlined
               class="q-mt-sm"
               @filter="onLeftCountryFilter"
-            />
+            >
-            <QBtn
+              <template #append>
-              v-if="leftCanSave"
+                <QBtn
-              color="primary"
+                  v-if="leftCountryChanged"
-              icon="save"
+                  flat
-              label="Save player"
+                  round
-              class="q-mt-sm"
+                  dense
-              @click="saveLeftPlayer"
+                  icon="save"
-            />
+                  color="primary"
-            <QBtn
+                  @click.stop="saveLeftCountryChange"
-              v-if="leftHasSelectedPlayerChanges"
+                />
-              color="primary"
+              </template>
-              icon="save"
+            </QSelect>
-              label="Save player changes"
-              class="q-mt-sm q-ml-sm"
-              @click="saveLeftSelectedPlayerChanges"
-            />
             <QInput
               v-model.number="scoreboardStore.leftScore"
               type="number"
@@ -589,14 +714,38 @@ watchEffect(() => {
               @focus="onRightFocus"
               @blur="onRightBlur"
               @update:model-value="onRightSelect"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="rightShowsNameSave"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="onRightNameSave"
+                />
+              </template>
+            </QSelect>
             <QInput
               v-model="scoreboardStore.scoreboard.rightTeamOverride"
               label="Team"
               dense
               outlined
               class="q-mt-sm"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="rightTeamChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveRightTeamChange"
+                />
+              </template>
+            </QInput>
             <QSelect
               v-model="scoreboardStore.scoreboard.rightCountryOverride"
               v-model:input-value="rightCountryInput"
@@ -615,23 +764,19 @@ watchEffect(() => {
               outlined
               class="q-mt-sm"
               @filter="onRightCountryFilter"
-            />
+            >
-            <QBtn
+              <template #append>
-              v-if="rightCanSave"
+                <QBtn
-              color="primary"
+                  v-if="rightCountryChanged"
-              icon="save"
+                  flat
-              label="Save player"
+                  round
-              class="q-mt-sm"
+                  dense
-              @click="saveRightPlayer"
+                  icon="save"
-            />
+                  color="primary"
-            <QBtn
+                  @click.stop="saveRightCountryChange"
-              v-if="rightHasSelectedPlayerChanges"
+                />
-              color="primary"
+              </template>
-              icon="save"
+            </QSelect>
-              label="Save player changes"
-              class="q-mt-sm q-ml-sm"
-              @click="saveRightSelectedPlayerChanges"
-            />
             <QInput
               v-model.number="scoreboardStore.rightScore"
               type="number"