Merge branch 'dev' into filter_group_members_role

Author: kamalqureshi

client/packages/lowcoder-design/src/icons/index.tsx

@@ -355,6 +355,7 @@ export { ReactComponent as VideoCameraStreamCompIconSmall } from "./v2/camera-st
 export { ReactComponent as VideoScreenshareCompIconSmall } from "./v2/screen-share-stream-s.svg"; // new
 export { ReactComponent as SignatureCompIconSmall } from "./v2/signature-s.svg";
 export { ReactComponent as StepCompIconSmall } from "./v2/steps-s.svg";
+export { ReactComponent as TagsCompIconSmall } from "./v2/tags-s.svg"
 
 
 export { ReactComponent as CandlestickChartCompIconSmall } from "./v2/candlestick-chart-s.svg"; // new
@@ -468,6 +469,7 @@ export { ReactComponent as SignatureCompIcon } from "./v2/signature-m.svg";
 export { ReactComponent as GanttCompIcon } from "./v2/gantt-chart-m.svg";
 export { ReactComponent as KanbanCompIconSmall } from "./v2/kanban-s.svg";
 export { ReactComponent as KanbanCompIcon } from "./v2/kanban-m.svg";
+export { ReactComponent as TagsCompIcon } from "./v2/tags-l.svg";
 
 export { ReactComponent as CandlestickChartCompIcon } from "./v2/candlestick-chart-m.svg";
 export { ReactComponent as FunnelChartCompIcon } from "./v2/funnel-chart-m.svg";

client/packages/lowcoder-design/src/icons/v2/tags-l.svg

@@ -187,6 +187,10 @@ export class DatasourceApi extends Api {
     return Api.get(DatasourceApi.url + `/listByOrg?orgId=${orgId}`, {...res});
   }
 
+  static getDatasourceById(id: string): AxiosPromise<GenericApiResponse<Datasource>> {
+    return Api.get(`${DatasourceApi.url}/${id}`);
+  }
+
   static createDatasource(
     datasourceConfig: Partial<Datasource>
   ): AxiosPromise<GenericApiResponse<Datasource>> {

client/packages/lowcoder-design/src/icons/v2/tags-s.svg

@@ -208,17 +208,13 @@ const FormBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
-      const editorContext = useContext(EditorContext);
-      const isLogicMode = editorContext.editorModeStatus === "logic" || editorContext.editorModeStatus === "both";
-      const isLayoutMode = editorContext.editorModeStatus === "layout" || editorContext.editorModeStatus === "both";
-      
       return (
         <>
           <Section name={sectionNames.basic}>
             {children.resetAfterSubmit.propertyView({ label: trans("formComp.resetAfterSubmit") })}
           </Section>
 
-          {isLogicMode && (
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
             <><Section name={sectionNames.interaction}>
                 {children.onEvent.getPropertyView()}
                 {disabledPropertyView(children)}
@@ -229,22 +225,22 @@ const FormBaseComp = (function () {
             </>
           )}
 
-          {isLayoutMode && (
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.layout}>
                 {children.container.getPropertyView()}
               </Section>
             </>
           )}
 
-          {isLogicMode && (
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
             <Section name={sectionNames.advanced}>
               {children.initialData.propertyView({ label: trans("formComp.initialData") })}
               {children.invalidFormMessage.propertyView({ label: trans("formComp.invalidFormMessage") })}
             </Section>
           )}
 
-          {isLayoutMode && (
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.style}>
                 {children.container.stylePropertyView()}
@@ -289,7 +285,8 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
   }
   traverseFormItems(consumer: (item: GridItemComp) => boolean) {
     return traverseCompTree(this.getCompTree(), (item) => {
-      return item.children.comp.children.formDataKey ? consumer(item as GridItemComp) : true;
+      const hasFormDataKey = item.children.comp.children.hasOwnProperty("formDataKey");
+      return hasFormDataKey ? consumer(item as GridItemComp) : true;
     });
   }
   validateFormItems() {
@@ -333,12 +330,19 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
     // For the properties, first find in data, then initialData, subcomponent default value (resetValue), empty value (clearValue)
     const newData = { ...(initialData ?? this.children.initialData.getView()), ...data };
 
+    // Only proceed if we have data to set
+    if (!Object.keys(newData).length) {
+      return Promise.resolve();
+    }
+
     return this.runMethodOfItems(
       {
         name: "setValue",
         getParams: (t) => {
           // use component name when formDataKey is empty
-          const key = t.children.comp.children.formDataKey?.getView() || t.children.name.getView();
+          const formDataKey = t.children.comp.children.formDataKey?.getView();
+          const componentName = t.children.name.getView();
+          const key = formDataKey || componentName;
           const value = newData[key];
           return value !== undefined ? [value as EvalParamType] : undefined;
         },
@@ -347,7 +351,9 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
         name: "setRange",
         getParams: (t) => {
           // use component name when formDataKey is empty
-          const key = t.children.comp.children.formDataKey?.getView() || t.children.name.getView();
+          const formDataKey = t.children.comp.children.formDataKey?.getView();
+          const componentName = t.children.name.getView();
+          const key = formDataKey || componentName;
           const value = newData[key] ? newData[key] : undefined;
           return value !== undefined ? [value as EvalParamType] : undefined;
         },
@@ -387,7 +393,8 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
       case CompActionTypes.UPDATE_NODES_V2: {
         const ret = super.reduce(action);
         // When the initial value changes, update the form
-          requestAnimationFrame(() => {
+        if (action.value["initialData"] !== undefined) {
+          queueMicrotask(() => {
             this.dispatch(
               customAction<SetDataAction>(
                 {
@@ -398,6 +405,7 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
               )
             );
           });
+        }
         return ret;
       }
       case CompActionTypes.CUSTOM:
@@ -548,4 +556,4 @@ export function defaultFormData(compName: string, nameGenerator: NameGenerator):
       showFooter: true,
     },
   };
-}
+}

client/packages/lowcoder/src/api/datasourceApi.ts

@@ -30,7 +30,7 @@ let MultiSelectBasicComp = (function () {
     padding: PaddingControl,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const valueSet = new Set<any>(props.options.map((o) => o.value)); // Filter illegal default values entered by the user
+    const valueSet = new Set<any>((props.options as any[]).map((o: any) => o.value)); // Filter illegal default values entered by the user
     const [
       validateState,
       handleChange,

client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx

@@ -39,7 +39,7 @@ let SelectBasicComp = (function () {
     const propsRef = useRef<RecordConstructorToView<typeof childrenMap>>(props);
     propsRef.current = props;
 
-    const valueSet = new Set<any>(props.options.map((o) => o.value)); // Filter illegal default values entered by the user
+    const valueSet = new Set<any>((props.options as any[]).map((o: any) => o.value)); // Filter illegal default values entered by the user
 
     return props.label({
       required: props.required,

client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx

@@ -0,0 +1,179 @@
+import { 
+  BoolCodeControl, 
+  ButtonEventHandlerControl, 
+  InputLikeStyle, 
+  NameConfig, 
+  Section, 
+  UICompBuilder, 
+  hiddenPropertyView, 
+  sectionNames, 
+  showDataLoadingIndicatorsPropertyView, 
+  styleControl, 
+  withExposingConfigs 
+} from "@lowcoder-ee/index.sdk";
+import styled from "styled-components";
+import React, { useContext } from "react";
+import { trans } from "i18n";
+import { Tag } from "antd";
+import { EditorContext } from "comps/editorState";
+import { PresetStatusColorTypes } from "antd/es/_util/colors";
+import { hashToNum } from "util/stringUtils";
+import { TagsCompOptionsControl } from "comps/controls/optionsControl";
+import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
+
+const colors = PresetStatusColorTypes;
+
+// These functions are used for individual tag styling
+function getTagColor(tagText : any, tagOptions: any[]) {
+  const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
+  if (foundOption) {
+    if (foundOption.colorType === "preset") {
+      return foundOption.presetColor;
+    } else if (foundOption.colorType === "custom") {
+      return undefined;
+    }
+    return foundOption.color;
+  }
+  const index = Math.abs(hashToNum(tagText)) % colors.length;
+  return colors[index];
+}
+
+const getTagStyle = (tagText: any, tagOptions: any[], baseStyle: any = {}) => {
+  const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
+  if (foundOption) {
+    const style: any = { ...baseStyle };
+    
+    if (foundOption.colorType === "custom") {
+      style.backgroundColor = foundOption.color;
+      style.color = foundOption.textColor;
+      style.border = `1px solid ${foundOption.color}`;
+    }
+    
+    if (foundOption.border) {
+      style.borderColor = foundOption.border;
+      if (!foundOption.colorType || foundOption.colorType !== "custom") {
+        style.border = `1px solid ${foundOption.border}`;
+      }
+    }
+    
+    if (foundOption.radius) {
+      style.borderRadius = foundOption.radius;
+    }
+    
+    if (foundOption.margin) {
+      style.margin = foundOption.margin;
+    }
+    
+    if (foundOption.padding) {
+      style.padding = foundOption.padding;
+    }
+    
+    return style;
+  }
+  return baseStyle;
+};
+
+function getTagIcon(tagText: any, tagOptions: any[]) {
+  const foundOption = tagOptions.find(option => option.label === tagText);
+  return foundOption ? foundOption.icon : undefined;
+}
+
+const multiTags = (function () {
+
+  const StyledTag = styled(Tag)<{ $style: any, $bordered: boolean, $customStyle: any }>`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background: ${(props) => props.$customStyle?.backgroundColor || props.$style?.background};
+    color: ${(props) => props.$customStyle?.color || props.$style?.text};
+    border-radius: ${(props) => props.$customStyle?.borderRadius || props.$style?.borderRadius};
+    border: ${(props) => {
+      if (props.$customStyle?.border) return props.$customStyle.border;
+      return props.$bordered ? `${props.$style?.borderStyle} ${props.$style?.borderWidth} ${props.$style?.border}` : 'none';
+    }};
+    padding: ${(props) => props.$customStyle?.padding || props.$style?.padding};
+    margin: ${(props) => props.$customStyle?.margin || props.$style?.margin};
+    font-size: ${(props) => props.$style?.textSize};
+    font-weight: ${(props) => props.$style?.fontWeight};
+    cursor: pointer;
+  `;
+
+  const StyledTagContainer = styled.div`
+    display: flex;
+    gap: 5px;
+    padding: 5px;
+  `;
+
+  const childrenMap = {
+    options: TagsCompOptionsControl,
+    style: styleControl(InputLikeStyle, 'style'),
+    onEvent: ButtonEventHandlerControl,
+    borderless: BoolCodeControl,
+    enableIndividualStyling: BoolCodeControl,
+  };
+
+  return new UICompBuilder(childrenMap, (props) => {
+    const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent});
+
+    return (
+      <StyledTagContainer>
+        {props.options.map((tag, index) => {
+
+          // Use individual styling only if enableIndividualStyling is true
+          const tagColor = props.enableIndividualStyling ? getTagColor(tag.label, props.options) : undefined;
+          const tagIcon = props.enableIndividualStyling ? getTagIcon(tag.label, props.options) : tag.icon;
+          const tagStyle = props.enableIndividualStyling ? getTagStyle(tag.label, props.options, props.style) : {};
+          
+          return (
+            <StyledTag 
+              key={`tag-${index}`}
+              $style={props.style}
+              $bordered={!props.borderless}
+              $customStyle={tagStyle}
+              icon={tagIcon}
+              color={tagColor}
+              onClick={() => handleClickEvent()}
+            >
+              {tag.label}
+            </StyledTag>
+          );
+        })}
+      </StyledTagContainer>
+    ); 
+  })
+    .setPropertyViewFn((children: any) => {
+      return (
+        <>
+          <Section name="Basic">
+            {children.options.propertyView({})} 
+          </Section>
+
+          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {hiddenPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
+            </Section>
+          )}
+
+          {["layout", "both"].includes(
+            useContext(EditorContext).editorModeStatus
+          ) && (
+              <Section name={sectionNames.style}>
+                {children.enableIndividualStyling.propertyView({ 
+                  label: trans("style.individualStyling"),
+                  tooltip: trans("style.individualStylingTooltip")
+                })}
+                {children.borderless.propertyView({ label: trans("style.borderless") })}
+                {children.style.getPropertyView()}
+              </Section>
+            )}
+        </>
+      )
+    })
+    .build();
+})()
+
+export const MultiTagsComp = withExposingConfigs(multiTags, [new NameConfig("options", "")]);
+

client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx

@@ -183,6 +183,12 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
     props.value.onChange(defaultValue)
   }, [defaultValue]);
 
+  useEffect(() => {
+    if (!changeRef.current) {
+      setLocalInputValue(inputValue);
+    }
+  }, [inputValue]);
+
   useEffect(() => {
     if (!changeRef.current) return;
 
@@ -214,6 +220,7 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
     debounce(function (value: string, valueCtx: any) {
       propsRef.current.value.onChange(value);
       propsRef.current.onEvent("change");
+      changeRef.current = false;  // Reset after commit
     }, 1000)
   );