fix: showing only unused attributes in the left part of module editor

src/app/module-editor/[moduleId]/components/shared/AttributeTableActions/AttributeTableActions.tsx

@@ -1,10 +1,5 @@
-import { FC, useCallback, useMemo } from "react";
+import { FC } from "react";
-import {
+import { IconArrowRight, IconEdit, IconTrash } from "@tabler/icons-react";
-    IconArrowRight,
-    IconEdit,
-    IconTrash,
-    IconX,
-} from "@tabler/icons-react";
 import { Center, Flex } from "@mantine/core";
 import { useModuleEditorContext } from "@/app/module-editor/[moduleId]/contexts/ModuleEditorContext";
 import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
@@ -15,22 +10,7 @@ type Props = {
 };
 
 const AttributeTableActions: FC<Props> = ({ attribute }) => {
-    const { attributeActions, module } = useModuleEditorContext();
+    const { attributeActions } = useModuleEditorContext();
-    const usedAttributeIds = useMemo(
-        () => new Set(module?.attributes.map(a => a.id)),
-        [module]
-    );
-
-    const toggleAttributeInModule = useCallback(
-        (attribute: AttributeSchema) => {
-            if (usedAttributeIds.has(attribute.id)) {
-                attributeActions.removeAttributeFromModule(attribute);
-            } else {
-                attributeActions.addAttributeToModule(attribute);
-            }
-        },
-        [usedAttributeIds]
-    );
 
     return (
         <Center>
@@ -48,17 +28,11 @@ const AttributeTableActions: FC<Props> = ({ attribute }) => {
                     <IconTrash />
                 </ActionIconWithTip>
                 <ActionIconWithTip
-                    onClick={() => toggleAttributeInModule(attribute)}
+                    onClick={() =>
-                    tipLabel={
+                        attributeActions.addAttributeToModule(attribute)
-                        usedAttributeIds.has(attribute.id)
+                    }
-                            ? "Удалить из модуля"
+                    tipLabel={"Добавить в модуль"}>
-                            : "Добавить в модуль"
+                    <IconArrowRight />
-                    }>
-                    {usedAttributeIds.has(attribute.id) ? (
-                        <IconX />
-                    ) : (
-                        <IconArrowRight />
-                    )}
                 </ActionIconWithTip>
             </Flex>
         </Center>

src/app/module-editor/[moduleId]/components/shared/AttributesTable/AttributesTable.tsx

@@ -1,10 +1,16 @@
+import { useMemo } from "react";
 import { Box, Center, Text } from "@mantine/core";
 import useAttributesTableColumns from "@/app/module-editor/[moduleId]/components/shared/AttributesTable/useAttributesTableColumns";
 import { useModuleEditorContext } from "@/app/module-editor/[moduleId]/contexts/ModuleEditorContext";
 import BaseTable from "@/components/ui/BaseTable/BaseTable";
 
 const AttributesTable = () => {
-    const { attributes } = useModuleEditorContext();
+    const { attributes, module } = useModuleEditorContext();
+    const unusedAttributes = useMemo(() => {
+        const usedAttrIds = new Set(module?.attributes.map(a => a.id));
+        return attributes.filter(a => !usedAttrIds.has(a.id));
+    }, [module, attributes]);
+
     const columns = useAttributesTableColumns();
 
     if (attributes.length === 0) {
@@ -22,7 +28,7 @@ const AttributesTable = () => {
             <BaseTable
                 withTableBorder
                 columns={columns}
-                records={attributes}
+                records={unusedAttributes}
                 verticalSpacing={"md"}
                 groups={undefined}
                 styles={{ table: { width: "100%" } }}