+
{cragHasSectors ? (
-
);
diff --git a/src/app/[lang]/admin/crags/[cragSlug]/sectors/components/new-first-sector-button.tsx b/src/app/[lang]/admin/crags/[cragSlug]/sectors/components/new-first-sector-button.tsx
new file mode 100644
index 00000000..5b5264e3
--- /dev/null
+++ b/src/app/[lang]/admin/crags/[cragSlug]/sectors/components/new-first-sector-button.tsx
@@ -0,0 +1,40 @@
+import IconPlus from "@/components/ui/icons/plus";
+import SectorDialog from "./sector-dialog";
+import { useState } from "react";
+
+type TNewFirstSectorButtonProps = {
+ cragId: string;
+ disabled: boolean;
+};
+
+function NewFirstSectorButton({
+ cragId,
+ disabled,
+}: TNewFirstSectorButtonProps) {
+ const [sectorDialogIsOpen, setSectorDialogIsOpen] = useState(false);
+
+ return (
+ <>
+
+ setSectorDialogIsOpen(true)}
+ >
+ dodaj sektor na začetek
+
+
+
+
+
+ );
+}
+
+export default NewFirstSectorButton;
diff --git a/src/app/[lang]/admin/crags/[cragSlug]/sectors/components/sector-card.tsx b/src/app/[lang]/admin/crags/[cragSlug]/sectors/components/sector-card.tsx
new file mode 100644
index 00000000..d3238fcb
--- /dev/null
+++ b/src/app/[lang]/admin/crags/[cragSlug]/sectors/components/sector-card.tsx
@@ -0,0 +1,178 @@
+import Button from "@/components/ui/button";
+import IconDelete from "@/components/ui/icons/delete";
+import IconDrag from "@/components/ui/icons/drag";
+import IconEdit from "@/components/ui/icons/edit";
+import { IconSize } from "@/components/ui/icons/icon-size";
+import IconMore from "@/components/ui/icons/more";
+import IconPlus from "@/components/ui/icons/plus";
+import IconRoutes from "@/components/ui/icons/routes";
+import { Sector } from "@/graphql/generated";
+import { genderizeVerb } from "@/lib/text-helpers";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { usePathname, useRouter } from "next/navigation";
+import PublishStatusActions from "../../../components/publish-status-actions";
+import { labelAndNameToString } from "@/lib/sector-helpers";
+import { canEdit, getBgStyle } from "@/lib/contributables-helpers";
+import { useAuthContext } from "@/lib/auth/auth-context";
+
+type TSectorCardProps = {
+ sector: Sector;
+ disabled?: boolean;
+ onAddClick: () => void;
+ onEditClick: () => void;
+ onDeleteClick: () => void;
+};
+
+function SectorCard({
+ sector,
+ disabled,
+ onAddClick,
+ onEditClick,
+ onDeleteClick,
+}: TSectorCardProps) {
+ const { currentUser } = useAuthContext();
+
+ const router = useRouter();
+ const pathname = usePathname();
+
+ const moreAction = (
+
{}}>
+
+ );
+
+ const {
+ attributes,
+ listeners,
+ setNodeRef,
+ transform,
+ transition,
+ isDragging,
+ } = useSortable({ id: sector.id });
+
+ const style = {
+ transform: CSS.Translate.toString(transform),
+ transition,
+ };
+
+ return (
+ // {/* sector card */}
+
+ {/* drag, name, actions */}
+
+ {/* drag, name, (more) */}
+
+
+
+ {}}
+ >
+
+
+
+ {labelAndNameToString(sector.label, sector.name)}
+
+
+
{moreAction}
+
+
+ {/* actions */}
+
+
+ {/* edit routes */}
+
{
+ router.push(`${pathname}/${sector.id}/smeri`);
+ }}
+ >
+
+
+ {/* divider */}
+
+
+
{moreAction}
+
+ {/* divider */}
+
+
+ {/* edit */}
+
+
+
+ {/* divider */}
+
+
+ {/* delete */}
+
+
+
+ {/* divider */}
+
+
+ {/* add sector */}
+
+
+
+
+
+
+ {/* contributor, publish actions */}
+ {sector.publishStatus !== "published" && (
+
+ {/* contributor */}
+
+ {currentUser && currentUser.id === sector.user?.id ? (
+ "Tvoj prispevek"
+ ) : (
+ <>
+
+ {genderizeVerb("Prispeval", "M")}:
+
+ {sector.user?.fullName}
+
+ )}
+
+
+ {/* publish status actions */}
+
+
+ )}
+
+ );
+}
+
+export default SectorCard;
diff --git a/src/app/[lang]/edit/(crag)/[cragSlug]/sectors/components/edit-sectors/sector-dialog.tsx b/src/app/[lang]/admin/crags/[cragSlug]/sectors/components/sector-dialog.tsx
similarity index 92%
rename from src/app/[lang]/edit/(crag)/[cragSlug]/sectors/components/edit-sectors/sector-dialog.tsx
rename to src/app/[lang]/admin/crags/[cragSlug]/sectors/components/sector-dialog.tsx
index 8cb5dc19..32f9c5b8 100644
--- a/src/app/[lang]/edit/(crag)/[cragSlug]/sectors/components/edit-sectors/sector-dialog.tsx
+++ b/src/app/[lang]/admin/crags/[cragSlug]/sectors/components/sector-dialog.tsx
@@ -8,9 +8,9 @@ import {
useRef,
useState,
} from "react";
-import createSectorAction from "../../lib/create-sector-action";
+import createSectorAction from "../lib/create-sector-action";
import { useRouter } from "next/navigation";
-import updateSectorAction from "../../lib/update-sector-action";
+import updateSectorAction from "../lib/update-sector-action";
import { Sector } from "@/graphql/generated";
type TSectorDialogBaseProps = {
@@ -77,7 +77,8 @@ function SectorDialog({
formRef.current?.requestSubmit();
};
- const handleFormAction = async () => {
+ const handleOnSubmit = async (e: FormEvent
) => {
+ e.preventDefault();
setLoading(true);
// validate form
@@ -140,7 +141,7 @@ function SectorDialog({
dontCloseOnConfirm: true,
}}
>
-