Add searching

Author: JanisV

backend/app.py

@@ -42,7 +42,7 @@ def filelist():
 
 
 @app.get("/api/coins")
-def coins(f, sort=None, reverse: bool = False, status_filter=None, country_filter=None, series_filter=None, type_filter=None,
+def coins(f, search=None, sort=None, reverse: bool = False, status_filter=None, country_filter=None, series_filter=None, type_filter=None,
           period_filter=None, mint_filter=None):
     file = f
     con = sqlite_connect(file)
@@ -55,6 +55,9 @@ def coins(f, sort=None, reverse: bool = False, status_filter=None, country_filte
 
     params = []
     sql_filters = []
+    if search:
+        sql_filters.append("title LIKE ?")
+        params.append(f"%{search}%")
     if status_filter:
         sql_filters.append("status = ?")
         params.append(status_filter)

frontend/src/components/CoinListView.vue

@@ -8,12 +8,14 @@ import {convertFraction, formatYear} from "@/utils/formatter.js";
 import {useService} from "@/composables/useService.js";
 import FilterItem from "@/components/FilterItem.vue";
 import SortItem from "@/components/SortItem.vue";
+import i18n from "@/i18n/index.js";
 
 const router = useRouter()
 const service = useService();
 
 const images = ref([])
 const coinsList = ref([])
+const searchVal = ref(null)
 const sortedBy = ref(null)
 const reverseSort = ref(false)
 const selectedStatus = ref(null)
@@ -41,6 +43,7 @@ onUnmounted(async () => {
 })
 
 const onOpenFile = async () => {
+  searchVal.value = null
   sortedBy.value = null
   reverseSort.value = false
   selectedStatus.value = null
@@ -90,21 +93,9 @@ function generateDescription( coin_data ) {
   return desc;
 }
 
-const onFilterChanged = async (field, val) => {
-  coinsList.value = await service.loadCoins(
-      sortedBy.value,
-      reverseSort.value,
-      selectedStatus.value,
-      selectedCountry.value,
-      selectedSeries.value,
-      selectedType.value,
-      selectedPeriod.value,
-      selectedMint.value
-  );
-}
-
-const onSortByChanged = async (val) => {
+const onChanged = async () => {
   coinsList.value = await service.loadCoins(
+      searchVal.value,
       sortedBy.value,
       reverseSort.value,
       selectedStatus.value,
@@ -123,16 +114,26 @@ const loadImage = async (index, coinId) => {
 
 <template>
   <v-container>
-    <SortItem :fields="fields" :settings="settings" @sort-by-changed="onSortByChanged" v-model="sortedBy" v-model:reverse="reverseSort" />
+    <SortItem :fields="fields" :settings="settings" @sort-by-changed="onChanged" v-model="sortedBy" v-model:reverse="reverseSort" />
+  </v-container>
+
+  <v-container>
+    <FilterItem :filters="filters['status']" field="status" :settings="settings" @filter-changed="onChanged" v-model="selectedStatus" />
+    <FilterItem :filters="filters['country']" field="country" :settings="settings" @filter-changed="onChanged" v-model="selectedCountry" />
+    <FilterItem :filters="filters['series']" field="series" :settings="settings" @filter-changed="onChanged" v-model="selectedSeries" />
+    <FilterItem :filters="filters['type']" field="type" :settings="settings" @filter-changed="onChanged" v-model="selectedType" />
+    <FilterItem :filters="filters['period']" field="period" :settings="settings" @filter-changed="onChanged" v-model="selectedPeriod" />
+    <FilterItem :filters="filters['mint']" field="mint" :settings="settings" @filter-changed="onChanged" v-model="selectedMint" />
   </v-container>
 
   <v-container>
-    <FilterItem :filters="filters['status']" field="status" :settings="settings" @filter-changed="onFilterChanged" v-model="selectedStatus" />
-    <FilterItem :filters="filters['country']" field="country" :settings="settings" @filter-changed="onFilterChanged" v-model="selectedCountry" />
-    <FilterItem :filters="filters['series']" field="series" :settings="settings" @filter-changed="onFilterChanged" v-model="selectedSeries" />
-    <FilterItem :filters="filters['type']" field="type" :settings="settings" @filter-changed="onFilterChanged" v-model="selectedType" />
-    <FilterItem :filters="filters['period']" field="period" :settings="settings" @filter-changed="onFilterChanged" v-model="selectedPeriod" />
-    <FilterItem :filters="filters['mint']" field="mint" :settings="settings" @filter-changed="onFilterChanged" v-model="selectedMint" />
+    <v-text-field
+        v-model="searchVal"
+        :label="i18n.global.t('Search')"
+        clearable
+        @change="onChanged"
+        @click:clear="onChanged"
+    />
   </v-container>
 
   <v-container class="pa-0 ma-0">

frontend/src/composables/useService.js

@@ -256,20 +256,21 @@ export function useService(passwordDialogRef) {
     return {collectionSettings, collectionFilters};
   }
 
-  const loadCoins = async (sortBy=null, reverse=false, statusFilter=null, countryFilter=null,
+  const loadCoins = async (search=null, sortBy=null, reverse=false, statusFilter=null, countryFilter=null,
                            seriesFilter=null, typeFilter=null, periodFilter=null, mintFilter=null) => {
     if (connection_type === 'local')
-      return loadCoinsLocal(sortBy, reverse, statusFilter, countryFilter, seriesFilter, typeFilter, periodFilter, mintFilter);
+      return loadCoinsLocal(search, sortBy, reverse, statusFilter, countryFilter, seriesFilter, typeFilter, periodFilter, mintFilter);
     else if (connection_type === 'remote')
-      return loadCoinsRemote(sortBy, reverse, statusFilter, countryFilter, seriesFilter, typeFilter, periodFilter, mintFilter, connected_file);
+      return loadCoinsRemote(search, sortBy, reverse, statusFilter, countryFilter, seriesFilter, typeFilter, periodFilter, mintFilter, connected_file);
   }
 
-  const loadCoinsRemote = async (sortBy, reverse, statusFilter, countryFilter, seriesFilter, typeFilter, periodFilter, mintFilter, file) => {
+  const loadCoinsRemote = async (search, sortBy, reverse, statusFilter, countryFilter, seriesFilter, typeFilter, periodFilter, mintFilter, file) => {
     let coinsList = [];
 
     try {
       const responseCoins = await api.get('/api/coins', {params: {
           f: file,
+          search: search,
           sort: sortBy,
           reverse: reverse,
           status_filter: statusFilter,
@@ -288,7 +289,7 @@ export function useService(passwordDialogRef) {
     return coinsList;
   }
 
-  const loadCoinsLocal = async (sortBy, reverse, statusFilter, countryFilter, seriesFilter, typeFilter, periodFilter, mintFilter) => {
+  const loadCoinsLocal = async (search, sortBy, reverse, statusFilter, countryFilter, seriesFilter, typeFilter, periodFilter, mintFilter) => {
     let coinsList = [];
 
     let sql = `
@@ -297,6 +298,10 @@ export function useService(passwordDialogRef) {
       `
     let params = [];
     let sql_filters = [];
+    if (search) {
+      sql_filters.push("title LIKE ?")
+      params.push(`%${search}%`);
+    }
     if (statusFilter) {
       sql_filters.push('status = ?')
       params.push(statusFilter);