added comp_systems and modular instances frontend

src/Pages/TeamsPage/TeamPage/TeamPage.css

@@ -1,5 +1,5 @@
 .TeamPage {
-    flex-grow: 1;
+    height: calc(100vh - 140px);
     display: flex;
     flex-direction: column;
     position: relative;
@@ -9,3 +9,24 @@
 .TeamData {
     margin-bottom: 15px;
 }
+
+.TeamMembers {
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 15px;
+    margin-top: 15px;
+    border: 1px solid var(--tab-border-color);
+    padding: 15px;
+}
+
+.tabPanel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    border-left: 1px solid var(--tab-border-color);
+    border-right: 1px solid var(--tab-border-color);
+    border-bottom: 1px solid var(--tab-border-color);
+}

src/Pages/TeamsPage/TeamPage/TeamPage.tsx

@@ -5,6 +5,7 @@ import {
   Center,
   Grid,
   LoadingOverlay,
+  Tabs,
   Text,
   Textarea,
   TextInput,
@@ -23,35 +24,59 @@ import { useAuthenticationStore } from "Stores/AuthenticationStore";
 import TeamMemberCard from "Components/ListCard/TeamListCard/TeamMemberCard/TeamMemberCard";
 import { AddMember } from "Modals/AddMember/AddMember";
 import { notifications } from "@mantine/notifications";
+import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
+import { getTeamSystems } from "Api/QuantumBackend/MachineManagment";
+import type { ComputationalSystemListResponse } from "Types/Machine/Machine";
+import TeamMachinesListCard from "Components/ListCard/MachineListCard/TeamMachineListCard/TeamMachineListCard";
 
 function TeamPage() {
   const [isOpen, setIsOpen] = useState(false);
   const { team_id } = useParams();
   const { addTeam, teams, updateTeam } = useTeamStore();
-  const { profile } = useAuthenticationStore();
-  const [is_loading, set_is_loading] = useState(true);
+  const { profile, is_loading } = useAuthenticationStore();
+  const [is_loading_this, set_is_loading] = useState(true);
 
   const [cur_team, set_cur_team] = useState<Team>();
 
-  const [team_name, set_team_name] = useState(cur_team?.name);
-  const [team_descr, set_team_descr] = useState(cur_team?.description);
+  const [team_name, set_team_name] = useState(cur_team?.name || "");
+  const [team_descr, set_team_descr] = useState(cur_team?.description || "");
+
+  const [machines, set_machines] = useState<ComputationalSystemListResponse>({
+    systems: [],
+    cur_page: 0,
+    total_systems: 0,
+    page_size: 0,
+  });
+  const [cur_page, set_page] = useState<number>(1);
 
   useEffect(() => {
-    if (!cur_team && profile) {
-      getTeam(Number(team_id))
-        .then((team) => {
-          if (team) {
-            addTeam(team);
-            set_cur_team(team);
-            set_team_name(team.name);
-            set_team_descr(team.description);
-            set_is_loading(false);
+    if (!cur_team && profile && !is_loading) {
+      getTeam(Number(team_id)).then((team) => {
+        if (team) {
+          addTeam(team);
+          set_cur_team(team);
+          set_team_name(team.name);
+          set_team_descr(team.description);
+          set_is_loading(false);
+        }
+      });
+    }
+    if (
+      (!machines || cur_page != machines?.cur_page) &&
+      profile &&
+      !is_loading
+    ) {
+      getTeamSystems(Number(team_id), cur_page, 9 )
+        .then((systems) => {
+          if (systems) {
+            set_machines(systems);
           }
         })
         .catch(() => {
           set_is_loading(false);
         });
-    } else {
+    }
+    if (machines && cur_team && profile) {
       if (profile) {
         set_is_loading(false);
       }
@@ -59,7 +84,7 @@ function TeamPage() {
     if (teams.find((e) => e.id === Number(team_id)) != cur_team) {
       set_cur_team(teams.find((e) => e.id === Number(team_id)));
     }
-  }, [cur_team, profile, teams]);
+  }, [cur_team, profile, teams, machines, cur_page]);
 
   return (
     <>
@@ -79,147 +104,210 @@ function TeamPage() {
         team={cur_team}
       />
       <div className="TeamPage">
-        <LoadingOverlay
-          visible={is_loading}
-          zIndex={1000}
-          overlayProps={{ radius: "sm", blur: 2 }}
-          loaderProps={{ size: 50, type: "dots" }}
-        />
+        <Tabs
+          defaultValue="team"
+          classNames={{ panel: "tabPanel" }}
+          style={{ display: "flex", flexDirection: "column", height: "100%" }}
+        >
+          <Tabs.List>
+            <Tabs.Tab value="team">Команда</Tabs.Tab>
+            <Tabs.Tab value="machines">Системы</Tabs.Tab>
+          </Tabs.List>
 
-        <Card className="TeamData">
-          <Grid>
-            <Grid.Col span={3}>
-              <Title size={"xl"}>Имя команды:</Title>
-            </Grid.Col>
-            <Grid.Col span={9}>
-              <TextInput
-                size="md"
-                value={team_name}
-                onChange={(val) => {
-                  set_team_name(val.target.value);
-                }}
-              />
-            </Grid.Col>
-            <Grid.Col span={3}>
-              <Title size={"xl"}>Описание:</Title>
-            </Grid.Col>
-            <Grid.Col span={9}>
-              <Textarea
-                size="md"
-                value={team_descr ? team_descr : ""}
-                onChange={(val) => {
-                  set_team_descr(val.target.value);
-                }}
-                minRows={2}
-                maxRows={4}
-              />
-            </Grid.Col>
-            <Grid.Col span={3}>
-              <Title size={"xl"}>Создатель:</Title>
-            </Grid.Col>
-            <Grid.Col
-              span={9}
+          <Tabs.Panel value="team">
+            <LoadingOverlay
+              visible={is_loading_this}
+              zIndex={1000}
+              overlayProps={{ radius: "sm", blur: 2 }}
+              loaderProps={{ size: 50, type: "dots" }}
+            />
+
+            <Card className="TeamData">
+              <Grid>
+                <Grid.Col span={3}>
+                  <Title size={"xl"}>Имя команды:</Title>
+                </Grid.Col>
+                <Grid.Col span={9}>
+                  <TextInput
+                    size="md"
+                    value={team_name}
+                    onChange={(val) => {
+                      set_team_name(val.target.value);
+                    }}
+                  />
+                </Grid.Col>
+                <Grid.Col span={3}>
+                  <Title size={"xl"}>Описание:</Title>
+                </Grid.Col>
+                <Grid.Col span={9}>
+                  <Textarea
+                    size="md"
+                    value={team_descr ? team_descr : ""}
+                    onChange={(val) => {
+                      set_team_descr(val.target.value);
+                    }}
+                    minRows={2}
+                    maxRows={4}
+                  />
+                </Grid.Col>
+                <Grid.Col span={3}>
+                  <Title size={"xl"}>Создатель:</Title>
+                </Grid.Col>
+                <Grid.Col
+                  span={9}
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: "10px",
+                  }}
+                >
+                  <Avatar
+                    radius="xl"
+                    src={cur_team?.creator.user.profile_picture_path}
+                  />
+                  <Text size="md" style={{ textDecoration: "underline" }}>
+                    {cur_team?.creator.user.username} (
+                    {cur_team?.creator.user.email})
+                  </Text>
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <CustomButton
+                    color="accent"
+                    text="Сохранить"
+                    disabled={
+                      cur_team?.name == team_name &&
+                      cur_team?.description == team_descr
+                    }
+                    onClick={() => {
+                      if (cur_team && team_name)
+                        updateTeamRequest({
+                          team_id: cur_team.id,
+                          name: team_name,
+                          description: team_descr,
+                        }).then((team) => {
+                          updateTeam(team.team_id, {
+                            name: team.name,
+                            description: team.description,
+                          });
+                          notifications.show({
+                            radius: "md",
+                            title: "Информация команды обновлена успешно",
+                            message: "",
+                            icon: <IconCheck />,
+                            style: { paddingLeft: "5px" },
+                          });
+                        });
+                    }}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <CustomButton
+                    color="error"
+                    text="Отменить"
+                    disabled={
+                      cur_team?.name == team_name &&
+                      cur_team?.description == team_descr
+                    }
+                    onClick={() => {
+                      set_team_name(cur_team?.name);
+                      set_team_descr(cur_team?.description);
+                    }}
+                  />
+                </Grid.Col>
+              </Grid>
+            </Card>
+            <div
               style={{
                 display: "flex",
-                flexDirection: "row",
+                flexWrap: "nowrap",
+                gap: "20px",
                 alignItems: "center",
-                gap: "10px",
               }}
             >
-              <Avatar
-                radius="xl"
-                src={cur_team?.creator.user.profile_picture_path}
-              />
-              <Text size="md" style={{ textDecoration: "underline" }}>
-                {cur_team?.creator.user.username} (
-                {cur_team?.creator.user.email})
-              </Text>
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <CustomButton
-                color="accent"
-                text="Сохранить"
-                disabled={
-                  cur_team?.name == team_name &&
-                  cur_team?.description == team_descr
-                }
-                onClick={() => {
-                  if (cur_team && team_name)
-                    updateTeamRequest({
-                      team_id: cur_team.id,
-                      name: team_name,
-                      description: team_descr,
-                    }).then((team) => {
-                      updateTeam(team.team_id, {
-                        name: team.name,
-                        description: team.description,
-                      });
-                      notifications.show({
-                        radius: "md",
-                        title: "Информация команды обновлена успешно",
-                        message: "",
-                        icon: <IconCheck />,
-                        style: { paddingLeft: "5px" },
-                      });
-                    });
-                }}
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <CustomButton
-                color="error"
-                text="Отменить"
-                disabled={
-                  cur_team?.name == team_name &&
-                  cur_team?.description == team_descr
-                }
-                onClick={() => {
-                  set_team_name(cur_team?.name);
-                  set_team_descr(cur_team?.description);
-                }}
-              />
-            </Grid.Col>
-          </Grid>
-        </Card>
-        <div
-          style={{
-            display: "flex",
-            flexWrap: "nowrap",
-            gap: "20px",
-            alignItems: "center",
-          }}
-        >
-          <Title order={2} style={{ textWrap: "nowrap" }}>
-            Члены команды:{" "}
-          </Title>
-          <div>
-            <CustomButton
-              color="contrast"
-              onClick={() => {
-                setIsOpen(true);
+              <Title order={2} style={{ textWrap: "nowrap" }}>
+                Члены команды:{" "}
+              </Title>
+              <div>
+                <CustomButton
+                  color="contrast"
+                  onClick={() => {
+                    setIsOpen(true);
+                  }}
+                  icon={<IconPlus />}
+                  text="Добавить члена"
+                />
+              </div>
+            </div>
+            {cur_team && cur_team.members.length > 0 && (
+              <div className="TeamMembers">
+                {cur_team.members.map((member: TeamMember) => {
+                  return (
+                    <TeamMemberCard
+                      cur_team={cur_team}
+                      member={member}
+                      key={member.user.keycloak_id}
+                    />
+                  );
+                })}
+              </div>
+            )}
+            {!cur_team && !is_loading && (
+              <Alert color="red">
+                <Center>
+                  {" "}
+                  <Text c="contrast" size={"xl"}>
+                    Ошибка. Команда не найдена
+                  </Text>{" "}
+                </Center>
+              </Alert>
+            )}
+          </Tabs.Panel>
+
+          <Tabs.Panel value="machines">
+            <div
+              style={{
+                display: "flex",
+                flex: "1",
+                flexDirection: "column",
+                overflow: "scroll",
+                paddingRight: "10px",
+                margin: "0px",
               }}
-              icon={<IconPlus />}
-              text="Добавить члена"
-            />
-          </div>
-        </div>
-        {cur_team && cur_team.members.length > 0 && (
-          <div className="TeamMembers">
-            {cur_team.members.map((member: TeamMember) => {
-              return <TeamMemberCard cur_team={cur_team} member={member} />;
-            })}
-          </div>
-        )}
-        {!cur_team && !is_loading && (
-          <Alert color="red">
-            <Center>
-              {" "}
-              <Text c="contrast" size={"xl"}>
-                Ошибка. Команда не найдена
-              </Text>{" "}
-            </Center>
-          </Alert>
-        )}
+            >
+              {!is_loading && (
+                <PaginationContainer
+                  numberOfPages={Math.ceil(
+                    machines.total_systems / machines?.page_size,
+                  )}
+                  activePage={cur_page}
+                  isLoading={is_loading}
+                  setPage={set_page}
+                >
+                  {machines?.systems.length == 0 && (
+                    <Alert color="accent">
+                      <Center>
+                        {" "}
+                        <Text c="contrast" size={"xl"}>
+                          Нет вычислительных систем
+                        </Text>{" "}
+                      </Center>
+                    </Alert>
+                  )}
+                  {machines?.systems.length > 0 &&
+                    machines.systems.map((machine) => {
+                      return (
+                        <TeamMachinesListCard
+                          {...machine}
+                          key={machine.system.id}
+                        />
+                      );
+                    })}
+                </PaginationContainer>
+              )}
+            </div>
+          </Tabs.Panel>
+        </Tabs>
       </div>
     </>
   );