Show Status filter

Author: JanisV

backend/app.py

@@ -56,6 +56,25 @@ def coins(f):
     return data
 
 
+@app.get("/api/filters")
+def filters(f):
+    file = f
+    con = sqlite_connect(file)
+    cur = con.cursor()
+
+    res = cur.execute("""
+        SELECT DISTINCT status FROM coins
+    """)
+    data = res.fetchall()
+    con.close()
+
+    result = []
+    for record in data:
+        result.append(record[0])
+
+    return result
+
+
 @app.get("/api/coin_data")
 def coin_data(f, id):
     info_fields = ('coins.title', 'obverseimg.image', 'reverseimg.image',

frontend/src/App.vue

@@ -29,6 +29,7 @@ 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;
 
@@ -78,6 +79,7 @@ const handleRemoteFileSelected = async (file) => {
   const ret = await service.openRemoteFile(file);
   coinsList.value = ret.coinsList;
   collectionSettings.value = ret.collectionSettings;
+  statusesList.value = ret.statusesList;
 
   coinListViewRef.value.onOpenFile()
 }
@@ -95,6 +97,7 @@ const handleFileUpload = async (file) => {
   const ret = await service.openLocalFile(file);
   coinsList.value = ret.coinsList;
   collectionSettings.value = ret.collectionSettings;
+  statusesList.value = ret.statusesList;
 
   coinListViewRef.value.onOpenFile()
 }
@@ -147,7 +150,7 @@ const handleFileUpload = async (file) => {
         :file_list="serverFileList" :onFileSelected="handleRemoteFileSelected" />
       <KeepAlive>
         <CoinListView v-if="route.name === 'home' && isOpened"
-          :coins_list="coinsList" :settings="collectionSettings"
+          :coins_list="coinsList" :settings="collectionSettings" :statuses_list="statusesList"
           ref="coinListViewRef" />
       </KeepAlive>
       <CoinView v-if="route.name === 'coin' && isOpened"

frontend/src/components/CoinListView.vue

@@ -21,6 +21,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  statuses_list: {
+    type: Array,
+    required: true,
+  },
 });
 
 onMounted(async () => {
@@ -61,6 +65,13 @@ const loadImage = async (index, coinId) => {
 </script>
 
 <template>
+  <v-container>
+    <v-select v-if="statuses_list.length > 0"
+      :label="settings.fields['status']"
+      :items="statuses_list"
+      :item-title="item => settings.statuses[item]"
+    ></v-select>
+  </v-container>
   <v-container class="pa-0 ma-0">
     <v-list lines="two">
       <v-list-item

frontend/src/composables/useService.js

@@ -138,6 +138,7 @@ export function useService(passwordDialogRef) {
 
     let coinsList = [];
     let collectionSettings = await initSettings();
+    let statusesList = [];
     let settingsDb = {};
 
     await globalStatus.startLoading('Open collection');
@@ -172,6 +173,9 @@ export function useService(passwordDialogRef) {
         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
         }
         catch (err) {
           globalStatus.error.value = err
@@ -182,13 +186,14 @@ export function useService(passwordDialogRef) {
       }
     }
 
-    return {collectionSettings, coinsList};
+    return {collectionSettings, coinsList, statusesList};
   }
 
   const openLocalFile = async (file) => {
     connection_type = 'local';
 
     let coinsList = [];
+    let statusesList = [];
     let collectionSettings = await initSettings()
 
     await openDatabase(file)
@@ -232,10 +237,13 @@ export function useService(passwordDialogRef) {
             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]
       }
     }
 
-    return {collectionSettings, coinsList};
+    return {collectionSettings, coinsList, statusesList};
   }
 
   const loadImage = async (coinId, type) => {