Use backend for project-status filtering (#655)

web/app/components/projects/add-to-or-create.ts

@@ -31,22 +31,21 @@ export default class ProjectsAddToOrCreate extends Component<ProjectsAddToOrCrea
   @tracked protected newProjectTitle = "";
   @tracked protected newProjectDescription = "";
   @tracked protected newProjectJiraObject = {};
-  @tracked private allProjects: HermesProject[] | null = null;
+  @tracked private activeProjects: HermesProject[] | null = null;
 
   /**
    * The projects that are shown in the search modal.
    * Filters out archived and completed projects, as well as projects
    * that are already associated with the document.
    */
   protected get shownProjects() {
-    if (!this.allProjects) {
+    if (!this.activeProjects) {
       return [];
     }
 
-    return this.allProjects
+    return this.activeProjects
       .filter((project: HermesProject) => {
         return (
-          project.status === ProjectStatus.Active &&
           !this.args.document.projects?.includes(parseInt(project.id)) &&
           project.title.toLowerCase().includes(this.query.toLowerCase())
         );
@@ -89,8 +88,10 @@ export default class ProjectsAddToOrCreate extends Component<ProjectsAddToOrCrea
   protected loadProjects = task(async (dd: XDropdownListAnchorAPI) => {
     this.dd = dd;
 
-    this.allProjects = await this.fetchSvc
-      .fetch(`/api/${this.configSvc.config.api_version}/projects`)
+    this.activeProjects = await this.fetchSvc
+      .fetch(
+        `/api/${this.configSvc.config.api_version}/projects?status=${ProjectStatus.Active}`,
+      )
       .then((response) => response?.json());
 
     next(() => {

web/app/components/projects/index.hbs

@@ -17,9 +17,9 @@
   <WhatsAProject class="absolute top-1/2 right-0 -translate-y-1/2" />
 </div>
 
-{{#if this.shownProjects.length}}
+{{#if @projects.length}}
   <ol data-test-projects-list class="divided-list relative">
-    {{#each this.shownProjects as |project|}}
+    {{#each @projects as |project|}}
       <li data-test-project>
         <Project::Tile @project={{project}} />
       </li>

web/app/components/projects/index.ts

@@ -33,12 +33,6 @@ export default class ProjectsIndexComponent extends Component<ProjectsIndexCompo
       },
     ];
   }
-
-  protected get shownProjects() {
-    return this.args.projects.filter(
-      (project) => project.status === this.args.status,
-    );
-  }
 }
 
 declare module "@glint/environment-ember-loose/registry" {

web/app/routes/authenticated/projects/index.ts

@@ -17,12 +17,11 @@ export default class AuthenticatedProjectsIndexRoute extends Route {
 
   async model(params: { status: string }) {
     const projects = await this.fetchSvc
-      .fetch(`/api/${this.configSvc.config.api_version}/projects`)
+      .fetch(
+        `/api/${this.configSvc.config.api_version}/projects?status=${params.status}`,
+      )
       .then((response) => response?.json());
 
-    // We'll eventually use the status param in the query;
-    // for now, we pass it to the component for local filtering
-
     return { projects, status: params.status as ProjectStatus };
   }
 }

web/mirage/config.ts

@@ -412,8 +412,17 @@ export default function (mirageConfig) {
       });
 
       // Fetch a list of projects.
-      this.get("/projects", () => {
-        const projects = this.schema.projects.all().models;
+      // If a status is provided, filter by it.
+      this.get("/projects", (schema, request) => {
+        const { status } = request.queryParams;
+
+        let projects;
+
+        if (status) {
+          projects = schema.projects.where({ status }).models;
+        } else {
+          projects = schema.projects.all().models;
+        }
         return new Response(
           200,
           {},