awing-library 2.1.86 → 2.1.87

package/lib/ACM-AXN/GeoFencing/component.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
-var react_i18next_1 = require("react-i18next");
 var PinDrop_1 = __importDefault(require("@mui/icons-material/PinDrop"));
+var material_1 = require("@mui/material");
+var AWING_1 = require("../../AWING");
 var react_1 = require("react");
-var GoongMap_1 = __importDefault(require("./GoongMap"));
-var common_1 = require("./common");
+var react_i18next_1 = require("react-i18next");
 var constants_1 = require("../../constants");
+var common_1 = require("./common");
 function Component(props) {
     var t = (0, react_i18next_1.useTranslation)().t;
     var label = props.label, configs = props.configs, marker = props.marker, radius = props.radius, locationString = props.locationString, onChange = props.onChange, onSearch = props.onSearch, onGoongMapSelect = props.onGoongMapSelect, limit = props.limit, isOnlyMap = props.isOnlyMap;
@@ -42,7 +42,7 @@ function Component(props) {
                                             !(0, common_1.validateGoogleMapLatLong)(locationString)) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleShowMapChange, style: {
                                             position: "absolute",
                                             right: "12px",
-                                            bottom: "5px",
+                                            bottom: "9px",
                                         }, size: "small", children: (0, jsx_runtime_1.jsx)(PinDrop_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, style: { paddingLeft: "8px" }, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, label: t("PlaceFilter.Radius"), variant: "outlined", size: "small", placeholder: t("PlaceFilter.TypeRadius"), type: "number", value: radius, onChange: function (e) {
                                         if (!e.target.value.includes("-") &&
                                             Number(e.target.value) <=
@@ -55,6 +55,6 @@ function Component(props) {
                                         }
                                     }, error: !!(radius &&
                                         Number(radius) <
-                                            ((limit === null || limit === void 0 ? void 0 : limit.min) || constants_1.MIN_RADIUS)) }) })] })), (isOnlyMap || showMap) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { position: "relative", marginTop: "16px" }, children: (0, jsx_runtime_1.jsx)(GoongMap_1.default, { onAddPlace: onGoongMapSelect, marker: marker, configs: configs }) }))] })] }));
+                                            ((limit === null || limit === void 0 ? void 0 : limit.min) || constants_1.MIN_RADIUS)) }) })] })), (isOnlyMap || showMap) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { position: "relative", marginTop: "16px" }, children: (0, jsx_runtime_1.jsx)(AWING_1.GoogleMap, { onUpdateLocation: onGoongMapSelect, apiKey: configs.GOOGLE_MAP_KEY, markerPosition: marker || undefined, geofenceRadius: radius ? Number(radius) : 0 }) }))] })] }));
 }
 exports.default = Component;

package/lib/ACM-AXN/GeoFencing/interface.d.ts

@@ -1,6 +1,5 @@
 export interface IConfig {
-    GOONG_API_KEY: string;
-    GOONG_MAP_KEY: string;
+    GOOGLE_MAP_KEY: string;
 }
 export interface GeoFencingValue {
     latitude?: number;

package/lib/ACM-AXN/PlaceFilter/Input/component/index.js

@@ -85,8 +85,7 @@ function FieldInputComponent(props) {
         return ((0, jsx_runtime_1.jsx)(GeoFencing_1.default, { initValue: filterField.value, onChange: function (value) {
                 onChange(value, index);
             }, label: filterField.label, configs: {
-                GOONG_API_KEY: (filterField === null || filterField === void 0 ? void 0 : filterField.GOONG_API_KEY) || "",
-                GOONG_MAP_KEY: (filterField === null || filterField === void 0 ? void 0 : filterField.GOONG_MAP_KEY) || "",
+                GOOGLE_MAP_KEY: (filterField === null || filterField === void 0 ? void 0 : filterField.GOOGLE_MAP_KEY) || "",
             }, value: filterField.value, limit: filterField === null || filterField === void 0 ? void 0 : filterField.radiusLimit }));
     };
     var renderMultiSelect = function (filterField, index) {

package/lib/ACM-AXN/PlaceFilter/interface.d.ts

@@ -62,6 +62,7 @@ export interface IGeoFencing extends IFilterFieldBase {
     } | undefined;
     GOONG_MAP_KEY: string;
     GOONG_API_KEY: string;
+    GOOGLE_MAP_KEY: string;
     radiusLimit?: {
         min?: number;
         max?: number;

package/lib/AWING/BasicDataForm/BasicDataForm.js

@@ -371,8 +371,9 @@ var BasicDataForm = function (props) {
                             case 'geo-fencing': {
                                 var geoProps = (fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.GeoFencingProps) || {};
                                 currentField = ((0, jsx_runtime_1.jsx)("div", { style: { margin: '16px 0px' }, children: (0, jsx_runtime_1.jsx)(GeoFencing_1.default, __assign({ configs: {
-                                            GOONG_API_KEY: '',
-                                            GOONG_MAP_KEY: '',
+                                            // GOONG_API_KEY: '',
+                                            // GOONG_MAP_KEY: '',
+                                            GOOGLE_MAP_KEY: '',
                                         }, label: '' }, geoProps, { onChange: function (value) {
                                             return handleChange(fieldName, value ? value : null);
                                         } }), index) }, index));

package/lib/AWING/GoogleMap/GGMap.d.ts

@@ -0,0 +1,3 @@
+import { IGoogleMapProps } from './interface';
+declare const GGMap: ({ defaultLocation, onUpdateLocation, apiKey, markerPosition, geofenceRadius }: IGoogleMapProps) => import("react/jsx-runtime").JSX.Element;
+export default GGMap;

package/lib/AWING/GoogleMap/GGMap.js

@@ -0,0 +1,162 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var api_1 = require("@react-google-maps/api");
+var lodash_1 = __importDefault(require("lodash"));
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var mapContainerStyle = {
+    height: '320px',
+    width: '100%',
+};
+var libraries = ['places'];
+var GGMap = function (_a) {
+    var _b, _c;
+    var defaultLocation = _a.defaultLocation, onUpdateLocation = _a.onUpdateLocation, apiKey = _a.apiKey, markerPosition = _a.markerPosition, geofenceRadius = _a.geofenceRadius;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _d = (0, react_1.useState)(), map = _d[0], setMap = _d[1];
+    var _e = (0, react_1.useState)(''), error = _e[0], setError = _e[1];
+    var autocompleteRef = (0, react_1.useRef)(null);
+    var boxRef = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)(15), zoom = _f[0], setZoom = _f[1];
+    var onLoad = function (autocomplete) {
+        autocompleteRef.current = autocomplete;
+    };
+    var onPlaceChanged = function () {
+        var _a, _b, _c, _d;
+        if (autocompleteRef.current !== null) {
+            var place = autocompleteRef.current.getPlace();
+            if (place.geometry) {
+                var newLat = (_b = (_a = place === null || place === void 0 ? void 0 : place.geometry) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.lat();
+                var newLng = (_d = (_c = place === null || place === void 0 ? void 0 : place.geometry) === null || _c === void 0 ? void 0 : _c.location) === null || _d === void 0 ? void 0 : _d.lng();
+                onUpdateLocation({
+                    latitude: newLat !== null && newLat !== void 0 ? newLat : 0,
+                    longitude: newLng !== null && newLng !== void 0 ? newLng : 0,
+                });
+                map === null || map === void 0 ? void 0 : map.panTo({ lat: newLat !== null && newLat !== void 0 ? newLat : 0, lng: newLng !== null && newLng !== void 0 ? newLng : 0 });
+                setZoom(18);
+            }
+        }
+        else {
+            console.log('Autocomplete is not loaded yet!');
+        }
+    };
+    var onLoadMap = function (mapInstance) {
+        setMap(mapInstance);
+    };
+    //Lấy geo fencing
+    // const getDistance = (
+    //     lat1: number,
+    //     lon1: number,
+    //     lat2: number,
+    //     lon2: number
+    // ) => {
+    //     const R = 6371e3; // Radius of the Earth in meters
+    //     const φ1 = (lat1 * Math.PI) / 180;
+    //     const φ2 = (lat2 * Math.PI) / 180;
+    //     const Δφ = ((lat2 - lat1) * Math.PI) / 180;
+    //     const Δλ = ((lon2 - lon1) * Math.PI) / 180;
+    //     const a =
+    //         Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+    //         Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+    //     const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    //     const distance = R * c; // Distance in meters
+    //     return distance;
+    // };
+    //Lấy vị trí hiện tại của người dùng
+    var getCurrentLocation = function () {
+        var handleLocationGeoFencing = function (position) {
+            var userLat = position.coords.latitude;
+            var userLng = position.coords.longitude;
+            // const distance = getDistance(
+            //     userLat,
+            //     userLng,
+            //     markerPosition.lat,
+            //     markerPosition.lng
+            // );
+            // console.log("distance", distance);
+        };
+        var showPosition = function (position) {
+            handleLocationGeoFencing(position);
+            onUpdateLocation({
+                latitude: position.coords.latitude,
+                longitude: position.coords.longitude,
+            });
+        };
+        var showError = function (error) {
+            switch (error.code) {
+                case error.PERMISSION_DENIED:
+                    setError('User denied the request for Geolocation.');
+                    break;
+                case error.POSITION_UNAVAILABLE:
+                    setError('Location information is unavailable.');
+                    break;
+                case error.TIMEOUT:
+                    setError('The request to get user location timed out.');
+                    break;
+                default:
+                    setError('An unknown error occurred.');
+                    break;
+            }
+        };
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(showPosition, showError);
+        }
+        else {
+            setError('Geolocation is not supported by this browser.');
+        }
+    };
+    var onMapClick = function (e) {
+        var _a, _b, _c, _d;
+        onUpdateLocation({
+            latitude: (_b = (_a = e === null || e === void 0 ? void 0 : e.latLng) === null || _a === void 0 ? void 0 : _a.lat()) !== null && _b !== void 0 ? _b : 0,
+            longitude: (_d = (_c = e === null || e === void 0 ? void 0 : e.latLng) === null || _c === void 0 ? void 0 : _c.lng()) !== null && _d !== void 0 ? _d : 0,
+        });
+    };
+    (0, react_1.useEffect)(function () {
+        if (lodash_1.default.isNil(defaultLocation) || defaultLocation.lat === 0 || defaultLocation.lng === 0) {
+            getCurrentLocation();
+        }
+    }, [defaultLocation]);
+    var marker = { lat: (_b = Number(markerPosition === null || markerPosition === void 0 ? void 0 : markerPosition.latitude)) !== null && _b !== void 0 ? _b : 0, lng: (_c = Number(markerPosition === null || markerPosition === void 0 ? void 0 : markerPosition.longitude)) !== null && _c !== void 0 ? _c : 0 };
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            position: 'relative',
+            '& .pac-container.pac-logo': {
+                top: "55px!important",
+                left: "0!important",
+            }
+        }, ref: boxRef, children: (0, jsx_runtime_1.jsxs)(api_1.LoadScript, { googleMapsApiKey: apiKey || '', libraries: libraries, children: [(0, jsx_runtime_1.jsx)(api_1.Autocomplete, { onPlaceChanged: onPlaceChanged, onLoad: onLoad, children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: t('Common.PlaceHolderLocation'), onFocus: function () {
+                            var _a;
+                            var ggSuggest = document.querySelector('.pac-container.pac-logo');
+                            if (ggSuggest) {
+                                (_a = boxRef.current) === null || _a === void 0 ? void 0 : _a.append(ggSuggest);
+                            }
+                        }, style: {
+                            boxSizing: "border-box",
+                            border: "1px solid transparent",
+                            width: "378px",
+                            height: "40px",
+                            padding: "0 12px",
+                            borderRadius: "3px",
+                            boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
+                            fontSize: "14px",
+                            outline: "none",
+                            textOverflow: "ellipses",
+                            position: 'inherit',
+                            right: '3%',
+                            margin: '10px 0',
+                            zIndex: 99,
+                            top: '50px',
+                        } }) }), (0, jsx_runtime_1.jsx)(api_1.GoogleMap, { id: "map", mapContainerStyle: mapContainerStyle, zoom: zoom, center: marker, onLoad: onLoadMap, onClick: onMapClick, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(api_1.Marker, { position: marker }), (0, jsx_runtime_1.jsx)(api_1.Circle, { center: marker, radius: geofenceRadius, options: {
+                                    fillColor: 'red',
+                                    fillOpacity: 0.2,
+                                    strokeColor: 'red',
+                                    strokeOpacity: 1,
+                                    strokeWeight: 2,
+                                } })] }) })] }) }));
+};
+exports.default = GGMap;

package/lib/AWING/GoogleMap/index.d.ts

@@ -0,0 +1,4 @@
+import { IGoogleMapProps } from "./interface";
+export declare function GoogleMap(props: IGoogleMapProps): import("react/jsx-runtime").JSX.Element;
+export default GoogleMap;
+export * from "./interface";

package/lib/AWING/GoogleMap/index.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GoogleMap = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var i18n_1 = __importDefault(require("../../i18n"));
+var react_i18next_1 = require("react-i18next");
+var GGMap_1 = __importDefault(require("./GGMap"));
+function GoogleMap(props) {
+    return ((0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: (0, jsx_runtime_1.jsx)(GGMap_1.default, __assign({}, props)) }));
+}
+exports.GoogleMap = GoogleMap;
+exports.default = GoogleMap;
+__exportStar(require("./interface"), exports);

package/lib/AWING/GoogleMap/interface.d.ts

@@ -0,0 +1,16 @@
+export interface IGoogleMapProps {
+    defaultLocation?: {
+        lat: number;
+        lng: number;
+    };
+    markerPosition?: {
+        latitude: number;
+        longitude: number;
+    };
+    onUpdateLocation: (newValue: {
+        latitude: number;
+        longitude: number;
+    }) => void;
+    apiKey: string;
+    geofenceRadius?: number;
+}

package/lib/AWING/GoogleMap/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/AWING/index.d.ts

@@ -32,3 +32,4 @@ export * from './TreeItemWithAction';
 export * from './constants';
 export * from './LogicExpression';
 export * from './Chart';
+export * from './GoogleMap';

package/lib/AWING/index.js

@@ -48,3 +48,4 @@ __exportStar(require("./TreeItemWithAction"), exports);
 __exportStar(require("./constants"), exports);
 __exportStar(require("./LogicExpression"), exports);
 __exportStar(require("./Chart"), exports);
+__exportStar(require("./GoogleMap"), exports);

package/lib/translate/en/translation.json

@@ -51,6 +51,7 @@
         },
         "ChangeLanguage": "Change language",
         "UserProfile": "User profile",
+        "PlaceHolderLocation": "Enter a location ...",
         "Save": "Save",
         "Add": "Add",
         "Cancel": "Cancel",

package/lib/translate/vi/translation.json

@@ -46,6 +46,7 @@
         "Save": "Lưu",
         "Name": "Tên",
         "UserGroupUser": "Người dùng/Nhóm",
+        "PlaceHolderLocation": "Nhập địa chỉ ...",
         "Gender": {
             "Title": "Giới tính",
             "Gender_0": "Nữ",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "awing-library",
-    "version": "2.1.86",
+    "version": "2.1.87",
     "description": "",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -28,6 +28,7 @@
         "@mui/styles": "^5.14.14",
         "@mui/x-date-pickers": "6.18.1",
         "@mui/x-tree-view": "^6.17.0",
+        "@react-google-maps/api": "^2.19.3",
         "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.5.1",
@@ -37,12 +38,14 @@
         "@types/node": "^20.8.8",
         "@types/react": "^18.2.31",
         "@types/react-dom": "^18.2.14",
+        "@vis.gl/react-google-maps": "^1.1.0",
         "aphrodite": "^2.4.0",
         "chart.js": "^4.4.3",
         "chartjs-adapter-moment": "^1.0.1",
         "clsx": "^2.1.1",
         "concurrently": "^8.2.2",
         "dayjs": "^1.11.10",
+        "dotenv": "^16.4.5",
         "enzyme": "^3.11.0",
         "faker": "^6.6.6",
         "file-saver": "^2.0.5",