Merge pull request #168 from cabcookie:improve-person-mention

CRM Projekte in Wartestellung ausblenden

components/crm/group-projects.tsx

@@ -1,6 +1,8 @@
+import { Project, useProjectsContext } from "@/api/ContextProjects";
 import { CrmProject } from "@/api/useCrmProjects";
 import { invertSign } from "@/helpers/functional";
 import { make2YearsRevenueText } from "@/helpers/projects";
+import { isFuture } from "date-fns";
 import {
   compact,
   filter,
@@ -13,10 +15,12 @@ import {
   sum,
   uniq,
 } from "lodash/fp";
-import { FC } from "react";
+import { FC, useState } from "react";
 import DefaultAccordionItem from "../ui-elements/accordion/DefaultAccordionItem";
 import CrmProjectAccordionItem from "../ui-elements/crm-project-details/CrmProjectAccordionItem";
 import { Accordion } from "../ui/accordion";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
 import HygieneIssueBadge from "./hygiene-issue-badge";
 import { hasHygieneIssues } from "./pipeline-hygiene";
 
@@ -42,50 +46,97 @@ const companyPipeline =
       sum
     )(crmProjects) ?? 0;
 
+const filterCompanyOnHoldProjects =
+  (
+    crmProjects: CrmProject[] | null,
+    showOnHold: boolean,
+    getProjectById: (projectId: string) => Project | undefined,
+    propertyName: ValidAccountPropertyNames
+  ) =>
+  (company: string) =>
+    flow(
+      getCrmProjectsByAccount(propertyName, company),
+      some(
+        (crm) =>
+          showOnHold ||
+          !crm.projectIds.length ||
+          flow(
+            get("projectIds"),
+            map(getProjectById),
+            some(flow(get("onHoldTill"), isFuture, (b) => !b))
+          )(crm)
+      )
+    )(crmProjects);
+
 const GroupCrmProjects: FC<GroupCrmProjectsProps> = ({
   crmProjects,
   propertyName,
-}) =>
-  flow(
-    map(get(propertyName)),
-    uniq,
-    compact,
-    sortBy(flow(companyPipeline(crmProjects, propertyName), invertSign)),
-    map((company: string) => (
-      <DefaultAccordionItem
-        value={`${propertyName}-${company}`}
-        triggerTitle={company}
-        badge={
-          flow(
-            getCrmProjectsByAccount(propertyName, company),
-            some(hasHygieneIssues)
-          )(crmProjects) && <HygieneIssueBadge />
-        }
-        triggerSubTitle={[
-          `${flow(
-            getCrmProjectsByAccount(propertyName, company),
-            size
-          )(crmProjects)} projects`,
-          flow(
-            companyPipeline(crmProjects, propertyName),
-            make2YearsRevenueText
-          )(company),
-        ]}
-      >
-        <Accordion type="single" collapsible>
-          {flow(
-            getCrmProjectsByAccount(propertyName, company),
-            map(({ id }: CrmProject) => (
-              <CrmProjectAccordionItem
-                key={id}
-                crmProjectId={id}
-                showProjects
-              />
-            ))
-          )(crmProjects)}
-        </Accordion>
-      </DefaultAccordionItem>
-    ))
-  )(crmProjects);
+}) => {
+  const [showOnHold, setShowOnHold] = useState(false);
+  const { getProjectById } = useProjectsContext();
+
+  return (
+    <>
+      <div className="mt-2 flex items-center space-x-2">
+        <Switch
+          id="show-onhold"
+          checked={showOnHold}
+          onCheckedChange={setShowOnHold}
+        />
+        <Label htmlFor="show-onhold">Include projects on hold</Label>
+      </div>
+
+      {flow(
+        map(get(propertyName)),
+        uniq,
+        compact,
+        sortBy(flow(companyPipeline(crmProjects, propertyName), invertSign)),
+        filter(
+          filterCompanyOnHoldProjects(
+            crmProjects,
+            showOnHold,
+            getProjectById,
+            propertyName
+          )
+        ),
+        map((company: string) => (
+          <DefaultAccordionItem
+            value={`${propertyName}-${company}`}
+            triggerTitle={company}
+            badge={
+              flow(
+                getCrmProjectsByAccount(propertyName, company),
+                some(hasHygieneIssues)
+              )(crmProjects) && <HygieneIssueBadge />
+            }
+            triggerSubTitle={[
+              `${flow(
+                getCrmProjectsByAccount(propertyName, company),
+                size
+              )(crmProjects)} projects`,
+              flow(
+                companyPipeline(crmProjects, propertyName),
+                make2YearsRevenueText
+              )(company),
+            ]}
+          >
+            <Accordion type="single" collapsible>
+              {flow(
+                getCrmProjectsByAccount(propertyName, company),
+                map(({ id }: CrmProject) => (
+                  <CrmProjectAccordionItem
+                    key={id}
+                    crmProjectId={id}
+                    showProjects
+                  />
+                ))
+              )(crmProjects)}
+            </Accordion>
+          </DefaultAccordionItem>
+        ))
+      )(crmProjects)}
+    </>
+  );
+};
 
 export default GroupCrmProjects;

components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

docs/releases/next.md

@@ -1,3 +1,3 @@
-# Fehlerbehebungen auf Aktivität-Deteilseite (Version :VERSION)
+# CRM Projekte in Wartestellung ausblenden (Version :VERSION)
 
-- Projekte können nun wieder hinzugefügt werden.
+- CRM Projekte die ausschließlich mit Projekten verknüpft sind, die im Moment stummgeschaltet sind (On Hold), werden ausgeblendet. Es sei denn der Filter „Include projects on hold“ ist aktiviert.

package.json

@@ -47,6 +47,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",