Make selectedSignals a set, add some emitted actions

ts/components/PlanningColumnAction.vue

@@ -75,7 +75,7 @@
 <script setup lang="ts">
 interface Props {
 	creating: boolean;
-	selectedSignals: int[];
+	selectedSignals: Set<int>;
 }
 const props = defineProps<Props>();
 </script>

ts/components/PlanningColumnDetail.vue

@@ -105,12 +105,13 @@
 <script setup lang="ts">
 import MapMultipoint from "./MapMultipoint.vue";
 import MapProxiedArcgisTile from "./MapProxiedArcgisTile.vue";
+import { shortAddress } from "../format";
 import TimeRelative from "./TimeRelative.vue";
 import { useUserStore } from "../store/user";
 
 interface Props {
 	markers: Marker[];
-	selectedSignals: int[];
+	selectedSignals: Set<int>;
 }
 const props = defineProps<Props>();
 const user = useUserStore();
@@ -144,19 +145,23 @@ const configureMapTile = () => {
 };
 
 const selectedSignalLocation = () => {
-	const first_pool = props.selectedSignals.reduce((accumulator, current) => {
-		if (accumulator == null && current.type === "flyover pool") {
-			return current;
-		}
-		return accumulator;
-	}, null);
+	const first_pool = props.selectedSignals
+		.values()
+		.reduce((accumulator, current) => {
+			if (accumulator == null && current.type === "flyover pool") {
+				return current;
+			}
+			return accumulator;
+		}, null);
 	return first_pool?.location;
 };
 const showMapTile = () => {
-	return props.selectedSignals.value.reduce(
-		(accumulator, current) => accumulator || current.type === "flyover pool",
-		false,
-	);
+	return props.selectedSignals.value
+		.values()
+		.reduce(
+			(accumulator, current) => accumulator || current.type === "flyover pool",
+			false,
+		);
 };
 const updateSignalLocation = (event) => {
 	const signalId = event.detail.signalId;

ts/components/PlanningColumnList.vue

@@ -118,8 +118,8 @@
 				<div class="mb-3">
 					<div class="fw-semibold mb-2">
 						Signals
-						<span class="badge bg-primary" v-show="selectedSignals.length > 0">
-							{{ selectedSignals.length }}
+						<span class="badge bg-primary" v-show="selectedSignals.size > 0">
+							{{ selectedSignals.size }}
 						</span>
 					</div>
 
@@ -204,15 +204,22 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { shortAddress } from "../format";
 
+interface Emits {
+	(e: "refresh"): void;
+	(e: "signalDeselect", integer): void;
+	(e: "signalSelect", integer): void;
+}
 interface Props {
 	error: string | null;
 	leads: Lead[] | null;
 	loading: boolean;
 	planFollowups: Followup[] | null;
-	selectedSignals: int[];
+	selectedSignals: Set<int>;
 	signals: Signal[] | null;
 }
+const emit = defineEmits<Emits>();
 const props = defineProps<Props>();
 const filters = ref({
 	species: "",
@@ -220,10 +227,13 @@ const filters = ref({
 	sort: "newest",
 });
 const isSelected = (id) => {
-	return props.selectedSignals.some((s) => s.id === id);
+	return props.selectedSignals.values().some((s) => s.id === id);
 };
-const shortAddress = (a) => {
-	if (!a) return "";
-	return `${a.number} ${a.street}, ${a.locality}`;
+const toggleSignal = (signal: int) => {
+	if (props.selectedSignals.has(signal)) {
+		emit("signalDeselect", signal);
+	} else {
+		emit("signalSelect", signal);
+	}
 };
 </script>

ts/view/Planning.vue

@@ -24,7 +24,10 @@
 				:leads="leads"
 				:loading="loading"
 				:planFollowups="planFollowups"
+				@refresh="refresh"
 				:selectedSignals="selectedSignals"
+				@signalDeselect="signalDeselect"
+				@signalSelect="signalSelect"
 				:signals="signal.all"
 			/>
 		</template>
@@ -43,7 +46,7 @@
 	</ThreeColumn>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, ref, onMounted, nextTick } from "vue";
 
 import MapMultipoint from "../components/MapMultipoint.vue";
@@ -67,7 +70,7 @@ const leads = ref([]);
 const loading = ref(false);
 const planFollowups = ref([]);
 const poolLocations = ref({});
-const selectedSignals = ref([]);
+const selectedSignals = ref(new Set([]));
 const signal = useSignalStore();
 const user = useUserStore();
 
@@ -148,11 +151,11 @@ const loadPlanFollowups = async () => {
 };
 
 const clearSelection = () => {
-	selectedSignals.value = [];
+	selectedSignals.value.clear();
 };
 
 const createLead = async () => {
-	if (selectedSignals.value.length === 0) return;
+	if (selectedSignals.value.size === 0) return;
 
 	creating.value = true;
 
@@ -188,7 +191,7 @@ const createLead = async () => {
 };
 
 const markAsAddressed = async () => {
-	if (selectedSignals.value.length === 0) return;
+	if (selectedSignals.value.size === 0) return;
 
 	try {
 		const response = await fetch(`${apiBase.value}/signal/mark-addressed`, {
@@ -216,21 +219,15 @@ const markAsAddressed = async () => {
 		alert(`Failed to mark signals: ${err.message}`);
 	}
 };
-
-const toggleSignal = (signal) => {
-	const index = selectedSignals.value.findIndex((s) => s.id === signal.id);
-
-	if (index > -1) {
-		selectedSignals.value.splice(index, 1);
-	} else {
-		selectedSignals.value.push(signal);
-	}
-
-	updateMap(selectedSignals.value);
-
-	console.log("show tile", showMapTile.value);
+const refresh = () => {
+	signal.fetchAll();
+};
+const signalDeselect = (id: int) => {
+	selectedSignals.value.delete(id);
+};
+const signalSelect = (id: int) => {
+	selectedSignals.value.add(id);
 };
-
 // Lifecycle
 onMounted(() => {
 	loadData();