diff --git a/apps/web/app/environments/[environmentId]/attributes/AttributeClassesList.tsx b/apps/web/app/environments/[environmentId]/attributes/AttributeClassesList.tsx index 41e59c9373..eeded6316f 100644 --- a/apps/web/app/environments/[environmentId]/attributes/AttributeClassesList.tsx +++ b/apps/web/app/environments/[environmentId]/attributes/AttributeClassesList.tsx @@ -2,7 +2,7 @@ import LoadingSpinner from "@/components/shared/LoadingSpinner"; import { useAttributeClasses } from "@/lib/attributeClasses/attributeClasses"; -import { Button, ErrorComponent } from "@formbricks/ui"; +import { Badge, Button, ErrorComponent, Switch } from "@formbricks/ui"; import { QuestionMarkCircleIcon, TagIcon } from "@heroicons/react/24/solid"; import { useState } from "react"; import AttributeDetailModal from "./AttributeDetailModal"; @@ -16,6 +16,7 @@ export default function AttributeClassesList({ environmentId }: { environmentId: const [isAttributeDetailModalOpen, setAttributeDetailModalOpen] = useState(false); const [isUploadCSVModalOpen, setUploadCSVModalOpen] = useState(false); const [activeAttributeClass, setActiveAttributeClass] = useState("" as any); + const [showArchived, setShowArchived] = useState(false); if (isLoadingAttributeClasses) { return ; @@ -30,9 +31,24 @@ export default function AttributeClassesList({ environmentId }: { environmentId: setAttributeDetailModalOpen(true); }; + const toggleShowArchived = () => { + setShowArchived(!showArchived); + }; + + const displayedAttributeClasses = showArchived ? attributeClasses : attributeClasses.filter(ac => !ac.archived); + const hasArchived = attributeClasses.some(ac => ac.archived); + return ( <> -
+
+ {hasArchived &&
+ Show archived + +
}
- {attributeClasses.map((attributeClass) => ( + {displayedAttributeClasses.map((attributeClass) => (
-
{attributeClass.name}
+
{attributeClass.name} + + {attributeClass.archived && } + +
{attributeClass.description}
diff --git a/apps/web/app/environments/[environmentId]/attributes/AttributeSettingsTab.tsx b/apps/web/app/environments/[environmentId]/attributes/AttributeSettingsTab.tsx index 35164d634b..571e60b1a5 100644 --- a/apps/web/app/environments/[environmentId]/attributes/AttributeSettingsTab.tsx +++ b/apps/web/app/environments/[environmentId]/attributes/AttributeSettingsTab.tsx @@ -3,6 +3,7 @@ import { useAttributeClassMutation } from "@/lib/attributeClasses/mutateAttribut import { Button, Input, Label } from "@formbricks/ui"; import type { AttributeClass } from "@prisma/client"; import { useForm } from "react-hook-form"; +import { ArchiveBoxArrowDownIcon, ArchiveBoxXMarkIcon } from "@heroicons/react/24/solid"; interface AttributeSettingsTabProps { environmentId: string; @@ -31,6 +32,12 @@ export default function AttributeSettingsTab({ setOpen(false); }; + const handleArchiveToggle = async () => { + const data = { archived: !attributeClass.archived }; + await triggerAttributeClassMutate(data); + mutateAttributeClasses(); + }; + return (
@@ -67,13 +74,22 @@ export default function AttributeSettingsTab({ ) : null}
-
+
+ {attributeClass.type !== "automatic" && ( + + )}
{attributeClass.type !== "automatic" && (
diff --git a/apps/web/app/environments/[environmentId]/events/EventClassesList.tsx b/apps/web/app/environments/[environmentId]/events/EventClassesList.tsx index 06f45b2513..ccf8b6d71e 100644 --- a/apps/web/app/environments/[environmentId]/events/EventClassesList.tsx +++ b/apps/web/app/environments/[environmentId]/events/EventClassesList.tsx @@ -36,7 +36,7 @@ export default function EventClassesList({ environmentId }) { <>