- ADD: Added global search.

- CHG: Vuetifty update.
- FIX: npm audit fix.

package.json

@@ -22,7 +22,7 @@
     "vue-i18n": "^9.1.0",
     "vue-router": "^4.0.3",
     "vue-upload-component": "^3.1.8",
-    "vuetify": "^3.6.3",
+    "vuetify": "^3.6.12",
     "vuex": "^4.0.0",
     "vuex-persistedstate": "^4.1.0",
     "webfontloader": "^1.0.0"

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-main>
-      <v-app-bar color="grey-darken-4">
+      <v-app-bar color="grey-darken-4" :extension-height="60">
         <v-img
           class="ms-4"
           src="img/frickl.svg"
@@ -12,6 +12,28 @@
         <v-app-bar-title style="cursor: pointer" @click="$router.push({ name: 'home' })">Frickl</v-app-bar-title>
 
         <v-spacer></v-spacer>
+
+        <template #extension v-if="searchVisible">
+          <v-container>
+            <v-row justify="end">
+              <v-col cols="12">
+                <v-text-field
+                  autofocus
+                  name="name"
+                  v-model="searchTerm"
+                  :label="$t('formPlaceholderSearch')"
+                  density="compact"
+                  type="search"
+                  hide-details
+                  single-line
+                  append-inner-icon="mdi-magnify"
+                  @keyup.exact.enter="runSearch"
+                  @click:append-inner="runSearch" />
+              </v-col>
+            </v-row>
+          </v-container>
+        </template>
+
         <v-tooltip location="top" v-if="importStatus">
           <template #activator="{ props }">
             <v-progress-circular v-bind="props" color="primary" class="mx-3" indeterminate />
@@ -42,6 +64,7 @@
             </v-list>
           </v-card>
         </v-menu>
+        <v-btn icon="mdi-magnify" @click="searchVisible = !searchVisible"></v-btn>
         <v-btn icon="mdi-theme-light-dark" @click.stop="toggleTheme"></v-btn>
         <v-menu>
           <template v-slot:activator="{ props }">
@@ -175,7 +198,9 @@ export default {
       exportJobTimer: null,
       alertShown: false,
       alert: null,
-      downloadMenuShown: false
+      downloadMenuShown: false,
+      searchVisible: false,
+      searchTerm: ''
     }
   },
   computed: {
@@ -221,6 +246,11 @@ export default {
   },
   methods: {
     getNumberWithSuffix,
+    runSearch: function () {
+      this.$router.push({ name: 'search', params: { searchTerm: this.searchTerm } })
+      this.searchTerm = ''
+      this.searchVisible = false
+    },
     setCookies: function (value) {
       this.$store.dispatch('setCookiesAccepted', value)
     },

src/plugins/i18n/de_DE.json

@@ -54,6 +54,10 @@
   "pageAboutCardDockerText": "Interesse Frickl selber laufen zu lassen? Zieh ein Docker-Bild von Docker Hub.",
   "pageAboutCardSponsorTitle": "Sponsor",
   "pageAboutCardSponsorText": "Ist Frickl nützlich für dich? Unterstütze Sebastian damit er Frickl weiter entwickeln kann.",
+  "pageImagesTitle": "Bilder",
+  "pageAlbumsTitle": "Alben",
+  "pageSearchTitle": "Suche",
+  "pageSearchText": "Suchergebnisse",
   "selectOptionSortNewestImage": "Neustes Bild",
   "selectOptionSortCreatedOn": "Erstellt am",
   "selectOptionSortViewCount": "Betrachtungsanzahl",

src/plugins/i18n/en_GB.json

@@ -54,6 +54,10 @@
   "pageAboutCardDockerText": "Want to run Frickl yourself? Pull the Docker image from Docker Hub.",
   "pageAboutCardSponsorTitle": "Sponsor",
   "pageAboutCardSponsorText": "Has Frickl been useful to you? Please consider sponsoring Sebastian so he can continue the development of Frickl.",
+  "pageImagesTitle": "Images",
+  "pageAlbumsTitle": "Albums",
+  "pageSearchTitle": "Search",
+  "pageSearchText": "Seach results",
   "selectOptionSortNewestImage": "Newest image",
   "selectOptionSortCreatedOn": "Created on",
   "selectOptionSortViewCount": "View count",

src/router/index.js

@@ -9,6 +9,7 @@ import Tags from '@/views/Tags.vue'
 import Statistics from '@/views/StatisticsView.vue'
 import AlbumView from '@/views/AlbumView.vue'
 import UsersView from '@/views/UsersView.vue'
+import SearchView from '@/views/SearchView.vue'
 import Page403 from '@/components/error/Page403.vue'
 import store from '@/store'
 
@@ -53,6 +54,11 @@ const routes = [
     name: 'image-details',
     component: ImageDetails
   },
+  {
+    path: '/search/:searchTerm',
+    name: 'search',
+    component: SearchView
+  },
   {
     path: '/favorites',
     name: 'favorites',

src/views/AlbumView.vue

@@ -13,13 +13,13 @@
     </v-toolbar>
     <v-container>
       <h1 class="text-h4 mb-3">
-        Albums
+        {{ $t('pageAlbumsTitle') }}
       </h1>
       <v-divider class="mb-3" />
       <AlbumGallery :getData="getAlbums" :parentAlbumId="parentAlbumId" />
 
       <h1 class="text-h4 mb-3 mt-6">
-        Images
+        {{ $t('pageImagesTitle') }}
       </h1>
       <v-divider class="mb-3" />
       <ImageGallery :getData="getImages" :getIds="getIds" :albumId="parentAlbumId" />

src/views/SearchView.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-container fluid>
+    <h1 class="text-h4 mb-3">{{ $t('pageSearchTitle') }}</h1>
+    <v-divider class="mb-3" />
+    <div v-html="$t('pageSearchText')" />
+
+    <template v-if="searchTerm">
+      <h1 class="text-h4 mb-3">
+        {{ $t('pageAlbumsTitle') }}
+      </h1>
+      <v-divider class="mb-3" />
+      <AlbumGallery :getData="getAlbums" />
+
+      <h1 class="text-h4 mb-3 mt-6">
+        {{ $t('pageImagesTitle') }}
+      </h1>
+      <v-divider class="mb-3" />
+      <ImageGallery :getData="getImages" :getIds="getIds" />
+    </template>
+  </v-container>
+</template>
+
+<script>
+import ImageGallery from '@/components/ImageGallery.vue'
+import AlbumGallery from '@/components/AlbumGallery.vue'
+import { apiPostAlbums, apiPostImageIds, apiPostImages } from '@/plugins/api'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    ImageGallery,
+    AlbumGallery
+  },
+  data: function () {
+    return {
+      searchTerm: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'storeToken'
+    ])
+  },
+  methods: {
+    getAlbums: function (params) {
+      const adjusted = Object.assign({}, params, { searchTerm: this.searchTerm })
+      return apiPostAlbums(adjusted)
+    },
+    getImages: function (params) {
+      const adjusted = Object.assign({}, params, { searchTerm: this.searchTerm })
+      return apiPostImages(adjusted)
+    },
+    getIds: function (params) {
+      const adjusted = Object.assign({}, params, { searchTerm: this.searchTerm })
+      return apiPostImageIds(adjusted)
+    }
+  },
+  mounted: function () {
+    if (this.$route.params && this.$route.params.searchTerm) {
+      this.searchTerm = this.$route.params.searchTerm
+    }
+  }
+}
+</script>