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

View File

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

View File

@ -1,5 +1,6 @@
import React, { useState, ChangeEvent, useEffect } from 'react'; import React, { useState, ChangeEvent, useEffect } from 'react';
import { User } from '../types/user'; import { User } from '../types/user';
import { formatDate } from '../util/date';
export interface UserFormProps { export interface UserFormProps {
user: User user: User
@ -62,13 +63,13 @@ export function UserForm({ user, onChange }: UserFormProps) {
<div className="field"> <div className="field">
<label className="label">Date de dernière connexion</label> <label className="label">Date de dernière connexion</label>
<div className="control"> <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> </div>
<div className="field"> <div className="field">
<label className="label">Date de création</label> <label className="label">Date de création</label>
<div className="control"> <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> </div>
<div className="buttons is-right"> <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); if (typeof d === 'string') return new Date(d);
return 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);
}