Merge pull request #146 from carapai/main

Minor bug fixes
HISP-Uganda · May 15, 2024 · 32e135b · 32e135b
2 parents 9f7f2fd + 06452f9
commit 32e135b
Show file tree

Hide file tree

Showing 15 changed files with 444 additions and 375 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "the-visualisation-studio",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "",
     "license": "BSD-3-Clause",
     "private": false,

diff --git a/setupProxy.js b/setupProxy.js
@@ -29,6 +29,8 @@ const options = {
     // target: "https://train.ndpme.go.ug/ndpdb",
     // target: "https://play.im.dhis2.org/dev",
     // target: "https://emisuganda.org/emis",
+    // target: "https://dev.emisuganda.org/emisdev",
+    // target: "https://play.dhis2.org/40.3.0",
     onProxyReq,
     onProxyRes,
     changeOrigin: true, // needed for virtual hosted sites

diff --git a/src/Queries.ts b/src/Queries.ts
@@ -548,6 +548,9 @@ export const useDashboard = (
     action: "view" | "create" | "update" | undefined
 ) => {
     const engine = useDataEngine();
+    const params = {
+        fields: "categories[id,name,shortName,categoryOptions[id,name,startDate,endDate]],categoryOptionCombos[id,categoryOptions]",
+    };
     return useQuery<IDashboard, Error>(
         ["i-dashboards", id],
         async ({ signal }) => {
@@ -563,6 +566,28 @@ export const useDashboard = (
                 dashboardApi.setCurrentDashboard(dashboard);
                 storeApi.changeSelectedDashboard(dashboard.id);
                 storeApi.changeSelectedCategory(dashboard.category || "");
+                if (dashboard.categoryCombo) {
+                    const categoryCombo = await getDHIS2Resource<CategoryCombo>(
+                        {
+                            isCurrentDHIS2: true,
+                            params,
+                            api,
+                            resource: `categoryCombos/${dashboard.categoryCombo}.json`,
+                            engine,
+                        }
+                    );
+
+                    dashboardCategoryComboApi.set(categoryCombo);
+
+                    categoryCombo.categories.forEach((c) => {
+                        const valid = c.categoryOptions.filter(
+                            (a) => a.endDate === undefined
+                        );
+                        attributionApi.add({
+                            [c.id]: valid.map((e) => e.id).join(","),
+                        });
+                    });
+                }
                 return dashboard;
             }
             dashboardTypeApi.set(dashboardType);
@@ -1324,6 +1349,7 @@ const makeSQLViewsQueries = (
             const keys = Object.keys(globalFilters).some(
                 (e) => String(val.value).indexOf(e) !== -1
             );
+
             if (keys) {
                 Object.entries(globalFilters).forEach(
                     ([globalId, globalValue]) => {
@@ -1991,7 +2017,7 @@ export const useVisualization = (
             ...Object.values(overrides),
             ...Object.values(otherFilters || {}),
         ],
-        async ({ signal }) => {
+        async () => {
             return processVisualization(
                 engine,
                 visualization,

diff --git a/src/Store.ts b/src/Store.ts
@@ -3,27 +3,27 @@ import { isEqual, sortBy } from "lodash";
 import { headerHeight, padding, sideWidth } from "./components/constants";
 import { domain } from "./Domain";
 import {
+    CategoryCombo,
     DataNode,
     ICategory,
     IDashboard,
     IDashboardSetting,
     IData,
     IDataSource,
     IIndicator,
+    IPage,
     IPagination,
+    IPresentation,
+    IReport,
     ISection,
     IStore,
+    IUserGroup,
     Option,
     Playlist,
     ScreenSize,
-    IPresentation,
-    IReport,
-    IPage,
-    IUserGroup,
-    CategoryCombo,
 } from "./interfaces";
 import { generateUid } from "./utils/uid";
-import { getRelativePeriods, arrayCombinations } from "./utils/utils";
+import { arrayCombinations, getRelativePeriods } from "./utils/utils";
 export const createSection = (id = generateUid()): ISection => {
     return {
         id,
@@ -90,6 +90,7 @@ export const createPresentation = (id = generateUid()): IPresentation => {
         description: "",
         items: [],
         speed: 1000,
+        autoplaySpeed: 30000,
     };
 };
 
@@ -166,10 +167,8 @@ export const createDashboard = (
         dataSet: "",
         categorization: {},
         availableCategories: [],
-        availableCategoryOptionCombos: [],
         bg: "#CBD5E0",
-        targetCategoryCombo: "",
-        targetCategoryOptionCombos: [],
+        categoryCombo: "",
         nodeSource: {},
         tag: "Example tag",
         type,
@@ -365,28 +364,12 @@ export const $dashboardCategory = combine(
 );
 
 export const $categoryOptionCombo = $dashboard.map(
-    ({
-        availableCategories,
-        categorization,
-        availableCategoryOptionCombos,
-    }) => {
+    ({ availableCategories, categorization }) => {
         const combos: any[] = availableCategories
             .map(({ id }) => categorization[id])
             .filter((v) => !!v);
         let availableCombos: any[] = [];
         let result = { prev: [], current: [] };
-        if (availableCategoryOptionCombos) {
-            availableCombos = availableCategoryOptionCombos.map(
-                ({ categoryOptions, id }: any) => {
-                    return {
-                        id,
-                        categoryOptions: categoryOptions.map(
-                            ({ id }: any) => id
-                        ),
-                    };
-                }
-            );
-        }
 
         if (combos.length === 2) {
             const [{ categoryOptions }] = availableCategories;
@@ -435,32 +418,7 @@ export const $categoryOptionCombo = $dashboard.map(
 );
 
 export const $targetCategoryOptionCombo = $dashboard.map(
-    ({ categorization, availableCategories, targetCategoryOptionCombos }) => {
-        if (
-            availableCategories &&
-            availableCategories.length > 0 &&
-            targetCategoryOptionCombos &&
-            targetCategoryOptionCombos.length > 0
-        ) {
-            const categoryId = availableCategories[0].id;
-            const categories = categorization[categoryId];
-
-            return categories.flatMap(({ value }) => {
-                const targetCOC: any = targetCategoryOptionCombos.find(
-                    ({ categoryOptions }) => {
-                        return (
-                            categoryOptions
-                                .map(({ id }: any) => id)
-                                .join("") === value
-                        );
-                    }
-                );
-                if (targetCOC) {
-                    return [targetCOC.id];
-                }
-                return [];
-            });
-        }
+    ({ categorization, availableCategories }) => {
         return [];
     }
 );
@@ -476,7 +434,6 @@ export const $globalFilters = combine(
             }
             return [period.value];
         });
-        console.log(store.minSublevel);
         let filters: { [key: string]: any } = {
             m5D13FqKZwN: periods,
             GQhi6pRnTKF: [store.levels.sort()[store.levels.length - 1]],

diff --git a/src/components/AdminPanel.tsx b/src/components/AdminPanel.tsx
@@ -14,7 +14,7 @@ import { Modal } from "antd";
 import { useStore } from "effector-react";
 import React, { ChangeEvent, useState } from "react";
 import { dashboardApi, sectionApi, settingsApi, storeApi } from "../Events";
-import { ICategory, IDashboard, LocationGenerics } from "../interfaces";
+import { ICategory, IDashboard, LocationGenerics, Option } from "../interfaces";
 import { saveDocument } from "../Queries";
 import {
     $dashboard,
@@ -27,10 +27,11 @@ import {
 } from "../Store";
 import AutoRefreshPicker from "./AutoRefreshPicker";
 import DashboardFilter from "./DashboardFilter";
-import { CheckboxField, NumberField } from "./fields";
+import { CheckboxField, NumberField, SelectField } from "./fields";
 import ResourceField from "./fields/ResourceField";
 import Picker from "./Picker";
 import Section from "./Section";
+import CategoryComboFilter from "./visualizations/CategoryComboFilter";
 
 export default function AdminPanel() {
     const [loading, setLoading] = useState<boolean>(false);
@@ -300,6 +301,17 @@ export default function AdminPanel() {
                             attribute="excludeFromList"
                         />
                     </Stack>
+                    <CategoryComboFilter
+                        api={null}
+                        isCurrentDHIS2={true}
+                        value={dashboard.categoryCombo}
+                        onChange={(val) =>
+                            dashboardApi.changeAttribute({
+                                attribute: "categoryCombo",
+                                value: val,
+                            })
+                        }
+                    />
                     <Stack>
                         <Text>Filters</Text>
                         <DashboardFilter />

diff --git a/src/components/DashboardTreeCheck.tsx b/src/components/DashboardTreeCheck.tsx
@@ -16,11 +16,11 @@ function RealTree({
 }: {
     dashboards: IDashboard[];
     onChange: (data: DataNode[]) => void;
-    value: { checked: React.Key[]; halfChecked: React.Key[] } | React.Key[];
+    value: DataNode[];
 }) {
-    // const [checkedKeys, setCheckedKeys] = useState<
-    //     { checked: React.Key[]; halfChecked: React.Key[] } | React.Key[]
-    // >(value.map((x: any) => x.key));
+    const [checkedKeys, setCheckedKeys] = useState<
+        { checked: React.Key[]; halfChecked: React.Key[] } | React.Key[]
+    >(value.map((x: any) => x.key));
     const processed = dashboards.map((dashboard) => {
         const dashboardChildren = dashboard.sections.map((section) => {
             const sectionNode: DataNode = {
@@ -64,7 +64,7 @@ function RealTree({
         checkedKeysValue,
         info
     ) => {
-        // setCheckedKeys(checkedKeysValue);
+        setCheckedKeys(checkedKeysValue);
         onChange(info?.checkedNodes.map(({ children, ...rest }) => rest));
     };
     return (
@@ -75,7 +75,7 @@ function RealTree({
             showLine
             selectable={false}
             onCheck={onCheck}
-            checkedKeys={value}
+            checkedKeys={checkedKeys}
             style={{
                 maxHeight: "800px",
                 overflow: "auto",
@@ -89,7 +89,7 @@ export default function DashboardTreeCheck({
     value,
     onChange,
 }: {
-    value: { checked: React.Key[]; halfChecked: React.Key[] } | React.Key[];
+    value: DataNode[];
     onChange: (e: DataNode[]) => void;
 }) {
     const store = useStore($store);

diff --git a/src/components/forms/Presentation.tsx b/src/components/forms/Presentation.tsx
@@ -102,42 +102,80 @@ export default function Presentation() {
                             {errors.name && errors.name.message}
                         </FormErrorMessage>
                     </FormControl>
-                    <Controller
-                        control={control}
-                        name="items"
-                        render={({
-                            field: { onChange, onBlur, value, ref },
-                        }) => (
-                            <DashboardTreeCheck
-                                value={value}
-                                onChange={onChange}
-                            />
-                        )}
-                    />
-                    <Controller
-                        control={control}
-                        name="speed"
-                        render={({
-                            field: { onChange, onBlur, value, ref },
-                        }) => (
-                            <NumberInput
-                                value={value}
-                                // max={}
-                                min={500}
-                                step={100}
-                                size="sm"
-                                onChange={(_, value2: number) =>
-                                    onChange(value2)
-                                }
-                            >
-                                <NumberInputField />
-                                <NumberInputStepper>
-                                    <NumberIncrementStepper />
-                                    <NumberDecrementStepper />
-                                </NumberInputStepper>
-                            </NumberInput>
-                        )}
-                    />
+                    <FormControl isInvalid={!!errors.items}>
+                        <FormLabel htmlFor="description">
+                            Presentation Items
+                        </FormLabel>
+                        <Controller
+                            control={control}
+                            name="items"
+                            render={({ field: { onChange, value } }) => {
+                                return (
+                                    <DashboardTreeCheck
+                                        value={value}
+                                        onChange={onChange}
+                                    />
+                                );
+                            }}
+                        />
+                    </FormControl>
+
+                    <FormControl isInvalid={!!errors.items}>
+                        <FormLabel htmlFor="speed">Animation speed</FormLabel>
+
+                        <Controller
+                            control={control}
+                            name="speed"
+                            render={({ field: { onChange, value } }) => (
+                                <NumberInput
+                                    value={value}
+                                    // max={}
+                                    min={500}
+                                    step={100}
+                                    size="sm"
+                                    onChange={(_, value2: number) =>
+                                        onChange(value2)
+                                    }
+                                >
+                                    <NumberInputField />
+                                    <NumberInputStepper>
+                                        <NumberIncrementStepper />
+                                        <NumberDecrementStepper />
+                                    </NumberInputStepper>
+                                </NumberInput>
+                            )}
+                        />
+                    </FormControl>
+
+                    <FormControl isInvalid={!!errors.items}>
+                        <FormLabel htmlFor="autoplaySpeed">
+                            Autoplay speed
+                        </FormLabel>
+
+                        <Controller
+                            control={control}
+                            name="autoplaySpeed"
+                            render={({ field: { onChange, value } }) => (
+                                <NumberInput
+                                    value={value}
+                                    // max={}
+                                    min={500}
+                                    step={100}
+                                    size="sm"
+                                    onChange={(_, value2: number) =>
+                                        onChange(value2)
+                                    }
+                                >
+                                    <NumberInputField />
+                                    <NumberInputStepper>
+                                        <NumberIncrementStepper />
+                                        <NumberDecrementStepper />
+                                    </NumberInputStepper>
+                                </NumberInput>
+                            )}
+                        />
+                    </FormControl>
+
                     <Stack spacing="30px" direction="row">
                         <Button
                             colorScheme="red"