feat: added status filter

hotosm · Dec 5, 2024 · 4868012 · 4868012
1 parent 22e1de7
commit 4868012
Show file tree

Hide file tree

Showing 26 changed files with 372 additions and 196 deletions.
diff --git a/frontend/src/app/providers/models-provider.tsx b/frontend/src/app/providers/models-provider.tsx
@@ -223,8 +223,8 @@ const ModelsContext = createContext<{
   validateEditMode: boolean;
 }>({
   formData: initialFormState,
-  setFormData: () => { },
-  handleChange: () => { },
+  setFormData: () => {},
+  handleChange: () => {},
   createNewTrainingDatasetMutation: {} as UseMutationResult<
     TTrainingDataset,
     Error,
@@ -239,13 +239,13 @@ const ModelsContext = createContext<{
   >,
   hasLabeledTrainingAreas: false,
   hasAOIsWithGeometry: false,
-  resetState: () => { },
+  resetState: () => {},
   isEditMode: false,
   modelId: "",
   getFullPath: () => "",
-  handleModelCreationAndUpdate: () => { },
+  handleModelCreationAndUpdate: () => {},
   trainingDatasetCreationInProgress: false,
-  handleTrainingDatasetCreation: () => { },
+  handleTrainingDatasetCreation: () => {},
   validateEditMode: false,
 });
 

diff --git a/frontend/src/app/routes/account/models.tsx b/frontend/src/app/routes/account/models.tsx
@@ -4,31 +4,47 @@ import { APPLICATION_CONTENTS } from "@/contents";
 import { LayoutView } from "@/enums/models";
 import { LayoutToggle, PageHeader } from "@/features/models/components";
 import { MobileModelFiltersDialog } from "@/features/models/components/dialogs";
-import { CategoryFilter, ClearFilters, DateRangeFilter, MobileFilter, OrderingFilter, SearchFilter } from "@/features/models/components/filters";
+import {
+  CategoryFilter,
+  ClearFilters,
+  DateRangeFilter,
+  MobileFilter,
+  OrderingFilter,
+  SearchFilter,
+  StatusFilter,
+} from "@/features/models/components/filters";
 import { useModelsListFilters } from "@/features/models/hooks/use-models";
-import { ModelListGridLayout, ModelListTableLayout } from "@/features/models/layouts";
+import {
+  ModelListGridLayout,
+  ModelListTableLayout,
+} from "@/features/models/layouts";
 import { useDialog } from "@/hooks/use-dialog";
 import { APP_CONTENT } from "@/utils";
 import { useMemo } from "react";
 import ModelNotFound from "@/features/models/components/model-not-found";
 import { SEARCH_PARAMS } from "@/app/routes/models/models-list";
 import { useAuth } from "@/app/providers/auth-provider";
 
-
 export const UserModelsPage = () => {
-
   const { isOpened, openDialog, closeDialog } = useDialog();
   const { user } = useAuth();
 
-  const { clearAllFilters, data, isError, isPending, isPlaceholderData, query, updateQuery } = useModelsListFilters(user.osm_id)
+  const {
+    clearAllFilters,
+    data,
+    isError,
+    isPending,
+    isPlaceholderData,
+    query,
+    updateQuery,
+  } = useModelsListFilters(user?.osm_id);
 
   // Since it's just a static filter, it's better to memoize it.
   const memoizedCategoryFilter = useMemo(
     () => <CategoryFilter disabled={isPending} />,
     [isPending],
   );
 
-
   const renderContent = () => {
     if (data?.count === 0) {
       return (
@@ -69,14 +85,22 @@ export const UserModelsPage = () => {
       />
       <Head title={APPLICATION_CONTENTS.MY_MODELS_PAGE.pageTitle} />
       <section className="my-10 min-h-screen">
-        <PageHeader title={APPLICATION_CONTENTS.MY_MODELS_PAGE.pageHeader} description={APPLICATION_CONTENTS.MY_MODELS_PAGE.pageDescription} />
+        <PageHeader
+          title={APPLICATION_CONTENTS.MY_MODELS_PAGE.pageHeader}
+          description={APPLICATION_CONTENTS.MY_MODELS_PAGE.pageDescription}
+        />
         {/* Filters */}
         <div className="sticky top-0 bg-white z-10 py-2">
           <div className="flex flex-col gap-y-4">
             <div className=" flex items-center justify-between w-full ">
               <div className="flex items-center justify-between w-full md:gap-x-4 gap-y-2 md:gap-y-0  md:w-auto">
                 <SearchFilter updateQuery={updateQuery} query={query} />
                 {memoizedCategoryFilter}
+                <StatusFilter
+                  disabled={isPending}
+                  updateQuery={updateQuery}
+                  query={query}
+                />
                 {/* Mobile filters */}
                 <div className="flex md:hidden items-center gap-x-4">
                   <MobileFilter openMobileFilterModal={openDialog} />
@@ -96,10 +120,7 @@ export const UserModelsPage = () => {
               </div>
               <div className="md:flex items-center gap-x-10 hidden">
                 {/* Desktop */}
-                <LayoutToggle
-                  updateQuery={updateQuery}
-                  query={query}
-                />
+                <LayoutToggle updateQuery={updateQuery} query={query} />
               </div>
             </div>
             {/* Mobile */}
@@ -149,7 +170,9 @@ export const UserModelsPage = () => {
         </div>
 
         <div
-          className={"my-10 grid grid-cols-1 sm:grid-cols-2  md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-x-7 gap-y-14"}
+          className={
+            "my-10 grid grid-cols-1 sm:grid-cols-2  md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-x-7 gap-y-14"
+          }
         >
           {renderContent()}
         </div>
@@ -169,5 +192,5 @@ export const UserModelsPage = () => {
         </div>
       </section>
     </>
-  )
+  );
 };
diff --git a/frontend/src/app/routes/models/models-list.tsx b/frontend/src/app/routes/models/models-list.tsx
@@ -2,12 +2,16 @@ import {
   useModelsListFilters,
   useModelsMapData,
 } from "@/features/models/hooks/use-models";
-import { useMemo, } from "react";
+import { useMemo } from "react";
 import {
   ModelListGridLayout,
   ModelListTableLayout,
 } from "@/features/models/layouts";
-import { LayoutToggle, ModelMapToggle, ModelsMap } from "@/features/models/components";
+import {
+  LayoutToggle,
+  ModelMapToggle,
+  ModelsMap,
+} from "@/features/models/components";
 import {
   CategoryFilter,
   ClearFilters,
@@ -17,16 +21,15 @@ import {
   SearchFilter,
 } from "@/features/models/components/filters";
 import Pagination, { PAGE_LIMIT } from "@/components/pagination";
-import { APP_CONTENT, } from "@/utils";
+import { APP_CONTENT } from "@/utils";
 import { PageHeader } from "@/features/models/components/";
-import { FeatureCollection, } from "@/types";
+import { FeatureCollection } from "@/types";
 import ModelNotFound from "@/features/models/components/model-not-found";
 import { useDialog } from "@/hooks/use-dialog";
 import { MobileModelFiltersDialog } from "@/features/models/components/dialogs";
 import { Head } from "@/components/seo";
 import { LayoutView } from "@/enums/models";
 
-
 export const SEARCH_PARAMS = {
   startDate: "start_date",
   endDate: "end_date",
@@ -37,16 +40,22 @@ export const SEARCH_PARAMS = {
   dateFilter: "dateFilter",
   layout: "layout",
   id: "id",
+  status: "status",
 };
 
-
-
-
 export const ModelsPage = () => {
-
   const { isOpened, openDialog, closeDialog } = useDialog();
 
-  const { clearAllFilters, data, isError, isPending, isPlaceholderData, query, updateQuery, mapViewIsActive } = useModelsListFilters()
+  const {
+    clearAllFilters,
+    data,
+    isError,
+    isPending,
+    isPlaceholderData,
+    query,
+    updateQuery,
+    mapViewIsActive,
+  } = useModelsListFilters();
 
   const {
     data: mapData,
@@ -60,8 +69,6 @@ export const ModelsPage = () => {
     [isPending],
   );
 
-
-
   const renderContent = () => {
     if (data?.count === 0) {
       return (

diff --git a/frontend/src/components/ui/dropdown/dropdown.tsx b/frontend/src/components/ui/dropdown/dropdown.tsx
@@ -13,7 +13,7 @@ export type DropdownMenuItem = {
   className?: string;
   name?: string;
   disabled?: boolean;
-  apiValue?: string;
+  apiValue?: string | number;
 };
 
 type DropDownProps = {

diff --git a/frontend/src/components/ui/form/checkbox-group/checkbox-group.tsx b/frontend/src/components/ui/form/checkbox-group/checkbox-group.tsx
@@ -2,11 +2,12 @@ import { cn } from "@/utils";
 import { SlCheckbox } from "@shoelace-style/shoelace/dist/react/index.js";
 import { useEffect, useState } from "react";
 import "./checkbox-group.css";
+import { SHOELACE_SIZES } from "@/enums";
 
 type CheckboxGroupProps = {
   options: {
     value: string;
-    apiValue?: string;
+    apiValue?: string | number;
   }[];
   disabled?: boolean;
   defaultSelectedOption?: string | string[] | number[];
@@ -68,7 +69,8 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
         <li key={`checkbox-option-${id}`} className="flex items-center gap-x-2">
           <SlCheckbox
             disabled={disabled}
-            size="small"
+            size={SHOELACE_SIZES.SMALL}
+            //@ts-expect-error bad type definition
             value={option.apiValue ?? option.value}
             checked={selectedOptions.includes(
               String(option.apiValue ?? option.value),

diff --git a/frontend/src/contents/index.ts b/frontend/src/contents/index.ts
@@ -6,5 +6,5 @@ export { TOAST_NOTIFICATIONS } from "./toast-notifications";
 export const APPLICATION_CONTENTS = {
   START_MAPPING: START_MAPPING_CONTENT,
   LEARN_PAGE: LEARN_PAGE_CONTENT,
-  MY_MODELS_PAGE: MY_MODELS_PAGE_CONTENT
+  MY_MODELS_PAGE: MY_MODELS_PAGE_CONTENT,
 };
diff --git a/frontend/src/contents/models.ts b/frontend/src/contents/models.ts
@@ -1,5 +1,6 @@
 export const MY_MODELS_PAGE_CONTENT = {
-    pageTitle: 'My Models',
-    pageHeader: 'My Models',
-    pageDescription: "Your draft and published models are here. Each model is trained using one of the training datasets. Published models can be used to find mappable features in imagery that is similar to the training areas that dataset comes from."
-}
+  pageTitle: "My Models",
+  pageHeader: "My Models",
+  pageDescription:
+    "Your archived, draft and published models are here. Each model is trained using one of the training datasets. Published models can be used to find mappable features in imagery that is similar to the training areas that dataset comes from.",
+};
diff --git a/frontend/src/enums/models.ts b/frontend/src/enums/models.ts
@@ -1,4 +1,4 @@
 export enum LayoutView {
-    LIST = "list",
-    GRID = "grid",
-}
+  LIST = "list",
+  GRID = "grid",
+}
diff --git a/frontend/src/features/models/api/factory.ts b/frontend/src/features/models/api/factory.ts
@@ -24,7 +24,7 @@ type TModelQueryOptions = {
   dateFilters: Record<string, string>;
   status: number;
   id: number;
-  userId?: number
+  userId?: number;
 };
 
 export const getModelsQueryOptions = ({
@@ -35,15 +35,24 @@ export const getModelsQueryOptions = ({
   orderBy,
   dateFilters,
   id,
-  userId
+  userId,
 }: TModelQueryOptions) => {
   return queryOptions({
     queryKey: [
       "models",
       { status, searchQuery, offset, orderBy, dateFilters, id, userId },
     ],
     queryFn: () =>
-      getModels(limit, offset, orderBy, status, searchQuery, dateFilters, id, userId),
+      getModels(
+        limit,
+        offset,
+        orderBy,
+        status,
+        searchQuery,
+        dateFilters,
+        id,
+        userId,
+      ),
     placeholderData: keepPreviousData,
   });
 };

diff --git a/frontend/src/features/models/api/get-models.ts b/frontend/src/features/models/api/get-models.ts
@@ -9,7 +9,7 @@ export const getModels = async (
   searchQuery: string,
   dateFilters: Record<string, string>,
   id: number,
-  userId?: number
+  userId?: number,
 ): Promise<PaginatedModels> => {
   const res = await apiClient.get(API_ENDPOINTS.GET_MODELS, {
     params: {

diff --git a/frontend/src/features/models/components/dialogs/mobile-filters-dialog.tsx b/frontend/src/features/models/components/dialogs/mobile-filters-dialog.tsx
@@ -4,9 +4,12 @@ import {
   CategoryFilter,
   DateRangeFilter,
   OrderingFilter,
+  StatusFilter,
 } from "@/features/models/components/filters";
 import { DialogProps, TQueryParams } from "@/types";
 import { Button } from "@/components/ui/button";
+import { useLocation } from "react-router-dom";
+import { APPLICATION_ROUTES } from "@/utils";
 
 type TrainingAreaDialogProps = DialogProps & {
   updateQuery: (updatedParams: TQueryParams) => void;
@@ -36,6 +39,11 @@ const MobileModelFiltersDialog: React.FC<TrainingAreaDialogProps> = ({
   updateQuery,
   disabled,
 }) => {
+  const currentRoute = useLocation();
+  const userIsInAccountModelsPage = currentRoute.pathname.includes(
+    APPLICATION_ROUTES.ACCOUNT_MODELS,
+  );
+
   return (
     <Dialog isOpened={isOpened} closeDialog={closeDialog} label={"Filter"}>
       <div className="flex flex-col gap-y-4">
@@ -49,6 +57,18 @@ const MobileModelFiltersDialog: React.FC<TrainingAreaDialogProps> = ({
         <FilterItem title="Filter by">
           <CategoryFilter disabled={true} isMobileFilterModal />
         </FilterItem>
+
+        {userIsInAccountModelsPage && (
+          <FilterItem title="Filter by">
+            <StatusFilter
+              disabled={false}
+              isMobileFilterModal
+              query={query}
+              updateQuery={updateQuery}
+            />
+          </FilterItem>
+        )}
+
         <FilterItem title="">
           <DateRangeFilter
             query={query}