tsms/src/components/UserWorkspacePage/AssignedProjects.tsx

import React, { useEffect } from "react";
import {
  Card,
  CardContent,
  Grid,
  IconButton,
  InputAdornment,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import { useTranslation } from "react-i18next";
import { Clear, Search } from "@mui/icons-material";
import ProjectGrid from "./ProjectGrid";
import { Props as UserWorkspaceProps } from "./UserWorkspacePage";

interface Props {
  assignedProjects: UserWorkspaceProps["assignedProjects"];
  maintainNormalStaffWorkspaceAbility?: boolean;
  maintainManagementStaffWorkspaceAbility?: boolean;
}

const AssignedProjects: React.FC<Props> = ({ assignedProjects, maintainNormalStaffWorkspaceAbility, maintainManagementStaffWorkspaceAbility }) => {
  const { t } = useTranslation("home");

  // Projects
  const [filteredProjects, setFilterProjects] =
    React.useState(assignedProjects);

  // Query related
  const [query, setQuery] = React.useState("");
  const onQueryInputChange = React.useCallback<
    React.ChangeEventHandler<HTMLInputElement>
  >((e) => {
    setQuery(e.target.value);
  }, []);
  const clearQueryInput = React.useCallback(() => {
    setQuery("");
  }, []);

  useEffect(() => {
    setFilterProjects(
      assignedProjects.filter(
        (p) =>
          p.code.toLowerCase().includes(query.toLowerCase()) ||
          p.name.toLowerCase().includes(query.toLowerCase()),
      ),
    );
  }, [assignedProjects, query]);

  return (
    <>
      <Card>
        <CardContent>
          <Stack gap={2}>
            <Typography variant="overline" display="block">
              {t("Assigned Projects")}
            </Typography>
            <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
              <Grid item xs={6} display="flex" alignItems="center">
                <Search sx={{ marginInlineEnd: 1 }} />
                <TextField
                  variant="standard"
                  fullWidth
                  onChange={onQueryInputChange}
                  value={query}
                  placeholder={t("Search projects by name or code")}
                  InputProps={{
                    endAdornment: query && (
                      <InputAdornment position="end">
                        <IconButton onClick={clearQueryInput}>
                          <Clear />
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
            </Grid>
          </Stack>
        </CardContent>
      </Card>
      <ProjectGrid projects={filteredProjects} maintainNormalStaffWorkspaceAbility={maintainNormalStaffWorkspaceAbility} maintainManagementStaffWorkspaceAbility={maintainManagementStaffWorkspaceAbility}/>
    </>
  );
};

export default AssignedProjects;