Merge pull request #36 from marvin-wtt/feat/swap-prev-group

feat: add label of the previous group to the swap icon

Author: marvin-wtt

src/components/BaseFlight.vue

@@ -24,7 +24,7 @@
           <base-vehicle-group
             v-for="(group, i) in flightSeries.vehicleGroups"
             :key="`vg-${i}`"
-            :label="`Group ${String.fromCharCode(65 + i)}`"
+            :label="`Group ${vehicleGroupLabel(i)}`"
             :flight-series
             :flight-leg
             :group
@@ -61,6 +61,7 @@ import { useFlightStore } from 'stores/flight';
 import { useProjectSettings } from 'src/composables/projectSettings';
 import { validateFlightLegAndSeries } from 'src/util/flight-validator';
 import { NULL_ID } from 'app/src-common/constants';
+import { vehicleGroupLabel } from 'src/util/group';
 
 const flightStore = useFlightStore();
 const { availablePeople, availableCars, availableBalloons } =

src/components/BaseVehiclePersonCell.vue

@@ -29,7 +29,7 @@
 
       <div
         v-if="status"
-        class="q-ml-xs"
+        class="q-ml-xs no-wrap row items-center"
       >
         <q-icon
           :name="status.icon"
@@ -41,6 +41,14 @@
             {{ status.text }}
           </q-tooltip>
         </q-icon>
+
+        <span
+          v-if="status.suffix"
+          class="status-suffix"
+          :class="`text-${status.color}`"
+        >
+          {{ status.suffix }}
+        </span>
       </div>
     </div>
 
@@ -104,6 +112,7 @@ import { useQuasar } from 'quasar';
 import { useProjectStore } from 'stores/project';
 import { useProjectSettings } from 'src/composables/projectSettings';
 import PersonInfoMenu from 'components/PersonInfoMenu.vue';
+import { vehicleGroupLabel } from 'src/util/group';
 
 const quasar = useQuasar();
 const projectStore = useProjectStore();
@@ -149,6 +158,7 @@ interface StatusInfo {
   color: string;
   text: string;
   icon: string;
+  suffix?: string | undefined;
 }
 
 const flightsLabel = computed<string>(() => {
@@ -185,7 +195,7 @@ const status = computed<StatusInfo | undefined>(() => {
     operatorInfo.value,
     multiLegStatus.value,
     languageStatus.value,
-  ].filter((info) => info !== false)[0];
+  ].find((info): info is StatusInfo => info !== false);
 });
 
 const overfillStatus: StatusInfo | false = overfilled
@@ -280,6 +290,7 @@ const multiLegStatus = computed<StatusInfo | false>(() => {
     icon: 'sym_o_swap_horiz',
     color: 'negative',
     text: `${person.name} was assigned to different group in previous flight`,
+    suffix: findPreviousGroupLabel(person.id),
   };
 });
 
@@ -334,13 +345,15 @@ function onDragEnd() {
   if (!person) {
     return;
   }
+
   removePersonFromVehicle(person.id);
 }
 
 function onEdit() {
   if (!project.value || !person) {
     return;
   }
+
   quasar
     .dialog({
       component: EditPersonDialog,
@@ -381,21 +394,63 @@ function wasInSameVehicleGroupInPreviousLeg(personId: string): boolean {
     return false;
   }
 
-  // Collect all vehicle IDs of this group
   const groupVehicleIds = [group.balloonId, ...group.carIds];
 
-  // Check if person was in any of these vehicles in the first leg
   return groupVehicleIds.some((vid) => {
     const assignment = previousLeg.assignments[vid];
     if (!assignment) {
       return false;
     }
+
     return (
       assignment.operatorId === personId ||
       assignment.passengerIds.includes(personId)
     );
   });
 }
+
+function findPreviousGroupLabel(personId: string): string | undefined {
+  if (isFirstLeg.value) {
+    return undefined;
+  }
+
+  const idx = flightSeries.legs.findIndex((l) => l.id === flightLeg.id);
+  const previousLeg = flightSeries.legs[idx - 1];
+  if (!previousLeg) {
+    return undefined;
+  }
+
+  const previousGroupIndex = flightSeries.vehicleGroups
+    .map((group) => [group.balloonId, ...group.carIds])
+    .findIndex((vehicleIds) => {
+      return vehicleIds.some((vehicleId) => {
+        const assignment = previousLeg.assignments[vehicleId];
+        if (!assignment) {
+          return false;
+        }
+
+        return (
+          assignment.operatorId === personId ||
+          assignment.passengerIds.includes(personId)
+        );
+      });
+    });
+
+  if (previousGroupIndex === -1) {
+    return undefined;
+  }
+
+  return vehicleGroupLabel(previousGroupIndex);
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+/* Compact “badge-like” suffix aligned to the icon */
+.status-suffix {
+  margin-left: 2px;
+  font-size: 0.8em;
+  line-height: 1;
+  font-weight: 600;
+  vertical-align: middle;
+}
+</style>

src/components/PersonInfoMenu.vue

@@ -163,6 +163,7 @@ import type {
 } from 'app/src-common/entities';
 import { storeToRefs } from 'pinia';
 import { useProjectStore } from 'stores/project';
+import { vehicleGroupLabel } from 'src/util/group';
 
 const projectStore = useProjectStore();
 const { project } = storeToRefs(projectStore);
@@ -245,7 +246,7 @@ function buildHistoryForSeriesList(
             group.balloonId === vehicleId || group.carIds.includes(vehicleId),
         );
         const groupLetter =
-          groupIndex >= 0 ? String.fromCharCode(65 + groupIndex) : undefined;
+          groupIndex >= 0 ? vehicleGroupLabel(groupIndex) : undefined;
 
         const existing = vehicleMapForSeries.get(vehicleId);
 

src/util/group.ts

@@ -0,0 +1,3 @@
+export function vehicleGroupLabel(index: number): string {
+  return String.fromCharCode(65 + index);
+}