Feature/JS-5418: Global datetime format settings

src/json/relation.ts

@@ -49,7 +49,8 @@ export default {
 		'restrictions',
 		'source',
 		'lastModifiedDate',
-		'lastOpenedDate'
+		'lastOpenedDate',
+		'timestamp'
 	],
 
 	relation: [

src/json/text.json

@@ -725,9 +725,12 @@
 	"popupSettingsPersonalSidebar": "Automatically show and hide sidebar",
 	"popupSettingsPersonalSidebarMode": "Sidebar mode",
 	"popupSettingsPersonalRelativeDates": "Display relative dates",
+	"popupSettingsPersonalDateFormat": "Date format",
 	"popupSettingsPersonalSectionLanguage": "Language & Spelling",
 	"popupSettingsPersonalSectionEditor": "Editor Personalisation",
 	"popupSettingsPersonalSectionApp": "App Appearance",
+	"popupSettingsPersonalSectionDateTime": "Date & Time",
+	"popupSettingsPersonalTimeFormat": "Time format",
 
 	"popupSettingsColorMode": "Color mode",
 	"popupSettingsColorModeButtonLight": "Light",
@@ -2198,6 +2201,7 @@
 	"participantPermissions3": "No access",
 
 	"relationMentions": "Mentioned in",
+	"relationCreator": "Created by",
 
 	"spaceStatus0": "Active",
 	"spaceStatus1": "Loading",
@@ -2256,7 +2260,6 @@
 	"formulaCheckboxEmpty": "Count unchecked",
 	"formulaCheckboxNotEmpty": "Count checked",
 	"formulaCheckboxPercentEmpty": "Percentage unchecked",
-	"formulaCheckboxPercentNotEmpty": "Percentage checked",
+	"formulaCheckboxPercentNotEmpty": "Percentage checked"
 
-	"creator": "Created by"
 }

src/ts/component/block/chat.tsx

@@ -59,7 +59,7 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon
 		const Section = (item: any) => {
 			let date = U.Date.dayString(item.createdAt);
 			if (!date) {
-				date = U.Date.dateWithFormat(I.DateFormat.MonthAbbrAfterDay, item.createdAt);
+				date = U.Date.dateWithFormat(S.Common.dateFormat, item.createdAt);
 			};
 
 			return (

src/ts/component/block/dataview/cell/text.tsx

@@ -170,8 +170,8 @@ const CellText = observer(class CellText extends React.Component<I.Cell, State>
 					value = Number(value) || 0;
 
 					const day = showRelativeDates ? U.Date.dayString(value) : null;
-					const date = day ? day : U.Date.dateWithFormat(viewRelation.dateFormat, value);
-					const time = U.Date.timeWithFormat(viewRelation.timeFormat, value);
+					const date = day ? day : U.Date.dateWithFormat(S.Common.dateFormat, value);
+					const time = U.Date.timeWithFormat(S.Common.timeFormat, value);
 
 					value = viewRelation.includeTime ? [ date, time ].join((day ? ', ' : ' ')) : date;
 				} else {

src/ts/component/page/main/date.tsx

@@ -51,7 +51,7 @@ const PageMainDate = observer(class PageMainDate extends React.Component<I.PageC
 
 		const columns: any[] = [
 			{ relationKey: 'type', name: translate('commonObjectType'), isObject: true },
-			{ relationKey: 'creator', name: translate('creator'), isObject: true },
+			{ relationKey: 'creator', name: translate('relationCreator'), isObject: true },
 		];
 
 		const filters: I.Filter[] = [];

src/ts/component/page/main/relation.tsx

@@ -44,7 +44,7 @@ const PageMainRelation = observer(class PageMainRelation extends React.Component
 		const columnsObject: any[] = [
 			{ 
 				relationKey: 'lastModifiedDate', name: translate('commonUpdated'),
-				mapper: v => U.Date.dateWithFormat(I.DateFormat.MonthAbbrBeforeDay, v),
+				mapper: v => U.Date.dateWithFormat(S.Common.dateFormat, v),
 			},
 			{ relationKey: object.relationKey, name: object.name, isCell: true }
 		];

src/ts/component/page/main/type.tsx

@@ -92,7 +92,7 @@ const PageMainType = observer(class PageMainType extends React.Component<I.PageC
 		const columns: any[] = [
 			{ 
 				relationKey: 'lastModifiedDate', name: translate('commonUpdated'),
-				mapper: v => v ? U.Date.dateWithFormat(I.DateFormat.MonthAbbrBeforeDay, v) : '',
+				mapper: v => v ? U.Date.dateWithFormat(S.Common.dateFormat, v) : '',
 			},
 		];
 

src/ts/component/popup/page/settings/personal.tsx

@@ -7,7 +7,7 @@ const PopupSettingsPagePersonal = observer(class PopupSettingsPagePersonal exten
 
 	render () {
 		const { getId } = this.props;
-		const { config, interfaceLang, navigationMenu, linkStyle, fullscreenObject, hideSidebar, showRelativeDates, showVault } = S.Common;
+		const { config, interfaceLang, navigationMenu, linkStyle, fullscreenObject, hideSidebar, showRelativeDates, showVault, dateFormat, timeFormat, } = S.Common;
 		const { hideTray, hideMenuBar, languages } = config;
 
 		const canHideMenu = U.Common.isPlatformWindows() || U.Common.isPlatformLinux();
@@ -105,17 +105,6 @@ const PopupSettingsPagePersonal = observer(class PopupSettingsPagePersonal exten
 						/>
 					</div>
 
-					<div className="item">
-						<Label text={translate('popupSettingsPersonalRelativeDates')} />
-						<Switch
-							className="big"
-							value={showRelativeDates}
-							onChange={(e: any, v: boolean) => {
-								S.Common.showRelativeDatesSet(v);
-								analytics.event('RelativeDates', { type: v });
-							}}
-						/>
-					</div>
 				</div>
 
 				<Label className="section" text={translate('popupSettingsPersonalSectionApp')} />
@@ -157,6 +146,48 @@ const PopupSettingsPagePersonal = observer(class PopupSettingsPagePersonal exten
 					) : ''}
 				</div>
 
+				<Label className="section" text={translate('popupSettingsPersonalSectionDateTime')} />
+
+				<div className="actionItems">
+
+					<div className="item">
+						<Label text={translate('popupSettingsPersonalRelativeDates')} />
+						<Switch
+							className="big"
+							value={showRelativeDates}
+							onChange={(e: any, v: boolean) => {
+								S.Common.showRelativeDatesSet(v);
+								analytics.event('RelativeDates', { type: v });
+							}}
+						/>
+					</div>
+
+					<div className="item">
+						<Label text={translate('popupSettingsPersonalDateFormat')} />
+						<Select
+							id="dateFormat"
+							value={String(dateFormat)}
+							options={U.Menu.dateFormatOptions().map(it => ({ ...it, id: String(it.id) }))}
+							onChange={v => S.Common.dateFormatSet(v)}
+							arrowClassName="black"
+							menuParam={{ horizontal: I.MenuDirection.Right }}
+						/>
+					</div>
+
+					<div className="item">
+						<Label text={translate('popupSettingsPersonalTimeFormat')} />
+						<Select
+							id="timeFormat"
+							value={String(timeFormat)}
+							options={U.Menu.timeFormatOptions().map(it => ({ ...it, id: String(it.id) }))}
+							onChange={v => S.Common.timeFormatSet(v)}
+							arrowClassName="black"
+							menuParam={{ horizontal: I.MenuDirection.Right }}
+						/>
+					</div>
+
+				</div>
+
 			</React.Fragment>
 		);
 	};

src/ts/component/popup/page/settings/space/index.tsx

@@ -408,7 +408,7 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R
 									<div className="sides">
 										<div className="side left">
 											<Title text={translate(`popupSettingsSpaceIndexCreationDateTitle`)} />
-											<Label text={U.Date.dateWithFormat(I.DateFormat.MonthAbbrBeforeDay, space.createdDate)} />
+											<Label text={U.Date.dateWithFormat(S.Common.dateFormat, space.createdDate)} />
 										</div>
 									</div>
 								</div>

src/ts/component/popup/page/usecase/item.tsx

@@ -97,7 +97,7 @@ class PopupUsecasePageItem extends React.Component<I.PopupUsecase, State> {
 								<Tag key={i} text={name} />
 							))}
 						</div>
-						<Label text={U.Common.sprintf(translate('popupUsecaseUpdated'), U.Date.dateWithFormat(I.DateFormat.MonthAbbrBeforeDay, U.Date.now()))} />
+						<Label text={U.Common.sprintf(translate('popupUsecaseUpdated'), U.Date.dateWithFormat(S.Common.dateFormat, U.Date.now()))} />
 						<Label text={U.File.size(object.size)} />
 					</div>
 				</div>

src/ts/lib/dataview.ts

@@ -551,7 +551,7 @@ class Dataview {
 			return null;
 		};
 
-		const { formulaType, includeTime, timeFormat, dateFormat, relationKey } = viewRelation;
+		const { formulaType, includeTime, relationKey } = viewRelation;
 		const relation = S.Record.getRelationByKey(relationKey);
 
 		if (!relation) {
@@ -573,8 +573,8 @@ class Dataview {
 		};
 
 		const date = (t: number) => {
-			const date = U.Date.dateWithFormat(dateFormat, t);
-			const time = U.Date.timeWithFormat(timeFormat, t);
+			const date = U.Date.dateWithFormat(S.Common.dateFormat, t);
+			const time = U.Date.timeWithFormat(S.Common.timeFormat, t);
 
 			return includeTime ? [ date, time ].join(' ') : date;
 		};

src/ts/store/common.ts

@@ -39,6 +39,8 @@ class CommonStore {
 	public fullscreenObjectValue = null;
 	public navigationMenuValue = null;
 	public linkStyleValue = null;
+	public dateFormatValue = null;
+	public timeFormatValue = null;
 	public isOnlineValue = false;
 	public shareTooltipValue = false;
 	public showVaultValue = null;
@@ -130,6 +132,8 @@ class CommonStore {
 			spaceStorageSet: action,
 			navigationMenuSet: action,
 			linkStyleSet: action,
+			dateFormatSet: action,
+			timeFormatSet: action,
 			isOnlineSet: action,
 			shareTooltipSet: action,
 			membershipTiersListSet: action,
@@ -245,6 +249,28 @@ class CommonStore {
 		return Number(ret) || I.LinkCardStyle.Text;
 	};
 
+	get dateFormat (): I.DateFormat {
+		let ret = this.dateFormatValue;
+		if (ret === null) {
+			ret = Storage.get('dateFormat');
+		};
+		if (undefined === ret) {
+			ret = I.DateFormat.MonthAbbrBeforeDay;
+		};
+		return Number(ret) || I.DateFormat.MonthAbbrBeforeDay;
+	};
+
+	get timeFormat (): I.TimeFormat {
+		let ret = this.timeFormatValue;
+		if (ret === null) {
+			ret = Storage.get('timeFormat');
+		};
+		if (undefined === ret) {
+			ret = I.TimeFormat.H12;
+		};
+		return Number(ret) || I.TimeFormat.H12;
+	};
+
 	get dataPath (): string {
 		return String(this.dataPathValue || '');
 	};
@@ -484,6 +510,18 @@ class CommonStore {
 		Storage.set('linkStyle', v);
 	};
 
+	dateFormatSet (v: I.DateFormat) {
+		v = Number(v);
+		this.dateFormatValue = v;
+		Storage.set('dateFormat', v);
+	};
+
+	timeFormatSet (v: I.TimeFormat) {
+		v = Number(v);
+		this.timeFormatValue = v;
+		Storage.set('timeFormat', v);
+	};
+
 	isOnlineSet (v: boolean) {
 		this.isOnlineValue = Boolean(v);
 		console.log('[Online status]:', v);

src/ts/store/detail.ts

@@ -276,6 +276,10 @@ class DetailStore {
 	};
 
 	private mapDate (object: any) {
+		if (typeof object.timestamp !== 'undefined') {
+			object.name = U.Date.dateWithFormat(S.Common.dateFormat, object.timestamp);
+		}
+
 		return this.mapSet(object);
 	};