100 lines
5.1 KiB
JavaScript
100 lines
5.1 KiB
JavaScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import { Page, Navbar, BlockTitle, List, ListItem, Icon, NavRight, Link } from "framework7-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { observer, inject } from "mobx-react";
|
|
import { Device } from '../../utils/device';
|
|
import SvgIcon from '@common/lib/component/SvgIcon';
|
|
import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg?ios';
|
|
import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
|
|
|
|
const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props => {
|
|
const { t } = useTranslation();
|
|
const usersStore = props.users;
|
|
const historyStore = props.storeVersionHistory;
|
|
const currentVersion = historyStore.currentVersion;
|
|
const arrVersions = historyStore.arrVersions;
|
|
const [filteredVersions, setFilteredVersions] = useState([]);
|
|
const isNavigate = props.isNavigate;
|
|
const usersVersions = historyStore.usersVersions;
|
|
|
|
useEffect(() => {
|
|
if(arrVersions.length > 0) {
|
|
const filteredVersions = groupByVersions(arrVersions);
|
|
setFilteredVersions(filteredVersions);
|
|
}
|
|
}, [arrVersions]);
|
|
|
|
const handleClickRevision = useCallback(version => {
|
|
if(version !== currentVersion) {
|
|
props.onSelectRevision(version);
|
|
}
|
|
}, []);
|
|
|
|
function groupByVersions(arr) {
|
|
return arr.reduce((result, revision) => {
|
|
const value = revision.version;
|
|
|
|
const arrVersion = result.find(arr => {
|
|
return arr[0].version === value;
|
|
});
|
|
|
|
if (arrVersion) {
|
|
arrVersion.push(revision);
|
|
} else {
|
|
result.push([revision]);
|
|
}
|
|
|
|
return result;
|
|
}, []);
|
|
}
|
|
|
|
return (
|
|
<Page className='page-version-history'>
|
|
<Navbar title={t('Common.VersionHistory.textVersionHistory')} backLink={!Device.phone && isNavigate ? t('Common.VersionHistory.textBack') : null}>
|
|
{Device.phone ?
|
|
<NavRight>
|
|
<Link sheetClose="#version-history-sheet">
|
|
{Device.ios ?
|
|
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
|
|
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
|
|
}
|
|
</Link>
|
|
</NavRight>
|
|
: !isNavigate &&
|
|
<NavRight>
|
|
<Link popoverClose="#version-history-popover">
|
|
{Device.ios ?
|
|
<SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
|
|
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
|
|
}
|
|
</Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
{filteredVersions.length > 0 ?
|
|
filteredVersions.map((versions, index) => {
|
|
return (
|
|
<React.Fragment key={`block-${index}`}>
|
|
<BlockTitle className='version-history__title'>{`${versions.find(ver => ver.selected) ? t('Common.VersionHistory.textCurrent') + ' - ' : ''} ${t('Common.VersionHistory.textVersion')} ${versions[0].revision}`}</BlockTitle>
|
|
<List className='version-history__list' dividersIos mediaList outlineIos strongIos>
|
|
{versions.map((version, index) => {
|
|
return (
|
|
<ListItem className={`version-history__item ${version === currentVersion ? 'version-history__item_active' : ''}`} key={`version-${index}`} link='#' title={version.created} subtitle={AscCommon.UserInfoParser.getParsedName(version.username)} onClick={() => handleClickRevision(version)}>
|
|
<div slot='media' className='version-history__user' style={{backgroundColor: usersVersions.find(user => user.id === version.userid).color}}>{usersStore.getInitials(AscCommon.UserInfoParser.getParsedName(version.username))}</div>
|
|
{(version === currentVersion && !version.selected && version.canRestore) &&
|
|
<div slot="inner">
|
|
<button type='button' className='version-history__btn' onClick={() => props.onRestoreRevision(version)}>{t('Common.VersionHistory.textRestore')}</button>
|
|
</div>
|
|
}
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</React.Fragment>
|
|
)
|
|
}) : null}
|
|
</Page>
|
|
)
|
|
}));
|
|
|
|
export default VersionHistoryView; |