From ad54c9d0d3f895a2be0e3f17a8abed2398492955 Mon Sep 17 00:00:00 2001 From: Rizky Date: Tue, 25 Jun 2024 03:52:53 -0700 Subject: [PATCH] fix --- comps/custom/Popover.css | 3 + comps/custom/Popover.tsx | 1 + comps/form/field/type/TypeDropdown.tsx | 12 +- comps/form/gen/fields.ts | 4 +- comps/form/gen/gen-field.ts | 18 +- comps/form/gen/gen-rel-many.ts | 10 +- comps/form/gen/get-value.ts | 6 +- comps/list/TableList.css | 249 +++++++++++-------------- comps/md/gen/md-form.ts | 5 +- gen/prop/gen_prop_table.ts | 1 - 10 files changed, 143 insertions(+), 166 deletions(-) create mode 100755 comps/custom/Popover.css diff --git a/comps/custom/Popover.css b/comps/custom/Popover.css new file mode 100755 index 0000000..d95fc1a --- /dev/null +++ b/comps/custom/Popover.css @@ -0,0 +1,3 @@ +[data-floating-ui-portal] > div { + z-index: 100; +} diff --git a/comps/custom/Popover.tsx b/comps/custom/Popover.tsx index dfc6b59..d972526 100755 --- a/comps/custom/Popover.tsx +++ b/comps/custom/Popover.tsx @@ -17,6 +17,7 @@ import { useRole, } from "@floating-ui/react"; import * as React from "react"; +import "./Popover.css"; interface PopoverOptions { initialOpen?: boolean; diff --git a/comps/form/field/type/TypeDropdown.tsx b/comps/form/field/type/TypeDropdown.tsx index 3a658c6..d46ec16 100755 --- a/comps/form/field/type/TypeDropdown.tsx +++ b/comps/form/field/type/TypeDropdown.tsx @@ -26,16 +26,14 @@ export const TypeDropdown: FC<{ useEffect(() => { if (typeof arg.on_load === "function") { const options = arg.on_load({}); - // console.log(field.name, {options}) if (options instanceof Promise) { options.then((res) => { - // console.log(field.name, {res}) if (Array.isArray(res)) { const list: any = res.map((e: any) => { return { label: arg.opt_get_label(e), value: e.value, - data: e.data + data: e.data, }; }); local.options = list; @@ -70,7 +68,7 @@ export const TypeDropdown: FC<{ }); } else { local.loaded = true; - local.options = Array.isArray(options) ? options : [] as any; + local.options = Array.isArray(options) ? options : ([] as any); local.render(); } } @@ -81,20 +79,24 @@ export const TypeDropdown: FC<{ if (value === null) { fm.data[field.name] = undefined; } + return ( <> { + console.log(search, item); if (item) { - arg.opt_set_value({ + const result = arg.opt_set_value({ fm, name: field.name, type: field.type, options: local.options, selected: [item.value], }); + console.log(item, result); } + return item?.value || search; }} allowNew={false} diff --git a/comps/form/gen/fields.ts b/comps/form/gen/fields.ts index 8d374fb..7c5ef74 100755 --- a/comps/form/gen/fields.ts +++ b/comps/form/gen/fields.ts @@ -3,7 +3,7 @@ import { createItem, parseGenField } from "lib/gen/utils"; import capitalize from "lodash.capitalize"; import { gen_label } from "./gen-label"; import { generateRelation } from "./gen-rel"; -import { gen_rel_many } from "./gen-rel-many"; +import { genRelMany } from "./gen-rel-many"; import { get_value } from "./get-value"; import { on_load_rel } from "./on_load_rel"; import { set_value } from "./set-value"; @@ -161,7 +161,7 @@ export const newField = async ( }, }); } else { - const result = gen_rel_many({ + const result = genRelMany({ table_parent: opt.parent_table, arg, rel: fields, diff --git a/comps/form/gen/gen-field.ts b/comps/form/gen/gen-field.ts index f0e43b3..0301ee0 100755 --- a/comps/form/gen/gen-field.ts +++ b/comps/form/gen/gen-field.ts @@ -1,11 +1,10 @@ +import { createId } from "@paralleldrive/cuid2"; import { generateSelect } from "lib/comps/md/gen/md-select"; import { parseGenField } from "lib/gen/utils"; -import { on_load_rel } from "./on_load_rel"; -import { gen_rel_many, getColumn } from "./gen-rel-many"; import get from "lodash.get"; -import { getValueProp } from "./gen-rel"; +import { getColumn } from "./gen-rel-many"; import { genTableEdit } from "./gen-table-edit"; -import { createId } from "@paralleldrive/cuid2"; +import { on_load_rel } from "./on_load_rel"; export const generateField = async ( data: any, @@ -26,7 +25,6 @@ export const generateField = async ( ) as any; const pk = fields.find((e: any) => get(e, "is_pk")) as any; const pk_master = master.relation.fields.find((e: any) => get(e, "is_pk")); - console.log(getColumn(res)); const load = on_load_rel({ pk: generateSelect(parseGenField(master.value.checked)).pk, table: master?.name, @@ -54,9 +52,9 @@ export const generateField = async ( try { const data = fm.data[name]; if (typeof data === "object") { - if (typeof data?.connect?.id === "string") { + if (typeof data?.connect?.id !== "undefined") { result = data.connect.id; - }else if (typeof data?.id === "string") { + }else if (typeof data?.id !== "undefined") { result = data.id; } } @@ -209,9 +207,9 @@ export const generateField = async ( try { const data = fm.data[name]; if (typeof data === "object") { - if (typeof data?.connect?.id === "string") { + if (typeof data?.connect?.id !== "undefined") { result = data.connect.id; - }else if (typeof data?.id === "string") { + }else if (typeof data?.id !== "undefined") { result = data.id; } } @@ -253,7 +251,7 @@ export const generateField = async ( }, false )) as any; - + item.edit.setProp("child", { mode: "jsx", value: { diff --git a/comps/form/gen/gen-rel-many.ts b/comps/form/gen/gen-rel-many.ts index 4b9b309..d73ad5d 100755 --- a/comps/form/gen/gen-rel-many.ts +++ b/comps/form/gen/gen-rel-many.ts @@ -2,7 +2,7 @@ import { generateSelect } from "lib/comps/md/gen/md-select"; import get from "lodash.get"; import { on_load_rel } from "./on_load_rel"; -export const gen_rel_many = (prop: { +export const genRelMany = (prop: { table_parent: string; arg: any; rel: any; @@ -41,9 +41,9 @@ export const gen_rel_many = (prop: { try { const data = fm.data[name]; if (typeof data === "object") { - if (typeof data?.connect?.id === "string") { + if (typeof data?.connect?.id !== "undefined") { result = data.connect.id; - }else if (typeof data?.id === "string") { + }else if (typeof data?.id !== "undefined") { result = data.id; } } @@ -174,9 +174,9 @@ export const gen_rel_many = (prop: { try { const data = fm.data[name]; if (typeof data === "object") { - if (typeof data?.connect?.id === "string") { + if (typeof data?.connect?.id !== "undefined") { result = data.connect.id; - }else if (typeof data?.id === "string") { + }else if (typeof data?.id !== "undefined") { result = data.id; } } diff --git a/comps/form/gen/get-value.ts b/comps/form/gen/get-value.ts index b43f982..6eb3702 100755 --- a/comps/form/gen/get-value.ts +++ b/comps/form/gen/get-value.ts @@ -30,10 +30,10 @@ export const get_value = ({ try{ const data = fm.data["${table}"]; if(typeof data === "object"){ - if(typeof data?.connect?.${pk} === "string"){ + if(typeof data?.connect?.${pk} !== "undefined") { result = data.connect.${pk}; - } else if (typeof data?.id === "string") { - result = data.id; + } else if (typeof data?.${pk} !== "undefined") { + result = data.${pk}; } else if (data?.disconnect === true) { result = undefined; } diff --git a/comps/list/TableList.css b/comps/list/TableList.css index f5289b7..c16845a 100755 --- a/comps/list/TableList.css +++ b/comps/list/TableList.css @@ -1,21 +1,21 @@ @layer rdg { @layer Defaults, - FocusSink, - CheckboxInput, - CheckboxIcon, - CheckboxLabel, - Cell, - HeaderCell, - SummaryCell, - EditCell, - Row, - HeaderRow, - SummaryRow, - GroupedRow, - Root; + FocusSink, + CheckboxInput, + CheckboxIcon, + CheckboxLabel, + Cell, + HeaderCell, + SummaryCell, + EditCell, + Row, + HeaderRow, + SummaryRow, + GroupedRow, + Root; } -.mlln6zg7-0-0-beta-44 { +.mlln6zg7-0-0-beta-42 { @layer rdg.MeasuringCell { contain: strict; grid-row: 1; @@ -23,14 +23,15 @@ } } -.cj343x07-0-0-beta-44 { + +.cj343x07-0-0-beta-42 { @layer rdg.Cell { /* max-content does not work with size containment - * dynamically switching between different containment styles incurs a heavy relayout penalty - * Chromium bug: at odd zoom levels or subpixel positioning, - * layout/paint/style containment can make cell borders disappear - * https://bugs.chromium.org/p/chromium/issues/detail?id=1326946 - */ + * dynamically switching between different containment styles incurs a heavy relayout penalty + * Chromium bug: at odd zoom levels or subpixel positioning, + * layout/paint/style containment can make cell borders disappear + * https://bugs.chromium.org/p/chromium/issues/detail?id=1326946 + */ position: relative; /* needed for absolute positioning to work */ padding-block: 0; padding-inline: 8px; @@ -44,27 +45,29 @@ text-overflow: ellipsis; outline: none; - &[aria-selected="true"] { + &[aria-selected='true'] { outline: 2px solid var(--rdg-selection-color); outline-offset: -2px; } } } -.csofj7r7-0-0-beta-44 { +.csofj7r7-0-0-beta-42 { @layer rdg.Cell { position: sticky; /* Should have a higher value than 0 to show up above unfrozen cells */ z-index: 1; - - /* Add box-shadow on the last frozen cell */ - &:nth-last-child(1 of &) { - box-shadow: var(--rdg-cell-frozen-box-shadow); - } } } -.c1bn88vv7-0-0-beta-44 { +.ch2wcw87-0-0-beta-42 { + @layer rdg.Cell { + box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3); + } +} + + +.c1bn88vv7-0-0-beta-42 { @layer rdg.CheckboxLabel { cursor: pointer; display: flex; @@ -76,50 +79,51 @@ } } -.c1qt073l7-0-0-beta-44 { +.c1qt073l7-0-0-beta-42 { @layer rdg.CheckboxInput { all: unset; } } -.cf71kmq7-0-0-beta-44 { +.cf71kmq7-0-0-beta-42 { @layer rdg.CheckboxIcon { - content: ""; + content: ''; inline-size: 20px; block-size: 20px; border: 2px solid var(--rdg-border-color); background-color: var(--rdg-background-color); - .c1qt073l7-0-0-beta-44:checked + & { + .c1qt073l7-0-0-beta-42:checked + & { background-color: var(--rdg-checkbox-color); outline: 4px solid var(--rdg-background-color); outline-offset: -6px; } - .c1qt073l7-0-0-beta-44:focus + & { + .c1qt073l7-0-0-beta-42:focus + & { border-color: var(--rdg-checkbox-focus-color); } } } -.c1lwve4p7-0-0-beta-44 { +.c1lwve4p7-0-0-beta-42 { @layer rdg.CheckboxLabel { cursor: default; - .cf71kmq7-0-0-beta-44 { + .cf71kmq7-0-0-beta-42 { border-color: var(--rdg-checkbox-disabled-border-color); background-color: var(--rdg-checkbox-disabled-background-color); } } } -.g1s9ylgp7-0-0-beta-44 { + +.g1s9ylgp7-0-0-beta-42 { @layer rdg.GroupCellContent { outline: none; } } -.cz54e4y7-0-0-beta-44 { +.cz54e4y7-0-0-beta-42 { @layer rdg.GroupCellCaret { margin-inline-start: 4px; stroke: currentColor; @@ -133,7 +137,8 @@ } } -.c1w9bbhr7-0-0-beta-44 { + +.c1w9bbhr7-0-0-beta-42 { @layer rdg.DragHandle { --rdg-drag-handle-size: 8px; z-index: 0; @@ -151,26 +156,28 @@ } } -.c1creorc7-0-0-beta-44 { +.c1creorc7-0-0-beta-42 { @layer rdg.DragHandle { z-index: 1; position: sticky; } } -.cis5rrm7-0-0-beta-44 { + +.cis5rrm7-0-0-beta-42 { @layer rdg.EditCell { padding: 0; } } -.h44jtk67-0-0-beta-44 { + +.h44jtk67-0-0-beta-42 { @layer rdg.SortableHeaderCell { display: flex; } } -.hcgkhxz7-0-0-beta-44 { +.hcgkhxz7-0-0-beta-42 { @layer rdg.SortableHeaderCellName { flex-grow: 1; overflow: clip; @@ -178,19 +185,20 @@ } } -.c6l2wv17-0-0-beta-44 { + +.c6l2wv17-0-0-beta-42 { @layer rdg.HeaderCell { cursor: pointer; } } -.c1kqdw7y7-0-0-beta-44 { +.c1kqdw7y7-0-0-beta-42 { @layer rdg.HeaderCell { touch-action: none; } } -.r1y6ywlx7-0-0-beta-44 { +.r1y6ywlx7-0-0-beta-42 { @layer rdg.HeaderCell { cursor: col-resize; position: absolute; @@ -201,15 +209,16 @@ } } -.c1bezg5o7-0-0-beta-44 { +.c1bezg5o7-0-0-beta-42 { opacity: 0.5; } -.c1vc96037-0-0-beta-44 { +.c1vc96037-0-0-beta-42 { background-color: var(--rdg-header-draggable-background-color); } -.r1upfr807-0-0-beta-44 { + +.r1upfr807-0-0-beta-42 { @layer rdg.Row { display: contents; line-height: var(--rdg-row-height); @@ -219,7 +228,7 @@ background-color: var(--rdg-row-hover-background-color); } - &[aria-selected="true"] { + &[aria-selected='true'] { background-color: var(--rdg-row-selected-background-color); &:hover { @@ -229,17 +238,17 @@ } } -.r190mhd37-0-0-beta-44 { +.r190mhd37-0-0-beta-42 { @layer rdg.FocusSink { outline: 2px solid var(--rdg-selection-color); outline-offset: -2px; } } -.r139qu9m7-0-0-beta-44 { +.r139qu9m7-0-0-beta-42 { @layer rdg.FocusSink { &::before { - content: ""; + content: ''; display: inline-block; height: 100%; position: sticky; @@ -249,42 +258,45 @@ } } -.h10tskcx7-0-0-beta-44 { + +.h10tskcx7-0-0-beta-42 { @layer rdg.HeaderRow { display: contents; line-height: var(--rdg-header-row-height); background-color: var(--rdg-header-background-color); font-weight: bold; - & > .cj343x07-0-0-beta-44 { + & > .cj343x07-0-0-beta-42 { /* Should have a higher value than 1 to show up above regular cells and the focus sink */ z-index: 2; position: sticky; } - & > .csofj7r7-0-0-beta-44 { + & > .csofj7r7-0-0-beta-42 { z-index: 3; } } } -.c6ra8a37-0-0-beta-44 { + +.c6ra8a37-0-0-beta-42 { @layer rdg.Cell { background-color: #ccccff; } } -.cq910m07-0-0-beta-44 { +.cq910m07-0-0-beta-42 { @layer rdg.Cell { background-color: #ccccff; - &.c6ra8a37-0-0-beta-44 { + &.c6ra8a37-0-0-beta-42 { background-color: #9999ff; } } } -.a3ejtar7-0-0-beta-44 { + +.a3ejtar7-0-0-beta-42 { @layer rdg.SortIcon { fill: currentColor; @@ -294,7 +306,8 @@ } } -.rnvodz57-0-0-beta-44 { + +.rnvodz57-0-0-beta-42 { @layer rdg.Defaults { *, *::before, @@ -304,25 +317,14 @@ } @layer rdg.Root { - --rdg-color: #000; - --rdg-border-color: #ddd; - --rdg-summary-border-color: #aaa; - --rdg-background-color: hsl(0deg 0% 100%); - --rdg-header-background-color: hsl(0deg 0% 97.5%); - --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%); - --rdg-row-hover-background-color: hsl(0deg 0% 96%); - --rdg-row-selected-background-color: hsl(207deg 76% 92%); - --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%); - --rdg-checkbox-color: hsl(207deg 100% 29%); - --rdg-checkbox-focus-color: hsl(207deg 100% 69%); - --rdg-checkbox-disabled-border-color: #ccc; - --rdg-checkbox-disabled-background-color: #ddd; + --rdg-color: #000; --rdg-border-color: #ddd; --rdg-summary-border-color: #aaa; --rdg-background-color: hsl(0deg 0% 100%); --rdg-header-background-color: hsl(0deg 0% 97.5%); --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%); --rdg-row-hover-background-color: hsl(0deg 0% 96%); --rdg-row-selected-background-color: hsl(207deg 76% 92%); --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%); --rdg-checkbox-color: hsl(207deg 100% 29%); --rdg-checkbox-focus-color: hsl(207deg 100% 69%); --rdg-checkbox-disabled-border-color: #ccc; --rdg-checkbox-disabled-background-color: #ddd; --rdg-selection-color: #66afe9; --rdg-font-size: 14px; - --rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3); display: grid; + color-scheme: var(--rdg-color-scheme, light); + /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */ /* We set a stacking context so internal elements don't render on top of external elements. */ /* size containment is not used as it could break "width: min-content" for example, and the grid would infinitely resize on Chromium browsers */ @@ -338,75 +340,28 @@ /* needed on Firefox to fix scrollbars */ &::before { - content: ""; + content: ''; grid-column: 1/-1; grid-row: 1/-1; } - /* &.rdg-dark { - --rdg-color-scheme: dark; - --rdg-color: #ddd; - --rdg-border-color: #444; - --rdg-summary-border-color: #555; - --rdg-background-color: hsl(0deg 0% 13%); - --rdg-header-background-color: hsl(0deg 0% 10.5%); - --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%); - --rdg-row-hover-background-color: hsl(0deg 0% 9%); - --rdg-row-selected-background-color: hsl(207deg 76% 42%); - --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%); - --rdg-checkbox-color: hsl(207deg 100% 79%); - --rdg-checkbox-focus-color: hsl(207deg 100% 89%); - --rdg-checkbox-disabled-border-color: #000; - --rdg-checkbox-disabled-background-color: #333; - } */ - &.rdg-light { --rdg-color-scheme: light; } -/* - @media (prefers-color-scheme: dark) { - &:not(.rdg-light) { - --rdg-color: #ddd; - --rdg-border-color: #444; - --rdg-summary-border-color: #555; - --rdg-background-color: hsl(0deg 0% 13%); - --rdg-header-background-color: hsl(0deg 0% 10.5%); - --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%); - --rdg-row-hover-background-color: hsl(0deg 0% 9%); - --rdg-row-selected-background-color: hsl(207deg 76% 42%); - --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%); - --rdg-checkbox-color: hsl(207deg 100% 79%); - --rdg-checkbox-focus-color: hsl(207deg 100% 89%); - --rdg-checkbox-disabled-border-color: #000; - --rdg-checkbox-disabled-background-color: #333; - } - } */ - - > :nth-last-child(1 of .rdg-top-summary-row) { - > .cj343x07-0-0-beta-44 { - border-block-end: 2px solid var(--rdg-summary-border-color); - } - } - - > :nth-child(1 of .rdg-bottom-summary-row) { - > .cj343x07-0-0-beta-44 { - border-block-start: 2px solid var(--rdg-summary-border-color); - } - } } } -.vlqv91k7-0-0-beta-44 { +.vlqv91k7-0-0-beta-42 { @layer rdg.Root { user-select: none; - & .r1upfr807-0-0-beta-44 { + & .r1upfr807-0-0-beta-42 { cursor: move; } } } -.f1lsfrzw7-0-0-beta-44 { +.f1lsfrzw7-0-0-beta-42 { @layer rdg.FocusSink { grid-column: 1/-1; pointer-events: none; @@ -415,56 +370,75 @@ } } -.f1cte0lg7-0-0-beta-44 { +.f1cte0lg7-0-0-beta-42 { @layer rdg.FocusSink { /* Should have a higher value than 3 to show up above header and summary rows */ z-index: 3; } } -.s8wc6fl7-0-0-beta-44 { + +.s8wc6fl7-0-0-beta-42 { @layer rdg.SummaryCell { inset-block-start: var(--rdg-summary-row-top); inset-block-end: var(--rdg-summary-row-bottom); } } -.skuhp557-0-0-beta-44 { + +.skuhp557-0-0-beta-42 { @layer rdg.SummaryRow { line-height: var(--rdg-summary-row-height); - > .cj343x07-0-0-beta-44 { + > .cj343x07-0-0-beta-42 { position: sticky; } } } -.tf8l5ub7-0-0-beta-44 { +.tf8l5ub7-0-0-beta-42 { @layer rdg.SummaryRow { - > .cj343x07-0-0-beta-44 { + > .cj343x07-0-0-beta-42 { z-index: 2; } - > .csofj7r7-0-0-beta-44 { + > .csofj7r7-0-0-beta-42 { z-index: 3; } } } -.g1yxluv37-0-0-beta-44 { +.tb9ughf7-0-0-beta-42 { + @layer rdg.SummaryRow { + > .cj343x07-0-0-beta-42 { + border-block-end: 2px solid var(--rdg-summary-border-color); + } + } +} + +.b1yssfnt7-0-0-beta-42 { + @layer rdg.SummaryRow { + > .cj343x07-0-0-beta-42 { + border-block-start: 2px solid var(--rdg-summary-border-color); + } + } +} + + +.g1yxluv37-0-0-beta-42 { @layer rdg.GroupedRow { - &:not([aria-selected="true"]) { + &:not([aria-selected='true']) { background-color: var(--rdg-header-background-color); } - > .cj343x07-0-0-beta-44:not(:last-child, .csofj7r7-0-0-beta-44), - > :nth-last-child(n + 2 of .csofj7r7-0-0-beta-44) { + > .cj343x07-0-0-beta-42:not(:last-child):not(.ch2wcw87-0-0-beta-42) { border-inline-end: none; } } } -.t7vyx3i7-0-0-beta-44 { + +.t7vyx3i7-0-0-beta-42 { @layer rdg.TextEditor { appearance: none; @@ -492,3 +466,4 @@ } } } + diff --git a/comps/md/gen/md-form.ts b/comps/md/gen/md-form.ts index cb6be0d..e764fdb 100755 --- a/comps/md/gen/md-form.ts +++ b/comps/md/gen/md-form.ts @@ -1,8 +1,7 @@ +import { formatName } from "lib/comps/form/gen/fields"; +import { generateForm } from "lib/comps/form/gen/gen-form"; import { createItem } from "lib/gen/utils"; import get from "lodash.get"; -import { generateTableList } from "./gen-table-list"; -import { generateForm } from "lib/comps/form/gen/gen-form"; -import { formatName } from "lib/comps/form/gen/fields"; export const generateMDForm = async ( arg: { item: PrasiItem; table: string; fields: any }, diff --git a/gen/prop/gen_prop_table.ts b/gen/prop/gen_prop_table.ts index d3d8d4f..0fb73ca 100755 --- a/gen/prop/gen_prop_table.ts +++ b/gen/prop/gen_prop_table.ts @@ -5,7 +5,6 @@ export const gen_props_table = async () => { if (cache.length > 0) return cache; const tables = await db._schema.tables(); - console.log(tables); if (!Array.isArray(tables)) { alert("WARNING: failed to get tables from app server"); return [];