Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
underbluewaters committed Sep 26, 2024
1 parent 61b449d commit 92211ef
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 98 deletions.
260 changes: 162 additions & 98 deletions packages/client/src/admin/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import getSlug from "../getSlug";
import { TranslateIcon } from "@heroicons/react/outline";
import TranslatedPropControl from "../components/TranslatedPropControl";
import bytes from "bytes";
import { Pencil1Icon, Pencil2Icon } from "@radix-ui/react-icons";

export default function Settings() {
const { data } = useCurrentProjectMetadata();
Expand All @@ -76,7 +77,14 @@ export default function Settings() {
<AccessControlSettings />
</div>
<div className="mx-auto max-w-3xl px-4 sm:px-6 md:px-8">
{data && data.project && <HiddenContentSettings projectId={data.project.id} hideForums={data.project.hideForums} hideSketches={data.project.hideSketches} hideOverlays={data.project.hideOverlays} />}
{data && data.project && (
<HiddenContentSettings
projectId={data.project.id}
hideForums={data.project.hideForums}
hideSketches={data.project.hideSketches}
hideOverlays={data.project.hideOverlays}
/>
)}
</div>
<div className="mx-auto max-w-3xl px-4 sm:px-6 md:px-8">
<MapboxAPIKeys />
Expand Down Expand Up @@ -110,8 +118,14 @@ function BasicSettingsForm(props: {
description?: string | null;
url: string;
slug: string;
supportEmail: string;
}) {
const { prompt } = useDialog();
const { t } = useTranslation("admin");
const onError = useGlobalErrorHandler();
const [updateProject, updateProjectState] = useUpdateProjectSettingsMutation({
onError,
});
const [copiedToClipboard, setCopiedToClipboard] = useState(false);
useEffect(() => {
if (copiedToClipboard === true) {
Expand Down Expand Up @@ -166,6 +180,47 @@ function BasicSettingsForm(props: {
className="p-0.5 absolute -right-9 top-8 -mt-0.5 border rounded hover:shadow-sm"
/>
</div>
<div className="md:max-w-xs mt-5 relative">
<TextInput
label={t("Support Email")}
name="supportEmail"
description={t(
"This email will be made available to users to contact for help with the project."
)}
value={props.supportEmail}
disabled
/>
<button
className="p-1 absolute right-3 top-8"
onClick={async (e) => {
e.preventDefault();
prompt({
message: t("Enter new support email"),
defaultValue: props.supportEmail,
onSubmit: async (value) => {
// validate the email
if (!props.slug) {
onError(t("Project slug is missing"));
return;
}
if (value.match(/.+@.+\..+/)) {
// update the email
updateProject({
variables: {
slug: props.slug,
supportEmail: value,
},
});
} else {
onError(t("You entered an invalid email address"));
}
},
});
}}
>
<Pencil2Icon />
</button>
</div>

<div className="mt-6">
<label className="block text-sm leading-5 font-medium text-gray-700">
Expand Down Expand Up @@ -230,8 +285,9 @@ function BasicSettingsForm(props: {
</svg>
</span>
<span
className={`text-primary-500 p-1 px-4 rounded-full text-xs absolute w-auto right-0 top-0 -mt-7 -mr-4 duration-500 transition-opacity ${copiedToClipboard ? "opacity-100" : "opacity-0"
}`}
className={`text-primary-500 p-1 px-4 rounded-full text-xs absolute w-auto right-0 top-0 -mt-7 -mr-4 duration-500 transition-opacity ${
copiedToClipboard ? "opacity-100" : "opacity-0"
}`}
>
{t("Copied URL")}
</span>
Expand All @@ -246,7 +302,12 @@ function BasicSettingsForm(props: {
);
}

function HiddenContentSettings(props: { hideSketches: boolean, hideForums: boolean, hideOverlays: boolean, projectId: number }) {
function HiddenContentSettings(props: {
hideSketches: boolean;
hideForums: boolean;
hideOverlays: boolean;
projectId: number;
}) {
const [hideSketches] = useUpdateHideSketchesMutation({
optimisticResponse: (data) => {
return {
Expand All @@ -258,11 +319,10 @@ function HiddenContentSettings(props: { hideSketches: boolean, hideForums: boole
id: data.projectId,
hideSketches: data.hidden,
},
}
}
}
}
);
},
};
},
});
const [hideForums] = useUpdateHideForumsMutation({
optimisticResponse: (data) => {
return {
Expand All @@ -274,11 +334,10 @@ function HiddenContentSettings(props: { hideSketches: boolean, hideForums: boole
id: data.projectId,
hideForums: data.hidden,
},
}
}
}
}
);
},
};
},
});
const [hideOverlays] = useUpdateHideOverlaysMutation({
optimisticResponse: (data) => {
return {
Expand All @@ -290,74 +349,75 @@ function HiddenContentSettings(props: { hideSketches: boolean, hideForums: boole
id: data.projectId,
hideOverlays: data.hidden,
},
}
}
}
}
);
},
};
},
});
const { t } = useTranslation("admin");
return <div className="shadow sm:rounded-md sm:overflow-hidden">
<div className="px-4 py-5 bg-white sm:p-6">
<h3 className="text-lg font-medium leading-6 text-gray-900">
{t("Hidden Content")}
</h3>
<p className="mt-2 text-sm text-gray-500">
{t(
"If you are not using all the features of SeaSketch, as in the case of a data portal, you can hide these features from the homepage sidebar."
)}
</p>
<div className="text-base pt-4">
<InputBlock
input={
<Switch
isToggled={props.hideSketches}
onClick={() => {
hideSketches({
variables: {
projectId: props.projectId,
hidden: !props.hideSketches
}
})
}}
/>
}
title={t("Hide Sketching Tools")}
/>
<InputBlock
input={
<Switch
isToggled={props.hideForums}
onClick={() => {
hideForums({
variables: {
projectId: props.projectId,
hidden: !props.hideForums
}
})
}}
/>
}
title={t("Hide Discussion Forums")}
/>
<InputBlock
input={
<Switch
isToggled={props.hideOverlays}
onClick={() => {
hideOverlays({
variables: {
projectId: props.projectId,
hidden: !props.hideOverlays
}
})
}}
/>
}
title={t("Hide Overlay Layers")}
/>
return (
<div className="shadow sm:rounded-md sm:overflow-hidden">
<div className="px-4 py-5 bg-white sm:p-6">
<h3 className="text-lg font-medium leading-6 text-gray-900">
{t("Hidden Content")}
</h3>
<p className="mt-2 text-sm text-gray-500">
{t(
"If you are not using all the features of SeaSketch, as in the case of a data portal, you can hide these features from the homepage sidebar."
)}
</p>
<div className="text-base pt-4">
<InputBlock
input={
<Switch
isToggled={props.hideSketches}
onClick={() => {
hideSketches({
variables: {
projectId: props.projectId,
hidden: !props.hideSketches,
},
});
}}
/>
}
title={t("Hide Sketching Tools")}
/>
<InputBlock
input={
<Switch
isToggled={props.hideForums}
onClick={() => {
hideForums({
variables: {
projectId: props.projectId,
hidden: !props.hideForums,
},
});
}}
/>
}
title={t("Hide Discussion Forums")}
/>
<InputBlock
input={
<Switch
isToggled={props.hideOverlays}
onClick={() => {
hideOverlays({
variables: {
projectId: props.projectId,
hidden: !props.hideOverlays,
},
});
}}
/>
}
title={t("Hide Overlay Layers")}
/>
</div>
</div>
</div>
</div>
);
}

function UploadLogoField(props: { slug: string; logoUrl?: string | null }) {
Expand All @@ -370,18 +430,19 @@ function UploadLogoField(props: { slug: string; logoUrl?: string | null }) {
slug: props.slug,
logoUrl: acceptedFiles[0],
},
}).catch((e) => { });
}).catch((e) => {});
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

return (
<>
<div
{...getRootProps()}
className={`-ml-1 mt-2 flex items-center ${isDragActive
? "border-dashed border-2 rounded-lg border-gray-300 -ml-1.5 mt-1.5 -mb-0.5"
: ""
}`}
className={`-ml-1 mt-2 flex items-center ${
isDragActive
? "border-dashed border-2 rounded-lg border-gray-300 -ml-1.5 mt-1.5 -mb-0.5"
: ""
}`}
>
<span className="h-16 w-16 overflow-hidden text-gray-400 flex items-center">
{props.logoUrl ? (
Expand Down Expand Up @@ -427,7 +488,7 @@ function UploadLogoField(props: { slug: string; logoUrl?: string | null }) {
logoUrl: e.target.files[0],
},
})
.catch((e) => { })
.catch((e) => {})
.then(() => {
target.value = "";
});
Expand Down Expand Up @@ -477,7 +538,7 @@ function AccessControlSettings() {
};
await mutate({
variables,
}).catch((e) => { });
}).catch((e) => {});
};

const toggleIsListed = async () => {
Expand Down Expand Up @@ -564,8 +625,9 @@ function AccessControlSettings() {
/>
</div>
<div
className={`ml-3 text-sm leading-5 ${!showPublicOption && "opacity-50"
}`}
className={`ml-3 text-sm leading-5 ${
!showPublicOption && "opacity-50"
}`}
>
<label
htmlFor="PUBLIC"
Expand All @@ -592,7 +654,7 @@ function AccessControlSettings() {
accessControl
? accessControl === "ADMINS_ONLY"
: data?.projectBySlug?.accessControl ===
"ADMINS_ONLY"
"ADMINS_ONLY"
}
type="radio"
className="form-radio h-4 w-4 text-primary-500 focus:ring focus:ring-blue-200 transition duration-150 ease-in-out"
Expand Down Expand Up @@ -624,7 +686,7 @@ function AccessControlSettings() {
accessControl
? accessControl === "INVITE_ONLY"
: data?.projectBySlug?.accessControl ===
"INVITE_ONLY"
"INVITE_ONLY"
}
type="radio"
className="form-radio h-4 w-4 text-primary-500 transition duration-150 focus:ring focus:ring-blue-200 ease-in-out"
Expand Down Expand Up @@ -815,8 +877,9 @@ function MapExtentSettings() {
ref={(el) => (mapContainer.current = el)}
></div>
<button
className={`${drawing ? "hidden" : ""
} sm:absolute sm:top-28 mt-2 sm:mt-0 sm:left-10 cursor-pointer inline-flex items-center px-4 py-2 border border-gray-400 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150`}
className={`${
drawing ? "hidden" : ""
} sm:absolute sm:top-28 mt-2 sm:mt-0 sm:left-10 cursor-pointer inline-flex items-center px-4 py-2 border border-gray-400 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150`}
onClick={onRedrawBounds}
>
{t("Redraw Bounds")}
Expand Down Expand Up @@ -871,7 +934,7 @@ function SuperUserSettings() {
slug,
isFeatured: featured,
},
}).catch((e) => { });
}).catch((e) => {});
};

return (
Expand Down Expand Up @@ -968,12 +1031,13 @@ function SuperUserSettings() {
<span>{t("Data Hosting Quota")}</span>
{quotaQuery.data?.projectBySlug?.dataHostingQuota ? (
<span
className={` ml-5 ${quotaQuery.data.projectBySlug.dataHostingQuota *
0.9 <=
className={` ml-5 ${
quotaQuery.data.projectBySlug.dataHostingQuota *
0.9 <=
quotaQuery.data.projectBySlug.dataHostingQuotaUsed
? "text-red-800"
: "text-gray-500"
}`}
? "text-red-800"
: "text-gray-500"
}`}
>
{bytes(
parseInt(
Expand Down
Loading

0 comments on commit 92211ef

Please sign in to comment.