minor changes

package.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "@types/googlemaps": "^3.43.3"
+  },
+  "dependencies": {
+    "google-map-react": "^2.2.0",
+    "use-debounce": "^9.0.4"
+  }
+}

shesha-reactjs/package.json

@@ -121,7 +121,7 @@
     "less-bundle": "^0.1.2",
     "lodash": "^4.17.20",
     "moment": "^2.25.3",
-    "nanoid": "^3.1.30",
+    "nanoid": "^3.3.6",
     "qs": "^6.10.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

shesha-reactjs/src/components/formDesigner/components/configurableLayersConfigurator/control.tsx

@@ -1,12 +1,25 @@
-import { Checkbox, Form, Input, Switch } from 'antd';
+import { Checkbox, Form, Input, Switch, Select } from 'antd';
 import TextArea from 'antd/lib/input/TextArea';
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useMemo, useState } from 'react';
 import { parseIntOrDefault } from '../imageAnnotation/utilis';
 import { IConfigurableLayerConfiguratorProps, IConfigurableLayerState, IConfigurableLayerValue } from './interfaces';
 import { getFilterPayload } from './util';
+import Show from 'components/show';
+import { AutocompleteRaw } from 'components/autocomplete';
+import Properties from 'components/properties';
+import SectionSeparator from 'components/sectionSeparator';
+import { useGet } from 'restful-react';
+import { EntitiesGetAllQueryParams, useEntitiesGetAll } from 'apis/entities';
+import { useGlobalState } from 'providers';
+import { useDebouncedCallback } from 'use-debounce';
+import { QueryBuilderWithModelType } from '../queryBuilder/queryBuilderWithModelType';
+import { QueryBuilderComponentRenderer } from '../queryBuilder/queryBuilderComponent';
+
+const { Option } = Select;
 
 export const ConfigurableLayerConfiguratorControl: FC<IConfigurableLayerConfiguratorProps> = (props) => {
   const { level, onChange, value } = props || {};
+  const { globalState } = useGlobalState();
 
   const [{ isOpen }, setState] = useState<IConfigurableLayerState>({ isOpen: !!value });
 
@@ -18,10 +31,61 @@ export const ConfigurableLayerConfiguratorControl: FC<IConfigurableLayerConfigur
     const changedKey = Object.keys(changedValue)[0];
 
     if (!parseIntOrDefault(changedKey, 0) && onChange) {
+      values.markers = Array.isArray(mapData)
+        ? mapData?.filter((item) => {
+            return !Object.values(item).includes(null);
+          })
+        : mapData;
       onChange(getFilterPayload(values));
     }
   };
 
+  const useGetAll = value?.apiSource == 'custom' ? useGet : useEntitiesGetAll;
+  console.log('=-=-=-=-=-=-=-=-==-=-=', value?.apiSource == 'custom');
+
+  const getAllProps =
+    value?.apiSource == 'custom'
+      ? { path: value?.customApiUrl + `?id=${value?.ownerId}` || '', lazy: true }
+      : { lazy: true };
+
+  const { refetch: fetchAllEntities, loading: isFetchingEntities, data } = useGetAll(getAllProps as any);
+
+  const fetchEntities = (params: object) => {
+    if (value?.apiSource == 'custom') {
+      fetchAllEntities();
+    } else {
+      fetchAllEntities(params);
+    }
+  };
+
+  const queryParams = useMemo(() => {
+    var result: EntitiesGetAllQueryParams = {
+      entityType: value?.entityType,
+    };
+    result.properties =
+      typeof value?.properties == 'string'
+        ? `id ${value?.properties}`
+        : ['id', ...Array.from(new Set(value?.properties || []))].join(' ');
+
+    result.maxResultCount = 100;
+    return result;
+  }, [value?.properties, globalState]);
+
+  const debouncedRefresh = useDebouncedCallback(() => {
+    fetchEntities({ queryParams });
+  }, 300);
+
+  console.log('data', data);
+  const mapData = value?.apiSource == 'custom' ? data?.result : data?.result?.items;
+
+  useEffect(() => {
+    debouncedRefresh();
+  }, [queryParams]);
+
+  console.log('LOG:: value2', value);
+
+  console.log('LOG:: mapData', mapData);
+
   return (
     <Form
       form={form}
@@ -57,6 +121,62 @@ export const ConfigurableLayerConfiguratorControl: FC<IConfigurableLayerConfigur
             <Checkbox />
           </Form.Item>
 
+          <Form.Item
+            name="apiSource"
+            label="Api source"
+            tooltip="An option to use entity option or custom api. Bare in mind that everything works the same as entity for custom api, the source is the only thing that differs."
+            initialValue={'entity'}
+          >
+            <Select disabled={props.readOnly}>
+              <Option value="entity">entity</Option>
+              <Option value="custom">custom Url</Option>
+            </Select>
+          </Form.Item>
+
+          <Show when={value?.apiSource === 'custom'}>
+            <Form.Item name={'ownerId'} label="id">
+              <Input />
+            </Form.Item>
+          </Show>
+
+          <Show when={value?.apiSource == 'entity'}>
+            <Form.Item name="entityType" label="Entity type">
+              <AutocompleteRaw
+                dataSourceType="url"
+                dataSourceUrl="/api/services/app/Metadata/TypeAutocomplete"
+                readOnly={props.readOnly}
+              />
+            </Form.Item>
+            <Show when={Boolean(value?.entityType)}>
+              <Form.Item name="properties" label="Properties">
+                <Properties modelType={value?.entityType} mode="multiple" value={value?.properties} />
+              </Form.Item>
+
+              <SectionSeparator title="Query builder" />
+
+              <Form.Item name="useExpression" label="Use Expression" valuePropName="checked">
+                <Checkbox disabled={props.readOnly} />
+              </Form.Item>
+
+              <QueryBuilderWithModelType modelType={value?.entityType}>
+                <QueryBuilderComponentRenderer
+                  readOnly={props.readOnly}
+                  name="filters"
+                  type={''}
+                  id={''}
+                  label="Query builder"
+                  useExpression={value?.useExpression}
+                />
+              </QueryBuilderWithModelType>
+            </Show>
+          </Show>
+
+          <Show when={value?.apiSource === 'custom'}>
+            <Form.Item label="Custom Api URL" name="customApiUrl" tooltip="The URL for a custom Api.">
+              <Input readOnly={props.readOnly} />
+            </Form.Item>
+          </Show>
+
           <Form.Item name="children">
             <ConfigurableLayerConfiguratorControl level={level + 1} />
           </Form.Item>

shesha-reactjs/src/components/formDesigner/components/configurableLayersConfigurator/interfaces.ts

@@ -1,10 +1,10 @@
 import { IConfigurableLayerConfiguration } from 'interfaces/configurableLayer';
 import { IConfigurableFormComponent } from '../../../../providers/form/models';
 
-export interface IConfigurableLayerConfiguratorComponentProps extends IConfigurableFormComponent {}
+export interface IConfigurableLayerConfiguratorComponentProps extends IConfigurableFormComponent { }
 
 export interface IConfigurableLayerConfiguratorProps {
-  value?: ILayerFormModel[];
+  value?: ILayerFormModel;
   onChange?: (value: IConfigurableLayerValue<IConfigurableLayerConfiguration>) => void;
   readOnly?: boolean;
   level: number;
@@ -16,6 +16,16 @@ export interface ILayerFormModel {
   description?: string;
   visibility?: boolean;
   allowChangeVisibility?: boolean;
+  useExpression: boolean;
+  entityType: string;
+  permissions?: any;
+  properties?: string[];
+  ownerId?: string;
+  queryParamsExpression?: string;
+  readOnly?: boolean;
+  // dataSource?: 'custom' | 'api';
+  customApiUrl?: string;
+  apiSource?: 'entity' | 'custom';
 }
 
 export interface IConfigurableLayerState {