tycho-components 0.25.2 → 0.25.5

package/dist/common/AppForm/AppForm.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AsyncSelectField, CheckboxField, DatePickerField, SelectField, SelectMultipleField, SwitchField, TextField, } from 'tycho-storybook';
+import FormColorField from './FormColorField';
 import './style.scss';
 const convertList = (values, labelAttr, valueAttr) => {
     if (!values)
@@ -58,6 +59,9 @@ export default function AppForm({ fields, form, prefix, onChangeFunctions = {},
             if (field.type === 'textarea') {
                 return (_jsx(TextField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), multiline: true, rows: field.rows, height: "100%" }, name));
             }
+            if (field.type === 'color') {
+                return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText }, name));
+            }
             const handleBlur = getOnBlurFn(field.attr);
             return (_jsx(TextField, { attr: name, label: field.size === 'small' ? undefined : field.name, placeholder: field.size === 'small' ? field.name : undefined, createdForm: form, mask: field.mask, blurMask: field.blurMask, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), height: field.size === 'small' ? '32px' : undefined, onBlur: handleBlur }, name));
         }) }));

package/dist/common/AppForm/FormColorField.d.ts

@@ -0,0 +1,11 @@
+import { UseFormReturn } from 'react-hook-form';
+import '../AppColorpicker/style.scss';
+type Props = {
+    attr: string;
+    label: string;
+    form: UseFormReturn<any, any, any>;
+    disabled?: boolean;
+    tooltipText?: string;
+};
+export default function FormColorField({ attr, label, form, disabled, tooltipText, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/common/AppForm/FormColorField.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon, Tooltip } from 'tycho-storybook';
+import '../AppColorpicker/style.scss';
+const defaultColor = '#FFFFFF';
+export default function FormColorField({ attr, label, form, disabled, tooltipText, }) {
+    const { t } = useTranslation('common');
+    const formValue = form.watch(attr);
+    const [openColor, setOpenColor] = useState(false);
+    const [color, setColor] = useState(defaultColor);
+    useEffect(() => {
+        setColor(formValue || defaultColor);
+    }, [formValue]);
+    const handleConfirm = () => {
+        form.setValue(attr, color, { shouldDirty: true });
+        setOpenColor(false);
+    };
+    return (_jsxs("div", { className: "form-color-field", children: [_jsxs("div", { className: "form-color-field-label", children: [_jsx("span", { children: label }), tooltipText && (_jsx(Tooltip, { title: tooltipText, children: _jsx("span", { children: _jsx(Icon, { name: "help", className: "info", size: "x-small" }) }) }))] }), _jsxs("div", { className: "color-picker-container", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => !disabled && setOpenColor(!openColor), onKeyDown: () => !disabled && setOpenColor(!openColor), role: "link", "aria-label": "open color picker", tabIndex: disabled ? -1 : 0 }), openColor && !disabled && (_jsxs(_Fragment, { children: [_jsx(HexColorPicker, { color: color, onChange: setColor }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { text: t('button.confirm'), onClick: handleConfirm, size: "x-small" }), _jsx(Button, { text: t('button.cancel'), onClick: () => setOpenColor(false), color: "danger", size: "x-small" })] })] }))] })] }));
+}

package/dist/common/AppForm/style.scss

@@ -40,3 +40,21 @@
     gap: 16px;
   }
 }
+
+.form-color-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+
+  .form-color-field-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-50);
+    @include label-medium-2;
+    color: var(--text-primary);
+
+    .info {
+      color: var(--icon-primary);
+    }
+  }
+}

package/dist/features/Participants/ParticipantService.d.ts

@@ -1,7 +1,6 @@
-import { AppEditableField } from '../../common/AppEditable/AppEditableField';
 import Participant, { ParticipantCreateRequest } from './types/Participant';
 declare function add(uid: string, request: ParticipantCreateRequest): Promise<import("axios").AxiosResponse<Participant, any, {}>>;
-declare function update(field: AppEditableField): Promise<import("axios").AxiosResponse<any, any, {}>>;
+declare function update(uid: string, code: string, participant: Participant): Promise<import("axios").AxiosResponse<any, any, {}>>;
 declare function remove(document: string, code: string, transfer?: string): Promise<import("axios").AxiosResponse<any, any, {}>>;
 declare const ParticipantService: {
     add: typeof add;

package/dist/features/Participants/ParticipantService.js

@@ -2,8 +2,9 @@ import api, { platformApi } from '../../configs/api';
 function add(uid, request) {
     return api.post(`${platformApi.catalog}/participant/${uid}`, request);
 }
-function update(field) {
-    return api.patch(`${platformApi.catalog}/participant/update`, field);
+function update(uid, code, participant) {
+    const request = { uid, code, participant };
+    return api.patch(`${platformApi.catalog}/participant/update`, request);
 }
 function remove(document, code, transfer) {
     const request = {

package/dist/features/Participants/Participants.js

@@ -1,34 +1,99 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MenuItem, Select } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'tycho-storybook';
-import AppEditable from '../../common/AppEditable';
+import AppForm from '../../common/AppForm/AppForm';
 import { useMessageUtils } from '../../configs/useMessageUtils';
 import ParticipantCreate from './ParticipantCreate';
 import ParticipantRemove from './ParticipantRemove';
 import './style.scss';
-import { CHAT_FIELDS, PARTICIPANT_FIELDS, } from './types/Participant';
 import ParticipantService from './ParticipantService';
+const PARTICIPANT_FIELD_DEFS = [
+    { attr: 'order', type: 'text', required: true },
+    { attr: 'code', type: 'text', required: true },
+    { attr: 'name', type: 'text', required: false },
+    { attr: 'separator', type: 'text', required: false },
+    { attr: 'color', type: 'color', required: false, tooltip: true },
+];
+const CHAT_FIELD_DEFS = [
+    { attr: 'language', type: 'text', required: false },
+    { attr: 'age', type: 'text', required: false },
+    { attr: 'sex', type: 'text', required: false },
+    { attr: 'group', type: 'text', required: false },
+    { attr: 'ses', type: 'text', required: false },
+    { attr: 'role', type: 'text', required: false },
+    { attr: 'education', type: 'text', required: false },
+    { attr: 'custom', type: 'text', required: false },
+];
+const toCoreFormValues = (participant) => ({
+    order: participant.order ?? '',
+    code: participant.code ?? '',
+    name: participant.name ?? '',
+    separator: participant.separator ?? '',
+    color: participant.color ?? '',
+});
+const toChatFormValues = (participant) => ({
+    language: participant.language ?? '',
+    age: participant.age ?? '',
+    sex: participant.sex ?? '',
+    group: participant.group ?? '',
+    ses: participant.ses ?? '',
+    role: participant.role ?? '',
+    education: participant.education ?? '',
+    custom: participant.custom ?? '',
+});
 export default function Participants({ document, participants, onChange, useChat, }) {
     const { t } = useTranslation('participants');
     const { dispatchMessage } = useMessageUtils();
     const [participant, setParticipant] = useState();
     const [openRemove, setOpenRemove] = useState(false);
     const [openCreate, setOpenCreate] = useState(false);
-    const handleSave = (field) => {
-        if (!field.ref)
+    const participantForm = useForm({
+        defaultValues: toCoreFormValues({ order: 1, code: '', name: '' }),
+    });
+    const chatForm = useForm({
+        defaultValues: toChatFormValues({ order: 1, code: '', name: '' }),
+    });
+    const participantFields = useMemo(() => PARTICIPANT_FIELD_DEFS.map((field) => ({
+        ...field,
+        name: t(`participant.field.${field.attr}`),
+        ...(field.tooltip
+            ? { tooltipText: t(`participant.field.${field.attr}.tooltip`) }
+            : {}),
+    })), [t]);
+    const chatFields = useMemo(() => CHAT_FIELD_DEFS.map((field) => ({
+        ...field,
+        name: t(`participant.field.${field.attr}`),
+    })), [t]);
+    const buildParticipantPayload = () => {
+        const coreValues = participantForm.getValues();
+        const chatValues = chatForm.getValues();
+        const order = typeof coreValues.order === 'string'
+            ? Number(coreValues.order) || participant?.order || 1
+            : coreValues.order;
+        return {
+            ...participant,
+            ...chatValues,
+            ...coreValues,
+            order,
+        };
+    };
+    const handleSave = () => {
+        if (!participant)
             return;
-        ParticipantService.update(field)
+        const lookupCode = participant.code;
+        const payload = buildParticipantPayload();
+        ParticipantService.update(document, lookupCode, payload)
             .then(() => {
             dispatchMessage({ key: 'update.success', t });
-            const { name, value } = field;
-            const thisParticipants = participants;
-            const idx = participants.findIndex((p) => p.code === field.ref);
-            // updates the participant
-            const thisParticipant = { ...thisParticipants[idx], [name]: value };
-            thisParticipants[idx] = { ...thisParticipant };
-            setParticipant(thisParticipant);
+            const thisParticipants = [...participants];
+            const idx = thisParticipants.findIndex((p) => p.code === lookupCode);
+            if (idx >= 0) {
+                thisParticipants[idx] = payload;
+            }
+            setParticipant(payload);
             onChange(thisParticipants);
         })
             .catch((err) => {
@@ -39,9 +104,15 @@ export default function Participants({ document, participants, onChange, useChat
         if (participants.length > 0)
             setParticipant(participants[0]);
     }, []);
+    useEffect(() => {
+        if (!participant)
+            return;
+        participantForm.reset(toCoreFormValues(participant));
+        chatForm.reset(toChatFormValues(participant));
+    }, [participant, participantForm, chatForm]);
     return (_jsxs("div", { className: "participants-container", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('label.title') }), _jsx("div", { className: "actions", children: _jsx(Button, { icon: "add", text: t('button.label.add'), onClick: () => setOpenCreate(true), size: "small", mode: "outlined" }) })] }), _jsx("div", { className: "body", children: participant && (_jsxs(_Fragment, { children: [_jsx(Select, { onChange: (e) => setParticipant(participants[Number(e.target.value)]), value: participant
                                 ? participants.findIndex((p) => p.code === participant.code)
-                                : 0, fullWidth: true, className: "select-participant", children: participants.map((el, idx) => (_jsx(MenuItem, { value: idx, children: `${el.code} - ${el.name}` }, idx))) }), _jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: PARTICIPANT_FIELDS, className: "fields", reference: "code" }), useChat && (_jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: CHAT_FIELDS, className: "fields", reference: "code" })), _jsx("div", { className: "footer", children: _jsx(Button, { icon: "delete", text: t('common:button.remove'), size: "small", className: "danger", onClick: () => {
+                                : 0, fullWidth: true, className: "select-participant", children: participants.map((el, idx) => (_jsx(MenuItem, { value: idx, children: `${el.code} - ${el.name}` }, idx))) }), _jsxs("div", { className: "fields", children: [_jsx(AppForm, { fields: participantFields, form: participantForm }), _jsx(Button, { text: t('common:button.confirm'), onClick: handleSave, size: "small", className: "save-button" })] }), useChat && (_jsxs("div", { className: "fields", children: [_jsx(AppForm, { fields: chatFields, form: chatForm }), _jsx(Button, { text: t('common:button.confirm'), onClick: handleSave, size: "small", className: "save-button" })] })), _jsx("div", { className: "footer", children: _jsx(Button, { icon: "delete", text: t('common:button.remove'), size: "small", className: "danger", onClick: () => {
                                     setParticipant(participant);
                                     setOpenRemove(true);
                                 } }) })] })) }), participant && openRemove && (_jsx(ParticipantRemove, { document: document, onChange: (list) => {

package/dist/features/Participants/style.scss

@@ -14,10 +14,18 @@
   .body {
     height: 90vh;
     overflow-y: auto;
-    padding: 16px;
+    padding: var(--spacing-200);
 
     > .select-participant {
-      margin-bottom: 16px;
+      margin-bottom: var(--spacing-200);
+    }
+
+    .fields {
+      margin-bottom: var(--spacing-200);
+
+      .save-button {
+        margin-top: var(--spacing-200);
+      }
     }
   }
 

package/dist/features/Participants/types/Participant.d.ts

@@ -1,13 +1,13 @@
-import { FormField } from '../../../common/AppEditable/FormField';
 type Participant = {
     order: number;
     code: string;
     name: string;
     color?: string;
+    separator?: string;
     role?: string;
     ses?: string;
     education?: string;
-    gender?: string;
+    sex?: string;
     custom?: string;
     corpus?: string;
     language?: string;
@@ -18,11 +18,14 @@ export type ParticipantCreateRequest = {
     code: string;
     name: string;
 };
+export type ParticipantUpdateRequest = {
+    uid: string;
+    code: string;
+    participant: Participant;
+};
 export declare const EMPTY_PARTICIPANT: {
     order: number;
     code: string;
     name: string;
 };
-export declare const PARTICIPANT_FIELDS: FormField[];
-export declare const CHAT_FIELDS: FormField[];
 export default Participant;

package/dist/features/Participants/types/Participant.js

@@ -3,25 +3,3 @@ export const EMPTY_PARTICIPANT = {
     code: '',
     name: '',
 };
-export const PARTICIPANT_FIELDS = [
-    { name: 'order', type: 'text', required: true },
-    { name: 'code', type: 'text', required: true },
-    { name: 'name', type: 'text', required: false },
-    { name: 'separator', type: 'text', required: false },
-    {
-        name: 'color',
-        type: 'color',
-        required: false,
-        tooltip: true,
-    },
-];
-export const CHAT_FIELDS = [
-    { name: 'language', type: 'text', required: false },
-    { name: 'age', type: 'text', required: false },
-    { name: 'sex', type: 'text', required: false },
-    { name: 'group', type: 'text', required: false },
-    { name: 'ses', type: 'text', required: false },
-    { name: 'role', type: 'text', required: false },
-    { name: 'education', type: 'text', required: false },
-    { name: 'custom', type: 'text', required: false },
-];

package/dist/features/index.d.ts

@@ -5,7 +5,7 @@ export { default as CommentService } from './Comments/CommentService';
 export { default as Parameters } from './Parameters';
 export { default as Participants } from './Participants';
 export type { default as Participant, ParticipantCreateRequest, } from './Participants/types/Participant';
-export { EMPTY_PARTICIPANT, PARTICIPANT_FIELDS, CHAT_FIELDS, } from './Participants/types/Participant';
+export { EMPTY_PARTICIPANT, } from './Participants/types/Participant';
 export { default as SentenceView } from './SentenceView';
 export { default as TreeView } from './TreeView';
 export { default as CytoscapeTreeConverter } from './TreeView/cytoscape/CytoscapeTreeConverter';

package/dist/features/index.js

@@ -3,7 +3,7 @@ export { default as HeaderNotifications } from './Comments/HeaderNotifications';
 export { default as CommentService } from './Comments/CommentService';
 export { default as Parameters } from './Parameters';
 export { default as Participants } from './Participants';
-export { EMPTY_PARTICIPANT, PARTICIPANT_FIELDS, CHAT_FIELDS, } from './Participants/types/Participant';
+export { EMPTY_PARTICIPANT, } from './Participants/types/Participant';
 export { default as SentenceView } from './SentenceView';
 export { default as TreeView } from './TreeView';
 export { default as CytoscapeTreeConverter } from './TreeView/cytoscape/CytoscapeTreeConverter';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.25.2",
+  "version": "0.25.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -82,7 +82,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.9.3",
+    "tycho-storybook": "0.9.4",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },