diff --git a/src/assets/scss/components/formBuilder.scss b/src/assets/scss/components/formBuilder.scss index 0eac29a..9f70641 100644 --- a/src/assets/scss/components/formBuilder.scss +++ b/src/assets/scss/components/formBuilder.scss @@ -191,16 +191,109 @@ } .formElementSettings__repeater { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr; gap: 0.5rem; } .formElementSettings__repeaterItem { + display: grid; + grid-template-columns: 4.5fr 2.4fr 1fr 1.4fr 0.7fr; + gap: 12px; + > div { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + + input, select, .p-dropdown { + width: 100%; + box-sizing: border-box; + } + } } -.formElementSettings__subRepeater { - padding: 10px 20px; - background-color: #f9f9f9; +.formElementSettings__subRepeaterWrapper { + display: grid; + grid-template-columns: 1fr; + gap: 7px; +} + +.formElementSettings__subRepeaterItem { + display: grid; + grid-template-columns: 9.3fr 0.7fr; + gap: 12px; + + > div { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + + input, select, .p-dropdown { + width: 100%; + box-sizing: border-box; + } + } +} + +.formElementSettings__repeaterItemIconBtn { + border: none; + background: transparent; + padding: 0; + font-size: 2rem; + color: var(--table-border-color); + + i { + font-size: 2rem; + } + + &:hover { + cursor: pointer; + color: var(--menuitem-active-background); + } + + &:not([data-active="false"]) { + color: var(--menuitem-active-background); + } +} + +.formElementSettings__lastRowHeader { + display: grid; + grid-template-columns: 8.3fr 1.7fr; + gap: 7px; +} + +.formElementSettings__lastRowHeaderTitle { + display: flex; + height: 40px; + padding: 10.5px 17.5px; + justify-content: center; + align-items: center; + border-radius: 4px; + background: #f8f9fa; + border: 1px solid #dee2e6; + font-size: 14px; + font-style: normal; + font-weight: 700; + color: white; +} + +.formElementSettings__lastRowItem { + display: grid; + grid-template-columns: 1.7fr 8.3fr; + gap: 7px; + + > div { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + + input, select, .p-dropdown { + width: 100%; + box-sizing: border-box; + } + } } \ No newline at end of file diff --git a/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js b/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js new file mode 100644 index 0000000..6351f92 --- /dev/null +++ b/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js @@ -0,0 +1,25 @@ +const DefaultCell = ({ getValue, row: { index }, column: { id }, table }) => { + const initialValue = getValue(); + const disabled = table.options.meta?.disabled; + + const onBlur = (e) => { + table.options.meta?.updateData(index, id, e.target.value); + }; + + const onFocus = (e) => { + e.target.select(); + } + + return ( + table.options.meta?.updateData(index, id, e.target.value)} + onBlur={onBlur} + onFocus={onFocus} + className="w-full px-2 py-1 border rounded" + /> + ); +}; + +export default DefaultCell; \ No newline at end of file diff --git a/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js b/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js new file mode 100644 index 0000000..3a35e77 --- /dev/null +++ b/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js @@ -0,0 +1,21 @@ +import { head, isEmpty, isNil, sum } from 'ramda'; + +const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) => { + const cellData = head(lastRows.filter(o => !isNil(o[columnId]))); + let cellValue = cellData[columnId]; + + if (columnMeta.enableFormula) { + const getAllRowsValues = getColumnDataFn(columnId) + .map(v => isEmpty(v) || isNil(v) ? 0 : v); + + if (cellValue === 'sum') { + cellValue = sum(getAllRowsValues); + } else { + cellValue = 0; + } + } + + return