fix: billingAddressTab and lineMap reactivity on props change

src/components/maps/LineMap.vue

@@ -3,16 +3,21 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted, onBeforeUnmount, watch, shallowRef, onUpdated } from 'vue'
+  import { ref, toRef, computed, onMounted, onBeforeUnmount, watch, shallowRef, onUpdated } from 'vue'
   import * as am5 from '@amcharts/amcharts5'
   import * as am5map from '@amcharts/amcharts5/map'
   import am5geodata_worldLow from '@amcharts/amcharts5-geodata/worldLow'
   import am5themes_Animated from '@amcharts/amcharts5/themes/Animated'
   import { useGlobalConfig, useColors } from 'vuestic-ui'
 
-  import { planeSVG, useMapData, CityItem, getGeoBounds, generateLineSeriesData } from '../../data/maps/lineMapData'
-
-  const compareStrings = (first: string, second: string) => first.toLowerCase() === second.toLowerCase()
+  import {
+    planeSVG,
+    useMapData,
+    CityItem,
+    getGeoBounds,
+    generateLineSeriesData,
+    compareStrings,
+  } from '../../data/maps/lineMapData'
 
   const generateLabelText = (city?: string) => (city ? `Flights from ${city}` : '')
 
@@ -59,7 +64,7 @@
     },
   })
 
-  const mapPointSeriesData = useMapData(props.mapData)
+  const mapPointSeriesData = useMapData(toRef(props, 'mapData'))
 
   const mapLineSeriesData = computed(() => {
     const item = getItemByMainCityTitle()

src/data/maps/LineMapData.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef } from '@vue/reactivity'
+import { computed, ComputedRef, Ref } from '@vue/reactivity'
 import { useColors } from 'vuestic-ui'
 
 type GeoBounds = {
@@ -296,11 +296,11 @@ export const lineMapData = {
   homeCity: london.title,
 }
 
-export const useMapData = (data: CityItem[]): ComputedRef<CityItem[]> => {
+export const useMapData = (data: Ref<CityItem[]>): ComputedRef<CityItem[]> => {
   const { getColor } = useColors()
 
   return computed(() =>
-    data.map((item) => ({
+    data.value.map((item) => ({
       ...item,
       color: getColor(item.color),
     })),
@@ -338,3 +338,5 @@ export const generateLineSeriesData = (item?: CityItem): DataGeometry[] | undefi
     },
   }))
 }
+
+export const compareStrings = (first: string, second: string) => first.toLowerCase() === second.toLowerCase()

src/pages/admin/dashboard/DashboardMap.vue

@@ -12,23 +12,20 @@
   import { useI18n } from 'vue-i18n'
 
   import LineMap from '../../../components/maps/LineMap.vue'
-  import { lineMapData } from '../../../data/maps/lineMapData'
+  import { lineMapData, compareStrings } from '../../../data/maps/lineMapData'
 
   const { t } = useI18n()
 
   const cities = ref(lineMapData.cities)
   const mainCity = ref('Vilnius')
   const homeCity = ref('Vilnius')
 
-  function addAddress(address: { city: { text: string }; country: string }) {
-    address
-    // lineMapData.value = {
-    //   ...lineMapData.value,
-    //   cities: lineMapData.value.cities.map((city) => ({
-    //     ...city,
-    //     // color: city.title === address.city ? theme.value.success : city.color,
-    //   })),
-    // }
+  function addAddress(address: { city: string; country: string }) {
+    cities.value = cities.value.map((mapItem) =>
+      compareStrings(mapItem.title, address.city) && compareStrings(mapItem.country, address.country)
+        ? { ...mapItem, color: 'success' }
+        : mapItem,
+    )
   }
 
   defineExpose({ addAddress })

src/pages/admin/dashboard/dashboard-tabs/BillingAddressTab.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onMounted, ref, watch } from 'vue'
+  import { computed, onMounted, reactive, ref, watch } from 'vue'
   import { useGlobalConfig } from 'vuestic-ui'
   import { useI18n } from 'vue-i18n'
   import { lineMapData } from '../../../../data/maps/lineMapData'
@@ -50,10 +50,10 @@
   const { t } = useI18n()
 
   const emit = defineEmits<{
-    (e: 'submit', data: typeof form['value']): void
+    (e: 'submit', data: typeof form): void
   }>()
 
-  const form = ref({
+  const form = reactive({
     name: 'John Smith',
     email: '[email protected]',
     address: '93  Guild Street',
@@ -77,21 +77,25 @@
   const computedStylesTitle = computed(() => ({ color: theme.value.dark }))
 
   watch(
-    form,
-    () => {
-      allowedCitiesList.value = form.value.country
-        ? citiesList.value.filter(({ country }) => country === form.value.country)
+    () => form.country,
+    (newCountry, oldCountry) => {
+      allowedCitiesList.value = form.country
+        ? citiesList.value.filter(({ country }) => country === form.country)
         : [...citiesList.value]
+
+      if (newCountry !== oldCountry) {
+        const city = allowedCitiesList.value.find(({ country }) => country === newCountry)?.text || ''
+        form.city = { text: city }
+      }
     },
-    { deep: true },
   )
 
   onMounted(() => {
     allowedCitiesList.value = [...citiesList.value]
   })
 
   function submit() {
-    emit('submit', form.value)
+    emit('submit', form)
   }
 </script>