add better ordered filtering for the project picker modal

maproulette · Feb 21, 2024 · 25a149b · 25a149b
1 parent cef2c27
commit 25a149b
Showing 1 changed file with 38 additions and 18 deletions.
diff --git a/src/components/AdminPane/Manage/ProjectPickerModal/ProjectPickerModal.js b/src/components/AdminPane/Manage/ProjectPickerModal/ProjectPickerModal.js
@@ -10,6 +10,7 @@ import WithSearchResults
 import WithPagedProjects
        from '../../../HOCs/WithPagedProjects/WithPagedProjects'
 import SearchBox from '../../../SearchBox/SearchBox'
+import { get as levenshtein } from 'fast-levenshtein'; 
 import Modal from '../../../Modal/Modal'
 import messages from './Messages'
 
@@ -53,35 +54,54 @@ export class ProjectPickerModal extends Component {
           projects={this.props.pagedCandidateProjects}
           currentProjectId={this.props.currentProjectId}
           onSelectProject={this.props.onSelectProject}
+          searchQuery={this.props.searchCriteria?.query}
         />
       </Modal>
     )
   }
 }
 
 const CandidateProjectList = function(props) {
-  const projectItems = _compact(_map(props.projects, project => {
-    if (project.id === props.currentProjectId) {
+  const { projects, currentProjectId, onSelectProject, searchQuery } = props
+
+  const sortedProjects = _compact(_map(projects, project => {
+    if (project.id === currentProjectId) {
       return null
     }
 
-    return (
-      <li key={`project-${project.id}`}>
-        <a
-          onClick={() => props.onSelectProject(project)}
-        >
-          {project.displayName ? project.displayName : project.name}
-        </a>
-      </li>
-    )
-  }))
+    let index = 0
+    if (searchQuery) {
+      const displayNameLower = project.displayName.toLowerCase()
+      const searchQueryLower = searchQuery.toLowerCase()
+      if (displayNameLower.startsWith(searchQueryLower)) {
+        index = 3
+      } else if (displayNameLower.includes(searchQueryLower)) {
+        index = 2
+      }
+       else {
+        const similarity = levenshtein(searchQueryLower, displayNameLower)
+        if (similarity > 0 && similarity < 4) {
+          index = 1 
+        }
+      }
+    }
 
-  return _isEmpty(projectItems) ?
-    <FormattedMessage {...messages.noProjects} /> : (
-    <ol className="mr-list-dropdown">
-      {projectItems}
-    </ol>
-  )
+    return { project, index }
+  })).sort((a, b) => b.index - a.index)
+
+  return _isEmpty(sortedProjects) ?
+    <FormattedMessage {...messages.noProjects} /> :
+    (
+      <ol className="mr-list-dropdown">
+        {_map(sortedProjects, ({ project }) => (
+          <li key={`project-${project.id}`}>
+            <a onClick={() => onSelectProject(project)}>
+              {project.displayName ? project.displayName : project.name}
+            </a>
+          </li>
+        ))}
+      </ol>
+    )
 }
 
 export default