midsuit
/
prasi-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

This commit is contained in:
Rizky 2024-06-25 03:52:53 -07:00
parent a37399adfa
commit ad54c9d0d3
10 changed files with 143 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
comps/custom/Popover.css Executable file
View File

@ -0,0 +1,3 @@
[data-floating-ui-portal] > div {
z-index: 100;
}

1
comps/custom/Popover.tsx
View File

@ -17,6 +17,7 @@ import {
useRole,
} from "@floating-ui/react";
import * as React from "react";
import "./Popover.css";
interface PopoverOptions {
initialOpen?: boolean;

12
comps/form/field/type/TypeDropdown.tsx
View File

@ -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 (
<>
<Typeahead
value={Array.isArray(value) ? value : [value]}
onSelect={({ search, item }) => {
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}

4
comps/form/gen/fields.ts
View File

@ -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,

16
comps/form/gen/gen-field.ts
View File

@ -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;
}
}

10
comps/form/gen/gen-rel-many.ts
View File

@ -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;
}
}

6
comps/form/gen/get-value.ts
View File

@ -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;
}

213
comps/list/TableList.css
View File

@ -15,7 +15,7 @@
Root;
}
.mlln6zg7-0-0-beta-44 {
.mlln6zg7-0-0-beta-42 {
@layer rdg.MeasuringCell {
contain: strict;
grid-row: 1;
@ -23,7 +23,8 @@
}
}
.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
@ -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 @@
}
}
}

5
comps/md/gen/md-form.ts
View File

@ -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 },

1
gen/prop/gen_prop_table.ts
View File

@ -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 [];