feat : update mutilple apply

2026-09-04 17:50:40 +07:00
parent 45c1567dff
commit dc96ff0036
6 changed files with 119 additions and 43 deletions
@@ -128,10 +128,10 @@ import {
  applyTeamFields,
  limitPresets,
  parseTeamPresets,
-  teamApplyFields,
  teamPresetCookieKey,
  teamPresetStorageKey,
-  type TeamApplyField,
+  type TeamApplySelection,
+  type TeamMemberApplyField,
  type TeamPreset,
  type TeamToolValue,
 } from "@/lib/guides/team-tools";
@@ -159,6 +159,15 @@ type CatalogItem = {
  rarity?: number | null;
  weaponType?: string | null;
 };
+const teamMemberApplyOptions = [
+  ["characterKey", "Character"],
+  ["weaponKey", "Weapon"],
+  ["artifactKey", "Artifact 1"],
+  ["secondArtifactKey", "Artifact 2"],
+  ["constellation", "C"],
+  ["refinement", "R"],
+  ["damage", "Damage"],
+] as const satisfies readonly (readonly [TeamMemberApplyField, string])[];
 type Guide = {
  id: string;
  characterKey: string;
@@ -2073,7 +2082,7 @@ function TeamEditor({
  const [presets, setPresets] = useState<TeamPreset[]>([]);
  const [presetsHydrated, setPresetsHydrated] = useState(false);
  const [presetsGuideId, setPresetsGuideId] = useState<string | null>(null);
-  const [applyFields, setApplyFields] = useState<TeamApplyField[]>(["loadout"]);
+  const [applyFields, setApplyFields] = useState<TeamApplySelection[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [searchTarget, setSearchTarget] = useState<TeamSearchTarget>("all");
  const filteredTeams = useMemo(() => {
@@ -2177,12 +2186,12 @@ function TeamEditor({
      return next;
    });
  };
-  const toggleApplyField = (field: TeamApplyField, checked: boolean) => {
+  const toggleApplyField = (field: TeamApplySelection, checked: boolean) => {
    setApplyFields((current) => {
      const next = new Set(current);
      if (checked) next.add(field);
      else next.delete(field);
-      return teamApplyFields.filter((candidate) => next.has(candidate));
+      return [...next];
    });
  };
  const applyChanges = () => {
@@ -2878,18 +2887,47 @@ function TeamEditor({
        />
      </CardFooter>
      <Dialog open={applyOpen} onOpenChange={setApplyOpen}>
-        <DialogContent>
+        <DialogContent className="max-h-[90svh] overflow-y-auto sm:max-w-3xl">
          <DialogHeader>
            <DialogTitle>Multiple Apply</DialogTitle>
            <DialogDescription>คัดลอกค่าจาก {teams.find((team) => team.clientId === sourceTeamId)?.title || "Source Team"} ไปยัง {selectedTeamIds.size} Team ที่เลือก: {[...selectedTeamIds].map((id) => teams.find((team) => team.clientId === id)?.title || "Untitled Team").join(", ")}</DialogDescription>
          </DialogHeader>
-          <FieldSet>
-            <FieldLegend>ข้อมูลที่ต้องการคัดลอก</FieldLegend>
-            <Field orientation="horizontal"><Checkbox checked={applyFields.includes("loadout")} onCheckedChange={(checked) => toggleApplyField("loadout", checked === true)} /><FieldLabel>Loadout: Character, Weapon, Artifact, C, R</FieldLabel></Field>
-            <Field orientation="horizontal"><Checkbox checked={applyFields.includes("damage")} onCheckedChange={(checked) => toggleApplyField("damage", checked === true)} /><FieldLabel>Damage</FieldLabel></Field>
-            <Field orientation="horizontal"><Checkbox checked={applyFields.includes("rotation")} onCheckedChange={(checked) => toggleApplyField("rotation", checked === true)} /><FieldLabel>Rotation</FieldLabel></Field>
-            <Field orientation="horizontal"><Checkbox checked={applyFields.includes("combo")} onCheckedChange={(checked) => toggleApplyField("combo", checked === true)} /><FieldLabel>Combo</FieldLabel></Field>
-          </FieldSet>
+          <div className="flex flex-col gap-5">
+            {teams.find((team) => team.clientId === sourceTeamId)?.members.map((member, memberIndex) => {
+              const characterName = characters.find((character) => character.key === member.characterKey)?.name || "No character";
+              return (
+                <FieldSet key={memberIndex}>
+                  <FieldLegend>{characterName} (char{memberIndex + 1})</FieldLegend>
+                  <div className="grid gap-3 sm:grid-cols-4">
+                    {teamMemberApplyOptions.map(([field, label]) => {
+                      const selection = `member:${memberIndex}:${field}` as TeamApplySelection;
+                      const id = `apply-${memberIndex}-${field}`;
+                      return (
+                        <Field key={field} orientation="horizontal">
+                          <Checkbox id={id} checked={applyFields.includes(selection)} onCheckedChange={(checked) => toggleApplyField(selection, checked === true)} />
+                          <FieldLabel htmlFor={id}>{label}{field === "refinement" ? ` (R${member.refinement})` : ""}</FieldLabel>
+                        </Field>
+                      );
+                    })}
+                  </div>
+                </FieldSet>
+              );
+            })}
+            <FieldSet>
+              <FieldLegend>Team fields</FieldLegend>
+              <div className="grid gap-3 sm:grid-cols-2">
+                {(["rotation", "combo"] as const).map((field) => {
+                  const id = `apply-${field}`;
+                  return (
+                    <Field key={field} orientation="horizontal">
+                      <Checkbox id={id} checked={applyFields.includes(field)} onCheckedChange={(checked) => toggleApplyField(field, checked === true)} />
+                      <FieldLabel htmlFor={id}>{field === "rotation" ? "Rotation" : "Combo"}</FieldLabel>
+                    </Field>
+                  );
+                })}
+              </div>
+            </FieldSet>
+          </div>
          <DialogFooter><Button type="button" variant="outline" onClick={() => setApplyOpen(false)}>ยกเลิก</Button><Button type="button" disabled={!applyFields.length} onClick={applyChanges}>ยืนยันการคัดลอก</Button></DialogFooter>
        </DialogContent>
      </Dialog>