Add example app grid filtering

dashboard/src/components/AppsView.vue

@@ -1,20 +1,23 @@
 <template>
   <div class="content">
-    <h1 class="section-header">{{ $t('apps.title') }}</h1>
+    <h1 class="section-header">
+      {{ $t('apps.title') }}
+      <TextInput v-model="filter" placeholder="Filter ..." />
+    </h1>
 
-    <div class="grid">
-      <a v-for="app in apps" :key="app.id" class="item" :href="'https://' + app.fqdn" target="_blank" v-tooltip="app.fqdn">
+    <TransitionGroup name="grid-animation" tag="div" class="grid">
+      <a v-for="app in filteredApps" :key="app.id" class="item" :href="'https://' + app.fqdn" target="_blank" v-tooltip="app.fqdn">
         <img :src="API_ORIGIN + app.iconUrl"/>
         <div class="label">{{ app.label || app.subdomain || app.fqdn }}</div>
         <a class="config" :href="`#/app/${app.id}/info`"><Icon icon="fa-solid fa-cog" /></a>
       </a>
-    </div>
+    </TransitionGroup>
   </div>
 </template>
 
 <script>
 
-import { Button, Icon } from 'pankow';
+import { Button, Icon, TextInput } from 'pankow';
 
 import AppsModel from '../models/AppsModel.js';
 
@@ -28,14 +31,23 @@ export default {
   components: {
     Button,
     Icon,
+    TextInput,
   },
   data() {
     return {
       API_ORIGIN,
       ready: false,
+      filter: '',
       apps: [],
     };
   },
+  computed: {
+    filteredApps() {
+      return this.apps.filter(a => {
+        return a.fqdn.indexOf(this.filter) !== -1;
+      });
+    }
+  },
   methods: {
   },
   async mounted() {
@@ -49,6 +61,16 @@ export default {
 
 <style scoped>
 
+.grid-animation-enter-active,
+.grid-animation-leave-active {
+  transition: all 0.2s ease;
+}
+.grid-animation-enter-from,
+.grid-animation-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
 .grid {
   display: flex;
   height: 100%;