#19, added tags, and tags filtering

src/components/AssetsManagement/AssetBrowser.vue

@@ -1,7 +1,14 @@
 <template>
-    <v-chip-group variant="flat" v-if="!hideFilter" class="pa-4" multiple column v-model="selectedTypes">
-        <v-chip v-for="(f,i) in $p.objectTypes" :key="i" :text="l[f.value]" :value="f.value" :color="f.color" filter></v-chip>
-    </v-chip-group>
+   <v-container fluid class="d-flex flex-wrap">
+        <v-chip :text="'All'" class="mt-2 mr-2" @click="selectedTypes = selectedTypes.length ? [] : $p.objectTypes.map(f => f.value)" filter></v-chip>
+        <v-chip-group variant="flat" v-if="!hideFilter" multiple column v-model="selectedTypes">
+            <v-chip v-for="(f, i) in $p.objectTypes" :key="i" :text="l[f.value]" :value="f.value" :color="f.color"
+                filter></v-chip>
+        </v-chip-group>
+        <v-text-field :loading="loading" append-inner-icon="mdi-magnify" density="compact" :label="l.search"
+            hide-details @update:model-value="debounce(load, 500, true);" rounded v-model="textSearch"></v-text-field>
+    </v-container>
+   
     <v-container class="asset-browser">
         <v-row>
             <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative img-preview">
@@ -26,7 +33,7 @@
 </template>
 
 <script>
-
+import Utils from '#/app/Utils';
 export default {
     props:[
         'modelValue', 'query', 'hideFilter'
@@ -39,6 +46,9 @@ export default {
             selectedTypes: this.$p.objectTypes.map(f=>f.value),
             previewObject: null,
             previewDialog: false,
+            loading: false,
+            textSearch: '',
+            tags: []
         }
     },
     
@@ -48,20 +58,32 @@ export default {
 
     watch:{
         async selectedTypes(n){
-            this.q.type = { $in: n };
+            this.q.type = { '*in': n };
             await this.load();
         }
     },
 
     methods:{
         async load(){
+            this.loading = true;
             Object.assign(this.q, this.query || {});
+            if (this.textSearch) {
+                this.q['*or'] = [
+                    { name: { '*regex': Utils.escapeRegExp(this.textSearch), '*options': 'i' } },
+                    { tags: { '*regex': Utils.escapeRegExp(this.textSearch), '*options': 'i' } },
+                    { description: { '*regex': Utils.escapeRegExp(this.textSearch), '*options': 'i' } }
+                ];
+            }else{
+                delete this.q['*or'];
+            }
             this.items = (await this.$api.gameObject.search(this.q)).data.data;
+            this.loading = false;
+            this.tags = await this.$api.gameObject.getTags(this.textSearch || null);
         },
         preview(v){
             this.previewObject = v;
             this.previewDialog = true;
-        }
+        },
     }
 }
 </script>