Merge pull request #7136 from tchak/refactor-types-de-champ-editor-ts

refactor(type_de_champs): use typescript in type de champs editor
This commit is contained in:
Paul Chavard 2022-04-08 14:38:23 +02:00 committed by GitHub
commit 98b574b031
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 640 additions and 411 deletions

View file

@ -1,6 +1,14 @@
export default class Flash {
constructor(isAnnotation) {
this.element = document.querySelector('#flash_messages');
import invariant from 'tiny-invariant';
export class Flash {
element: HTMLDivElement;
isAnnotation: boolean;
timeout?: number;
constructor(isAnnotation: boolean) {
const element = document.querySelector<HTMLDivElement>('#flash_messages');
invariant(element, 'Flash element is required');
this.element = element;
this.isAnnotation = isAnnotation;
}
success() {
@ -10,13 +18,13 @@ export default class Flash {
this.add('Formulaire enregistré.');
}
}
error(message) {
error(message: string) {
this.add(message, true);
}
clear() {
this.element.innerHTML = '';
}
add(message, isError) {
add(message: string, isError = false) {
const html = `<div id="flash_message" class="center">
<div class="alert alert-fixed ${
isError ? 'alert-danger' : 'alert-success'

View file

@ -1,9 +1,21 @@
import { getJSON } from '@utils';
import invariant from 'tiny-invariant';
export default class OperationsQueue {
constructor(baseUrl) {
type Operation = {
path: string;
method: string;
payload: unknown;
resolve: (value: unknown) => void;
reject: () => void;
};
export class OperationsQueue {
queue: Operation[];
isRunning = false;
baseUrl: string;
constructor(baseUrl: string) {
this.queue = [];
this.isRunning = false;
this.baseUrl = baseUrl;
}
@ -11,6 +23,7 @@ export default class OperationsQueue {
if (this.queue.length > 0) {
this.isRunning = true;
const operation = this.queue.shift();
invariant(operation, 'Operation is required');
await this.exec(operation);
this.run();
} else {
@ -18,7 +31,7 @@ export default class OperationsQueue {
}
}
enqueue(operation) {
enqueue(operation: Omit<Operation, 'resolve' | 'reject'>) {
return new Promise((resolve, reject) => {
this.queue.push({ ...operation, resolve, reject });
if (!this.isRunning) {
@ -27,7 +40,7 @@ export default class OperationsQueue {
});
}
async exec(operation) {
async exec(operation: Operation) {
const { path, method, payload, resolve, reject } = operation;
const url = `${this.baseUrl}${path}`;
@ -35,12 +48,19 @@ export default class OperationsQueue {
const data = await getJSON(url, payload, method);
resolve(data);
} catch (e) {
handleError(e, reject);
handleError(e as OperationError, reject);
}
}
}
async function handleError({ response, message }, reject) {
class OperationError extends Error {
response?: Response;
}
async function handleError(
{ response, message }: OperationError,
reject: (error: string) => void
) {
if (response) {
try {
const {

View file

@ -1,7 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
function DescriptionInput({ isVisible, handler }) {
import type { Handler } from '../types';
export function DescriptionInput({
isVisible,
handler
}: {
isVisible: boolean;
handler: Handler<HTMLTextAreaElement>;
}) {
if (isVisible) {
return (
<div className="cell">
@ -20,10 +27,3 @@ function DescriptionInput({ isVisible, handler }) {
}
return null;
}
DescriptionInput.propTypes = {
isVisible: PropTypes.bool,
handler: PropTypes.object
};
export default DescriptionInput;

View file

@ -1,7 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
function LibelleInput({ isVisible, handler }) {
import type { Handler } from '../types';
export function LibelleInput({
isVisible,
handler
}: {
isVisible: boolean;
handler: Handler<HTMLInputElement>;
}) {
if (isVisible) {
return (
<div className="cell libelle">
@ -19,10 +26,3 @@ function LibelleInput({ isVisible, handler }) {
}
return null;
}
LibelleInput.propTypes = {
handler: PropTypes.object,
isVisible: PropTypes.bool
};
export default LibelleInput;

View file

@ -1,7 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
function MandatoryInput({ isVisible, handler }) {
import type { Handler } from '../types';
export function MandatoryInput({
isVisible,
handler
}: {
isVisible: boolean;
handler: Handler<HTMLInputElement>;
}) {
if (isVisible) {
return (
<div className="cell">
@ -19,10 +26,3 @@ function MandatoryInput({ isVisible, handler }) {
}
return null;
}
MandatoryInput.propTypes = {
handler: PropTypes.object,
isVisible: PropTypes.bool
};
export default MandatoryInput;

View file

@ -1,8 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import React, { MouseEventHandler } from 'react';
import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/solid';
function MoveButton({ isEnabled, icon, title, onClick }) {
export function MoveButton({
isEnabled,
icon,
title,
onClick
}: {
isEnabled: boolean;
icon: string;
title: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) {
return (
<button
className="button small move"
@ -18,12 +27,3 @@ function MoveButton({ isEnabled, icon, title, onClick }) {
</button>
);
}
MoveButton.propTypes = {
isEnabled: PropTypes.bool,
icon: PropTypes.string,
title: PropTypes.string,
onClick: PropTypes.func
};
export default MoveButton;

View file

@ -1,24 +1,40 @@
import React from 'react';
import PropTypes from 'prop-types';
import { sortableElement, sortableHandle } from 'react-sortable-hoc';
import React, { Dispatch } from 'react';
import { SortableElement, SortableHandle } from 'react-sortable-hoc';
import { useInView } from 'react-intersection-observer';
import { TrashIcon } from '@heroicons/react/outline';
import DescriptionInput from './DescriptionInput';
import LibelleInput from './LibelleInput';
import MandatoryInput from './MandatoryInput';
import MoveButton from './MoveButton';
import TypeDeChampCarteOption from './TypeDeChampCarteOption';
import TypeDeChampCarteOptions from './TypeDeChampCarteOptions';
import TypeDeChampDropDownOptions from './TypeDeChampDropDownOptions';
import TypeDeChampDropDownOther from './TypeDeChampDropDownOther';
import TypeDeChampPieceJustificative from './TypeDeChampPieceJustificative';
import TypeDeChampRepetitionOptions from './TypeDeChampRepetitionOptions';
import TypeDeChampTypesSelect from './TypeDeChampTypesSelect';
import TypeDeChampDropDownSecondary from './TypeDeChampDropDownSecondary';
import type { Action, TypeDeChamp, State, Handler } from '../types';
import { DescriptionInput } from './DescriptionInput';
import { LibelleInput } from './LibelleInput';
import { MandatoryInput } from './MandatoryInput';
import { MoveButton } from './MoveButton';
import { TypeDeChampCarteOption } from './TypeDeChampCarteOption';
import { TypeDeChampCarteOptions } from './TypeDeChampCarteOptions';
import { TypeDeChampDropDownOptions } from './TypeDeChampDropDownOptions';
import { TypeDeChampDropDownOther } from './TypeDeChampDropDownOther';
import { TypeDeChampPieceJustificative } from './TypeDeChampPieceJustificative';
import { TypeDeChampRepetitionOptions } from './TypeDeChampRepetitionOptions';
import { TypeDeChampTypesSelect } from './TypeDeChampTypesSelect';
import { TypeDeChampDropDownSecondary } from './TypeDeChampDropDownSecondary';
const TypeDeChamp = sortableElement(
({ typeDeChamp, dispatch, idx: index, isFirstItem, isLastItem, state }) => {
type TypeDeChampProps = {
typeDeChamp: TypeDeChamp;
dispatch: Dispatch<Action>;
idx: number;
isFirstItem: boolean;
isLastItem: boolean;
state: State;
};
export const TypeDeChampComponent = SortableElement<TypeDeChampProps>(
({
typeDeChamp,
dispatch,
idx: index,
isFirstItem,
isLastItem,
state
}: TypeDeChampProps) => {
const isDropDown = [
'drop_down_list',
'multiple_drop_down_list',
@ -175,23 +191,25 @@ const TypeDeChamp = sortableElement(
}
);
TypeDeChamp.propTypes = {
dispatch: PropTypes.func,
idx: PropTypes.number,
isFirstItem: PropTypes.bool,
isLastItem: PropTypes.bool,
state: PropTypes.object,
typeDeChamp: PropTypes.object
};
const DragHandle = sortableHandle(() => (
const DragHandle = SortableHandle(() => (
<div
className="handle small icon-only icon move-handle"
title="Déplacer le champ vers le haut ou vers le bas"
/>
));
function createUpdateHandler(dispatch, typeDeChamp, field, index, prefix) {
type HandlerInputElement =
| HTMLInputElement
| HTMLTextAreaElement
| HTMLSelectElement;
function createUpdateHandler(
dispatch: Dispatch<Action>,
typeDeChamp: TypeDeChamp,
field: keyof TypeDeChamp,
index: number,
prefix?: string
): Handler<HandlerInputElement> {
return {
id: `${prefix ? `${prefix}-` : ''}champ-${index}-${field}`,
name: field,
@ -209,25 +227,22 @@ function createUpdateHandler(dispatch, typeDeChamp, field, index, prefix) {
};
}
function getValue(obj, path) {
const [, optionsPath] = path.split('.');
if (optionsPath) {
return (obj.editable_options || {})[optionsPath];
}
return obj[path];
}
function createUpdateHandlers(dispatch, typeDeChamp, index, prefix) {
function createUpdateHandlers(
dispatch: Dispatch<Action>,
typeDeChamp: TypeDeChamp,
index: number,
prefix?: string
) {
return FIELDS.reduce((handlers, field) => {
handlers[field] = createUpdateHandler(
dispatch,
typeDeChamp,
field,
field as keyof TypeDeChamp,
index,
prefix
);
return handlers;
}, {});
}, {} as Record<string, Handler<HandlerInputElement>>);
}
const OPTIONS_FIELDS = {
@ -242,7 +257,7 @@ const OPTIONS_FIELDS = {
'options.natura_2000': 'Natura 2000',
'options.zones_humides': 'Zones humides dimportance internationale',
'options.znieff': 'ZNIEFF'
};
} as const;
export const FIELDS = [
'description',
@ -257,10 +272,20 @@ export const FIELDS = [
'drop_down_secondary_libelle',
'drop_down_secondary_description',
...Object.keys(OPTIONS_FIELDS)
];
] as const;
function readValue(input) {
return input.type === 'checkbox' ? input.checked : input.value;
function getValue(obj: TypeDeChamp, path: string) {
const [, optionsPath] = path.split('.');
if (optionsPath) {
return (obj.editable_options || {})[optionsPath];
}
return obj[path as keyof TypeDeChamp] as string;
}
function readValue(input: HandlerInputElement) {
return input.type === 'checkbox' && 'checked' in input
? input.checked
: input.value;
}
const EXCLUDE_FROM_REPETITION = [
@ -269,5 +294,3 @@ const EXCLUDE_FROM_REPETITION = [
'repetition',
'siret'
];
export default TypeDeChamp;

View file

@ -1,7 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
function TypeDeChampCarteOption({ label, handler }) {
import type { Handler } from '../types';
export function TypeDeChampCarteOption({
label,
handler
}: {
label: string;
handler: Handler<HTMLInputElement>;
}) {
return (
<label htmlFor={handler.id}>
<input
@ -16,10 +23,3 @@ function TypeDeChampCarteOption({ label, handler }) {
</label>
);
}
TypeDeChampCarteOption.propTypes = {
label: PropTypes.string,
handler: PropTypes.object
};
export default TypeDeChampCarteOption;

View file

@ -1,21 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
function TypeDeChampCarteOptions({ isVisible, children }) {
if (isVisible) {
return (
<div className="cell">
<label>Utilisation de la cartographie</label>
<div className="carte-options">{children}</div>
</div>
);
}
return null;
}
TypeDeChampCarteOptions.propTypes = {
isVisible: PropTypes.bool,
children: PropTypes.node
};
export default TypeDeChampCarteOptions;

View file

@ -0,0 +1,19 @@
import React, { ReactNode } from 'react';
export function TypeDeChampCarteOptions({
isVisible,
children
}: {
isVisible: boolean;
children: ReactNode;
}) {
if (isVisible) {
return (
<div className="cell">
<label>Utilisation de la cartographie</label>
<div className="carte-options">{children}</div>
</div>
);
}
return null;
}

View file

@ -1,7 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
function TypeDeChampDropDownOptions({ isVisible, handler }) {
import type { Handler } from '../types';
export function TypeDeChampDropDownOptions({
isVisible,
handler
}: {
isVisible: boolean;
handler: Handler<HTMLTextAreaElement>;
}) {
if (isVisible) {
return (
<div className="cell">
@ -21,11 +28,3 @@ function TypeDeChampDropDownOptions({ isVisible, handler }) {
}
return null;
}
TypeDeChampDropDownOptions.propTypes = {
isVisible: PropTypes.bool,
value: PropTypes.string,
handler: PropTypes.object
};
export default TypeDeChampDropDownOptions;

View file

@ -1,7 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
function TypeDeChampDropDownOther({ isVisible, handler }) {
import type { Handler } from '../types';
export function TypeDeChampDropDownOther({
isVisible,
handler
}: {
isVisible: boolean;
handler: Handler<HTMLInputElement>;
}) {
if (isVisible) {
return (
<div className="cell">
@ -21,10 +28,3 @@ function TypeDeChampDropDownOther({ isVisible, handler }) {
}
return null;
}
TypeDeChampDropDownOther.propTypes = {
isVisible: PropTypes.bool,
handler: PropTypes.object
};
export default TypeDeChampDropDownOther;

View file

@ -1,10 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
export default function TypeDeChampDropDownSecondary({
import type { Handler } from '../types';
export function TypeDeChampDropDownSecondary({
isVisible,
libelleHandler,
descriptionHandler
}: {
isVisible: boolean;
libelleHandler: Handler<HTMLInputElement>;
descriptionHandler: Handler<HTMLTextAreaElement>;
}) {
if (isVisible) {
return (
@ -33,9 +38,3 @@ export default function TypeDeChampDropDownSecondary({
}
return null;
}
TypeDeChampDropDownSecondary.propTypes = {
isVisible: PropTypes.bool,
libelleHandler: PropTypes.object,
descriptionHandler: PropTypes.object
};

View file

@ -1,13 +1,20 @@
import React from 'react';
import PropTypes from 'prop-types';
import Uploader from '../../../shared/activestorage/uploader';
import React, { ChangeEvent } from 'react';
function TypeDeChampPieceJustificative({
import Uploader from '../../../shared/activestorage/uploader';
import type { Handler } from '../types';
export function TypeDeChampPieceJustificative({
isVisible,
url,
filename,
handler,
directUploadUrl
}: {
isVisible: boolean;
url?: string;
filename?: string;
handler: Handler<HTMLInputElement>;
directUploadUrl: string;
}) {
if (isVisible) {
const hasFile = !!filename;
@ -28,15 +35,15 @@ function TypeDeChampPieceJustificative({
return null;
}
TypeDeChampPieceJustificative.propTypes = {
isVisible: PropTypes.bool,
url: PropTypes.string,
filename: PropTypes.string,
handler: PropTypes.object,
directUploadUrl: PropTypes.string
};
function FileInformation({ isVisible, url, filename }) {
function FileInformation({
isVisible,
url,
filename
}: {
isVisible: boolean;
url?: string;
filename?: string;
}) {
if (isVisible) {
return (
<>
@ -50,32 +57,29 @@ function FileInformation({ isVisible, url, filename }) {
return null;
}
FileInformation.propTypes = {
isVisible: PropTypes.bool,
url: PropTypes.string,
filename: PropTypes.string
};
function onFileChange(handler, directUploadUrl) {
function onFileChange(
handler: Handler<HTMLInputElement>,
directUploadUrl: string
): (event: ChangeEvent<HTMLInputElement>) => void {
return async ({ target }) => {
const file = target.files[0];
const file = (target.files ?? [])[0];
if (file) {
const signedId = await uploadFile(target, file, directUploadUrl);
handler.onChange({
target: {
value: signedId
}
});
target: { value: signedId }
} as ChangeEvent<HTMLInputElement>);
}
};
}
function uploadFile(input, file, directUploadUrl) {
function uploadFile(
input: HTMLInputElement,
file: File,
directUploadUrl: string
) {
const controller = new Uploader(input, file, directUploadUrl);
return controller.start().then((signedId) => {
input.value = null;
input.value = '';
return signedId;
});
}
export default TypeDeChampPieceJustificative;

View file

@ -1,15 +1,19 @@
import React, { useReducer } from 'react';
import PropTypes from 'prop-types';
import { PlusIcon } from '@heroicons/react/outline';
import { SortableContainer, addChampLabel } from '../utils';
import TypeDeChamp from './TypeDeChamp';
import { TypeDeChampComponent } from './TypeDeChamp';
import typeDeChampsReducer from '../typeDeChampsReducer';
import type { State, TypeDeChamp } from '../types';
function TypeDeChampRepetitionOptions({
export function TypeDeChampRepetitionOptions({
isVisible,
state: parentState,
typeDeChamp
}: {
isVisible: boolean;
state: State;
typeDeChamp: TypeDeChamp;
}) {
const [state, dispatch] = useReducer(typeDeChampsReducer, parentState);
@ -23,7 +27,7 @@ function TypeDeChampRepetitionOptions({
useDragHandle
>
{state.typeDeChamps.map((typeDeChamp, index) => (
<TypeDeChamp
<TypeDeChampComponent
dispatch={dispatch}
idx={index}
index={index}
@ -54,11 +58,3 @@ function TypeDeChampRepetitionOptions({
}
return null;
}
TypeDeChampRepetitionOptions.propTypes = {
isVisible: PropTypes.bool,
state: PropTypes.object,
typeDeChamp: PropTypes.object
};
export default TypeDeChampRepetitionOptions;

View file

@ -1,7 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
function TypeDeChampTypesSelect({ handler, options }) {
import type { Handler } from '../types';
export function TypeDeChampTypesSelect({
handler,
options
}: {
handler: Handler<HTMLSelectElement>;
options: [label: string, type: string][];
}) {
return (
<div className="cell">
<select
@ -20,10 +27,3 @@ function TypeDeChampTypesSelect({ handler, options }) {
</div>
);
}
TypeDeChampTypesSelect.propTypes = {
handler: PropTypes.object,
options: PropTypes.array
};
export default TypeDeChampTypesSelect;

View file

@ -1,12 +1,20 @@
import React, { useReducer } from 'react';
import PropTypes from 'prop-types';
import { PlusIcon, ArrowCircleDownIcon } from '@heroicons/react/outline';
import { SortableContainer, addChampLabel } from '../utils';
import TypeDeChamp from './TypeDeChamp';
import { TypeDeChampComponent } from './TypeDeChamp';
import typeDeChampsReducer from '../typeDeChampsReducer';
import type { TypeDeChamp, State } from '../types';
function TypeDeChamps({ state: rootState, typeDeChamps }) {
type TypeDeChampsProps = {
state: State;
typeDeChamps: TypeDeChamp[];
};
export function TypeDeChamps({
state: rootState,
typeDeChamps
}: TypeDeChampsProps) {
const [state, dispatch] = useReducer(typeDeChampsReducer, {
...rootState,
typeDeChamps
@ -24,7 +32,7 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
useDragHandle
>
{state.typeDeChamps.map((typeDeChamp, index) => (
<TypeDeChamp
<TypeDeChampComponent
dispatch={dispatch}
idx={index}
index={index}
@ -67,10 +75,3 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
</div>
);
}
TypeDeChamps.propTypes = {
state: PropTypes.object,
typeDeChamps: PropTypes.array
};
export default TypeDeChamps;

View file

@ -1,46 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Flash from './Flash';
import OperationsQueue from './OperationsQueue';
import TypeDeChamps from './components/TypeDeChamps';
class TypesDeChampEditor extends Component {
constructor(props) {
super(props);
const defaultTypeDeChampAttributes = {
type_champ: 'text',
types_de_champ: [],
private: props.isAnnotation,
libelle: `${
props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'
} ${props.typeDeChampsTypes[0][0]}`
};
this.state = {
flash: new Flash(props.isAnnotation),
queue: new OperationsQueue(props.baseUrl),
defaultTypeDeChampAttributes,
typeDeChampsTypes: props.typeDeChampsTypes,
directUploadUrl: props.directUploadUrl,
isAnnotation: props.isAnnotation,
continuerUrl: props.continuerUrl
};
}
render() {
return (
<TypeDeChamps state={this.state} typeDeChamps={this.props.typeDeChamps} />
);
}
}
TypesDeChampEditor.propTypes = {
baseUrl: PropTypes.string,
continuerUrl: PropTypes.string,
directUploadUrl: PropTypes.string,
isAnnotation: PropTypes.bool,
typeDeChamps: PropTypes.array,
typeDeChampsTypes: PropTypes.array
};
export default TypesDeChampEditor;

View file

@ -0,0 +1,54 @@
import React from 'react';
import { Flash } from './Flash';
import { OperationsQueue } from './OperationsQueue';
import { TypeDeChamps } from './components/TypeDeChamps';
import { TypeDeChamp } from './types';
type TypesDeChampEditorProps = {
baseUrl: string;
continuerUrl: string;
directUploadUrl: string;
isAnnotation: boolean;
typeDeChamps: TypeDeChamp[];
typeDeChampsTypes: [label: string, type: string][];
};
export type State = Omit<TypesDeChampEditorProps, 'baseUrl'> & {
flash: Flash;
queue: OperationsQueue;
defaultTypeDeChampAttributes: Pick<
TypeDeChamp,
| 'type_champ'
| 'types_de_champ'
| 'libelle'
| 'private'
| 'parent_id'
| 'mandatory'
>;
prefix?: string;
};
export default function TypesDeChampEditor(props: TypesDeChampEditorProps) {
const defaultTypeDeChampAttributes: Omit<TypeDeChamp, 'id'> = {
type_champ: 'text',
types_de_champ: [],
mandatory: false,
private: props.isAnnotation,
libelle: `${props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'} ${
props.typeDeChampsTypes[0][0]
}`
};
const state: State = {
flash: new Flash(props.isAnnotation),
queue: new OperationsQueue(props.baseUrl),
defaultTypeDeChampAttributes,
typeDeChamps: [],
typeDeChampsTypes: props.typeDeChampsTypes,
directUploadUrl: props.directUploadUrl,
isAnnotation: props.isAnnotation,
continuerUrl: props.continuerUrl
};
return <TypeDeChamps state={state} typeDeChamps={props.typeDeChamps} />;
}

View file

@ -1,51 +0,0 @@
export function createTypeDeChampOperation(typeDeChamp, queue) {
return queue
.enqueue({
path: '',
method: 'post',
payload: { type_de_champ: typeDeChamp }
})
.then((data) => {
handleResponseData(typeDeChamp, data);
});
}
export function destroyTypeDeChampOperation(typeDeChamp, queue) {
return queue.enqueue({
path: `/${typeDeChamp.id}`,
method: 'delete',
payload: {}
});
}
export function moveTypeDeChampOperation(typeDeChamp, index, queue) {
return queue.enqueue({
path: `/${typeDeChamp.id}/move`,
method: 'patch',
payload: { position: index }
});
}
export function updateTypeDeChampOperation(typeDeChamp, queue) {
return queue
.enqueue({
path: `/${typeDeChamp.id}`,
method: 'patch',
payload: { type_de_champ: typeDeChamp }
})
.then((data) => {
handleResponseData(typeDeChamp, data);
});
}
function handleResponseData(typeDeChamp, { type_de_champ }) {
for (let field of RESPONSE_FIELDS) {
typeDeChamp[field] = type_de_champ[field];
}
}
const RESPONSE_FIELDS = [
'id',
'piece_justificative_template_filename',
'piece_justificative_template_url'
];

View file

@ -0,0 +1,71 @@
import type { TypeDeChamp, OperationsQueue } from './types';
export function createTypeDeChampOperation(
typeDeChamp: Omit<TypeDeChamp, 'id'>,
queue: OperationsQueue
) {
return queue
.enqueue({
path: '',
method: 'post',
payload: { type_de_champ: typeDeChamp }
})
.then((data) => {
handleResponseData(typeDeChamp, data as ResponseData);
});
}
export function destroyTypeDeChampOperation(
typeDeChamp: TypeDeChamp,
queue: OperationsQueue
) {
return queue.enqueue({
path: `/${typeDeChamp.id}`,
method: 'delete',
payload: {}
});
}
export function moveTypeDeChampOperation(
typeDeChamp: TypeDeChamp,
index: number,
queue: OperationsQueue
) {
return queue.enqueue({
path: `/${typeDeChamp.id}/move`,
method: 'patch',
payload: { position: index }
});
}
export function updateTypeDeChampOperation(
typeDeChamp: TypeDeChamp,
queue: OperationsQueue
) {
return queue
.enqueue({
path: `/${typeDeChamp.id}`,
method: 'patch',
payload: { type_de_champ: typeDeChamp }
})
.then((data) => {
handleResponseData(typeDeChamp, data as ResponseData);
});
}
type ResponseData = { type_de_champ: Record<string, string> };
function handleResponseData(
typeDeChamp: Partial<TypeDeChamp>,
{ type_de_champ }: ResponseData
) {
for (const field of RESPONSE_FIELDS) {
typeDeChamp[field] = type_de_champ[field];
}
}
const RESPONSE_FIELDS = [
'id',
'piece_justificative_template_filename',
'piece_justificative_template_url'
] as const;

View file

@ -5,36 +5,103 @@ import {
moveTypeDeChampOperation,
updateTypeDeChampOperation
} from './operations';
import type { TypeDeChamp, State, Flash, OperationsQueue } from './types';
export default function typeDeChampsReducer(state, { type, params, done }) {
switch (type) {
type AddNewTypeDeChampAction = {
type: 'addNewTypeDeChamp';
done: () => void;
};
type AddNewRepetitionTypeDeChampAction = {
type: 'addNewRepetitionTypeDeChamp';
params: { typeDeChamp: TypeDeChamp };
done: () => void;
};
type UpdateTypeDeChampAction = {
type: 'updateTypeDeChamp';
params: {
typeDeChamp: TypeDeChamp;
field: keyof TypeDeChamp;
value: string | boolean;
};
done: () => void;
};
type RemoveTypeDeChampAction = {
type: 'removeTypeDeChamp';
params: { typeDeChamp: TypeDeChamp };
};
type MoveTypeDeChampUpAction = {
type: 'moveTypeDeChampUp';
params: { typeDeChamp: TypeDeChamp };
};
type MoveTypeDeChampDownAction = {
type: 'moveTypeDeChampDown';
params: { typeDeChamp: TypeDeChamp };
};
type OnSortTypeDeChampsAction = {
type: 'onSortTypeDeChamps';
params: { oldIndex: number; newIndex: number };
};
type RefreshAction = {
type: 'refresh';
};
export type Action =
| AddNewTypeDeChampAction
| AddNewRepetitionTypeDeChampAction
| UpdateTypeDeChampAction
| RemoveTypeDeChampAction
| MoveTypeDeChampUpAction
| MoveTypeDeChampDownAction
| OnSortTypeDeChampsAction
| RefreshAction;
export default function typeDeChampsReducer(
state: State,
action: Action
): State {
switch (action.type) {
case 'addNewTypeDeChamp':
return addNewTypeDeChamp(state, state.typeDeChamps, done);
return addNewTypeDeChamp(state, state.typeDeChamps, action.done);
case 'addNewRepetitionTypeDeChamp':
return addNewRepetitionTypeDeChamp(
state,
state.typeDeChamps,
params.typeDeChamp,
done
action.params,
action.done
);
case 'updateTypeDeChamp':
return updateTypeDeChamp(state, state.typeDeChamps, params, done);
return updateTypeDeChamp(
state,
state.typeDeChamps,
action.params,
action.done
);
case 'removeTypeDeChamp':
return removeTypeDeChamp(state, state.typeDeChamps, params);
return removeTypeDeChamp(state, state.typeDeChamps, action.params);
case 'moveTypeDeChampUp':
return moveTypeDeChampUp(state, state.typeDeChamps, params);
return moveTypeDeChampUp(state, state.typeDeChamps, action.params);
case 'moveTypeDeChampDown':
return moveTypeDeChampDown(state, state.typeDeChamps, params);
return moveTypeDeChampDown(state, state.typeDeChamps, action.params);
case 'onSortTypeDeChamps':
return onSortTypeDeChamps(state, state.typeDeChamps, params);
return onSortTypeDeChamps(state, state.typeDeChamps, action.params);
case 'refresh':
return { ...state, typeDeChamps: [...state.typeDeChamps] };
default:
throw new Error(`Unknown action "${type}"`);
}
}
function addTypeDeChamp(state, typeDeChamps, insertAfter, done) {
function addTypeDeChamp(
state: State,
typeDeChamps: TypeDeChamp[],
insertAfter: { index: number; target: HTMLDivElement } | null,
done: () => void
) {
const typeDeChamp = {
...state.defaultTypeDeChampAttributes
};
@ -44,7 +111,7 @@ function addTypeDeChamp(state, typeDeChamps, insertAfter, done) {
if (insertAfter) {
// Move the champ to the correct position server-side
await moveTypeDeChampOperation(
typeDeChamp,
typeDeChamp as TypeDeChamp,
insertAfter.index,
state.queue
);
@ -52,7 +119,7 @@ function addTypeDeChamp(state, typeDeChamps, insertAfter, done) {
state.flash.success();
done();
if (insertAfter) {
insertAfter.target.nextElementSibling.scrollIntoView({
insertAfter.target.nextElementSibling?.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest'
@ -61,7 +128,10 @@ function addTypeDeChamp(state, typeDeChamps, insertAfter, done) {
})
.catch((message) => state.flash.error(message));
let newTypeDeChamps = [...typeDeChamps, typeDeChamp];
let newTypeDeChamps: TypeDeChamp[] = [
...typeDeChamps,
typeDeChamp as TypeDeChamp
];
if (insertAfter) {
// Move the champ to the correct position client-side
newTypeDeChamps = arrayMove(
@ -77,11 +147,20 @@ function addTypeDeChamp(state, typeDeChamps, insertAfter, done) {
};
}
function addNewTypeDeChamp(state, typeDeChamps, done) {
function addNewTypeDeChamp(
state: State,
typeDeChamps: TypeDeChamp[],
done: () => void
) {
return addTypeDeChamp(state, typeDeChamps, findItemToInsertAfter(), done);
}
function addNewRepetitionTypeDeChamp(state, typeDeChamps, typeDeChamp, done) {
function addNewRepetitionTypeDeChamp(
state: State,
typeDeChamps: TypeDeChamp[],
{ typeDeChamp }: AddNewRepetitionTypeDeChampAction['params'],
done: () => void
) {
return addTypeDeChamp(
{
...state,
@ -97,10 +176,10 @@ function addNewRepetitionTypeDeChamp(state, typeDeChamps, typeDeChamp, done) {
}
function updateTypeDeChamp(
state,
typeDeChamps,
{ typeDeChamp, field, value },
done
state: State,
typeDeChamps: TypeDeChamp[],
{ typeDeChamp, field, value }: UpdateTypeDeChampAction['params'],
done: () => void
) {
if (field == 'type_champ' && !typeDeChamp.drop_down_list_value) {
switch (value) {
@ -117,9 +196,9 @@ function updateTypeDeChamp(
if (field.startsWith('options.')) {
const [, optionsField] = field.split('.');
typeDeChamp.editable_options = typeDeChamp.editable_options || {};
typeDeChamp.editable_options[optionsField] = value;
typeDeChamp.editable_options[optionsField] = value as string;
} else {
typeDeChamp[field] = value;
Object.assign(typeDeChamp, { [field]: value });
}
getUpdateHandler(typeDeChamp, state)(done);
@ -130,7 +209,11 @@ function updateTypeDeChamp(
};
}
function removeTypeDeChamp(state, typeDeChamps, { typeDeChamp }) {
function removeTypeDeChamp(
state: State,
typeDeChamps: TypeDeChamp[],
{ typeDeChamp }: RemoveTypeDeChampAction['params']
) {
destroyTypeDeChampOperation(typeDeChamp, state.queue)
.then(() => state.flash.success())
.catch((message) => state.flash.error(message));
@ -141,7 +224,11 @@ function removeTypeDeChamp(state, typeDeChamps, { typeDeChamp }) {
};
}
function moveTypeDeChampUp(state, typeDeChamps, { typeDeChamp }) {
function moveTypeDeChampUp(
state: State,
typeDeChamps: TypeDeChamp[],
{ typeDeChamp }: MoveTypeDeChampUpAction['params']
) {
const oldIndex = typeDeChamps.indexOf(typeDeChamp);
const newIndex = oldIndex - 1;
@ -155,7 +242,11 @@ function moveTypeDeChampUp(state, typeDeChamps, { typeDeChamp }) {
};
}
function moveTypeDeChampDown(state, typeDeChamps, { typeDeChamp }) {
function moveTypeDeChampDown(
state: State,
typeDeChamps: TypeDeChamp[],
{ typeDeChamp }: MoveTypeDeChampDownAction['params']
) {
const oldIndex = typeDeChamps.indexOf(typeDeChamp);
const newIndex = oldIndex + 1;
@ -169,7 +260,11 @@ function moveTypeDeChampDown(state, typeDeChamps, { typeDeChamp }) {
};
}
function onSortTypeDeChamps(state, typeDeChamps, { oldIndex, newIndex }) {
function onSortTypeDeChamps(
state: State,
typeDeChamps: TypeDeChamp[],
{ oldIndex, newIndex }: OnSortTypeDeChampsAction['params']
) {
moveTypeDeChampOperation(typeDeChamps[oldIndex], newIndex, state.queue)
.then(() => state.flash.success())
.catch((message) => state.flash.error(message));
@ -180,24 +275,27 @@ function onSortTypeDeChamps(state, typeDeChamps, { oldIndex, newIndex }) {
};
}
function arrayRemove(array, item) {
function arrayRemove<T>(array: T[], item: T) {
array = Array.from(array);
array.splice(array.indexOf(item), 1);
return array;
}
function arrayMove(array, from, to) {
function arrayMove<T>(array: T[], from: number, to: number) {
array = Array.from(array);
array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
return array;
}
const updateHandlers = new WeakMap();
function getUpdateHandler(typeDeChamp, { queue, flash }) {
function getUpdateHandler(
typeDeChamp: TypeDeChamp,
{ queue, flash }: { queue: OperationsQueue; flash: Flash }
) {
let handler = updateHandlers.get(typeDeChamp);
if (!handler) {
handler = debounce(
(done) =>
(done: () => void) =>
updateTypeDeChampOperation(typeDeChamp, queue)
.then(() => {
flash.success();
@ -217,7 +315,7 @@ function findItemToInsertAfter() {
if (target) {
return {
target,
index: parseInt(target.dataset.index) + 1
index: parseInt(target.dataset.index ?? '0') + 1
};
} else {
return null;
@ -225,11 +323,12 @@ function findItemToInsertAfter() {
}
function getLastVisibleTypeDeChamp() {
const typeDeChamps = document.querySelectorAll('[data-in-view]');
const typeDeChamps =
document.querySelectorAll<HTMLDivElement>('[data-in-view]');
const target = typeDeChamps[typeDeChamps.length - 1];
if (target) {
const parentTarget = target.closest('[data-repetition]');
const parentTarget = target.closest<HTMLDivElement>('[data-repetition]');
if (parentTarget) {
return parentTarget;
}

View file

@ -0,0 +1,27 @@
import type { ChangeEventHandler } from 'react';
export type { Flash } from './Flash';
export type { OperationsQueue } from './OperationsQueue';
export type { State } from '.';
export { Action } from './typeDeChampsReducer';
export type TypeDeChamp = {
id: string;
libelle: string;
type_champ: string;
private: boolean;
mandatory: boolean;
types_de_champ: TypeDeChamp[];
parent_id?: string;
piece_justificative_template_filename?: string;
piece_justificative_template_url?: string;
drop_down_list_value?: string;
editable_options?: Record<string, string>;
};
export type Handler<Element extends HTMLElement> = {
id: string;
name: string;
value: string;
onChange: ChangeEventHandler<Element>;
};

View file

@ -1,14 +0,0 @@
import React from 'react';
import { sortableContainer } from 'react-sortable-hoc';
export const SortableContainer = sortableContainer(({ children }) => {
return <ul>{children}</ul>;
});
export function addChampLabel(isAnnotation) {
if (isAnnotation) {
return 'Ajouter une annotation';
} else {
return 'Ajouter un champ';
}
}

View file

@ -0,0 +1,16 @@
import React, { ReactNode } from 'react';
import { SortableContainer as SortableContainerWrapper } from 'react-sortable-hoc';
export const SortableContainer = SortableContainerWrapper(
({ children }: { children: ReactNode }) => {
return <ul>{children}</ul>;
}
);
export function addChampLabel(isAnnotation: boolean) {
if (isAnnotation) {
return 'Ajouter une annotation';
} else {
return 'Ajouter un champ';
}
}

View file

@ -18,7 +18,10 @@ export const FAILURE_CONNECTIVITY = 'file-upload-failure-connectivity';
Represent an error during a file upload.
*/
export default class FileUploadError extends Error {
constructor(message, status, code) {
status?: number;
code?: string;
constructor(message: string, status: number | undefined, code?: string) {
super(message);
this.name = 'FileUploadError';
@ -27,9 +30,9 @@ export default class FileUploadError extends Error {
// Prevent the constructor stacktrace from being included.
// (it messes up with Sentry issues grouping)
if (Error.captureStackTrace) {
if ('captureStackTrace' in Error) {
// V8-only
Error.captureStackTrace(this, this.constructor);
//Error.captureStackTrace(this, this.constructor);
} else {
this.stack = new Error().stack;
}
@ -40,7 +43,7 @@ export default class FileUploadError extends Error {
See FAILURE_* constants for values.
*/
get failureReason() {
let isNetworkError = this.code && this.code != ERROR_CODE_READ;
const isNetworkError = this.code && this.code != ERROR_CODE_READ;
if (isNetworkError && this.status != 0) {
return FAILURE_SERVER;
@ -60,9 +63,9 @@ export default class FileUploadError extends Error {
// 2. Create each kind of error on a different line
// (so that Sentry knows they are different kind of errors, from
// the line they were created.)
export function errorFromDirectUploadMessage(message) {
let matches = message.match(/ Status: ([0-9]{1,3})/);
let status = matches ? parseInt(matches[1], 10) : undefined;
export function errorFromDirectUploadMessage(message: string) {
const matches = message.match(/ Status: ([0-9]{1,3})/);
const status = matches ? parseInt(matches[1], 10) : undefined;
// prettier-ignore
if (message.includes('Error reading')) {

View file

@ -15,13 +15,13 @@ const COMPLETE_CLASS = 'direct-upload--complete';
be found.
*/
export default class ProgressBar {
static init(input, id, file) {
static init(input: HTMLInputElement, id: string, file: File) {
clearErrors(input);
const html = this.render(id, file.name);
input.insertAdjacentHTML('beforebegin', html);
}
static start(id) {
static start(id: string) {
const element = getDirectUploadElement(id);
if (element) {
element.classList.remove(PENDING_CLASS);
@ -29,15 +29,15 @@ export default class ProgressBar {
}
}
static progress(id, progress) {
static progress(id: string, progress: number) {
const element = getDirectUploadProgressElement(id);
if (element) {
element.style.width = `${progress}%`;
element.setAttribute('aria-valuenow', progress);
element.setAttribute('aria-valuenow', `${progress}`);
}
}
static error(id, error) {
static error(id: string, error: string) {
const element = getDirectUploadElement(id);
if (element) {
element.classList.add(ERROR_CLASS);
@ -45,60 +45,63 @@ export default class ProgressBar {
}
}
static end(id) {
static end(id: string) {
const element = getDirectUploadElement(id);
if (element) {
element.classList.add(COMPLETE_CLASS);
}
}
static render(id, filename) {
static render(id: string, filename: string) {
return `<div id="direct-upload-${id}" class="direct-upload ${PENDING_CLASS}" data-direct-upload-id="${id}">
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" class="direct-upload__progress" style="width: 0%"></div>
<span class="direct-upload__filename">${filename}</span>
</div>`;
}
constructor(input, id, file) {
this.constructor.init(input, id, file);
id: string;
constructor(input: HTMLInputElement, id: string, file: File) {
ProgressBar.init(input, id, file);
this.id = id;
}
start() {
this.constructor.start(this.id);
ProgressBar.start(this.id);
}
progress(progress) {
this.constructor.progress(this.id, progress);
progress(progress: number) {
ProgressBar.progress(this.id, progress);
}
error(error) {
this.constructor.error(this.id, error);
error(error: string) {
ProgressBar.error(this.id, error);
}
end() {
this.constructor.end(this.id);
ProgressBar.end(this.id);
}
destroy() {
const element = getDirectUploadElement(this.id);
element?.remove();
}
}
function clearErrors(input: HTMLInputElement) {
const errorElements =
input.parentElement?.querySelectorAll(`.${ERROR_CLASS}`) ?? [];
for (const element of errorElements) {
element.remove();
}
}
function clearErrors(input) {
const errorElements = input.parentElement.querySelectorAll(`.${ERROR_CLASS}`);
for (let element of errorElements) {
element.remove();
}
function getDirectUploadElement(id: string) {
return document.querySelector<HTMLDivElement>(`#direct-upload-${id}`);
}
function getDirectUploadElement(id) {
return document.getElementById(`direct-upload-${id}`);
}
function getDirectUploadProgressElement(id) {
return document.querySelector(
function getDirectUploadProgressElement(id: string) {
return document.querySelector<HTMLDivElement>(
`#direct-upload-${id} .direct-upload__progress`
);
}

View file

@ -11,9 +11,18 @@ import FileUploadError, {
used to track lifecycle and progress of an upload.
*/
export default class Uploader {
constructor(input, file, directUploadUrl, autoAttachUrl) {
directUpload: DirectUpload;
progressBar: ProgressBar;
autoAttachUrl?: string;
constructor(
input: HTMLInputElement,
file: File,
directUploadUrl: string,
autoAttachUrl?: string
) {
this.directUpload = new DirectUpload(file, directUploadUrl, this);
this.progressBar = new ProgressBar(input, this.directUpload.id, file);
this.progressBar = new ProgressBar(input, this.directUpload.id + '', file);
this.autoAttachUrl = autoAttachUrl;
}
@ -26,10 +35,10 @@ export default class Uploader {
this.progressBar.start();
try {
let blobSignedId = await this._upload();
const blobSignedId = await this._upload();
if (this.autoAttachUrl) {
await this._attach(blobSignedId);
await this._attach(blobSignedId, this.autoAttachUrl);
// On response, the attachment HTML fragment will replace the progress bar.
} else {
this.progressBar.end();
@ -38,7 +47,7 @@ export default class Uploader {
return blobSignedId;
} catch (error) {
this.progressBar.error(error.message);
this.progressBar.error((error as Error).message);
throw error;
}
}
@ -47,11 +56,11 @@ export default class Uploader {
Upload the file using the DirectUpload instance, and return the blob signed_id.
Throws a FileUploadError on failure.
*/
async _upload() {
async _upload(): Promise<string> {
return new Promise((resolve, reject) => {
this.directUpload.create((errorMsg, attributes) => {
if (errorMsg) {
let error = errorFromDirectUploadMessage(errorMsg);
const error = errorFromDirectUploadMessage(errorMsg.message);
reject(error);
} else {
resolve(attributes.signed_id);
@ -65,9 +74,9 @@ export default class Uploader {
Throws a FileUploadError on failure (containing the first validation
error message, if any).
*/
async _attach(blobSignedId) {
async _attach(blobSignedId: string, autoAttachUrl: string) {
const attachmentRequest = {
url: this.autoAttachUrl,
url: autoAttachUrl,
type: 'PUT',
data: `blob_signed_id=${blobSignedId}`
};
@ -75,23 +84,27 @@ export default class Uploader {
try {
await ajax(attachmentRequest);
} catch (e) {
let message = e.response && e.response.errors && e.response.errors[0];
const error = e as {
response?: { errors: string[] };
xhr?: XMLHttpRequest;
};
const message = error.response?.errors && error.response.errors[0];
throw new FileUploadError(
message || 'Error attaching file.',
e.xhr.status,
error.xhr?.status,
ERROR_CODE_ATTACH
);
}
}
uploadRequestDidProgress(event) {
uploadRequestDidProgress(event: ProgressEvent) {
const progress = (event.loaded / event.total) * 100;
if (progress) {
this.progressBar.progress(progress);
}
}
directUploadWillStoreFileWithXHR(xhr) {
directUploadWillStoreFileWithXHR(xhr: XMLHttpRequest) {
xhr.upload.addEventListener('progress', (event) =>
this.uploadRequestDidProgress(event)
);

View file

@ -35,7 +35,7 @@
"react-intersection-observer": "^8.31.0",
"react-popper": "^2.2.5",
"react-query": "^3.34.19",
"react-sortable-hoc": "^1.11.0",
"react-sortable-hoc": "^2.0.0",
"tiny-invariant": "^1.2.0",
"trix": "^1.2.3",
"use-debounce": "^5.2.0",
@ -49,6 +49,7 @@
"@types/geojson": "^7946.0.8",
"@types/is-hotkey": "^0.1.7",
"@types/mapbox__mapbox-gl-draw": "^1.2.3",
"@types/rails__activestorage": "^7.0.1",
"@types/rails__ujs": "^6.0.1",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",

View file

@ -2459,6 +2459,11 @@
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
"@types/rails__activestorage@^7.0.1":
version "7.0.1"
resolved "https://registry.yarnpkg.com/@types/rails__activestorage/-/rails__activestorage-7.0.1.tgz#7e60320fdb376d34051733e3f8f0df0a8ff24077"
integrity sha512-H8mjwqFNweMfvgg8U+rdsonqjouETdqZxEOfzARiA4ag8jtLHFhjfAgFF6gWMnzVpXgQPrJw1boiknx9rV23Eg==
"@types/rails__ujs@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/@types/rails__ujs/-/rails__ujs-6.0.1.tgz#83c5aa1dad88ca869de05a9523eff58041ab307a"
@ -11294,10 +11299,10 @@ react-query@^3.34.19:
broadcast-channel "^3.4.1"
match-sorter "^6.0.2"
react-sortable-hoc@^1.11.0:
version "1.11.0"
resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-1.11.0.tgz#fe4022362bbafc4b836f5104b9676608a40a278f"
integrity sha512-v1CDCvdfoR3zLGNp6qsBa4J1BWMEVH25+UKxF/RvQRh+mrB+emqtVHMgZ+WreUiKJoEaiwYoScaueIKhMVBHUg==
react-sortable-hoc@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz#f6780d8aa4b922a21f3e754af542f032677078b7"
integrity sha512-JZUw7hBsAHXK7PTyErJyI7SopSBFRcFHDjWW5SWjcugY0i6iH7f+eJkY8cJmGMlZ1C9xz1J3Vjz0plFpavVeRg==
dependencies:
"@babel/runtime" "^7.2.0"
invariant "^2.2.4"