Commit e9f0102d authored by Martin Lowe's avatar Martin Lowe 🇨🇦
Browse files

Merge branch 'zhoufang/dev/347' into 'dev'

#347 #454 Centralized logo limitation values and fixed upload print logo issues

See merge request !469
parents e4a0db3f 776552be
Pipeline #1759 passed with stage
in 0 seconds
......@@ -292,6 +292,10 @@ export const CONFIG_FOR_BAR_LINE_CHART = {
aspectRatio: 1.8,
};
export const LOGO_DIMENSIONS_LIMITATION = 2000; // pixels
export const LOGO_SIZE_LIMITATION_WEB = 1048576; // bytes = 1MB
export const LOGO_SIZE_LIMITATION_PRINT = 10485760; // bytes = 10MB
// Constants for styles
export const drawerWidth = 280;
export const themeBlack = '#0B0B0B';
......
......@@ -760,7 +760,7 @@ export const fetchWrapper = (url, method, callbackFunc, dataBody, errCallbackFun
.catch((err) => {
console.log(err);
if (errCallbackFunc) {
errCallbackFunc();
errCallbackFunc(err);
return;
}
});
......
......@@ -12,6 +12,9 @@ import {
FETCH_METHOD,
getCurrentMode,
lightGray,
LOGO_DIMENSIONS_LIMITATION,
LOGO_SIZE_LIMITATION_PRINT,
LOGO_SIZE_LIMITATION_WEB,
MODE_REACT_ONLY,
} from '../../../Constants/Constants';
import { fetchWrapper, isProd } from '../../../Utils/formFunctionHelpers';
......@@ -94,6 +97,8 @@ export default function OrgProfilesBasicInfo() {
const [uploadTarget, setUploadTarget] = useState<'Web' | 'Print'>('Web');
const [isFetchingOrg, setIsFetchingOrg] = useState(true);
const [dateForUpdatingPrintLogo, setDateForUpdatingPrintLogo] = useState('');
const [isUploadingWeb, setIsUploadingWeb] = useState(false);
const [isUploadingPrint, setIsUploadingPrint] = useState(false);
const openUploadDialog = (target: 'Web' | 'Print') => {
setUploadTarget(target);
......@@ -104,12 +109,16 @@ export default function OrgProfilesBasicInfo() {
!isProd && console.log('Logo Saved!', files[0]);
let fileContent: any;
const isForPrint = uploadTarget === 'Print';
isForPrint ? setIsUploadingPrint(true) : setIsUploadingWeb(true);
const successCallback = () => {
if (isForPrint) {
const today = new Date().toString();
const currentTime = `${today.slice(16, 24)}, ${today.slice(4, 10)}`;
setDateForUpdatingPrintLogo(currentTime);
setIsUploadingPrint(false);
} else {
setIsUploadingWeb(false);
}
formikOrg.setFieldValue(`logos.logoFor${uploadTarget}`, fileContent);
// Update Portal Context - orgInfo to make sure everything is synced among sections
......@@ -117,41 +126,66 @@ export default function OrgProfilesBasicInfo() {
succeededToExecute('');
};
const logoFile = new FileReader();
logoFile.addEventListener('load', (data) => {
fileContent = data.target?.result;
const getLogoFileData = () => {
const data = new FormData();
const logoFile = files[0];
data.append('image', logoFile);
data.append('image_mime', logoFile.type);
data.append('image_format', isForPrint ? 'PRINT' : 'WEB');
return data;
};
const logoFileInstance = new FileReader();
logoFileInstance.addEventListener('load', (fileData) => {
fileContent = fileData.target?.result;
const logoImg = new Image();
logoImg.src = fileContent;
const failedToUploadLogo = (errCode: number) => {
let errMsg = `The image need to be less than ${LOGO_SIZE_LIMITATION_WEB / 1024 / 1024}MB`;
if (isForPrint) {
errMsg = `The image need to be less than ${LOGO_SIZE_LIMITATION_PRINT / 1024 / 1024}MB`;
}
failedToExecute(errCode === 413 ? errMsg : '');
setIsFetchingOrg(false);
setIsUploadingWeb(false);
setIsUploadingPrint(false);
};
if (isForPrint) {
setOpen(false);
orgId !== 0 &&
fetchWrapper(
api_prefix() + `/organizations/${orgId}/logos`,
FETCH_METHOD.POST,
successCallback,
getLogoFileData(),
failedToUploadLogo
);
return;
}
logoImg.onload = () => {
if (logoImg.height > 200) {
failedToExecute('Image height must be 200px or smaller');
if (logoImg.height > LOGO_DIMENSIONS_LIMITATION) {
failedToExecute(`Image height must be ${LOGO_DIMENSIONS_LIMITATION}px or smaller`);
return;
}
if (logoImg.width > 200) {
failedToExecute('Image width must be 200px or smaller');
if (logoImg.width > LOGO_DIMENSIONS_LIMITATION) {
failedToExecute(`Image width must be ${LOGO_DIMENSIONS_LIMITATION}px or smaller`);
return;
}
setOpen(false);
if (!isReactOnlyMode) {
const failedToUploadLogo = () => {
failedToExecute('');
setIsFetchingOrg(false);
};
const data = new FormData();
const logoFile = files[0];
data.append('image', logoFile);
data.append('image_mime', logoFile.type);
data.append('image_format', isForPrint ? 'PRINT' : 'WEB');
orgId !== 0 &&
fetchWrapper(
api_prefix() + `/organizations/${orgId}/logos`,
FETCH_METHOD.POST,
successCallback,
data,
getLogoFileData(),
failedToUploadLogo
);
} else {
......@@ -159,7 +193,7 @@ export default function OrgProfilesBasicInfo() {
}
};
});
logoFile.readAsDataURL(files[0]);
logoFileInstance.readAsDataURL(files[0]);
};
const handleSaveOrgProfile = () => {
......@@ -330,15 +364,17 @@ export default function OrgProfilesBasicInfo() {
</div>
)}
<Button className={classes.uploadBtn} onClick={() => openUploadDialog('Web')}>
Upload New
<Button className={classes.uploadBtn} onClick={() => openUploadDialog('Web')} disabled={isUploadingWeb}>
{isUploadingWeb ? <CircularProgress size={20} /> : 'Upload New'}
</Button>
<Typography className={classes.helperText} variant="body2">
The supported formats for uploading your logo include: PNG, or JPG file under 1 MB in size.
The supported formats for uploading your logo include: PNG, or JPG file under{' '}
{LOGO_SIZE_LIMITATION_WEB / 1024 / 1024} MB in size.
{/* The calculation is to convert bytes into megabytes */}
</Typography>
<Typography className={classes.helperText} variant="body2">
The logo dimension cannot exceed 200 by 200 pixels.
The logo dimension cannot exceed {LOGO_DIMENSIONS_LIMITATION} by {LOGO_DIMENSIONS_LIMITATION} pixels.
</Typography>
</Grid>
......@@ -359,12 +395,14 @@ export default function OrgProfilesBasicInfo() {
)}
</div>
<Button className={classes.uploadBtn} onClick={() => openUploadDialog('Print')}>
Upload New
<Button className={classes.uploadBtn} onClick={() => openUploadDialog('Print')} disabled={isUploadingPrint}>
{isUploadingPrint ? <CircularProgress size={20} /> : 'Upload New'}
</Button>
<Typography className={classes.helperText} variant="body2">
If available please include the .eps file of your company logo.
If available please include the .eps file of your company logo and it should be under{' '}
{LOGO_SIZE_LIMITATION_PRINT / 1024 / 1024} MB in size.
{/* The calculation is to convert bytes into megabytes */}
</Typography>
</Grid>
</Grid>
......@@ -373,7 +411,7 @@ export default function OrgProfilesBasicInfo() {
open={open}
onSave={(file) => postLogo(file)}
acceptedFiles={uploadTarget === 'Web' ? ['image/jpeg', 'image/png'] : ['.eps']}
maxFileSize={1048576}
maxFileSize={uploadTarget === 'Web' ? LOGO_SIZE_LIMITATION_WEB : LOGO_SIZE_LIMITATION_PRINT}
filesLimit={1}
onClose={() => setOpen(false)}
/>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment