integrate table view filters with base model table

Common/Models/DatabaseModels/TableView.ts

@@ -21,6 +21,7 @@ import { Column, Entity, Index, JoinColumn, ManyToOne } from "typeorm";
 import Query from "../../Types/BaseDatabase/Query";
 import BaseModel from "./DatabaseBaseModel/DatabaseBaseModel";
 import Sort from "../../Types/BaseDatabase/Sort";
+import AnalyticsBaseModel from "../AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
 
 @TableBillingAccessControl({
   create: PlanType.Growth,
@@ -380,7 +381,7 @@ export default class TableView extends BaseModel {
     unique: false,
     nullable: false,
   })
-  public query?: Query<BaseModel> = undefined;
+  public query?: Query<BaseModel | AnalyticsBaseModel> = undefined;
 
   @ColumnAccessControl({
     create: [
@@ -413,7 +414,7 @@ export default class TableView extends BaseModel {
     unique: false,
     nullable: false,
   })
-  public sort?: Sort<BaseModel> = undefined;
+  public sort?: Sort<BaseModel | AnalyticsBaseModel> = undefined;
 
   @ColumnAccessControl({
     create: [

Common/UI/Components/ModelTable/BaseModelTable.tsx

@@ -84,8 +84,8 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import MoreMenu from "../MoreMenu/MoreMenu";
-import MoreMenuItem from "../MoreMenu/MoreMenuItem";
+import TableViewElement from "./TableView";
+import TableView from "../../../Models/DatabaseModels/TableView";
 
 export enum ShowAs {
   Table,
@@ -800,10 +800,48 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     }
 
     if (props.saveFilterProps && props.saveFilterProps.tableId) {
+      const currentTableView: TableView = new TableView();
+      currentTableView.query = (query || {}) as any;
+      currentTableView.itemsOnPage = itemsOnPage || 10;
+
+      if (sortBy && sortOrder) {
+        currentTableView.sort = {
+          [sortBy as string]: sortOrder,
+        };
+      } else {
+        currentTableView.sort = {};
+      }
+
       return (
-        <MoreMenu>
-          <MoreMenuItem text="Save Filter" onClick={() => {}}></MoreMenuItem>
-        </MoreMenu>
+        <TableViewElement
+          tableId={props.saveFilterProps.tableId}
+          currentTableView={currentTableView}
+          onViewChange={(tableView: TableView | null) => {
+            if (tableView) {
+              const sortBy: string | undefined = Object.keys(
+                tableView.sort || {},
+              )[0];
+              let sortOrder: SortOrder = SortOrder.Descending;
+
+              if (sortBy && tableView.sort) {
+                sortOrder =
+                  ((tableView.sort as any)[sortBy as any] as any) ||
+                  SortOrder.Descending;
+              }
+
+              // then set query, sort and items on the page
+              setQuery(tableView.query || {});
+              setItemsOnPage(tableView.itemsOnPage || 10);
+              setSortBy(sortBy as keyof TBaseModel);
+              setSortOrder(sortOrder);
+            } else {
+              setQuery({});
+              setSortBy(null);
+              setSortOrder(SortOrder.Descending);
+              setItemsOnPage(10);
+            }
+          }}
+        />
       );
     }
 

Common/UI/Components/ModelTable/TableView.tsx

@@ -23,13 +23,13 @@ import { FormType } from "../Forms/ModelForm";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
+import ProjectUtil from "../../Utils/Project";
+import User from "../../Utils/User";
 
 export interface ComponentProps {
   tableId: string;
   onViewChange: (tableView: TableView | null) => void;
   currentTableView: TableView | null;
-  projectId: ObjectID;
-  userId: ObjectID;
 }
 
 const TableViewElement: FunctionComponent<ComponentProps> = (
@@ -47,6 +47,9 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
   const [showCreateNewViewModal, setShowCreateNewViewModel] =
     useState<boolean>(false);
 
+  const [currentlySelectedView, setCurrentlySelectedView] =
+    useState<TableView | null>(null);
+
   // load all the filters for this user and for this project.
   const fetchTableViews: PromiseVoidFunction = async (): Promise<void> => {
     try {
@@ -56,8 +59,8 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
       const tableViews: ListResult<TableView> = await ModelAPI.getList({
         modelType: TableView,
         query: {
-          projectId: props.projectId,
-          createdByUserId: props.userId,
+          projectId: ProjectUtil.getCurrentProjectId()!,
+          createdByUserId: User.getUserId(),
           tableId: props.tableId,
         },
         limit: LIMIT_PER_PROJECT,
@@ -149,6 +152,7 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
           text={item.name || ""}
           onClick={() => {
             props.onViewChange && props.onViewChange(item);
+            setCurrentlySelectedView(item);
           }}
         />
       );
@@ -169,7 +173,25 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
         ) : (
           <></>
         )}
-        <MoreMenuItem text="Save View" onClick={() => {}}></MoreMenuItem>
+
+        {currentlySelectedView ? (
+          <MoreMenuItem
+            text="Deselect View"
+            onClick={() => {
+              setCurrentlySelectedView(null);
+              props.onViewChange && props.onViewChange(null);
+            }}
+          ></MoreMenuItem>
+        ) : (
+          <></>
+        )}
+
+        <MoreMenuItem
+          text="Save View"
+          onClick={() => {
+            setShowCreateNewViewModel(true);
+          }}
+        ></MoreMenuItem>
       </>
     );
   };