From f39e561af773ce9e90142553847360db8f6acf48 Mon Sep 17 00:00:00 2001
From: Graham Steffaniak <graham.steffaniak@autodesk.com>
Date: Mon, 31 Jul 2023 17:20:14 -0500
Subject: [PATCH] updated a bit

---
 backend/search/indexing.go         | 13 ++--
 frontend/src/components/Search.vue | 95 ++++++++++--------------------
 frontend/src/css/base.css          |  5 +-
 frontend/src/css/header.css        | 14 ++++-
 4 files changed, 53 insertions(+), 74 deletions(-)

diff --git a/backend/search/indexing.go b/backend/search/indexing.go
index c11ac4ed..4b9f0b43 100644
--- a/backend/search/indexing.go
+++ b/backend/search/indexing.go
@@ -184,6 +184,7 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
 		fileTypes 				:= map[string]bool{}
 		fileSize				:= getFileSize(pathName)
 		matchesCondition 		:= false
+		matchesAllConditions	:= true
 		extension 				:= filepath.Ext(strings.ToLower(path))
 		mimetype 				:= mime.TypeByExtension(extension)
 		fileTypes["audio"] 		= strings.HasPrefix(mimetype, "audio")
@@ -192,7 +193,7 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
 		fileTypes["doc"] 		= isDoc(extension)
 		fileTypes["archive"] 	= isArchive(extension)
 		fileTypes["dir"]		= isDir
-		anyFilter 				:= false
+
 		for t,v := range conditions {
 			switch t {
 			case "exact"	: continue
@@ -200,12 +201,12 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
 			case "smaller"	: matchesCondition = fileSize < int64(options.Size) * 1000000
 			default			: matchesCondition = v == fileTypes[t]
 			}
-			anyFilter = true
+			if (!matchesCondition) {
+				matchesAllConditions = false
+			}
 		}
-		if !anyFilter {
-			matchesCondition = true
-		}
-		return matchesCondition, fileTypes
+
+		return matchesAllConditions, fileTypes
 	}
 	return false, map[string]bool{}
 }
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index c4823010..e0e1bdc1 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -1,26 +1,12 @@
 <template>
   <div id="search" @click="open" v-bind:class="{ active, ongoing }">
     <div id="input">
-      <button
-        v-if="active"
-        class="action"
-        @click="close"
-        :aria-label="$t('buttons.close')"
-        :title="$t('buttons.close')"
-      >
+      <button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
         <i class="material-icons">close</i>
       </button>
       <i v-else class="material-icons">search</i>
-      <input
-        type="text"
-        @keyup.exact="keyup"
-        @input="submit"
-        ref="input"
-        :autofocus="active"
-        v-model.trim="value"
-        :aria-label="$t('search.search')"
-        :placeholder="$t('search.search')"
-      />
+      <input type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active" v-model.trim="value"
+        :aria-label="$t('search.search')" :placeholder="$t('search.search')" />
     </div>
     <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
       <div id="result-list">
@@ -28,12 +14,7 @@
           Search Context: {{ getContext(this.$route.path) }}
         </div>
         <ul v-show="results.length > 0">
-          <li
-            v-for="(s, k) in results"
-            :key="k"
-            @click.stop.prevent="navigateTo(s.url)"
-            style="cursor: pointer"
-          >
+          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -47,20 +28,17 @@
             </router-link>
           </li>
         </ul>
+        <p v-show="isEmpty && isRunning" id="renew">
+          <i class="material-icons spin">autorenew</i>
+        </p>
+        <p v-show="isEmpty && !isRunning">{{ text }}</p>
         <template v-if="isEmpty">
-          <p >{{ text }}</p>
           <template v-if="value.length === 0">
             <div class="boxes">
               <h3>{{ $t("search.types") }}</h3>
               <div>
-                <div
-                  tabindex="0"
-                  v-for="(v, k) in boxes"
-                  :key="k"
-                  role="button"
-                  @click="init('type:' + k)"
-                  :aria-label="v.label"
-                >
+                <div tabindex="0" v-for="(v, k) in boxes" :key="k" role="button" @click="init('type:' + k)"
+                  :aria-label="v.label">
                   <i class="material-icons">{{ v.icon }}</i>
                   <p>{{ v.label }}</p>
                 </div>
@@ -76,12 +54,7 @@
           Search Context: {{ getContext(this.$route.path) }}
         </div>
         <ul v-show="results.length > 0">
-          <li
-            v-for="(s, k) in results"
-            :key="k"
-            @click.stop.prevent="navigateTo(s.url)"
-            style="cursor: pointer"
-          >
+          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -95,25 +68,16 @@
             </router-link>
           </li>
         </ul>
-        <template >
-          <p v-show="isEmpty" >{{ text }}</p>
-          <template >
+        <template>
+          <p v-show="isEmpty && isRunning" id="renew">
+            <i class="material-icons spin">autorenew</i>
+          </p>
+          <p v-show="isEmpty && !isRunning">{{ text }}</p>
+          <template>
             <div v-show="results.length == 0" class="boxes">
-              <ButtonGroup
-                :buttons="folderSelect"
-                @button-clicked="init"
-                @remove-button-clicked="removeInit"
-              />
-              <ButtonGroup
-                :buttons="typeSelect"
-                @button-clicked="init"
-                @remove-button-clicked="removeInit"
-              />
-              <ButtonGroup
-                :buttons="sizeSelect"
-                @button-clicked="init"
-                @remove-button-clicked="removeInit"
-              />
+              <ButtonGroup :buttons="folderSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
+              <ButtonGroup :buttons="typeSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
+              <ButtonGroup :buttons="sizeSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
             </div>
           </template>
         </template>
@@ -151,10 +115,11 @@ export default {
         { label: "Only Files", value: "type:file" },
       ],
       typeSelect: [
-        { label: "Archives", value: "type:archive" },
-        { label: "Audio Files", value: "type:audio" },
+        { label: "Photos", value: "type:image" },
+        { label: "Audio", value: "type:audio" },
         { label: "Videos", value: "type:video" },
         { label: "Documents", value: "type:docs" },
+        { label: "Archives", value: "type:archive" },
       ],
       sizeSelect: [
         { label: "Smaller than 100MB", value: "type:smaller=100" },
@@ -215,6 +180,9 @@ export default {
     isMobile() {
       return this.width <= 800;
     },
+    isRunning() {
+      return this.ongoing;
+    }
   },
   mounted() {
     window.addEventListener("resize", this.handleResize);
@@ -266,20 +234,20 @@ export default {
       this.results.length === 0;
     },
     init(string) {
-      if (string == null || string == ""){
+      if (string == null || string == "") {
         return false
       }
       this.value = `${string} ${this.value}`;
-      if (this.isMobile){
+      if (this.isMobile) {
         this.$refs.input.focus();
       }
     },
     removeInit(string) {
-      if (string == null || string == ""){
+      if (string == null || string == "") {
         return false
       }
-      this.value = this.value.replace(string+" ", "");
-      if (this.isMobile){
+      this.value = this.value.replace(string + " ", "");
+      if (this.isMobile) {
         this.$refs.input.focus();
       }
     },
@@ -301,7 +269,6 @@ export default {
       } catch (error) {
         this.$showError(error);
       }
-
       this.ongoing = false;
     },
   },
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index e26d98f1..f6655a13 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -188,6 +188,7 @@ body.rtl .breadcrumbs a {
 
 /* File Selection */
 #file-selection {
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 2em 50px 10px;
   position: fixed;
   bottom: 1em;
   left: 50%;
@@ -196,10 +197,8 @@ body.rtl .breadcrumbs a {
   -ms-flex-align: center;
   align-items: center;
   background: #fff;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
-  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
   width: 95%;
-  max-width: 25em;
+  max-width: 30em;
   z-index: 1;
 }
 
diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
index 7cbe6cc4..a54346d3 100644
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@@ -171,7 +171,7 @@ body.rtl #search #result ul>* {
   width: 100%;
   text-align: center;
   display: none;
-  margin: 0;
+  margin: 1em;
   max-width: none;
 }
 
@@ -179,6 +179,18 @@ body.rtl #search #result ul>* {
   display: block;
 }
 
+#search #result-desktop #renew {
+  width: 100%;
+  text-align: center;
+  display: none;
+  margin: 1em;
+  max-width: none;
+}
+
+#search.ongoing #result-desktop #renew {
+  display: block;
+}
+
 /* Icon Colors */
 .folder-icons {
   color: var(--icon-blue);