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

feat: update next step of CRM project and copy for CRM system

components/crm/next-steps.tsx

@@ -0,0 +1,115 @@
+import useCrmProject from "@/api/useCrmProject";
+import { CrmProject } from "@/api/useCrmProjects";
+import { format } from "date-fns";
+import { Edit, LinkIcon, Loader2 } from "lucide-react";
+import { FC, useEffect, useState } from "react";
+import { Button } from "../ui/button";
+import { Textarea } from "../ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import { useToast } from "../ui/use-toast";
+
+type NextStepProps = {
+  crmProject: CrmProject;
+};
+
+const NextStep: FC<NextStepProps> = ({ crmProject }) => {
+  const { updateCrmProject } = useCrmProject(crmProject.id);
+  const [editing, setEditing] = useState(false);
+  const [nextStepVal, setNextStepVal] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    setEditing(false);
+    setIsSaving(false);
+    setNextStepVal("");
+  }, [crmProject]);
+
+  const handleSaveClick = () => {
+    setIsSaving(true);
+    updateCrmProject({
+      nextStep: `${format(new Date(), "MM/dd/yyyy")}: ${nextStepVal}`,
+    });
+  };
+
+  const handleCopyToClipBoard = async () => {
+    if (!crmProject.nextStep) return;
+    try {
+      await navigator.clipboard.writeText(crmProject.nextStep);
+      toast({ title: "Next step copied to clipboard" });
+    } catch (error) {
+      toast({
+        title: "Error copying next step to clipboard",
+        variant: "destructive",
+        description: JSON.stringify(error),
+      });
+    }
+  };
+
+  return !editing ? (
+    <div>
+      <span className="font-semibold">Next step: </span>
+      {crmProject.nextStep ?? "-"}{" "}
+      <div className="flex flex-row gap-2">
+        <Edit
+          className="w-4 h-4 text-muted-foreground hover:text-primary inline"
+          onClick={() => setEditing(true)}
+        />
+        {crmProject.nextStep && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <LinkIcon
+                  className="w-4 h-4 text-muted-foreground hover:text-primary"
+                  onClick={handleCopyToClipBoard}
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Copy next step to clipboard</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+    </div>
+  ) : (
+    <div className="space-y-1">
+      <div className="font-semibold">
+        Next step{" "}
+        <span className="font-normal text-muted-foreground">
+          Date will be added automatically
+        </span>
+        :
+      </div>
+      <div className="text-sm text-muted-foreground">
+        Previous value: {crmProject.nextStep ?? "-"}
+      </div>
+      <Textarea
+        value={nextStepVal}
+        onChange={(event) => setNextStepVal(event.target.value)}
+        disabled={isSaving}
+      />
+      <div className="flex flex-row gap-1">
+        <Button disabled={isSaving} onClick={handleSaveClick} size="sm">
+          {isSaving && <Loader2 className="w-4 h-4 animate-spin" />}
+          Save
+        </Button>
+        <Button
+          variant="outline"
+          disabled={isSaving}
+          onClick={() => setEditing(false)}
+          size="sm"
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default NextStep;

components/ui-elements/crm-project-details/crm-project-details.tsx

@@ -3,6 +3,7 @@ import useCrmProject from "@/api/useCrmProject";
 import CrmData from "@/components/crm/CrmData";
 import { makeCrmLink } from "@/components/crm/CrmLink";
 import LabelData from "@/components/crm/label-data";
+import NextStep from "@/components/crm/next-steps";
 import { hasHygieneIssues } from "@/components/crm/pipeline-hygiene";
 import ApiLoadingError from "@/components/layouts/ApiLoadingError";
 import ProjectAccordionItem from "@/components/projects/ProjectAccordionItem";
@@ -87,7 +88,7 @@ const CrmProjectDetails: FC<CrmProjectDetailsProps> = ({
               data={format(crmProject.closeDate, "PP")}
             />
             <LabelData label="Account" data={crmProject.accountName} />
-            <LabelData label="Next step" data={crmProject.nextStep} />
+            <NextStep crmProject={crmProject} />
             <LabelData label="Partner" data={crmProject.partnerName} />
             <LabelData label="Owner" data={crmProject.opportunityOwner} />
             <CrmData crmId={crmProject.crmId} />

components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

docs/releases/next.md

@@ -1,4 +1 @@
-# Fehlerbehebungen bei CRM Projekt-Aktualisierungen (Version :VERSION)
-
-- CRM Projekte sind nach Größe der Pipeline sortiert, auch wenn nach Kunden, Partnern oder Hygiene-Themen gruppiert wird.
-- Für jeden Filter in der CRM-Projekte Listenansicht werden die Anzahl der Projekte angezeigt.
+# Nächsten Schritt aktualisieren und für CRM kopieren (Version :VERSION)