Release merge 04 09

.gitignore

@@ -3,6 +3,7 @@
 
 # Dependencies
 node_modules
+yarn.lock
 
 # Build files
 build

Dockerfile

@@ -19,6 +19,8 @@ ARG MATOMO_SITE_ID
 ENV MATOMO_SITE_ID=$MATOMO_SITE_ID
 ARG AIRTABLE_API_KEY
 ENV AIRTABLE_API_KEY=$AIRTABLE_API_KEY
+ARG GIGA_METER_API_HOST
+ENV GIGA_METER_API_HOST=$GIGA_METER_API_HOST
 
 RUN echo $RECAPTCHA_KEY \
         && echo $API_MAPBOX_ACCESS_TOKEN \

azure-pipelines.yml

@@ -69,6 +69,7 @@ steps:
         --build-arg=ENV=$(ENV_DEV)
         --build-arg=MATOMO_SITE_ID=$(MATOMO_SITE_ID_DEV)
         --build-arg=AIRTABLE_API_KEY=$(AIRTABLE_API_KEY)
+        --build-arg=GIGA_METER_API_HOST=$(GIGA_METER_API_HOST_DEV)
       tags: |
         $(tag)
 
@@ -96,6 +97,7 @@ steps:
         --build-arg=ENV=$(ENV_STG)
         --build-arg=MATOMO_SITE_ID=$(MATOMO_SITE_ID_STG)
         --build-arg=AIRTABLE_API_KEY=$(AIRTABLE_API_KEY)
+        --build-arg=GIGA_METER_API_HOST=$(GIGA_METER_API_HOST_STG)
       tags: |
         $(tag)
     condition:
@@ -129,6 +131,7 @@ steps:
         --build-arg=ENV=$(ENV_PROD)
         --build-arg=MATOMO_SITE_ID=$(MATOMO_SITE_ID_PROD)
         --build-arg=AIRTABLE_API_KEY=$(AIRTABLE_API_KEY)
+        --build-arg=GIGA_METER_API_HOST=$(GIGA_METER_API_HOST_PROD)
       tags: |
         $(tag)
     condition:

package.json

@@ -4,6 +4,7 @@
   "author": "doasync",
   "private": true,
   "scripts": {
+    "start:dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/config.dev.ts",
     "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack/config.dev.ts",
     "build": "cross-env NODE_ENV=production webpack --config webpack/config.prod.ts",
     "build-info": "webpack --config webpack/config.info.ts",
@@ -162,6 +163,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^15.0.2",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-perfect-scrollbar": "1.5.8",
     "react-transition-group": "^4.4.5",
     "styled-components": "^6.0.7",

src/@/admin/constants/country-summary.constant.ts

@@ -40,6 +40,7 @@ export const defaultCountryForm = {
   "last_weekly_status": null,
   "date_of_join": null,
   'iso3_format': '',
+  "country_disclaimer": "",
   benchmark_metadata: {
     live_layer: {},
     layer_descriptions: {},

src/@/admin/effects/filter-fx.ts

@@ -1,7 +1,7 @@
 import { createEffect } from "effector"
 import { createRequestAuthFx } from "~/core/auth/effects/common.fx"
 import { APIListType } from "~/api/types"
-import { FilterConfiguration, FilterListType } from "../types/filter-list.type"
+import { ColumnDBChoicesType, FilterConfiguration, FilterListType } from "../types/filter-list.type"
 import { FilterAllValueType } from "../types/filter-list-type"
 
 export const getFilterListFx = createEffect(({ page, pageSize, search }: { page: number, pageSize: number, search?: string }) => {
@@ -61,4 +61,10 @@ export const publishFilterFx = createEffect(({ id }: { id: number }) => {
     method: 'PUT',
     url: `accounts/adv_filters/${id}/publish/`,
   }) as Promise<FilterListType>
-})
+})
+
+export const getFilterChoicesFx = createEffect(({ id }: { id: number }) => {
+  return createRequestAuthFx({
+    url: `accounts/column_configurations/${id}/choices/`,
+  }) as Promise<ColumnDBChoicesType>
+})

src/@/admin/models/filter-list.model.ts

@@ -1,9 +1,9 @@
 import { $notification } from '~/@/common/Toast/toast.model';
 import { $appConfigValues } from '~/@/admin/models/admin-model';
 import { createEvent, createStore, merge, restore, sample } from "effector";
-import { addFilterFx, editFilterFx, filterColumnListFx, getFilterListFx, getFilterListIdFx, getFilterPublishedListFx } from "../effects/filter-fx";
+import { addFilterFx, editFilterFx, filterColumnListFx, getFilterChoicesFx, getFilterListFx, getFilterListIdFx, getFilterPublishedListFx } from "../effects/filter-fx";
 import { setPayload, setPayloadResults } from "~/lib/effector-kit";
-import { FilterConfiguration, FilterListType } from "../types/filter-list.type";
+import { ColumnDBChoicesType, FilterConfiguration, FilterListType } from "../types/filter-list.type";
 import { FilterAllValueType, FilterValueType } from '../types/filter-list-type';
 import { addAdminFilter, editAdminFilter } from '~/core/routes';
 
@@ -27,6 +27,10 @@ export const $filterListCount = createStore(0);
 export const onReloadFilterList = createEvent<object>();
 export const $reloadFiler = restore(onReloadFilterList, null);
 
+export const $columnDBChoices = createStore<ColumnDBChoicesType['values']>([]);
+
+$columnDBChoices.on(getFilterChoicesFx.doneData, (_, payload: ColumnDBChoicesType) => payload?.values ?? []);
+
 $filterListResponse.on(getFilterListFx.doneData, setPayloadResults);
 $filterListCount.on(getFilterListFx.doneData, (_, response) => response?.count || 0);
 
@@ -59,6 +63,8 @@ export const $filterStatusChoices = $appConfigValues.map((config) => {
   }
 })
 
+export const onSetFilterValidationError = createEvent<string>();
+export const $filterValidationError = restore(onSetFilterValidationError, '');
 export const onSetFilterForm = createEvent();
 export const onUdpateFilterForm = createEvent<[string, FilterValueType]>();
 export const $formFilterData = createStore<FilterAllValueType>(defaultFilterData);
@@ -113,4 +119,6 @@ sample({
   clock: addFilterFx.done,
   fn: () => ({ title: 'Created!', kind: 'success', subtitle: 'Filter created successfully' }),
   target: $notification
-})
+})
+
+$filterValidationError.reset(onUdpateFilterForm)

src/@/admin/types/filter-list-type.ts

@@ -9,6 +9,7 @@ export type FilterAllValueType = {
   options: {
     placeholder?: string
     live_choices?: boolean
+    group_choices?: boolean
     range_auto_compute?: boolean
     choices?: { label: string, value: string }[],
     minPlaceholder?: string

src/@/admin/types/filter-list.type.ts

@@ -12,8 +12,16 @@ export interface FilterListType {
   active_countries_list: number[]
 }
 
+export interface ColumnDBChoicesType {
+  values: {
+    label: string
+    value: string
+  }[]
+}
+
 export interface FilterOptionsField {
   live_choices?: boolean
+  group_choices?: boolean
   choices?: { label: string; value: string }[]
   placeholder?: string
   range_auto_compute?: boolean

src/@/admin/ui/common/multi-select-dropdown-adv.tsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Button } from "@carbon/react";
+import { FilterableMultiSelect } from "@carbon/react";
+import styled, { css } from "styled-components";
+import { selectAll } from "@testing-library/user-event/dist/types/event";
+
+// Types
+export interface MultiSelectItem {
+  // id: string | number;
+  // name: string;
+  [key: string]: any; // Allow for additional properties
+}
+
+export interface MultiSelectDropdownAdvProps {
+  items: MultiSelectItem[];
+  onSelectItems: (selectedItems: any[]) => void;
+  initialSelectedItems?: any[];
+  titleText?: string;
+  placeholder?: string;
+  id?: string;
+  name?: string;
+  height?: string;
+  showSelectAllButton?: boolean;
+  selectAllButtonPosition?: "top-right" | "bottom-right" | "bottom-left" | "top-left";
+  disabled?: boolean;
+  theme?: "light" | "dark";
+  customStyles?: React.CSSProperties;
+  itemToElement?: (item: MultiSelectItem) => React.ReactNode;
+  [key: string]: any; // Allow for additional props to be passed
+}
+
+// Styled components with theme support
+interface StyledMultiSelectProps {
+  height?: string;
+  theme?: "light" | "dark";
+}
+
+
+const darkTheme = css`
+    .cds--multi-select {
+
+    background-color: #333333;
+    } 
+    .cds--text-input {
+      color: #c0c0c0;
+    }
+    .cds--text-input::placeholder {
+        color: #c0c0c0;
+        opacity: 0.8;
+    }
+    // .cds--list-box__label {
+    //     color: #c0c0c0;
+    // }
+        .cds--list-box__menu-icon svg {
+        fill: #c0c0c0;
+        }
+ .cds--label {
+    color: #c0c0c0;
+ }
+
+`;
+
+const StyledMultiSelect = styled(FilterableMultiSelect) <StyledMultiSelectProps>`
+  margin-top: 1.5rem;
+
+  .cds--list-box__menu {
+    height: ${(props) => props.height || "8rem"} !important;
+    max-height: 10rem !important;
+    overflow-y: auto;
+  }
+
+  ${(props) => (props.theme === "dark" ? darkTheme : undefined)}
+`;
+
+const MultiSelectContainer = styled.div<{ selectAllButtonPosition?: string }>`
+  width: 100%;
+  position: relative;
+
+  .select-all-button {
+    position: absolute;
+    ${(props) => {
+    switch (props.selectAllButtonPosition) {
+      case "bottom-right":
+        return `
+            bottom: -2.5rem;
+            right: 0;
+          `;
+      case "bottom-left":
+        return `
+            bottom: -2.5rem;
+            left: 0;
+          `;
+      case "top-left":
+        return `
+            top: -0.5rem;
+            left: 0;
+          `;
+      case "top-right":
+      default:
+        return `
+            top: -0.5rem;
+            right: 0;
+          `;
+    }
+  }}
+  }
+`;
+
+/**
+ * Advanced Multi-Select Dropdown component
+ * 
+ */
+export const MultiSelectDropdownAdv: React.FC<MultiSelectDropdownAdvProps> = ({
+  items,
+  onSelectItems,
+  selectedItems,
+  initialSelectedItems = [],
+  titleText = "Select Items",
+  placeholder = "Select Items",
+  id = "multi-select-dropdown",
+  name = "multiSelectDropdown",
+  height = "8rem",
+  showSelectAllButton = true,
+  selectAllButtonPosition = "top-right",
+  disabled = false,
+  theme = "light",
+  customStyles = {},
+  itemToString,
+  itemToElement,
+  ...others
+}) => {
+  const isSelectedAll = selectedItems.length === items.length;
+  // Handle select/clear all functionality
+  const handleSelectAllToggle = () => {
+    if (isSelectedAll) {
+      onSelectItems([]);
+    } else {
+      onSelectItems([...items]);
+    }
+  };
+
+  // Default item renderer if none provided
+  const defaultItemToElement = (item: MultiSelectItem) => (
+    <span>{item?.name}</span>
+  );
+
+  return (
+    <MultiSelectContainer
+      selectAllButtonPosition={selectAllButtonPosition}
+      style={customStyles}
+    >
+      <StyledMultiSelect
+        key={`multi-select-${isSelectedAll}`}
+        height={height}
+        id={id}
+        name={name}
+        titleText={titleText}
+        placeholder={placeholder}
+        items={items}
+        itemToString={itemToString}
+        initialSelectedItems={initialSelectedItems}
+        selectedItems={selectedItems}
+        itemToElement={itemToElement || defaultItemToElement}
+        onChange={({ selectedItems }: { selectedItems: MultiSelectItem[] }) => {
+          onSelectItems(selectedItems);
+        }}
+        disabled={disabled}
+        theme={theme}
+        {...others}
+      />
+
+      {showSelectAllButton && (
+        <Button
+          className="select-all-button"
+          kind="ghost"
+          size="sm"
+          onClick={handleSelectAllToggle}
+          disabled={disabled}
+        >
+          {isSelectedAll ? 'Clear all' : 'Select all'}
+        </Button>
+      )}
+    </MultiSelectContainer>
+  );
+};
+
+export default MultiSelectDropdownAdv;