Clear coin list before opening new collection or apply filter

Author: JanisV

frontend/src/App.vue

@@ -70,9 +70,16 @@ const openFile = async (file, connection_type) => {
   if (!file)
     return;
 
-  collectionFilters.value = {'status': [], 'country': [], 'series': [], 'type': [], 'period': [], 'mint': []}
-  isOpened = true;
+  watch(coinListViewRef, (newVal) => {
+    if (newVal) {
+      coinListViewRef.value.clear()
+    }
+  })
+
   await router.replace('/')
+  isOpened = true;
+
+  collectionFilters.value = {'status': [], 'country': [], 'series': [], 'type': [], 'period': [], 'mint': []}
   let ret = null
 
   if (connection_type === 'remote') {
@@ -90,7 +97,7 @@ const openFile = async (file, connection_type) => {
     collectionSettings.value = ret.collectionSettings;
     collectionFilters.value = ret.collectionFilters;
 
-    coinListViewRef.value.onOpenFile()
+    await coinListViewRef.value.onOpenFile()
   }
 }
 

frontend/src/components/CoinListView.vue

@@ -43,17 +43,6 @@ onUnmounted(async () => {
 })
 
 const onOpenFile = async () => {
-  searchVal.value = null
-  sortedBy.value = null
-  reverseSort.value = false
-  selectedStatus.value = null
-  selectedCountry.value = null
-  selectedSeries.value = null
-  selectedType.value = null
-  selectedPeriod.value = null
-  selectedMint.value = null
-  images.value = []
-  coinsList.value = []
   coinsList.value = await service.loadCoins()
   images.value = new Array(coinsList.value.length).fill('')
 
@@ -70,8 +59,23 @@ const onOpenFile = async () => {
     fields.value.push('period')
 }
 
+const clear = async () => {
+  searchVal.value = null
+  sortedBy.value = null
+  reverseSort.value = false
+  selectedStatus.value = null
+  selectedCountry.value = null
+  selectedSeries.value = null
+  selectedType.value = null
+  selectedPeriod.value = null
+  selectedMint.value = null
+  images.value = []
+  coinsList.value = []
+}
+
 defineExpose({
-  onOpenFile
+  onOpenFile,
+  clear
 })
 
 function generateDescription( coin_data ) {
@@ -94,6 +98,8 @@ function generateDescription( coin_data ) {
 }
 
 const onChanged = async () => {
+  images.value = []
+  coinsList.value = []
   coinsList.value = await service.loadCoins(
       searchVal.value,
       sortedBy.value,