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:
commit
98b574b031
30 changed files with 640 additions and 411 deletions
|
@ -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'
|
|
@ -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 {
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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 d’importance 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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
|
@ -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;
|
|
@ -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
|
||||
};
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
54
app/javascript/components/TypesDeChampEditor/index.tsx
Normal file
54
app/javascript/components/TypesDeChampEditor/index.tsx
Normal 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} />;
|
||||
}
|
|
@ -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'
|
||||
];
|
71
app/javascript/components/TypesDeChampEditor/operations.ts
Normal file
71
app/javascript/components/TypesDeChampEditor/operations.ts
Normal 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;
|
|
@ -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;
|
||||
}
|
27
app/javascript/components/TypesDeChampEditor/types.ts
Normal file
27
app/javascript/components/TypesDeChampEditor/types.ts
Normal 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>;
|
||||
};
|
|
@ -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';
|
||||
}
|
||||
}
|
16
app/javascript/components/TypesDeChampEditor/utils.tsx
Normal file
16
app/javascript/components/TypesDeChampEditor/utils.tsx
Normal 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';
|
||||
}
|
||||
}
|
|
@ -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')) {
|
|
@ -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`
|
||||
);
|
||||
}
|
|
@ -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)
|
||||
);
|
|
@ -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",
|
||||
|
|
13
yarn.lock
13
yarn.lock
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue