tycho-components 0.0.9 → 0.0.10-SNAPSHOT-1

package/dist/AppEditable/AppEditable.d.ts

@@ -1,9 +1,13 @@
 import AppEditableField from './AppEditableField';
 import FormField from './FormField';
 import './style.scss';
+type Item = {
+    uid: string;
+    [key: string]: unknown;
+};
 type Props = {
     translation: string;
-    item: Record<string, unknown>;
+    item: Item;
     fields: FormField[];
     save?: (field: AppEditableField) => void;
     group?: string;

package/dist/AppEditable/AppEditable.js

@@ -2,79 +2,94 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { format } from 'date-fns-tz';
+import { useCallback } from 'react';
 import EasyEdit from 'react-easy-edit';
 import { useTranslation } from 'react-i18next';
 import Switch from 'react-switch';
 import AppColorpicker from '../AppColorpicker';
 import './style.scss';
+// Utility to safely get nested values via a dotted path
+const getNestedValue = (obj, path) => path.split('.').reduce((o, key) => (o && key in o ? o[key] : undefined), obj);
+// Pure function — no need to inline this in the component
+const formatDate = (date, fmt) => {
+    if (!date)
+        return '';
+    return format(date, fmt);
+};
 export default function AppEditable({ translation, fields, item, save, group, className, reference, }) {
     const { t } = useTranslation([translation, 'common']);
-    const formatDate = (date, fmt) => {
-        if (!date)
-            return '';
-        return format(date, fmt);
-    };
-    const handleSave = (value, field) => {
-        save &&
-            save({
-                uid: item.uid,
-                name: field.name,
-                type: field.type,
-                value,
-                ref: reference ? item[reference] : undefined,
-            });
+    const handleSave = useCallback((value, field) => {
+        if (!save)
+            return;
+        save({
+            uid: item.uid,
+            name: field.name,
+            type: field.type,
+            value,
+            ref: reference ? item[reference] : undefined,
+        });
+    }, [save, item, reference]);
+    const getValue = (field) => {
+        const value = getNestedValue(item, field.name);
+        return value !== undefined && value !== ''
+            ? value
+            : (field.default ?? null);
     };
     const getDateValue = (field) => {
         const v = getValue(field);
         return !v ? null : formatDate(new Date(v), 'yyyy-MM-dd');
     };
-    const getValue = (field) => {
-        if (field.name.indexOf('.') === -1) {
-            if (!isEmptyValue(item, field.name))
-                return item[field.name];
-            return field.default !== undefined ? field.default : null;
-        }
-        const splits = field.name.split('.');
-        let val = item;
-        for (const split of splits) {
-            if (typeof val === 'object' && val !== null && split in val) {
-                val = val[split];
-            }
-            else {
-                val = undefined;
-                break;
-            }
-        }
-        if (val !== undefined && val !== '')
-            return val;
-        return field.default !== undefined ? field.default : null;
-    };
-    const isEmptyValue = (thisItem, thisName) => thisItem[thisName] === undefined || thisItem[thisName] === '';
     const getValueToDisplay = (field) => {
         const value = getValue(field);
-        if (field.options && field.options.length > 0) {
+        if (field.options?.length) {
             const option = field.options.find((op) => op.value === value);
             if (option)
                 return option.label;
         }
-        // Fallback — if value is a string, number, or boolean, display it.
         if (typeof value === 'string' ||
             typeof value === 'number' ||
-            typeof value === 'boolean') {
+            typeof value === 'boolean')
             return value;
-        }
         return null;
     };
-    const getLabelValueForList = (options) => {
-        return options.map((op) => ({
-            label: t(op.label),
-            value: op.value,
-        }));
+    const getLabelValueForList = (options) => options.map((op) => ({ label: t(op.label), value: op.value }));
+    const sharedEditProps = {
+        saveButtonLabel: t('common:button.confirm'),
+        cancelButtonLabel: t('common:button.cancel'),
+        placeholder: t('common:placeholder.input'),
+    };
+    const renderField = (field) => {
+        const value = getValue(field);
+        switch (field.type) {
+            case 'display':
+                return _jsx("span", { children: getValueToDisplay(field) ?? '--' });
+            case 'code':
+                return (_jsx("div", { className: "textarea-code", children: _jsx(EasyEdit, { type: "textarea", onSave: (v) => handleSave(JSON.parse(v), field), value: JSON.stringify(value || {}, null, 2), ...sharedEditProps }) }));
+            case 'text':
+            case 'number':
+            case 'locale':
+            case 'year':
+                return (_jsx(EasyEdit, { type: "text", onSave: (v) => handleSave(v, field), value: value, ...sharedEditProps }));
+            case 'textarea':
+                return (_jsx(EasyEdit, { type: "textarea", onSave: (v) => handleSave(v, field), value: value, ...sharedEditProps }));
+            case 'select':
+            case 'list':
+                return (_jsx(EasyEdit, { type: "select", options: getLabelValueForList(field.options || []), onSave: (v) => handleSave(v, field), value: value, ...sharedEditProps }));
+            case 'range':
+                return (_jsx(EasyEdit, { type: "range", onSave: (v) => handleSave(v, field), attributes: { name: 'awesome-range', min: 0, max: 100, step: 1 }, value: value, ...sharedEditProps }));
+            case 'switch':
+                return (_jsx(Switch, { onChange: (checked) => handleSave(checked, field), checked: value || false }));
+            case 'date':
+                return (_jsx(EasyEdit, { type: "date", onSave: (v) => handleSave(new Date(v), field), value: getDateValue(field), ...sharedEditProps }));
+            case 'password':
+                return (_jsx(EasyEdit, { type: "password", onSave: (v) => handleSave(v, field), value: value, ...sharedEditProps }));
+            case 'color':
+                return (_jsx(AppColorpicker, { item: item, field: field, handleSave: handleSave }));
+            default:
+                return null;
+        }
     };
     return (_jsx(_Fragment, { children: fields.map((field, idx) => (_jsxs("div", { className: `editable-container ${className || ''}`, children: [_jsxs("div", { className: "title", children: [_jsxs("h6", { children: [field.title
                                     ? field.title
-                                    : t(`${translation}:${group || ''}.field.${field.name}`), field.required && _jsx("span", { children: "*" })] }), field.tooltip && (_jsx(FontAwesomeIcon, { icon: faQuestionCircle, className: "info", title: field.tooltip }))] }), field.type === 'display' ? (_jsx("span", { children: getValueToDisplay(field) ?? '--' })) : null, field.type === 'code' ? (_jsx("div", { className: "textarea-code", children: _jsx(EasyEdit, { type: "textarea", onSave: (value) => handleSave(JSON.parse(value), field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: JSON.stringify(getValue(field) || {}), placeholder: t('common:placeholder.input') }) })) : null, (field.type === 'text' ||
-                    field.type === 'number' ||
-                    field.type === 'locale' ||
-                    field.type === 'year') && (_jsx(EasyEdit, { type: "text", onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: getValue(field), placeholder: t('common:placeholder.input') })), field.type === 'textarea' ? (_jsx(EasyEdit, { type: "textarea", onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: getValue(field), placeholder: t('common:placeholder.input') })) : null, field.type === 'select' || field.type === 'list' ? (_jsx(EasyEdit, { type: "select", options: getLabelValueForList(field.options || []), onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), placeholder: t('common:placeholder.input'), value: getValue(field) })) : null, field.type === 'range' ? (_jsx(EasyEdit, { type: "range", onSave: (value) => handleSave(value, field), attributes: { name: 'awesome-range', min: 0, max: 100, step: 1 }, placeholder: t('common:placeholder.input'), value: getValue(field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel') })) : null, field.type === 'switch' ? (_jsx(Switch, { onChange: (checked) => handleSave(checked, field), checked: getValue(field) || false })) : null, field.type === 'date' && (_jsx(EasyEdit, { type: "date", onSave: (value) => handleSave(new Date(value), field), placeholder: t('common:placeholder.input'), value: getDateValue(field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel') })), field.type === 'password' && (_jsx(EasyEdit, { type: "password", onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: getValue(field), placeholder: t('common:placeholder.input') })), field.type === 'color' ? (_jsx(AppColorpicker, { item: item, field: field, handleSave: handleSave })) : null] }, idx.valueOf()))) }));
+                                    : t(`${translation}:${group || ''}.field.${field.name}`), field.required && _jsx("span", { children: "*" })] }), field.tooltip && (_jsx(FontAwesomeIcon, { icon: faQuestionCircle, className: "info", title: field.tooltip }))] }), renderField(field)] }, idx))) }));
 }

package/dist/AppModal/AppModalRemove.d.ts

@@ -6,4 +6,15 @@ type Props = {
     onConfirm: () => void;
 };
 export default function AppModalRemove({ title, subtitle, onClose, onConfirm, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const modalRemoveStyle: {
+    position: string;
+    top: string;
+    left: string;
+    transform: string;
+    width: string;
+    maxWidth: string;
+    borderRadius: string;
+    boxShadow: number;
+    bgcolor: string;
+};
 export {};

package/dist/AppModal/AppModalRemove.js

@@ -5,9 +5,9 @@ import { Button, Icon } from 'tycho-storybook';
 import './style.scss';
 export default function AppModalRemove({ title, subtitle, onClose, onConfirm, }) {
     const { t } = useTranslation('common');
-    return (_jsx(Modal, { open: true, children: _jsxs(Box, { className: "modal-container modal-remove", sx: style, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: onClose, text: t('button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: t('button.confirm') })] })] }) }));
+    return (_jsx(Modal, { open: true, children: _jsxs(Box, { className: "modal-container modal-remove", sx: modalRemoveStyle, children: [_jsx("div", { className: "body", children: _jsxs("div", { className: "line", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }) }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: onClose, text: t('button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: t('button.confirm') })] })] }) }));
 }
-const style = {
+export const modalRemoveStyle = {
     position: 'absolute',
     top: '40%',
     left: '50%',

package/dist/AppModal/style.scss

@@ -40,24 +40,29 @@
   &.modal-remove {
     .body {
       display: flex;
-      gap: 16px;
+      flex-direction: column;
 
-      > .ds-icon {
-        color: var(--icon-warning);
-      }
-
-      .texts {
+      > .line {
         display: flex;
-        flex-direction: column;
+        gap: 16px;
 
-        > .title {
-          @include subtitle-medium-2;
-          color: var(--text-primary);
+        > .ds-icon {
+          color: var(--icon-warning);
         }
 
-        > .subtitle {
-          @include body-medium-1;
-          color: var(--text-secondary);
+        .texts {
+          display: flex;
+          flex-direction: column;
+
+          > .title {
+            @include subtitle-medium-2;
+            color: var(--text-primary);
+          }
+
+          > .subtitle {
+            @include body-medium-1;
+            color: var(--text-secondary);
+          }
         }
       }
     }

package/dist/Participants/ParticipantRemove/ParticipantRemove.js

@@ -1,20 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Modal } from '@mui/material';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import AppModalRemove from '../../AppModal/AppModalRemove';
+import { Button, Icon, SelectField } from 'tycho-storybook';
+import { modalRemoveStyle } from '../../AppModal/AppModalRemove';
 import CommonContext from '../../configs/CommonContext';
 import { useMessageUtils } from '../../configs/useMessageUtils';
 import ParticipantService from '../types/ParticipantService';
+import { useForm } from 'react-hook-form';
 import './style.scss';
 export default function ParticipantRemove({ participant, participants, document, onClose, onChange, }) {
     const { t } = useTranslation('participants');
     const { state } = useContext(CommonContext);
-    const { dispatchLoading, dispatchError } = useMessageUtils();
+    const { dispatchLoading } = useMessageUtils();
+    const createdForm = useForm({
+        mode: 'onChange',
+    });
     const handleRemove = () => {
         if (state.toastLoading || !participant)
             return;
         dispatchLoading(true);
-        ParticipantService.remove(document, participant.code)
+        ParticipantService.remove(document, participant.code, createdForm.getValues().code)
             .then(() => {
             const list = participants?.filter((p) => p.code !== participant.code) || [];
             onChange(list);
@@ -23,5 +29,11 @@ export default function ParticipantRemove({ participant, participants, document,
             dispatchLoading(false);
         });
     };
-    return (_jsx(AppModalRemove, { title: t('modal.remove.title'), subtitle: t('modal.remove.description'), onClose: onClose, onConfirm: handleRemove }));
+    let subtitle = t('modal.remove.description');
+    return (_jsx(Modal, { open: true, children: _jsxs(Box, { className: "modal-container modal-remove", sx: modalRemoveStyle, children: [_jsxs("div", { className: "body", children: [_jsxs("div", { className: "line", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: t('modal.remove.title') }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), participants.length !== 1 && (_jsxs("div", { className: "select-participant", children: [_jsxs("b", { children: [t('modal.remove.participant'), " ", participant.name, " (", participant.code, ")"] }), _jsx(SelectField, { label: t('modal.select.transfer'), attr: "code", createdForm: createdForm, options: participants
+                                        .filter((p) => p.code !== participant.code)
+                                        .map((p) => ({
+                                        value: p.code,
+                                        label: `${p.code} - ${p.name}`,
+                                    })), showEndAdornment: false })] }))] }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: onClose, text: t('common:button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: handleRemove, text: t('common:button.confirm') })] })] }) }));
 }

package/dist/Participants/ParticipantRemove/style.scss

@@ -1,32 +1,15 @@
-.participants-container {
-  .header {
-    display: flex;
-    background-color: var(--color-secondary);
-    padding: 8px 16px;
-
-    .actions {
-      margin-left: auto;
-      margin-top: auto;
-      margin-bottom: auto;
-
-      .action {
-        border: var(--border-default);
-        padding: 0px 16px;
+.modal-container {
+  &.modal-remove {
+    .body {
+      .select-participant {
+        border-top: 1px solid var(--border-subtle-1);
+        padding-top: 16px;
+        margin-top: 16px;
+
+        > .ds-select-text {
+          margin-top: 16px;
+        }
       }
     }
   }
-
-  .body {
-    height: 90vh;
-    overflow-y: auto;
-    padding: var(--spacing-small);
-  }
-
-  .footer {
-    margin-top: 16px;
-    padding-top: 16px;
-    display: flex;
-    justify-content: right;
-    border-top: var(--border-default);
-  }
 }

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

@@ -2,7 +2,7 @@ import AppEditableField from '../../AppEditable/AppEditableField';
 import Participant, { ParticipantCreateRequest } from './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 remove(document: string, code: string): 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;
     update: typeof update;

package/dist/Participants/types/ParticipantService.js

@@ -5,8 +5,12 @@ function add(uid, request) {
 function update(field) {
     return api.patch(`${import.meta.env.VITE_APP_CATALOG_API}/participant/update`, field);
 }
-function remove(document, code) {
-    return api.delete(`${import.meta.env.VITE_APP_CATALOG_API}/participant/${document}/${code}`);
+function remove(document, code, transfer) {
+    const request = {
+        code,
+        transfer,
+    };
+    return api.delete(`${import.meta.env.VITE_APP_CATALOG_API}/participant/${document}`, { data: request });
 }
 const ParticipantService = { add, update, remove };
 export default ParticipantService;

package/dist/configs/Localization.d.ts

@@ -36,6 +36,7 @@ export declare const commonResources: {
             'modal.add.title': string;
             'modal.input.code': string;
             'modal.input.name': string;
+            'modal.select.transfer': string;
             'participant.code.exists': string;
         };
     };

package/dist/configs/localization/ParticipantsTexts.d.ts

@@ -22,6 +22,7 @@ export declare const ParticipantsTexts: {
         'modal.add.title': string;
         'modal.input.code': string;
         'modal.input.name': string;
+        'modal.select.transfer': string;
         'participant.code.exists': string;
     };
     'pt-BR': {

package/dist/configs/localization/ParticipantsTexts.js

@@ -22,6 +22,7 @@ export const ParticipantsTexts = {
         'modal.add.title': 'Add new participant',
         'modal.input.code': 'ID',
         'modal.input.name': 'Name',
+        'modal.select.transfer': 'Participant',
         'participant.code.exists': 'The participant code provided is already in use.',
     },
     'pt-BR': {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.10-SNAPSHOT-1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {