Formatage des dates dans l'interface

This commit is contained in:
wpetit 2020-10-01 11:44:29 +02:00
parent 11f54ab66e
commit 61eacefd6c
4 changed files with 26 additions and 11 deletions

View File

@ -4,7 +4,7 @@ import { useWorkgroups } from '../../gql/queries/workgroups';
import { useUserProfile } from '../../gql/queries/profile';
import { inWorkgroup } from '../../types/workgroup';
import { DecisionSupportFileUpdaterProps } from './DecisionSupportFileUpdaterProps';
import { asDate } from '../../util/date';
import { asDate, formatDate } from '../../util/date';
import { Link } from 'react-router-dom';
export interface MetadataPanelProps extends DecisionSupportFileUpdaterProps {};
@ -81,13 +81,13 @@ export const MetadataPanel: FunctionComponent<MetadataPanelProps> = ({ dsf, upda
<div className="field">
<div className="label">Créé le</div>
<div className="control">
<p>{asDate(dsf.createdAt).toISOString()}</p>
<p>{formatDate(dsf.createdAt)}</p>
</div>
</div>
<div className="field">
<div className="label">Voté le</div>
<div className="control">
<p>{dsf.votedAt ? dsf.votedAt : '--'}</p>
<p>{dsf.votedAt ? formatDate(dsf.votedAt) : '--'}</p>
</div>
</div>
</div>

View File

@ -25,6 +25,7 @@ export function ProfilePage() {
<section className="section">
<div className="columns">
<div className="column is-6 is-offset-3">
<div className="box">
<h2 className="is-size-2 subtitle">Mon profil</h2>
<WithLoader loading={isLoading || !userProfile}>
{
@ -33,6 +34,7 @@ export function ProfilePage() {
</WithLoader>
</div>
</div>
</div>
</section>
</div>
</Page>

View File

@ -1,5 +1,6 @@
import React, { useState, ChangeEvent, useEffect } from 'react';
import { User } from '../types/user';
import { formatDate } from '../util/date';
export interface UserFormProps {
user: User
@ -62,13 +63,13 @@ export function UserForm({ user, onChange }: UserFormProps) {
<div className="field">
<label className="label">Date de dernière connexion</label>
<div className="control">
<p className="input is-static">{state.user.connectedAt}</p>
<p className="input is-static">{formatDate(state.user.connectedAt)}</p>
</div>
</div>
<div className="field">
<label className="label">Date de création</label>
<div className="control">
<p className="input is-static">{state.user.createdAt}</p>
<p className="input is-static">{formatDate(state.user.createdAt)}</p>
</div>
</div>
<div className="buttons is-right">

View File

@ -2,3 +2,15 @@ export function asDate(d: string|Date): Date {
if (typeof d === 'string') return new Date(d);
return d;
}
const intl = Intl.DateTimeFormat(navigator.language, {
weekday: 'long',
month: 'short',
day: 'numeric',
hour: 'numeric', minute: 'numeric', second: 'numeric',
});
export function formatDate(d: Date|string): string {
d = asDate(d);
return intl.format(d);
}