Initial commit

src/Components/ListCard/ExperimentsListCard.css

@@ -0,0 +1,50 @@
+.ExperimentsListCard {
+    height: 120px;
+    padding: 12px;
+}
+
+.ExperimentSectionWithLine {
+    border-right: 1px solid var(--mantine-color-contrast-filled);
+    padding-right: 10px;
+}
+
+.ExperimentPill {
+    background-color: var(--mantine-color-contrast-filled);
+    color: var(--mantine-color-primary-filled);
+}
+
+.ExperimentPill2 {
+    border: 2px solid var(--mantine-color-accent-filled);
+    background-color: transparent;
+    color: var(--mantine-color-accent-filled);
+    * {
+        width: 100%;
+        text-align: center;
+    }
+}
+
+.dateContainer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: right;
+    gap: 5px;
+    .p {
+        text-wrap: nowrap;
+    }
+}
+.TopRightContainer {
+    justify-content: right;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 15px;
+    justify-items: center;
+}
+
+.RightExperimentSection {
+    text-align: right;
+    padding-right: 10px;
+    display: flex;
+    flex-direction: column;
+}

src/Components/ListCard/ExperimentsListCard.tsx

@@ -0,0 +1,120 @@
+import { Card, Pill, SimpleGrid, Text, UnstyledButton } from "@mantine/core";
+import "./ExperimentsListCard.css";
+import { useNavigate } from "react-router";
+import type { Experiment, TaskData } from "Types/Experiment/Experiment";
+import { IconTrash } from "@tabler/icons-react";
+import type { MouseEvent } from "react";
+import { useExperimentStore } from "Stores/ExperimentStore";
+
+function ExperimentsListCard(props: Experiment) {
+  const navigate = useNavigate();
+  const { selectExperiment, removeExperiment, tasks, teams } =
+    useExperimentStore();
+
+  const team = teams.find((team) => {
+    return team.id == props.team_id;
+  });
+
+  const experiment_tasks = tasks.filter((a) => a.id in props.tasks_ids);
+
+  const handleDelete = () => {
+    removeExperiment(props.id);
+  };
+
+  return (
+    <Card
+      className="ExperimentsListCard"
+      onClick={() => {
+        console.log(props.id);
+        selectExperiment(props.id);
+        navigate(props.id.toString());
+      }}
+    >
+      <SimpleGrid cols={3}>
+        <div className="ExperimentSectionWithLine">
+          <Text mb="sm" size="md" style={{ textDecorationLine: "underline" }}>
+            {props.name}
+          </Text>
+          <Text mb="sm" size="md">
+            Team: {team ? team.name : "ERROR"}
+          </Text>
+          <Pill className="ExperimentPill">
+            <Text mb="sm" size="md">
+              Статус: {props.experiment_status}
+            </Text>
+          </Pill>
+        </div>
+        <div className="ExperimentSectionWithLine">
+          <SimpleGrid cols={2} verticalSpacing="0px">
+            <Text>Задачи:</Text>
+            {experiment_tasks.map((task: TaskData<any>) => {
+              return (
+                <Text
+                  size="md"
+                  style={{
+                    textWrap: "nowrap",
+                    textOverflow: "ellipsis",
+                    overflow: "hidden",
+                  }}
+                >
+                  {task.name}
+                </Text>
+              );
+            })}
+            {experiment_tasks.length == 0 ? (
+              <Pill
+                size="md"
+                className="ExperimentPill2"
+                style={{
+                  textWrap: "nowrap",
+                  textOverflow: "ellipsis",
+                  overflow: "hidden",
+                }}
+              >
+                Нет Задач
+              </Pill>
+            ) : (
+              <></>
+            )}
+          </SimpleGrid>
+        </div>
+        <div className="RightExperimentSection">
+          <div className="TopRightContainer">
+            <div className="dateContainer">
+              <Text size="sm">{props.date_created.toLocaleDateString()} </Text>
+              <Text size="sm">{props.date_created.toLocaleTimeString()}</Text>
+            </div>
+            <UnstyledButton
+              onClick={(e: MouseEvent) => {
+                e.stopPropagation();
+                handleDelete();
+              }}
+              style={{ cursor: "pointer" }}
+            >
+              <IconTrash size={20} />
+            </UnstyledButton>
+          </div>
+          <div
+            style={{
+              flexGrow: 1,
+              display: "flex",
+              justifyContent: "right",
+              alignItems: "center",
+            }}
+          >
+            <Text>
+              {" "}
+              Тип эксперимента:{" "}
+              <Pill className="ExperimentPill2">{props.experiment_type}</Pill>
+            </Text>
+          </div>
+          <Text color="secondary" size="sm">
+            #{props.id}
+          </Text>
+        </div>
+      </SimpleGrid>
+    </Card>
+  );
+}
+
+export default ExperimentsListCard;