Skip to content

Commit

Permalink
Add multiple buttons for update and the ability to change multiple fi…
Browse files Browse the repository at this point in the history 
…elds, fixes Allow tagging suggestions #9
  • Loading branch information
@azat-ismagilov
azat-ismagilov committed Aug 3, 2023
1 parent 6cdeba2 commit 634bc05
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 44 deletions.
9 changes: 0 additions & 9 deletions src/components/Body/Mailto.jsx
View file

This file was deleted.

157 changes: 144 additions & 13 deletions src/components/Body/PhotoInfo/PhotoInfoDetails.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
import { Autocomplete, TextField } from "@mui/material";

import { years } from "../../../consts";
import { useAppContext } from "../../AppContext";

import { usePhotoInfo } from "./PhotoInfoContext";


Expand All @@ -8,10 +13,37 @@ const ComaSeparated = (list) => {
]);
};

// TODO: Unify

const PhotographerInfo = () => {
const { photoInfo } = usePhotoInfo();
const { photoInfo, editMode, setPhotographer } = usePhotoInfo();

if (!photoInfo) {
return null;
}

if (editMode) {
return (
<Autocomplete
multiple
freeSolo
options={[]}
value={photoInfo.photographer}
onChange={(event, newValue) => {
setPhotographer(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Photographer"
variant="standard"
/>
)}
/>
);
}

if (!photoInfo || photoInfo.photographer.length === 0) {
if (photoInfo.photographer.length === 0) {
return null;
}

Expand All @@ -29,9 +61,34 @@ const PhotographerInfo = () => {
};

const AlbumInfo = () => {
const { photoInfo } = usePhotoInfo();
const { photoInfo, editMode, setAlbum } = usePhotoInfo();

if (!photoInfo || photoInfo.album.length === 0) {
if (!photoInfo) {
return null;
}

if (editMode) {
return (
<Autocomplete
multiple
freeSolo
options={years}
value={photoInfo.album}
onChange={(event, newValue) => {
setAlbum(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Album"
variant="outlined"
/>
)}
/>
);
}

if (photoInfo.album.length === 0) {
return null;
}

Expand All @@ -50,9 +107,35 @@ const AlbumInfo = () => {
};

const EventInfo = () => {
const { photoInfo } = usePhotoInfo();
const { photoInfo, editMode, setEvent } = usePhotoInfo();
const { events } = useAppContext();

if (!photoInfo) {
return null;
}

if (editMode) {
return (
<Autocomplete
multiple
freeSolo
options={events}
value={photoInfo.event}
onChange={(event, newValue) => {
setEvent(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Event"
variant="outlined"
/>
)}
/>
);
}

if (!photoInfo || photoInfo.event.length === 0) {
if (photoInfo.event.length === 0) {
return null;
}

Expand All @@ -71,9 +154,35 @@ const EventInfo = () => {
};

const TeamInfo = () => {
const { photoInfo } = usePhotoInfo();
const { photoInfo, editMode, setTeam } = usePhotoInfo();
const { teams } = useAppContext();

if (!photoInfo) {
return null;
}

if (editMode) {
return (
<Autocomplete
multiple
freeSolo
options={teams}
value={photoInfo.team}
onChange={(event, newValue) => {
setTeam(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Team"
variant="outlined"
/>
)}
/>
);
}

if (!photoInfo || photoInfo.team.length === 0) {
if (photoInfo.team.length === 0) {
return null;
}

Expand All @@ -92,9 +201,34 @@ const TeamInfo = () => {
};

const PersonInfo = ({ setFace }) => {
const { photoInfo } = usePhotoInfo();
const { photoInfo, editMode, setPerson } = usePhotoInfo();

if (!photoInfo || photoInfo.person.length === 0) {
if (!photoInfo) {
return null;
}

if (editMode) {
return (
<Autocomplete
multiple
options={[]}
value={photoInfo.person.map(person => person.name)}
onChange={(event, newValue) => {
setPerson(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Person"
placeholder="Drag to add new face"
variant="outlined"
/>
)}
/>
);
}

if (photoInfo.person.length === 0) {
return null;
}

Expand All @@ -109,9 +243,6 @@ const PersonInfo = ({ setFace }) => {
{person.name}
</a>);

if (personLinks.length === 0) {
return null;
}

return (
<div>
Expand Down
73 changes: 51 additions & 22 deletions src/components/Body/PhotoInfo/PhotoInfoPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import EditIcon from "@mui/icons-material/Edit";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import VisibilityIcon from "@mui/icons-material/Visibility";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import { Button, IconButton, Tooltip } from "@mui/material";
import { Button, IconButton, Stack, Tooltip } from "@mui/material";
import { enqueueSnackbar } from "notistack";

import { FLICKR_IMAGE_PREFIX, SUGGESTIONS_EMAIL } from "../../../consts";
Expand All @@ -22,20 +22,22 @@ const PhotoInfoPanel = ({ setFace, photo }) => {

const toolTipsHidden = editMode;

function finishEditing() {

const photoLink = FLICKR_IMAGE_PREFIX + photo.id;
const tags = SerializePhotoInfo(photoInfo).join(", ");

function copyToClipboard() {
setEditMode(false);
navigator.clipboard.writeText(SerializePhotoInfo(photoInfo).join(", "));
navigator.clipboard.writeText(tags);
enqueueSnackbar("New tags copied to clipboard", { variant: "success", autoHideDuration: 2000 });
}

const emailBody = `Photo link: ${photoLink}\n\nGallery link: ${window.location.href}\n\nTags: ${tags}`;
const emailSubject = `Photo info update ${photo.id}`;

function mailtoLink() {
const photoLink = FLICKR_IMAGE_PREFIX + photo.id;
const tags = SerializePhotoInfo(photoInfo).join(", ");
const subject = `Photo info update ${photo.id}`;
const body = `Photo link: ${photoLink}\n\nGallery link: ${window.location.href}\n\nTags: ${tags}`;
const mailtoLink = `mailto:${SUGGESTIONS_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
return mailtoLink;
}
const mailtoLink = `mailto:${SUGGESTIONS_EMAIL}?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;

const gmailLink = `https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=${encodeURIComponent(SUGGESTIONS_EMAIL)}&su=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;

function toogleHidden() {
setHidden(!hidden);
Expand All @@ -51,17 +53,6 @@ const PhotoInfoPanel = ({ setFace, photo }) => {


<div className="control-bottom">
{toolTipsHidden &&
<Tooltip title="Send changes">
<Button
href={mailtoLink()}
target="_blank"
variant="contained"
size="large"
onClick={() => finishEditing()}>
Done
</Button>
</Tooltip>}
{!toolTipsHidden &&
<Tooltip title="Edit photo info">
<IconButton onClick={() => setEditMode(true)}>
Expand Down Expand Up @@ -89,6 +80,44 @@ const PhotoInfoPanel = ({ setFace, photo }) => {
</IconButton>
</Tooltip>}
</div>


{editMode &&
<Stack direction="row" spacing={2}>
<Tooltip title="Send your suggestion using Gmail">
<Button
href={gmailLink}
target="_blank"
variant="contained"
size="large"
color="error"
onClick={() => setEditMode(false)}>
Send via Gmail
</Button>
</Tooltip>

<Tooltip title="Send your suggestion using your system mail provider">
<Button
href={mailtoLink}
target="_blank"
variant="contained"
size="large"
onClick={() => setEditMode(false)}>
Send via mail client
</Button>
</Tooltip>

<Tooltip title="Copy tags to clipboard">
<Button
variant="contained"
size="large"
color="success"
onClick={() => copyToClipboard()}>
Copy to clipboard
</Button>
</Tooltip>

</Stack>}
</div>

);
Expand Down

0 comments on commit 634bc05

Please sign in to comment.