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 {
|
||||
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