Apply Status filter

Author: JanisV

backend/app.py

@@ -36,15 +36,22 @@ def filelist():
 
 
 @app.get("/api/coins")
-def coins(f):
+def coins(f, status_filter=None):
     file = f
     con = sqlite_connect(file)
     cur = con.cursor()
 
-    res = cur.execute("""
+    sql = """
         SELECT coins.id, images.image, title, status, subjectshort, value, unit, year, mintmark, series, country
         FROM coins LEFT OUTER JOIN images ON images.id = coins.image
-    """)
+    """
+
+    params = []
+    if status_filter:
+        sql += " WHERE status = ?"
+        params.append(status_filter)
+
+    res = cur.execute(sql, params)
     data = res.fetchall()
     con.close()
 

frontend/src/App.vue

@@ -28,7 +28,6 @@ const hasWarning = globalStatus.hasWarning;
 const isServerLess = import.meta.env.VITE_SERVERLESS;
 const selectedFile = ref(null)
 const serverFileList = ref([])
-const coinsList = ref([])
 const statusesList = ref([])
 const collectionSettings = ref({})
 let isOpened = false;
@@ -70,14 +69,12 @@ const handleRemoteFileSelected = async (file) => {
   if (!file)
     return;
 
-  coinsList.value = [];
   selectedFile.value = file;
   isOpened = true;
   await router.replace('/')
   appTitle.pushTitle(file)
 
   const ret = await service.openRemoteFile(file);
-  coinsList.value = ret.coinsList;
   collectionSettings.value = ret.collectionSettings;
   statusesList.value = ret.statusesList;
 
@@ -88,14 +85,12 @@ const handleFileUpload = async (file) => {
   if (!file)
     return;
 
-  coinsList.value = [];
   selectedFile.value = file;
   isOpened = true;
   await router.replace('/')
   appTitle.pushTitle(file.name)
 
   const ret = await service.openLocalFile(file);
-  coinsList.value = ret.coinsList;
   collectionSettings.value = ret.collectionSettings;
   statusesList.value = ret.statusesList;
 
@@ -150,7 +145,7 @@ const handleFileUpload = async (file) => {
         :file_list="serverFileList" :onFileSelected="handleRemoteFileSelected" />
       <KeepAlive>
         <CoinListView v-if="route.name === 'home' && isOpened"
-          :coins_list="coinsList" :settings="collectionSettings" :statuses_list="statusesList"
+          :settings="collectionSettings" :statuses_list="statusesList"
           ref="coinListViewRef" />
       </KeepAlive>
       <CoinView v-if="route.name === 'coin' && isOpened"

frontend/src/components/CoinListView.vue

@@ -11,12 +11,9 @@ const router = useRouter()
 const service = useService();
 
 const images = ref([])
+const coinsList = ref([])
 
 const props = defineProps({
-  coins_list: {
-    type: Array,
-    required: true,
-  },
   settings: {
     type: Object,
     required: true,
@@ -32,8 +29,11 @@ onMounted(async () => {
 onUnmounted(async () => {
 })
 
-const onOpenFile = () => {
-  images.value = new Array(props.coins_list.length).fill('')
+const onOpenFile = async () => {
+  images.value = []
+  coinsList.value = []
+  coinsList.value = await service.loadCoins()
+  images.value = new Array(coinsList.value.length).fill('')
 }
 
 defineExpose({
@@ -59,6 +59,10 @@ function generateDescription( coin_data ) {
   return desc;
 }
 
+const onStatusFilterChange = async (val) => {
+  coinsList.value = await service.loadCoins(val);
+}
+
 const loadImage = async (index, coinId) => {
   images.value[index] = await service.loadImage(coinId, imagePresentation.value);
 }
@@ -70,12 +74,14 @@ const loadImage = async (index, coinId) => {
       :label="settings.fields['status']"
       :items="statuses_list"
       :item-title="item => settings.statuses[item]"
+      @update:modelValue="onStatusFilterChange"
+      return-object
     ></v-select>
   </v-container>
   <v-container class="pa-0 ma-0">
     <v-list lines="two">
       <v-list-item
-        v-for="(coin, index) in coins_list"
+        v-for="(coin, index) in coinsList"
         :key="coin[0]"
         :subtitle="generateDescription(coin).join(', ')"
         :title="coin[2]"

frontend/src/composables/useService.js

@@ -136,7 +136,6 @@ export function useService(passwordDialogRef) {
     connection_type = 'remote';
     connected_file = file;
 
-    let coinsList = [];
     let collectionSettings = await initSettings();
     let statusesList = [];
     let settingsDb = {};
@@ -171,9 +170,6 @@ export function useService(passwordDialogRef) {
         await globalStatus.startLoading('Load collection');
 
         try {
-          const responseCoins = await api.get('/api/coins', {params: {f: file}})
-          coinsList = responseCoins.data
-
           const responseFilters = await api.get('/api/filters', {params: {f: file}})
           statusesList = responseFilters.data
         }
@@ -186,13 +182,12 @@ export function useService(passwordDialogRef) {
       }
     }
 
-    return {collectionSettings, coinsList, statusesList};
+    return {collectionSettings, statusesList};
   }
 
   const openLocalFile = async (file) => {
     connection_type = 'local';
 
-    let coinsList = [];
     let statusesList = [];
     let collectionSettings = await initSettings()
 
@@ -232,18 +227,50 @@ export function useService(passwordDialogRef) {
     if (versionValid) {
       const passwordValid = await checkDbPassword(collectionSettings)
       if (passwordValid) {
-        const sql = `
-            SELECT coins.id, images.image, title, status, subjectshort, value, unit, year, mintmark, series, country
-            FROM coins LEFT OUTER JOIN images ON images.id = coins.image
-          `
-        coinsList = await executeQuery(sql)
-
         const sql_statuses = 'SELECT DISTINCT status FROM coins';
-        statusesList = (await executeQuery(sql_statuses))[0]
+        statusesList = (await executeQuery(sql_statuses)).flat()
       }
     }
 
-    return {collectionSettings, coinsList, statusesList};
+    return {collectionSettings, statusesList};
+  }
+
+  const loadCoins = async (statusFilter=null) => {
+    if (connection_type === 'local')
+      return loadCoinsLocal(statusFilter);
+    else if (connection_type === 'remote')
+      return loadCoinsRemote(statusFilter, connected_file);
+  }
+
+  const loadCoinsRemote = async (statusFilter, file) => {
+    let coinsList = [];
+
+    try {
+      const responseCoins = await api.get('/api/coins', {params: {f: file, status_filter: statusFilter}})
+      coinsList = responseCoins.data
+    }
+    catch (err) {
+      globalStatus.error.value = err
+    }
+
+    return coinsList;
+  }
+
+  const loadCoinsLocal = async (statusFilter) => {
+    let coinsList = [];
+
+    let sql = `
+        SELECT coins.id, images.image, title, status, subjectshort, value, unit, year, mintmark, series, country
+        FROM coins LEFT OUTER JOIN images ON images.id = coins.image
+      `
+    let params = [];
+    if (statusFilter) {
+      sql += ' WHERE status = ?';
+      params.push(statusFilter);
+    }
+    coinsList = await executeQuery(sql, params)
+
+    return coinsList;
   }
 
   const loadImage = async (coinId, type) => {
@@ -421,6 +448,7 @@ export function useService(passwordDialogRef) {
     getServerFileList,
     openRemoteFile,
     openLocalFile,
+    loadCoins,
     loadImage,
     getDetails,
     getPhotos,