Add project backgrounds
Maksim Eltyshev
6 years ago
parent
fb9ceb5db7
commit
2f7a244807
@ -0,0 +1,142 @@
|
|||||||
|
import React, { useCallback } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Menu } from 'semantic-ui-react';
|
||||||
|
import { withPopup } from '../../../lib/popup';
|
||||||
|
import { Popup } from '../../../lib/custom-ui';
|
||||||
|
|
||||||
|
import { useSteps } from '../../../hooks';
|
||||||
|
import EditNameStep from './EditNameStep';
|
||||||
|
import EditBackgroundStep from './EditBackgroundStep';
|
||||||
|
import DeleteStep from '../../DeleteStep';
|
||||||
|
|
||||||
|
import styles from './ActionsPopup.module.css';
|
||||||
|
|
||||||
|
const StepTypes = {
|
||||||
|
EDIT_NAME: 'EDIT_NAME',
|
||||||
|
EDIT_BACKGROUND: 'EDIT_BACKGROUND',
|
||||||
|
DELETE: 'DELETE',
|
||||||
|
};
|
||||||
|
|
||||||
|
const ActionsStep = React.memo(
|
||||||
|
({ project, onUpdate, onBackgroundImageUpdate, onDelete, onClose }) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
const [step, openStep, handleBack] = useSteps();
|
||||||
|
|
||||||
|
const handleEditNameClick = useCallback(() => {
|
||||||
|
openStep(StepTypes.EDIT_NAME);
|
||||||
|
}, [openStep]);
|
||||||
|
|
||||||
|
const handleEditBackgroundClick = useCallback(() => {
|
||||||
|
openStep(StepTypes.EDIT_BACKGROUND);
|
||||||
|
}, [openStep]);
|
||||||
|
|
||||||
|
const handleDeleteClick = useCallback(() => {
|
||||||
|
openStep(StepTypes.DELETE);
|
||||||
|
}, [openStep]);
|
||||||
|
|
||||||
|
const handleNameUpdate = useCallback(
|
||||||
|
(newName) => {
|
||||||
|
onUpdate({
|
||||||
|
name: newName,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[onUpdate],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleBackgroundUpdate = useCallback(
|
||||||
|
(newBackground) => {
|
||||||
|
onUpdate({
|
||||||
|
background: newBackground,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[onUpdate],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleBackgroundImageDelete = useCallback(() => {
|
||||||
|
onUpdate({
|
||||||
|
background: null,
|
||||||
|
backgroundImage: null,
|
||||||
|
});
|
||||||
|
}, [onUpdate]);
|
||||||
|
|
||||||
|
if (step) {
|
||||||
|
if (step) {
|
||||||
|
switch (step.type) {
|
||||||
|
case StepTypes.EDIT_NAME:
|
||||||
|
return (
|
||||||
|
<EditNameStep
|
||||||
|
defaultValue={project.name}
|
||||||
|
onUpdate={handleNameUpdate}
|
||||||
|
onBack={handleBack}
|
||||||
|
onClose={onClose}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case StepTypes.EDIT_BACKGROUND:
|
||||||
|
return (
|
||||||
|
<EditBackgroundStep
|
||||||
|
defaultValue={project.background}
|
||||||
|
isImageUpdating={project.isBackgroundImageUpdating}
|
||||||
|
onUpdate={handleBackgroundUpdate}
|
||||||
|
onImageUpdate={onBackgroundImageUpdate}
|
||||||
|
onImageDelete={handleBackgroundImageDelete}
|
||||||
|
onBack={handleBack}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case StepTypes.DELETE:
|
||||||
|
return (
|
||||||
|
<DeleteStep
|
||||||
|
title={t('common.deleteProject', {
|
||||||
|
context: 'title',
|
||||||
|
})}
|
||||||
|
content={t('common.areYouSureYouWantToDeleteThisProject')}
|
||||||
|
buttonContent={t('action.deleteProject')}
|
||||||
|
onConfirm={onDelete}
|
||||||
|
onBack={handleBack}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Popup.Header>
|
||||||
|
{t('common.projectActions', {
|
||||||
|
context: 'title',
|
||||||
|
})}
|
||||||
|
</Popup.Header>
|
||||||
|
<Popup.Content>
|
||||||
|
<Menu secondary vertical className={styles.menu}>
|
||||||
|
<Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
|
||||||
|
{t('action.editTitle', {
|
||||||
|
context: 'title',
|
||||||
|
})}
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item className={styles.menuItem} onClick={handleEditBackgroundClick}>
|
||||||
|
{t('action.editBackground', {
|
||||||
|
context: 'title',
|
||||||
|
})}
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
|
||||||
|
{t('action.deleteProject', {
|
||||||
|
context: 'title',
|
||||||
|
})}
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
</Popup.Content>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
ActionsStep.propTypes = {
|
||||||
|
project: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||||
|
onUpdate: PropTypes.func.isRequired,
|
||||||
|
onBackgroundImageUpdate: PropTypes.func.isRequired,
|
||||||
|
onDelete: PropTypes.func.isRequired,
|
||||||
|
onClose: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withPopup(ActionsStep);
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.menu {
|
||||||
|
margin: -7px -12px -5px !important;
|
||||||
|
width: calc(100% + 24px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding-left: 14px !important;
|
||||||
|
}
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
import React, { useCallback, useEffect, useRef } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from 'semantic-ui-react';
|
||||||
|
import { FilePicker, Popup } from '../../../lib/custom-ui';
|
||||||
|
|
||||||
|
import styles from './EditBackgroundStep.module.css';
|
||||||
|
|
||||||
|
const EditBackgroundStep = React.memo(
|
||||||
|
({ defaultValue, isImageUpdating, onImageUpdate, onImageDelete, onBack }) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
const field = useRef(null);
|
||||||
|
|
||||||
|
const handleFileSelect = useCallback(
|
||||||
|
(file) => {
|
||||||
|
onImageUpdate({
|
||||||
|
file,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[onImageUpdate],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
field.current.focus();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Popup.Header onBack={onBack}>
|
||||||
|
{t('common.editBackground', {
|
||||||
|
context: 'title',
|
||||||
|
})}
|
||||||
|
</Popup.Header>
|
||||||
|
<Popup.Content>
|
||||||
|
<div className={styles.action}>
|
||||||
|
<FilePicker accept="image/*" onSelect={handleFileSelect}>
|
||||||
|
<Button
|
||||||
|
ref={field}
|
||||||
|
content={t('action.uploadNewBackground')}
|
||||||
|
loading={isImageUpdating}
|
||||||
|
disabled={isImageUpdating}
|
||||||
|
className={styles.actionButton}
|
||||||
|
/>
|
||||||
|
</FilePicker>
|
||||||
|
</div>
|
||||||
|
{defaultValue && (
|
||||||
|
<Button
|
||||||
|
negative
|
||||||
|
content={t('action.deleteBackground')}
|
||||||
|
disabled={isImageUpdating}
|
||||||
|
onClick={onImageDelete}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Popup.Content>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
EditBackgroundStep.propTypes = {
|
||||||
|
defaultValue: PropTypes.object, // eslint-disable-line react/forbid-prop-types
|
||||||
|
isImageUpdating: PropTypes.bool.isRequired,
|
||||||
|
// onUpdate: PropTypes.func.isRequired,
|
||||||
|
onImageUpdate: PropTypes.func.isRequired,
|
||||||
|
onImageDelete: PropTypes.func.isRequired,
|
||||||
|
onBack: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
EditBackgroundStep.defaultProps = {
|
||||||
|
defaultValue: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditBackgroundStep;
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
.action {
|
||||||
|
border: none;
|
||||||
|
display: inline-block;
|
||||||
|
height: 36px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action:hover {
|
||||||
|
background: #e9e9e9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionButton {
|
||||||
|
background: transparent !important;
|
||||||
|
color: #6b808c !important;
|
||||||
|
font-weight: normal !important;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 24px !important;
|
||||||
|
padding: 6px 12px !important;
|
||||||
|
text-align: left !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import React, { useCallback, useEffect, useRef } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button, Form } from 'semantic-ui-react';
|
||||||
|
import { Input, Popup } from '../../../lib/custom-ui';
|
||||||
|
|
||||||
|
import { useField } from '../../../hooks';
|
||||||
|
|
||||||
|
import styles from './EditNameStep.module.css';
|
||||||
|
|
||||||
|
const EditNameStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
const [value, handleFieldChange] = useField(defaultValue);
|
||||||
|
|
||||||
|
const field = useRef(null);
|
||||||
|
|
||||||
|
const handleSubmit = useCallback(() => {
|
||||||
|
const cleanValue = value.trim();
|
||||||
|
|
||||||
|
if (!cleanValue) {
|
||||||
|
field.current.select();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cleanValue !== defaultValue) {
|
||||||
|
onUpdate(cleanValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
onClose();
|
||||||
|
}, [defaultValue, onUpdate, onClose, value]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
field.current.select();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Popup.Header onBack={onBack}>
|
||||||
|
{t('common.editTitle', {
|
||||||
|
context: 'title',
|
||||||
|
})}
|
||||||
|
</Popup.Header>
|
||||||
|
<Popup.Content>
|
||||||
|
<Form onSubmit={handleSubmit}>
|
||||||
|
<div className={styles.text}>{t('common.title')}</div>
|
||||||
|
<Input
|
||||||
|
fluid
|
||||||
|
ref={field}
|
||||||
|
value={value}
|
||||||
|
className={styles.field}
|
||||||
|
onChange={handleFieldChange}
|
||||||
|
/>
|
||||||
|
<Button positive content={t('action.save')} />
|
||||||
|
</Form>
|
||||||
|
</Popup.Content>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
EditNameStep.propTypes = {
|
||||||
|
defaultValue: PropTypes.string.isRequired,
|
||||||
|
onUpdate: PropTypes.func.isRequired,
|
||||||
|
onBack: PropTypes.func.isRequired,
|
||||||
|
onClose: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditNameStep;
|
||||||
@ -1,10 +1,3 @@
|
|||||||
.deleteButton {
|
|
||||||
bottom: 12px;
|
|
||||||
box-shadow: 0 1px 0 #cbcccc;
|
|
||||||
position: absolute;
|
|
||||||
right: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
.field {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import ActionsPopup from './ActionsPopup';
|
||||||
|
|
||||||
|
export default ActionsPopup;
|
||||||
@ -1,107 +0,0 @@
|
|||||||
import dequal from 'dequal';
|
|
||||||
import React, { useCallback, useEffect, useRef } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { Button, Form } from 'semantic-ui-react';
|
|
||||||
import { withPopup } from '../../lib/popup';
|
|
||||||
import { Input, Popup } from '../../lib/custom-ui';
|
|
||||||
|
|
||||||
import { useForm, useSteps } from '../../hooks';
|
|
||||||
import DeleteStep from '../DeleteStep';
|
|
||||||
|
|
||||||
import styles from './EditPopup.module.css';
|
|
||||||
|
|
||||||
const StepTypes = {
|
|
||||||
DELETE: 'DELETE',
|
|
||||||
};
|
|
||||||
|
|
||||||
const EditStep = React.memo(({ defaultData, onUpdate, onDelete, onClose }) => {
|
|
||||||
const [t] = useTranslation();
|
|
||||||
|
|
||||||
const [data, handleFieldChange] = useForm(() => ({
|
|
||||||
name: '',
|
|
||||||
...defaultData,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const [step, openStep, handleBack] = useSteps();
|
|
||||||
|
|
||||||
const nameField = useRef(null);
|
|
||||||
|
|
||||||
const handleSubmit = useCallback(() => {
|
|
||||||
const cleanData = {
|
|
||||||
...data,
|
|
||||||
name: data.name.trim(),
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!cleanData.name) {
|
|
||||||
nameField.current.select();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!dequal(cleanData, defaultData)) {
|
|
||||||
onUpdate(cleanData);
|
|
||||||
}
|
|
||||||
|
|
||||||
onClose();
|
|
||||||
}, [defaultData, onUpdate, onClose, data]);
|
|
||||||
|
|
||||||
const handleDeleteClick = useCallback(() => {
|
|
||||||
openStep(StepTypes.DELETE);
|
|
||||||
}, [openStep]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
nameField.current.select();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (step && step.type === StepTypes.DELETE) {
|
|
||||||
return (
|
|
||||||
<DeleteStep
|
|
||||||
title={t('common.deleteProject', {
|
|
||||||
context: 'title',
|
|
||||||
})}
|
|
||||||
content={t('common.areYouSureYouWantToDeleteThisProject')}
|
|
||||||
buttonContent={t('action.deleteProject')}
|
|
||||||
onConfirm={onDelete}
|
|
||||||
onBack={handleBack}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Popup.Header>
|
|
||||||
{t('common.editProject', {
|
|
||||||
context: 'title',
|
|
||||||
})}
|
|
||||||
</Popup.Header>
|
|
||||||
<Popup.Content>
|
|
||||||
<Form onSubmit={handleSubmit}>
|
|
||||||
<div className={styles.text}>{t('common.title')}</div>
|
|
||||||
<Input
|
|
||||||
fluid
|
|
||||||
ref={nameField}
|
|
||||||
name="name"
|
|
||||||
value={data.name}
|
|
||||||
className={styles.field}
|
|
||||||
onChange={handleFieldChange}
|
|
||||||
/>
|
|
||||||
<Button positive content={t('action.save')} />
|
|
||||||
</Form>
|
|
||||||
<Button
|
|
||||||
content={t('action.delete')}
|
|
||||||
className={styles.deleteButton}
|
|
||||||
onClick={handleDeleteClick}
|
|
||||||
/>
|
|
||||||
</Popup.Content>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
EditStep.propTypes = {
|
|
||||||
defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
|
||||||
onUpdate: PropTypes.func.isRequired,
|
|
||||||
onDelete: PropTypes.func.isRequired,
|
|
||||||
onClose: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withPopup(EditStep);
|
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
const Errors = {
|
||||||
|
PROJECT_NOT_FOUND: {
|
||||||
|
projectNotFound: 'Project not found',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
inputs: {
|
||||||
|
id: {
|
||||||
|
type: 'string',
|
||||||
|
regex: /^[0-9]+$/,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
exits: {
|
||||||
|
projectNotFound: {
|
||||||
|
responseType: 'notFound',
|
||||||
|
},
|
||||||
|
uploadError: {
|
||||||
|
responseType: 'unprocessableEntity',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
async fn(inputs, exits) {
|
||||||
|
let project = await Project.findOne(inputs.id);
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
throw Errors.PROJECT_NOT_FOUND;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.req
|
||||||
|
.file('file')
|
||||||
|
.upload(sails.helpers.createProjectBackgroundImageReceiver(), async (error, files) => {
|
||||||
|
if (error) {
|
||||||
|
return exits.uploadError(error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (files.length === 0) {
|
||||||
|
return exits.uploadError('No file was uploaded');
|
||||||
|
}
|
||||||
|
|
||||||
|
project = await sails.helpers.updateProject(
|
||||||
|
project,
|
||||||
|
{
|
||||||
|
backgroundImageDirname: files[0].extra.dirname,
|
||||||
|
},
|
||||||
|
this.req,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
throw Errors.PROJECT_NOT_FOUND;
|
||||||
|
}
|
||||||
|
|
||||||
|
return exits.success({
|
||||||
|
item: project.toJSON(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const util = require('util');
|
||||||
|
const stream = require('stream');
|
||||||
|
const streamToArray = require('stream-to-array');
|
||||||
|
const { v4: uuid } = require('uuid');
|
||||||
|
const sharp = require('sharp');
|
||||||
|
|
||||||
|
const writeFile = util.promisify(fs.writeFile);
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
sync: true,
|
||||||
|
|
||||||
|
fn(inputs, exits) {
|
||||||
|
const receiver = stream.Writable({
|
||||||
|
objectMode: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
let firstFileHandled = false;
|
||||||
|
// eslint-disable-next-line no-underscore-dangle
|
||||||
|
receiver._write = async (file, receiverEncoding, done) => {
|
||||||
|
if (firstFileHandled) {
|
||||||
|
file.pipe(new stream.Writable());
|
||||||
|
|
||||||
|
return done();
|
||||||
|
}
|
||||||
|
firstFileHandled = true;
|
||||||
|
|
||||||
|
const buffer = await streamToArray(file).then((parts) =>
|
||||||
|
Buffer.concat(parts.map((part) => (util.isBuffer(part) ? part : Buffer.from(part)))),
|
||||||
|
);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const originalBuffer = await sharp(buffer).jpeg().toBuffer();
|
||||||
|
const cover336Buffer = await sharp(buffer).resize(336, 200).jpeg().toBuffer();
|
||||||
|
|
||||||
|
const dirname = uuid();
|
||||||
|
|
||||||
|
const rootPath = path.join(sails.config.custom.projectBackgroundImagesPath, dirname);
|
||||||
|
fs.mkdirSync(rootPath);
|
||||||
|
|
||||||
|
await writeFile(path.join(rootPath, 'original.jpg'), originalBuffer);
|
||||||
|
await writeFile(path.join(rootPath, 'cover-336.jpg'), cover336Buffer);
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
file.extra = {
|
||||||
|
dirname,
|
||||||
|
};
|
||||||
|
|
||||||
|
return done();
|
||||||
|
} catch (error) {
|
||||||
|
return done(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return exits.success(receiver);
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue