@iotready/nextjs-components-library 1.0.0-preview3 → 1.0.0-preview31

package/components/users/UsersDataGrid.js

@@ -1,15 +1,23 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { DataGrid, getGridStringOperators, GridLogicOperator, GridToolbar } from '@mui/x-data-grid';
-import { Card, Box, Button, CircularProgress, ThemeProvider } from '@mui/material';
-import moment from 'moment';
-import EditIcon from '@mui/icons-material/Edit';
-import { useRouter } from 'next/navigation';
-const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', containerProps = {}, props = {}, loadingComponent = _jsx(CircularProgress, {}), theme }) => {
-    const router = useRouter();
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { DataGrid, GridLogicOperator, GridToolbarExport } from '@mui/x-data-grid';
+import { Card, Box, CircularProgress, ThemeProvider, FormControl, IconButton, InputLabel, MenuItem, Select, TextField } from '@mui/material';
+import { ClearIcon } from "@mui/x-date-pickers";
+import debounce from 'lodash.debounce';
+const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', containerProps = {}, props = {}, loadingComponent = _jsx(CircularProgress, {}), theme, columns }) => {
     const [usersList, setUsersList] = useState(undefined);
     const [userCount, setUserCount] = useState(undefined);
+    const filterType = {
+        email: 'Email',
+        name: 'Full name',
+        role: 'Role'
+    };
+    const [selectedFilterValue, setSelectedFilterValue] = useState(undefined);
+    const [selectedFilterType, setSelectedFilterType] = useState('email');
     const [isLoading, setIsLoading] = useState(true);
+    const [sortModel, setSortModel] = useState([
+        { field: "email", sort: "desc" },
+    ]);
     const [paginationModel, setPaginationModel] = useState({
         page: 0,
         pageSize: pageSize || 1,
@@ -29,7 +37,8 @@ const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', contai
                     { value: filterModel.quickFilterValues[0] }
                     : filterModel.items.length > 0 ?
                         { field: filterModel.items[0].field, operator: filterModel.items[0].operator, value: filterModel.items[0].value }
-                        : undefined
+                        : undefined,
+                sortModel
             });
             setUsersList(usersList.users);
             setUserCount(usersList.rowCount);
@@ -41,36 +50,44 @@ const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', contai
             setIsLoading(false);
         }
     };
+    const debouncedUpdateFilter = useMemo(() => debounce((value) => {
+        setFilterModel({
+            items: [{
+                    field: selectedFilterType || 'email',
+                    operator: 'startsWith',
+                    value: value
+                }],
+        });
+    }, 500), [selectedFilterType]);
+    const handleFilterModelChange = (value) => {
+        setSelectedFilterValue(value);
+        // const value = newModel.quickFilterValues?.[0] || '';
+        if (value.length >= 3 || value.length === 0) {
+            debouncedUpdateFilter(value);
+        }
+    };
     useEffect(() => {
         getUsersList();
-    }, [paginationModel, filterModel]);
+    }, [paginationModel, filterModel, sortModel]);
     if (!usersList && isLoading) {
         return loadingComponent;
     }
-    const renderUsersList = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { disableDensitySelector: true, disableColumnSelector: true, disableRowSelectionOnClick: true, disableColumnResize: true, disableColumnSorting: true, columns: [
-                {
-                    field: 'role', filterable: false, disableColumnMenu: true, display: 'flex', flex: 0.125, minWidth: 80, headerName: 'Role', renderCell: (params) => (_jsx(_Fragment, { children: params.value ? params.value.charAt(0).toUpperCase() + params.value.slice(1) : '' }))
-                },
-                {
-                    field: 'name', filterOperators: getGridStringOperators().filter((operator) => operator.value === 'contains' || operator.value === 'equals'), display: 'flex', flex: 0.400, minWidth: 140, headerName: 'Full name', renderCell: (params) => (_jsx(_Fragment, { children: params.value ? params.value.replace('/', ' ') : '' }))
-                },
-                {
-                    field: 'email', filterOperators: getGridStringOperators().filter((operator) => operator.value === 'contains' || operator.value === 'equals'), display: 'flex', flex: 0.400, minWidth: 180, headerName: 'Email address', renderCell: (params) => (_jsx(_Fragment, { children: params.value }))
-                },
-                {
-                    field: 'lastSignInAt', filterable: false, disableColumnMenu: true, display: 'flex', minWidth: 160, headerName: 'Last Signed In', renderCell: (params) => (_jsx(_Fragment, { children: params.value ? moment(params.value).format('DD/MM/YYYY HH:mm:ss') : '' }))
-                },
-                {
-                    field: 'id', filterable: false, disableExport: true, disableColumnMenu: true, headerName: '', display: 'flex', align: 'right', renderCell: (params) => (_jsxs(Button, { onClick: () => router.push(`/users/${params.value}`), variant: 'contained', color: 'secondary', size: 'small', children: [_jsx(EditIcon, { fontSize: 'small', sx: { mr: 1 } }), " EDIT"] }))
-                }
-            ], rows: usersList, slots: {
-                toolbar: GridToolbar,
+    const handleSortModelChange = (model) => {
+        setSortModel(model);
+        setPaginationModel(prev => ({ ...prev, page: 0 }));
+    };
+    const CustomToolbar = () => (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', p: 1, justifyContent: 'space-between' }, children: _jsx(GridToolbarExport, {}) }));
+    const renderUsersList = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { disableDensitySelector: true, disableColumnSelector: true, disableRowSelectionOnClick: true, onSortModelChange: handleSortModelChange, disableColumnResize: true, columns: columns, rows: usersList, slots: {
+                toolbar: CustomToolbar,
             }, slotProps: {
                 toolbar: {
                     printOptions: { disableToolbarButton: true },
-                    showQuickFilter: true,
+                    showQuickFilter: false,
                 },
-            }, rowCount: userCount, loading: isLoading, pageSizeOptions: [], paginationModel: paginationModel, paginationMode: "server", onPaginationModelChange: setPaginationModel, filterMode: "server", onFilterModelChange: setFilterModel, filterModel: filterModel, ...props }) }));
-    return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsx(Card, { ...containerProps, children: renderUsersList() })) : (_jsx(Box, { ...containerProps, children: renderUsersList() })) });
+            }, rowCount: userCount, loading: isLoading, pageSizeOptions: [], paginationModel: paginationModel, paginationMode: "server", onPaginationModelChange: setPaginationModel, ...props }) }));
+    const renderFilter = () => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', mb: 2 }, children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { shrink: true, id: "filter-by-select-label", children: "Filter by" }), _jsx(Select, { value: selectedFilterType || '', onChange: (e) => setSelectedFilterType(e.target.value), labelId: "filter-by-select-label", label: "Filter by", size: "small", sx: { mr: 2 }, children: Object.entries(filterType).map(([key, label]) => (_jsx(MenuItem, { value: key, children: label }, key))) })] }), _jsx(TextField, { value: selectedFilterValue || "", onChange: (e) => handleFilterModelChange(e.target.value), placeholder: "Search...", size: "small", InputProps: {
+                    endAdornment: selectedFilterValue ? (_jsx(IconButton, { size: "small", onClick: () => handleFilterModelChange(""), children: _jsx(ClearIcon, { fontSize: "small" }) })) : null,
+                } })] }));
+    return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsxs(_Fragment, { children: [renderFilter(), _jsx(Card, { ...containerProps, children: renderUsersList() })] })) : (_jsxs(_Fragment, { children: [renderFilter(), _jsx(Box, { ...containerProps, children: renderUsersList() })] })) });
 };
 export default UsersDataGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview3",
+  "version": "1.0.0-preview31",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",
@@ -19,9 +19,11 @@
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-annotation": "^3.1.0",
     "chartjs-plugin-zoom": "^2.0.1",
-    "firebase": "^10.13.1",
+    "csv-parse": "^5.6.0",
+    "firebase-admin": "^13.4.0",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
+    "lodash.debounce": "^4.0.8",
     "material-ui-confirm": "^3.0.16",
     "moment": "^2.30.1",
     "next": "^14.2.9",
@@ -34,6 +36,7 @@
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.13",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-csv": "^1.1.10",
@@ -42,4 +45,4 @@
     "eslint-config-next": "14.2.9",
     "typescript": "^5"
   }
-}
+}

package/server-actions/annotations.d.ts

@@ -0,0 +1,4 @@
+import { Firestore } from "firebase-admin/firestore";
+export declare const getAnnotations: (db: Firestore, deviceID: number) => Promise<{
+    id: string;
+}[]>;

package/server-actions/annotations.js

@@ -0,0 +1,12 @@
+"use server";
+export const getAnnotations = async (db, deviceID) => {
+    const annotationsRef = db.collection("annotations");
+    const snapshot = await annotationsRef
+        .where("target", "==", deviceID)
+        .orderBy("createdAt", "desc")
+        .get();
+    return snapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data()
+    }));
+};

package/server-actions/groups.d.ts

@@ -1,22 +1,18 @@
-export type FirebaseConfig = {
-    apiKey: string;
-    authDomain: string;
-    projectId: string;
-    storageBucket: string;
-    messagingSenderId: string;
-    appId: string;
-};
-export declare const getGroups: (firebaseConfig: FirebaseConfig, productID: number, userID?: string) => Promise<{
+import { Firestore } from "firebase-admin/firestore";
+export declare const getGroups: (db: Firestore, productID: number, userID?: string, assetID?: string) => Promise<{
     id: string;
 }[]>;
-export declare const getGroupById: (firebaseConfig: FirebaseConfig, id: string) => Promise<{
+export declare const getGroupById: (db: Firestore, id: string) => Promise<{
     id: string;
 }>;
-export declare const createGroup: (firebaseConfig: FirebaseConfig, group: any) => Promise<string>;
-export declare const updateGroup: (firebaseConfig: FirebaseConfig, id: string, group: any) => Promise<any>;
-export declare const deleteGroup: (firebaseConfig: FirebaseConfig, id: string) => Promise<void>;
-export declare const getUsersGroup: (firebaseConfig: FirebaseConfig, groupID: string) => Promise<{
+export declare const createGroup: (db: Firestore, group: any) => Promise<string>;
+export declare const updateGroup: (db: Firestore, id: string, group: any) => Promise<any>;
+export declare const deleteGroup: (db: Firestore, id: string) => Promise<void>;
+export declare const getUsersGroup: (db: Firestore, groupID: string) => Promise<{
     id: string;
 }[]>;
-export declare const addUsersGroup: (firebaseConfig: FirebaseConfig, groupID: string, userName: string, userID: string) => Promise<string>;
-export declare const removeUserGroup: (firebaseConfig: FirebaseConfig, groupID: string, userID: string) => Promise<string | undefined>;
+export declare const getGroupsUser: (db: Firestore, userID: string) => Promise<{
+    id: string;
+}[]>;
+export declare const addUsersGroup: (db: Firestore, groupID: string, userName: string, userID: string) => Promise<string>;
+export declare const removeUserGroup: (db: Firestore, groupID: string, userID: string) => Promise<string | undefined>;

package/server-actions/groups.js

@@ -1,87 +1,86 @@
 "use server";
-import { initializeApp } from "firebase/app";
-import { getDoc, doc, updateDoc, deleteDoc, collection, query, orderBy, getDocs, where, addDoc } from "@firebase/firestore";
-import { getFirestore } from "@firebase/firestore";
-export const getGroups = async (firebaseConfig, productID, userID) => {
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const groupsQuery = query(collection(db, "groups"), where("productID", "==", productID), orderBy("created", "desc"));
+// 1. GET GROUPS
+export const getGroups = async (db, productID, userID, assetID) => {
+    let groupsRef = db.collection("groups").where("productID", "==", productID);
+    if (assetID) {
+        groupsRef = groupsRef.where("assets", "array-contains", assetID);
+    }
+    groupsRef = groupsRef.orderBy("created", "desc");
     let groupIds = null;
     if (userID) {
-        const usersGroupQuery = query(collection(db, "userGroups"), where("user.userId", "==", userID));
-        const userSnapshot = await getDocs(usersGroupQuery);
-        groupIds = userSnapshot.docs.map((ug) => ug.data().groupId);
-    }
-    const groupsSnapshot = await getDocs(groupsQuery);
-    if (groupIds) {
-        return groupsSnapshot.docs
-            .filter((entry) => groupIds?.includes(entry.id))
-            .map((doc) => ({
-            id: doc.id,
-            ...doc.data()
-        }));
+        const userGroupsSnapshot = await db
+            .collection("userGroups")
+            .where("user.userId", "==", userID)
+            .get();
+        groupIds = userGroupsSnapshot.docs.map((doc) => doc.data().groupId);
     }
-    return groupsSnapshot.docs.map((doc) => ({
+    const groupsSnapshot = await groupsRef.get();
+    return groupsSnapshot.docs
+        .filter((doc) => !groupIds || groupIds.includes(doc.id))
+        .map((doc) => ({
         id: doc.id,
         ...doc.data()
     }));
 };
-export const getGroupById = async (firebaseConfig, id) => {
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const groupSnapshot = await getDoc(doc(db, "groups", id));
+// 2. GET GROUP BY ID
+export const getGroupById = async (db, id) => {
+    const docSnapshot = await db.collection("groups").doc(id).get();
     return {
-        id: groupSnapshot.id,
-        ...groupSnapshot.data()
+        id: docSnapshot.id,
+        ...docSnapshot.data()
     };
 };
-export const createGroup = async (firebaseConfig, group) => {
-    const created = new Date().toISOString();
+// 3. CREATE GROUP
+export const createGroup = async (db, group) => {
     const newGroup = {
         ...group,
-        created
+        created: new Date().toISOString()
     };
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const docRef = await addDoc(collection(db, "groups"), newGroup);
+    const docRef = await db.collection("groups").add(newGroup);
     return docRef.id;
 };
-export const updateGroup = async (firebaseConfig, id, group) => {
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const groupRef = doc(db, "groups", id);
-    await updateDoc(groupRef, group);
+// 4. UPDATE GROUP
+export const updateGroup = async (db, id, group) => {
+    await db.collection("groups").doc(id).update(group);
     return group;
 };
-export const deleteGroup = async (firebaseConfig, id) => {
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const usersGroupQuery = query(collection(db, "userGroups"), where("groupId", "==", id));
-    const groupsSnapshot = await getDocs(usersGroupQuery);
-    groupsSnapshot.docs.forEach(async (ug) => {
-        const userGroupRef = doc(db, "userGroups", ug.id);
-        await deleteDoc(userGroupRef);
+// 5. DELETE GROUP
+export const deleteGroup = async (db, id) => {
+    const userGroupsSnapshot = await db
+        .collection("userGroups")
+        .where("groupId", "==", id)
+        .get();
+    const batch = db.batch();
+    userGroupsSnapshot.docs.forEach((doc) => {
+        batch.delete(doc.ref);
     });
-    const groupRef = doc(db, "groups", id);
-    await deleteDoc(groupRef);
+    batch.delete(db.collection("groups").doc(id));
+    await batch.commit();
+};
+// 6. GET USERS GROUP
+export const getUsersGroup = async (db, groupID) => {
+    const snapshot = await db
+        .collection("userGroups")
+        .where("groupId", "==", groupID)
+        .get();
+    return snapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data()
+    }));
 };
-// USERS GROUPS
-export const getUsersGroup = async (firebaseConfig, groupID) => {
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const usersGroupQuery = query(collection(db, "userGroups"), where("groupId", "==", groupID));
-    const groupsSnapshot = await getDocs(usersGroupQuery);
-    return groupsSnapshot.docs.map((doc) => ({
+// 6b. GET GROUPS USER
+export const getGroupsUser = async (db, userID) => {
+    const snapshot = await db
+        .collection("userGroups")
+        .where("user.userId", "==", userID)
+        .get();
+    return snapshot.docs.map((doc) => ({
         id: doc.id,
         ...doc.data()
     }));
 };
-export const addUsersGroup = async (firebaseConfig, groupID, userName, userID) => {
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
+// 7. ADD USER TO GROUP
+export const addUsersGroup = async (db, groupID, userName, userID) => {
     const created = new Date().toISOString();
     const newUserGroup = {
         user: {
@@ -91,19 +90,19 @@ export const addUsersGroup = async (firebaseConfig, groupID, userName, userID) =
         groupId: groupID,
         created
     };
-    const docRef = await addDoc(collection(db, "userGroups"), newUserGroup);
+    const docRef = await db.collection("userGroups").add(newUserGroup);
     return docRef.id;
 };
-export const removeUserGroup = async (firebaseConfig, groupID, userID) => {
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-    const db = getFirestore(app);
-    const usersGroupQuery = query(collection(db, "userGroups"), where("groupId", "==", groupID), where("user.userId", "==", userID));
-    const groupsSnapshot = await getDocs(usersGroupQuery);
-    if (groupsSnapshot.docs[0]) {
-        const userGroupId = groupsSnapshot.docs[0].id;
-        const groupRef = doc(db, "userGroups", userGroupId);
-        await deleteDoc(groupRef);
-        return userGroupId;
+// 8. REMOVE USER FROM GROUP
+export const removeUserGroup = async (db, groupID, userID) => {
+    const snapshot = await db
+        .collection("userGroups")
+        .where("groupId", "==", groupID)
+        .where("user.userId", "==", userID)
+        .get();
+    const doc = snapshot.docs[0];
+    if (doc) {
+        await doc.ref.delete();
+        return doc.id;
     }
 };

package/server-actions/index.d.ts

@@ -2,3 +2,4 @@ export * from "./groups";
 export * from "./influx";
 export * from "./logto";
 export * from "./trackle";
+export * from "./annotations";

package/server-actions/index.js

@@ -3,3 +3,4 @@ export * from "./groups";
 export * from "./influx";
 export * from "./logto";
 export * from "./trackle";
+export * from "./annotations";

package/server-actions/influx.d.ts

@@ -1,13 +1,17 @@
-export type InfluxConfig = {
-    url: string;
-    accessToken: string;
-    bucket: string;
-    orgId: string;
-    measurement: string;
-    dbName: string;
-    username: string;
-    password: string;
-};
-export declare function getInfluxDataV1(influxConfig: InfluxConfig, field: string, timeStart: number, timeEnd: number, deviceID: string, timeGroup: string, raw: boolean): Promise<any>;
-export declare function getManyMeasuresV1(influxConfig: InfluxConfig, fields: string[], limit: number, offset: number, sort: any, deviceID: string, timeStart?: number, timeEnd?: number): Promise<any>;
-export declare function getFirstTimestamp(influxConfig: InfluxConfig, deviceID: string): Promise<any>;
+import { FilterTagMode, InfluxConfig, InfluxFillType } from "./types";
+export declare function getInfluxAlerts(influxConfig: InfluxConfig, fields: string[], limit: number, offset: number, sort: any, filter: {
+    field: string;
+    value: string;
+}, timeStart: number, timeEnd: number, aggregate?: boolean): Promise<any>;
+export declare function getDwSlots(influxConfig: InfluxConfig, timeStart: number, timeEnd: number, filter: {
+    field: string;
+    value: string;
+}): Promise<any>;
+export declare function getInfluxDataV1(influxConfig: InfluxConfig, field: string, timeStart: number, timeEnd: number, filter: {
+    field: string;
+    value: string;
+}, timeGroup: string, raw: boolean, fill?: InfluxFillType, filterTag?: number, tagInclude?: FilterTagMode): Promise<any>;
+export declare function exportDataV1(influxConfig: InfluxConfig, field: string, timeStart: number, timeEnd: number, filter: {
+    field: string;
+    value: string;
+}): Promise<any>;