jude/reminder-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added import modal

Browse Source
This commit is contained in:
jude 2023-12-01 23:50:33 +00:00
parent 4c10682de8
commit 4fee936939
5 changed files with 96 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/Import/index.tsx Normal file
View File

@ -0,0 +1,73 @@
import { Modal } from "../Modal";
import { useState } from "preact/hooks";
export const Import = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<a
class="show-modal"
data-modal="chooseTimezoneModal"
onClick={() => {
setModalOpen(true);
}}
>
<span class="icon">
<i class="fas fa-exchange"></i>
</span>{" "}
Import/Export
</a>
{modalOpen && <ImportModal setModalOpen={setModalOpen} />}
</>
);
};
const ImportModal = ({ setModalOpen }) => {
return (
<Modal
setModalOpen={setModalOpen}
title={
<>
Import/Export Manager{" "}
<a href="/help/iemanager">
<span>
<i class="fa fa-question-circle"></i>
</span>
</a>
</>
}
>
<>
<div class="control">
<div class="field">
<label>
<input
type="radio"
class="default-width"
name="exportSelect"
value="reminders"
checked
/>
Reminders
</label>
</div>
</div>
<br />
<div class="has-text-centered">
<div style="color: red">
Please first read the <a href="/help/iemanager">support page</a>
</div>
<button class="button is-success is-outlined" id="import-data">
Import Data
</button>
<button class="button is-success" id="export-data">
Export Data
</button>
</div>
<a id="downloader" download="export.csv" class="is-hidden"></a>
<input id="uploader" type="file" hidden></input>
</>
</Modal>
);
};

2
src/components/Modal/index.tsx
View File

@ -3,7 +3,7 @@ import { createPortal } from "preact/compat";
type Props = {
setModalOpen: (open: boolean) => never;
title: string;
title: string | JSX.Element;
onSubmitText?: string;
onSubmit?: () => void;
children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);

28
src/components/Reminder/Embed/Fields/Field.tsx
View File

@ -18,19 +18,21 @@ export const Field = ({ title, value, inline, index, onUpdate }) => {
title: ev.currentTarget.value,
})
}
></textarea>
<button
class="button is-small inline-btn"
onClick={() => {
onUpdate({
index,
inline: !inline,
});
}}
>
<span class="is-sr-only">Toggle field inline</span>
<i class="fas fa-arrows-h"></i>
</button>
/>
{(value !== "" || title !== "") && (
<button
class="button is-small inline-btn"
onClick={() => {
onUpdate({
index,
inline: !inline,
});
}}
>
<span class="is-sr-only">Toggle field inline</span>
<i class="fas fa-arrows-h"></i>
</button>
)}
</div>
<label class="is-sr-only" for="embedFieldValue">

10
src/components/Reminder/Embed/index.tsx
View File

@ -53,8 +53,8 @@ export const Embed = () => {
embed_description: description,
}))
}
></Description>
<br></br>
/>
<br />
<Fields />
</div>
@ -66,7 +66,7 @@ export const Embed = () => {
url={reminder.embed_thumbnail_url}
alt="Square thumbnail embedded image"
setImage={() => {}}
></ImagePicker>
/>
</p>
</div>
</div>
@ -77,14 +77,14 @@ export const Embed = () => {
url={reminder.embed_image_url}
alt="Large embedded image"
setImage={() => {}}
></ImagePicker>
/>
</p>
<Footer
footer={reminder.embed_footer}
icon={reminder.embed_footer_url}
setReminder={setReminder}
></Footer>
/>
</div>
);
};

8
src/components/Sidebar/index.tsx
View File

@ -7,6 +7,7 @@ import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api";
import { useState } from "preact/hooks";
import { TimezonePicker } from "../TimezonePicker";
import { Import } from "../Import";
type ContentProps = {
guilds: GuildInfo[];
@ -28,12 +29,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
<p class="menu-label">Options</p>
<ul class="menu-list">
<li>
<a class="show-modal" data-modal="dataManagerModal">
<span class="icon">
<i class="fas fa-exchange"></i>
</span>{" "}
Import/Export
</a>
<Import />
<TimezonePicker />
<a href="/login/discord/logout">
<span class="icon">