@iapps/ng-dhis2-ui 1.2.113 → 1.2.114

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/iapps-ng-dhis2-ui.mjs +65 -157
  2. package/fesm2022/iapps-ng-dhis2-ui.mjs.map +1 -1
  3. package/index.d.ts +10 -8
  4. package/package.json +1 -1
package/fesm2022/iapps-ng-dhis2-ui.mjs CHANGED
@@ -7636,6 +7636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
7636
7636
  // Use of this source code is governed by a BSD-style
7637
7637
  // license that can be found in the LICENSE file.
7638
7638
 
7639
+ /* eslint-disable @angular-eslint/component-selector */
7639
7640
  class SelectionFiltersComponent extends ReactWrapperModule {
7640
7641
  constructor() {
7641
7642
  super(...arguments);
@@ -7650,20 +7651,9 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7650
7651
  const [selected, setSelected] = useState([]);
7651
7652
  const [rootOrgUnits, setRootOrgUnits] = useState();
7652
7653
  const [config, setConfig] = useState();
7653
- // TODO: START::: Improve approach on handling observables
7654
- // useEffect(() => {
7655
- // zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
7656
- // next: ([appConfig, rootOrgUnits]) => {
7657
- // setConfig(appConfig);
7658
- // setRootOrgUnits(rootOrgUnits);
7659
- // },
7660
- // error: (error) => console.error(error),
7661
- // });
7662
- // }, []);
7663
- // TODO: END::: Improve approach on handling observables
7664
7654
  useEffect(() => {
7665
7655
  const subscription = zip(this.getAppConfig(), this.getRootOrgUnits())
7666
- .pipe(take(1)) // Ensures only one emission
7656
+ .pipe(take(1))
7667
7657
  .subscribe({
7668
7658
  next: ([appConfig, rootOrgUnits]) => {
7669
7659
  setConfig(appConfig);
@@ -7671,9 +7661,7 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7671
7661
  },
7672
7662
  error: (error) => console.error(error),
7673
7663
  });
7674
- return () => {
7675
- subscription.unsubscribe(); // Cleanup to avoid memory leaks
7676
- };
7664
+ return () => subscription.unsubscribe();
7677
7665
  }, []);
7678
7666
  return config
7679
7667
  ? React__default.createElement(Provider, {
@@ -7681,7 +7669,7 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7681
7669
  plugin: false,
7682
7670
  parentAlertsAdd: undefined,
7683
7671
  showAlertsInPlugin: false,
7684
- children: React__default.createElement(Modal$1, { position: 'middle', large: true }, React__default.createElement(ModalTitle$1, null, 'Organisation unit'), React__default.createElement(ModalContent$1, null, React__default.createElement(OrgUnitDimension, {
7672
+ children: React__default.createElement(Modal$1, { position: 'middle', large: true }, React__default.createElement(ModalTitle$1, null, this.orgUnitFieldTitle ? this.orgUnitFieldTitle : 'Organisation Unit'), React__default.createElement(ModalContent$1, null, React__default.createElement(OrgUnitDimension, {
7685
7673
  selected: selected,
7686
7674
  hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect,
7687
7675
  hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect,
@@ -7692,16 +7680,10 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7692
7680
  orgUnitGroupPromise: this.getOrgUnitGroups(),
7693
7681
  orgUnitLevelPromise: this.getOrgUnitLevels(),
7694
7682
  roots: rootOrgUnits,
7695
- })), React__default.createElement(ModalActions$1, null, React__default.createElement(ButtonStrip$1, { end: true }, React__default.createElement(Button$1, {
7696
- onClick: () => {
7697
- onCancelOrgUnit();
7698
- },
7699
- }, 'Cancel'), React__default.createElement(Button$1, {
7683
+ })), React__default.createElement(ModalActions$1, null, React__default.createElement(ButtonStrip$1, { end: true }, React__default.createElement(Button$1, { onClick: onCancelOrgUnit }, 'Cancel'), React__default.createElement(Button$1, {
7700
7684
  primary: true,
7701
7685
  disabled: selected.length === 0,
7702
- onClick: () => {
7703
- onSelectOrgUnit(selected);
7704
- },
7686
+ onClick: () => onSelectOrgUnit(selected),
7705
7687
  }, 'Confirm')))),
7706
7688
  })
7707
7689
  : React__default.createElement(CircularLoader$1, { small: true });
@@ -7714,8 +7696,9 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7714
7696
  allowSingleSelection: true,
7715
7697
  usageType: 'DATA_ENTRY',
7716
7698
  };
7717
- this.selectedOrgUnit = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrgUnit" }] : []));
7718
- this.selectedOrgUnit$ = toObservable(this.selectedOrgUnit);
7699
+ // Renamed to avoid shadowing the @Input
7700
+ this.selectedOrgUnitSignal = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrgUnitSignal" }] : []));
7701
+ this.selectedOrgUnit$ = toObservable(this.selectedOrgUnitSignal);
7719
7702
  this.SelectionFiltersUI = () => {
7720
7703
  const [filters, setFilters] = useState({
7721
7704
  programAttributesFilters: this.programAttributesFilters || [],
@@ -7733,6 +7716,28 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7733
7716
  const [value, setValue] = useState(null);
7734
7717
  const [showMoreFilters, setShowMoreFilters] = useState(false);
7735
7718
  const toggleMoreFilters = () => setShowMoreFilters((prev) => !prev);
7719
+ useEffect(() => {
7720
+ const su = this.selectedOrgUnit;
7721
+ if (su) {
7722
+ if (typeof su === 'object') {
7723
+ const id = su.id ?? su.uid ?? su.code ?? su.value ?? undefined;
7724
+ if (su.name) {
7725
+ setDisplayValue(su.name);
7726
+ }
7727
+ if (id) {
7728
+ setSelectedOrganisationUnit(id);
7729
+ setFilters((prev) => ({ ...prev, organisationUnit: id }));
7730
+ setValue(id);
7731
+ }
7732
+ }
7733
+ else if (typeof su === 'string') {
7734
+ setSelectedOrganisationUnit(su);
7735
+ setFilters((prev) => ({ ...prev, organisationUnit: su }));
7736
+ setDisplayValue(su);
7737
+ setValue(su);
7738
+ }
7739
+ }
7740
+ }, [this.selectedOrgUnit]);
7736
7741
  useEffect(() => {
7737
7742
  setFilters({
7738
7743
  programAttributesFilters: this.programAttributesFilters,
@@ -7747,6 +7752,8 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7747
7752
  this.programStageDataElementFilters,
7748
7753
  this.startDate,
7749
7754
  this.endDate,
7755
+ this.program,
7756
+ this.organisationUnit,
7750
7757
  ]);
7751
7758
  const handleAttributeChange = (index, selectedValue) => {
7752
7759
  setFilters((prevFilters) => {
@@ -7785,62 +7792,36 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7785
7792
  const getAttributeColumnSpan = (index) => {
7786
7793
  const totalItems = filters.programAttributesFilters.length;
7787
7794
  if (totalItems <= 4) {
7788
- if (totalItems === 1) {
7795
+ if (totalItems === 1)
7789
7796
  return 'span 4';
7790
- }
7791
- if (totalItems === 2) {
7797
+ if (totalItems === 2)
7792
7798
  return 'span 2';
7793
- }
7794
- if (totalItems === 3) {
7795
- return 'span 1';
7796
- }
7797
- if (totalItems === 4) {
7798
- return 'span 1';
7799
- }
7799
+ return 'span 1';
7800
7800
  }
7801
7801
  else {
7802
- const rowIndex = Math.floor(index / 2);
7803
- if (index % 2 === 0) {
7802
+ if (index % 2 === 0)
7804
7803
  return 'span 2';
7805
- }
7806
- else if (index === totalItems - 1) {
7804
+ if (index === totalItems - 1)
7807
7805
  return 'span 4';
7808
- }
7809
- else {
7810
- return 'span 2';
7811
- }
7806
+ return 'span 2';
7812
7807
  }
7813
- return 'span 1';
7814
7808
  };
7815
7809
  const getDataElementColumnSpan = (index) => {
7816
7810
  const totalItems = filters.programStageDataElementFilters.length;
7817
7811
  if (totalItems <= 4) {
7818
- if (totalItems === 1) {
7812
+ if (totalItems === 1)
7819
7813
  return 'span 4';
7820
- }
7821
- if (totalItems === 2) {
7814
+ if (totalItems === 2)
7822
7815
  return 'span 2';
7823
- }
7824
- if (totalItems === 3) {
7825
- return 'span 1';
7826
- }
7827
- if (totalItems === 4) {
7828
- return 'span 1';
7829
- }
7816
+ return 'span 1';
7830
7817
  }
7831
7818
  else {
7832
- const rowIndex = Math.floor(index / 2);
7833
- if (index % 2 === 0) {
7819
+ if (index % 2 === 0)
7834
7820
  return 'span 2';
7835
- }
7836
- else if (index === totalItems - 1) {
7821
+ if (index === totalItems - 1)
7837
7822
  return 'span 4';
7838
- }
7839
- else {
7840
- return 'span 2';
7841
- }
7823
+ return 'span 2';
7842
7824
  }
7843
- return 'span 1';
7844
7825
  };
7845
7826
  return React__default.createElement('div', {
7846
7827
  style: {
@@ -7853,40 +7834,32 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7853
7834
  }, React__default.createElement('div', {
7854
7835
  style: {
7855
7836
  display: 'grid',
7856
- gridTemplateColumns: '1fr 1fr 1fr auto', // Ensure proper button sizing
7837
+ gridTemplateColumns: '1fr 1fr 1fr auto',
7857
7838
  gap: '16px',
7858
- alignItems: 'center', // Align inputs and button on the same row
7839
+ // 👇 Bottom-align everything in the row so labels don't push inputs higher than the button
7840
+ alignItems: 'end',
7859
7841
  marginBottom: '16px',
7860
7842
  },
7861
7843
  },
7862
- /* Organization Unit Selector */
7844
+ // Organization Unit
7863
7845
  React__default.createElement('div', { style: { width: '100%' } }, React__default.createElement(InputField$1, {
7864
7846
  value: displayValue,
7865
- label: 'Organization Unit',
7847
+ label: this.orgUnitFieldTitle ? this.orgUnitFieldTitle : 'Organisation Unit',
7866
7848
  readOnly: false,
7867
7849
  onFocus: () => setShowOrgUnit(true),
7868
- onBlur: () => {
7869
- setTouched(true);
7870
- },
7871
7850
  }), showOrgUnit &&
7872
7851
  React__default.createElement(this.FieldOrgUnitSelector, {
7873
- onCancelOrgUnit: () => {
7874
- setShowOrgUnit(false);
7875
- setTouched(true);
7876
- },
7852
+ onCancelOrgUnit: () => setShowOrgUnit(false),
7877
7853
  onSelectOrgUnit: (selectedOrgUnits) => {
7878
7854
  if ((selectedOrgUnits || [])[0]) {
7879
7855
  const selectedOrgUnit = selectedOrgUnits[0];
7880
7856
  setDisplayValue(selectedOrgUnit.name);
7881
- setSelected(selectedOrgUnit.id);
7882
7857
  setSelectedOrganisationUnit(selectedOrgUnit.id);
7883
- setValue(selectedOrgUnit.id);
7884
7858
  setShowOrgUnit(false);
7885
- setTouched(true);
7886
7859
  }
7887
7860
  },
7888
7861
  })),
7889
- /* Start Date */
7862
+ // Start Date
7890
7863
  React__default.createElement(InputField$1, {
7891
7864
  className: 'input-field',
7892
7865
  label: 'Start Date',
@@ -7894,7 +7867,7 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7894
7867
  value: filters.startDate,
7895
7868
  onChange: (event) => setFilters({ ...filters, startDate: event.value }),
7896
7869
  }),
7897
- /* End Date */
7870
+ // End Date
7898
7871
  React__default.createElement(InputField$1, {
7899
7872
  className: 'input-field',
7900
7873
  label: 'End Date',
@@ -7902,84 +7875,15 @@ class SelectionFiltersComponent extends ReactWrapperModule {
7902
7875
  value: filters.endDate,
7903
7876
  onChange: (event) => setFilters({ ...filters, endDate: event.value }),
7904
7877
  }),
7905
- /* Toggle Button with Hidden Label */
7878
+ // Action Button (same line, bottom-aligned)
7906
7879
  React__default.createElement('div', {
7907
7880
  style: {
7908
7881
  display: 'flex',
7909
- flexDirection: 'column',
7910
- alignItems: 'center',
7911
- justifyContent: 'center',
7912
- height: '100%',
7882
+ justifyContent: 'flex-end',
7883
+ // 👇 Ensure this cell itself bottoms out in the grid row
7884
+ alignSelf: 'end',
7913
7885
  },
7914
- }, React__default.createElement('label', {
7915
- style: {
7916
- color: 'transparent', // Hides label text but keeps spacing
7917
- fontSize: '14px',
7918
- marginBottom: '4px',
7919
- },
7920
- }, 'Toggle'), React__default.createElement(Button$1, {
7921
- style: { height: '40px' }, // Match input field height
7922
- onClick: () => setShowMoreFilters(!showMoreFilters),
7923
- }, showMoreFilters ? 'Hide Filters' : 'More Filters')), showMoreFilters &&
7924
- React__default.createElement(React__default.Fragment, null,
7925
- /* Attribute Filters Grid */
7926
- React__default.createElement('div', {
7927
- style: {
7928
- display: 'grid',
7929
- gridTemplateColumns: 'repeat(4, 1fr)',
7930
- gap: '16px',
7931
- },
7932
- }, filters.programAttributesFilters.map((filter, index) => React__default.createElement('div', {
7933
- key: index,
7934
- style: { gridColumn: getAttributeColumnSpan(index) },
7935
- }, filter.hasOptions && filter.options.length > 0
7936
- ? React__default.createElement(SingleSelectField, {
7937
- className: 'single-select',
7938
- label: filter.name || 'Select Option',
7939
- selected: filter.value,
7940
- onChange: (event) => handleAttributeChange(index, event.selected),
7941
- }, filter.options.map((option, i) => React__default.createElement(SingleSelectOption, {
7942
- key: crypto.randomUUID() || i,
7943
- label: option.name,
7944
- value: option.code,
7945
- })))
7946
- : React__default.createElement(InputField$1, {
7947
- className: 'input-field',
7948
- label: filter.name || 'Program name',
7949
- type: filter.valueType,
7950
- value: filter.value,
7951
- onChange: (event) => handleAttributeChange(index, event.value),
7952
- })))),
7953
- /* Data Element Filters Grid */
7954
- React__default.createElement('div', {
7955
- style: {
7956
- display: 'grid',
7957
- gridTemplateColumns: 'repeat(4, 1fr)',
7958
- gap: '16px',
7959
- },
7960
- }, filters.programStageDataElementFilters.map((filter, index) => React__default.createElement('div', {
7961
- key: index,
7962
- style: { gridColumn: getDataElementColumnSpan(index) },
7963
- }, filter.hasOptions && filter.options.length > 0
7964
- ? React__default.createElement(SingleSelectField, {
7965
- className: 'single-select',
7966
- label: filter.name || 'Aggregation type',
7967
- selected: filter.value,
7968
- onChange: (event) => handleDataElementChange(index, event.selected),
7969
- }, filter.options.map((option, i) => React__default.createElement(SingleSelectOption, {
7970
- key: crypto.randomUUID() || i,
7971
- label: option.name,
7972
- value: option.code,
7973
- })))
7974
- : React__default.createElement(InputField$1, {
7975
- className: 'input-field',
7976
- type: filter.valueType,
7977
- label: filter.name || 'Program name',
7978
- value: filter.value,
7979
- onChange: (event) => handleDataElementChange(index, event.value),
7980
- })))),
7981
- /* Search Button */
7982
- React__default.createElement('div', { style: { textAlign: 'right', marginTop: '16px' } }, React__default.createElement(Button$1, { onClick: handleSearch }, 'Search')))));
7886
+ }, React__default.createElement(Button$1, { style: { height: '40px' }, onClick: handleSearch }, 'Generate Report'))));
7983
7887
  };
7984
7888
  }
7985
7889
  async getAppConfig() {
@@ -8014,7 +7918,7 @@ class SelectionFiltersComponent extends ReactWrapperModule {
8014
7918
  onSelectOrgUnit(selectedOrgUnits) {
8015
7919
  this.showOrgUnitTree.set(false);
8016
7920
  if ((selectedOrgUnits || [])[0]) {
8017
- this.selectedOrgUnit.set(selectedOrgUnits[0]);
7921
+ this.selectedOrgUnitSignal.set(selectedOrgUnits[0]);
8018
7922
  }
8019
7923
  }
8020
7924
  getOrgUnitAttributeByUsage(usageType) {
@@ -8035,11 +7939,11 @@ class SelectionFiltersComponent extends ReactWrapperModule {
8035
7939
  this.render();
8036
7940
  }
8037
7941
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
8038
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", programAttributesFilters: "programAttributesFilters", programStageDataElementFilters: "programStageDataElementFilters", startDate: "startDate", endDate: "endDate", program: "program", organisationUnit: "organisationUnit" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }); }
7942
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", programAttributesFilters: "programAttributesFilters", programStageDataElementFilters: "programStageDataElementFilters", startDate: "startDate", endDate: "endDate", program: "program", organisationUnit: "organisationUnit", selectedOrgUnit: "selectedOrgUnit", orgUnitFieldTitle: "orgUnitFieldTitle" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}.clickable-field input{cursor:pointer!important}\n"] }); }
8039
7943
  }
8040
7944
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersComponent, decorators: [{
8041
7945
  type: Component,
8042
- args: [{ selector: 'app-selection-filters-ui', template: '<ng-content></ng-content>', standalone: false, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }]
7946
+ args: [{ selector: 'app-selection-filters-ui', template: '<ng-content></ng-content>', standalone: false, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}.clickable-field input{cursor:pointer!important}\n"] }]
8043
7947
  }], propDecorators: { actionOptions: [{
8044
7948
  type: Input
8045
7949
  }], programAttributesFilters: [{
@@ -8054,6 +7958,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
8054
7958
  type: Input
8055
7959
  }], organisationUnit: [{
8056
7960
  type: Input
7961
+ }], selectedOrgUnit: [{
7962
+ type: Input
7963
+ }], orgUnitFieldTitle: [{
7964
+ type: Input
8057
7965
  }], actionSelected: [{
8058
7966
  type: Output
8059
7967
  }] } });