Edit crag routes

src/app/[lang]/admin/crags/[cragSlug]/edit/components/crag-publish-status-card.tsx

@@ -0,0 +1,82 @@
+import { Crag } from "@/graphql/generated";
+import PublishStatusActions from "../../../components/publish-status-actions";
+import { genderizeVerb } from "@/lib/text-helpers";
+import getCurrentUser from "@/lib/auth/get-current-user";
+import { getBgStyle } from "@/lib/contributables-helpers";
+
+type TCragPublishStatusCard = {
+  crag: Crag;
+};
+
+async function CragPublishStatusCard({ crag }: TCragPublishStatusCard) {
+  const currentUser = await getCurrentUser();
+
+  return (
+    <div className="flex justify-center px-4 xs:px-8 mt-7 mb-8">
+      <div
+        className={`@container max-w-2xl w-full mx-auto rounded-lg ${getBgStyle(crag.publishStatus)}`}
+      >
+        <div className="px-4 py-3">
+          {currentUser?.roles.includes("admin") ? (
+            <>
+              {crag.publishStatus === "draft" && (
+                <>
+                  Plezališče je v statusu{" "}
+                  <span className="font-medium">osnutek</span>. Ko zaključiš z
+                  urejanjem plezališča ter sektorjev in smeri v njem, ga objavi.
+                </>
+              )}
+
+              {crag.publishStatus === "in_review" && (
+                <>
+                  Plezališče je v statusu{" "}
+                  <span className="font-medium">v pregledu</span>. Ko zaključiš
+                  s pregledom potrdi ali zavrni objavo.
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              {crag.publishStatus === "draft" && (
+                <>
+                  Plezališče je v statusu{" "}
+                  <span className="font-medium">osnutek</span>. Ko zaključiš z
+                  urejanjem plezališča ter sektorjev in smeri v njem, ga pošlji
+                  uredništvu v pregled in objavo.
+                </>
+              )}
+
+              {crag.publishStatus === "in_review" && (
+                <>
+                  Plezališče je v statusu{" "}
+                  <span className="font-medium">v pregledu</span>. Prispevek bo
+                  objavljen ko bo pregledan s strani uredništva.
+                </>
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="px-4 py-2 border-t border-neutral-200 flex justify-between items-center">
+          {/* contributor */}
+          <div className="flex text-neutral-500 py-1">
+            {currentUser && currentUser.id === crag.user?.id ? (
+              "Tvoj prispevek"
+            ) : (
+              <>
+                <span className="hidden @sm:block">
+                  {genderizeVerb("Prispeval", "M")}:&nbsp;
+                </span>
+                {crag.user?.fullName}
+              </>
+            )}
+          </div>
+
+          <PublishStatusActions contributable={crag} disabled={false} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CragPublishStatusCard;

src/app/[lang]/edit/(crag)/[cragSlug]/components/edit-crag-form.tsx → src/app/[lang]/admin/crags/[cragSlug]/edit/components/edit-crag-form.tsx

@@ -1,5 +1,5 @@
 import { Country, Crag } from "@/graphql/generated";
-import CragForm from "../../components/crag-form";
+import CragForm from "../../../components/crag-form";
 
 type TEditCragForm = {
   countriesWithAreas: Country[];

src/app/[lang]/edit/(crag)/[cragSlug]/page.tsx → src/app/[lang]/admin/crags/[cragSlug]/edit/page.tsx

@@ -2,14 +2,15 @@ import Breadcrumbs from "@/components/breadcrumbs";
 import ContentHeader from "@/components/content-header";
 import IconInfo from "@/components/ui/icons/info";
 import IconRoutes from "@/components/ui/icons/routes";
-import TabMenu, { TTabMenuItem } from "@/components/ui/tab-menu";
+import TabMenu from "@/components/ui/tab-menu";
 import {
   EditCragPageCountriesDocument,
   EditCragPageCragDocument,
 } from "@/graphql/generated";
 import urqlServer from "@/graphql/urql-server";
 import { gql } from "urql";
 import EditCragForm from "./components/edit-crag-form";
+import CragPublishStatusCard from "./components/crag-publish-status-card";
 
 type TEditCragPageProps = {
   params: { cragSlug: string };
@@ -30,21 +31,6 @@ async function EditCragPage({ params: { cragSlug } }: TEditCragPageProps) {
 
   const crag = cragData.cragBySlug;
 
-  const tabMenuItems: TTabMenuItem[] = [
-    {
-      label: "Osnovni podatki",
-      link: `/edit/${cragSlug}`,
-      isActive: true,
-      icon: <IconInfo />,
-    },
-    {
-      label: "Sektorji in smeri",
-      link: `/edit/${cragSlug}/sectors`,
-      isActive: false,
-      icon: <IconRoutes />,
-    },
-  ];
-
   return (
     <>
       <ContentHeader
@@ -54,13 +40,35 @@ async function EditCragPage({ params: { cragSlug } }: TEditCragPageProps) {
             crumbs={[
               { label: "Plezanje.net", link: "/" },
               { label: "Urejanje", link: null },
+              { label: "Plezališča", link: null },
               { label: crag.name, link: null },
             ]}
           />
         }
-        tabMenu={<TabMenu items={tabMenuItems} />}
+        tabMenu={
+          <TabMenu
+            items={[
+              {
+                label: "Osnovni podatki",
+                link: `/urejanje/plezalisca/${cragSlug}/uredi`,
+                isActive: true,
+                icon: <IconInfo />,
+              },
+              {
+                label: "Sektorji in smeri",
+                link: `/urejanje/plezalisca/${cragSlug}/sektorji`,
+                isActive: false,
+                icon: <IconRoutes />,
+              },
+            ]}
+          />
+        }
       />
 
+      {crag.publishStatus !== "published" && (
+        <CragPublishStatusCard crag={crag} />
+      )}
+
       <EditCragForm countriesWithAreas={countriesData.countries} crag={crag} />
     </>
   );
@@ -116,6 +124,19 @@ gql`
         maxIntrinsicWidth
         aspectRatio
       }
+      publishStatus
+      user {
+        id
+        fullName
+      }
+      sectors {
+        id
+        label
+        name
+        routes {
+          id
+        }
+      }
     }
   }
 `;

src/app/[lang]/admin/crags/[cragSlug]/sectors/[sectorId]/routes/components/delete-routes-dialog.tsx

@@ -0,0 +1,61 @@
+import Dialog from "@/components/ui/dialog";
+import { Dispatch, SetStateAction, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Route } from "@/graphql/generated";
+import deleteRoutesAction from "../lib/delete-routes-action";
+
+type TDeleteRoutesDialogProps = {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  routes: Route[];
+};
+
+function DeleteRoutesDialog({
+  isOpen,
+  setIsOpen,
+  routes,
+}: TDeleteRoutesDialogProps) {
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(false);
+
+  const handleConfirm = async () => {
+    setLoading(true);
+    await deleteRoutesAction(routes.map((route) => route.id));
+    setIsOpen(false);
+    setLoading(false);
+    router.refresh();
+  };
+
+  return (
+    <Dialog
+      title="Brisanje smeri"
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      cancel={{ label: "Prekliči", disabled: loading }}
+      confirm={{
+        label: "Izbriši",
+        callback: handleConfirm,
+        dontCloseOnConfirm: true,
+        loading: loading,
+        disabled: loading,
+      }}
+    >
+      <>
+        <div>
+          Ali res želiš izbrisati{" "}
+          {routes.length == 1 ? (
+            <span>
+              smer <span className="font-medium">{routes[0].name}</span>
+            </span>
+          ) : (
+            <span>vse označene smeri</span>
+          )}
+          ?
+        </div>
+      </>
+    </Dialog>
+  );
+}
+
+export default DeleteRoutesDialog;