Merge branch 'master' into DHIS2-14652/feat/details-panel

dhis2 · Nov 21, 2023 · 503cc90 · 503cc90
2 parents 983c653 + db58c2d
commit 503cc90
Show file tree

Hide file tree

Showing 19 changed files with 255 additions and 208 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-10-20T09:42:02.072Z\n"
-"PO-Revision-Date: 2023-10-20T09:42:02.072Z\n"
+"POT-Creation-Date: 2023-11-21T15:50:53.793Z\n"
+"PO-Revision-Date: 2023-11-21T15:50:53.793Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -48,6 +48,15 @@ msgstr "Search for menu items"
 msgid "Search icons"
 msgstr "Search icons"
 
+msgid "Select"
+msgstr "Select"
+
+msgid "Remove icon"
+msgstr "Remove icon"
+
+msgid "Cancel"
+msgstr "Cancel"
+
 msgid "Retry"
 msgstr "Retry"
 
@@ -75,6 +84,9 @@ msgstr "None"
 msgid "Filter legend sets"
 msgstr "Filter legend sets"
 
+msgid "<No value>"
+msgstr "<No value>"
+
 msgid "Option set"
 msgstr "Option set"
 
@@ -108,9 +120,15 @@ msgstr "Short name"
 msgid "Code"
 msgstr "Code"
 
+msgid "Created by"
+msgstr "Created by"
+
 msgid "Created"
 msgstr "Created"
 
+msgid "Last updated by"
+msgstr "Last updated by"
+
 msgid "Last updated"
 msgstr "Last updated"
 
@@ -141,9 +159,6 @@ msgstr "Type to filter options"
 msgid "No matches"
 msgstr "No matches"
 
-msgid "Data set"
-msgstr "Data set"
-
 msgid "Clear all filters"
 msgstr "Clear all filters"
 
@@ -168,9 +183,6 @@ msgstr "Failed to save"
 msgid "Manage {{section}} table columns"
 msgstr "Manage {{section}} table columns"
 
-msgid "Cancel"
-msgstr "Cancel"
-
 msgid "Update table columns"
 msgstr "Update table columns"
 
@@ -246,6 +258,9 @@ msgstr "Data element group set"
 msgid "Data element group sets"
 msgstr "Data element group sets"
 
+msgid "Data set"
+msgstr "Data set"
+
 msgid "Data sets"
 msgstr "Data sets"
 
@@ -585,15 +600,9 @@ msgstr "Image"
 msgid "GeoJSON"
 msgstr "GeoJSON"
 
-msgid "Created by"
-msgstr "Created by"
-
 msgid "Favorite"
 msgstr "Favorite"
 
-msgid "Last updated by"
-msgstr "Last updated by"
-
 msgid "Domain type"
 msgstr "Domain type"
 
@@ -612,6 +621,9 @@ msgstr "Owner"
 msgid "Zero is significant"
 msgstr "Zero is significant"
 
+msgid "Custom attributes"
+msgstr "Custom attributes"
+
 msgid "Something went wrong when submitting the form"
 msgstr "Something went wrong when submitting the form"
 
@@ -688,8 +700,20 @@ msgstr ""
 msgid "Aggregation levels"
 msgstr "Aggregation levels"
 
-msgid "Custom attributes"
-msgstr "Custom attributes"
+msgid ""
+"By default, the aggregation will start at the lowest assigned organisation "
+"unit. If you for example select \"Chiefdom\", it means that \"Chiefdom\", "
+"\"District\" and \"National\" aggregates use \"Chiefdom\" (the highest "
+"aggregation level available) as the data source, and PHU data will not be "
+"included. PHU will still be available for the PHU level, but not included "
+"in the aggregations to the levels above."
+msgstr ""
+"By default, the aggregation will start at the lowest assigned organisation "
+"unit. If you for example select \"Chiefdom\", it means that \"Chiefdom\", "
+"\"District\" and \"National\" aggregates use \"Chiefdom\" (the highest "
+"aggregation level available) as the data source, and PHU data will not be "
+"included. PHU will still be available for the PHU level, but not included "
+"in the aggregations to the levels above."
 
 msgid "Custom fields for your DHIS2 instance"
 msgstr "Custom fields for your DHIS2 instance"

diff --git a/src/components/ColorAndIconPicker/ColorAndIconPicker.tsx b/src/components/ColorAndIconPicker/ColorAndIconPicker.tsx
@@ -17,7 +17,6 @@ export function ColorAndIconPicker({
     return (
         <div className={classes.container}>
             <ColorPicker color={color} onColorPick={onColorPick} />
-
             <IconPicker icon={icon} onIconPick={onIconPick} />
         </div>
     )

diff --git a/src/components/ColorAndIconPicker/ColorPicker.module.css b/src/components/ColorAndIconPicker/ColorPicker.module.css
@@ -3,7 +3,7 @@
     gap: var(--spacers-dp8);
     padding: var(--spacers-dp8);
     border-radius: 3px;
-    border: 1px solid var(--colors-grey600);
+    border: 1px solid var(--colors-grey500);
     background: var(--colors-white);
     width: 68px;
     cursor: pointer;
@@ -15,7 +15,8 @@
     justify-content: center;
     height: 26px;
     width: 26px;
-    border: 1px solid var(--colors-black);
+    border: 1px dashed var(--colors-grey400);
+    border-radius: 2px;
 }
 
 .hasColor .chosenColor {

diff --git a/src/components/ColorAndIconPicker/ColorPicker.tsx b/src/components/ColorAndIconPicker/ColorPicker.tsx
@@ -1,57 +1,10 @@
-import {
-    IconChevronDown16,
-    IconChevronUp16,
-    IconEmptyFrame24,
-    Layer,
-    Popper,
-} from '@dhis2/ui'
+import { IconChevronDown16, IconChevronUp16, Layer, Popper } from '@dhis2/ui'
 import cx from 'classnames'
 import React, { useRef, useState } from 'react'
 import { SwatchesPicker } from 'react-color'
+import { AVAILABLE_COLORS } from './availableColors'
 import classes from './ColorPicker.module.css'
 
-const COLORS = [
-    [
-        '#ffcdd2',
-        '#e57373',
-        '#d32f2f',
-        '#f06292',
-        '#c2185b',
-        '#880e4f',
-        '#f50057',
-    ],
-    [
-        '#e1bee7',
-        '#ba68c8',
-        '#8e24aa',
-        '#aa00ff',
-        '#7e57c2',
-        '#4527a0',
-        '#7c4dff',
-        '#6200ea',
-    ],
-    ['#c5cae9', '#7986cb', '#3949ab', '#304ffe'],
-    ['#e3f2fd', '#64b5f6', '#1976d2', '#0288d1'],
-    ['#40c4ff', '#00b0ff', '#80deea'],
-    ['#00acc1', '#00838f', '#006064'],
-    ['#e0f2f1', '#80cbc4', '#00695c', '#64ffda'],
-    ['#c8e6c9', '#66bb6a', '#2e7d32', '#1b5e20'],
-    ['#00e676', '#aed581', '#689f38', '#33691e'],
-    ['#76ff03', '#64dd17', '#cddc39', '#9e9d24', '#827717'],
-    [
-        '#fff9c4',
-        '#fbc02d',
-        '#f57f17',
-        '#ffff00',
-        '#ffcc80',
-        '#ffccbc',
-        '#ffab91',
-    ],
-    ['#bcaaa4', '#8d6e63', '#4e342e'],
-    ['#fafafa', '#bdbdbd', '#757575', '#424242'],
-    ['#cfd8dc', '#b0bec5', '#607d8b', '#37474f'],
-]
-
 export function ColorPicker({
     onColorPick,
     color = '',
@@ -74,9 +27,7 @@ export function ColorPicker({
                 <div
                     className={classes.chosenColor}
                     style={{ background: color }}
-                >
-                    {!color && <IconEmptyFrame24 />}
-                </div>
+                />
 
                 <div className={classes.openCloseIconContainer}>
                     {showPicker ? <IconChevronUp16 /> : <IconChevronDown16 />}
@@ -88,7 +39,7 @@ export function ColorPicker({
                     <Popper placement="bottom-start" reference={ref}>
                         <div className={classes.colors}>
                             <SwatchesPicker
-                                presetColors={COLORS}
+                                presetColors={AVAILABLE_COLORS}
                                 color={color}
                                 onChangeComplete={({
                                     hex,

diff --git a/src/components/ColorAndIconPicker/IconPicker.module.css b/src/components/ColorAndIconPicker/IconPicker.module.css
@@ -3,7 +3,7 @@
     gap: var(--spacers-dp8);
     padding: var(--spacers-dp8);
     border-radius: 3px;
-    border: 1px solid var(--colors-grey600);
+    border: 1px solid var(--colors-grey500);
     background: var(--colors-white);
     width: 68px;
     cursor: pointer;
@@ -15,7 +15,13 @@
     justify-content: center;
     height: 26px;
     width: 26px;
-    border: 1px solid var(--colors-black);
+    border: 1px dashed var(--colors-grey400);
+    border-radius: 2px;
+}
+
+.hasIcon .chosenIcon {
+    border: 0;
+    border-radius: 0;
 }
 
 .iconImage {
@@ -24,10 +30,6 @@
     height: auto;
 }
 
-.hasIcon .chosenIcon {
-    border: 0;
-}
-
 .openCloseIconContainer {
     display: flex;
     align-items: center;

diff --git a/src/components/ColorAndIconPicker/IconPicker.tsx b/src/components/ColorAndIconPicker/IconPicker.tsx
@@ -1,4 +1,4 @@
-import { IconChevronDown16, IconChevronUp16, IconEmptyFrame24 } from '@dhis2/ui'
+import { IconChevronDown16, IconChevronUp16 } from '@dhis2/ui'
 import cx from 'classnames'
 import React, { useState } from 'react'
 import classes from './IconPicker.module.css'
@@ -25,7 +25,6 @@ export function IconPicker({
                 })}
             >
                 <div className={classes.chosenIcon}>
-                    {!icon && <IconEmptyFrame24 />}
                     {selectedIcon && (
                         <img
                             className={classes.iconImage}
@@ -42,6 +41,7 @@ export function IconPicker({
 
             {showPicker && (
                 <IconPickerModal
+                    selected={icon}
                     onCancel={() => setShowPicker(false)}
                     onChange={({ icon }) => {
                         onIconPick({ icon })

diff --git a/src/components/ColorAndIconPicker/IconPickerModal.tsx b/src/components/ColorAndIconPicker/IconPickerModal.tsx
@@ -19,15 +19,17 @@ import { useIconsQuery, Icon } from './useIconsQuery'
 type TabName = 'all' | 'positive' | 'negative' | 'outline'
 
 export function IconPickerModal({
+    selected,
     onChange,
     onCancel,
 }: {
+    selected: string
     onChange: ({ icon }: { icon: string }) => void
     onCancel: () => void
 }) {
     const [searchValue, setSearchValue] = useState('')
     const [activeTab, setActiveTab] = useState<TabName>('all')
-    const [icon, setIcon] = useState('')
+    const [icon, setIcon] = useState(selected)
     const icons = useIconsQuery()
     const displayIcons = searchValue
         ? filterIcons(icons.data[activeTab], searchValue)
@@ -107,11 +109,15 @@ export function IconPickerModal({
                         disabled={!icon}
                         onClick={() => onChange({ icon })}
                     >
-                        Select
+                        {i18n.t('Select')}
+                    </Button>
+
+                    <Button onClick={() => onChange({ icon: '' })}>
+                        {i18n.t('Remove icon')}
                     </Button>
 
                     <Button secondary onClick={onCancel}>
-                        Cancel
+                        {i18n.t('Cancel')}
                     </Button>
                 </ButtonStrip>
             </ModalActions>

diff --git a/src/components/ColorAndIconPicker/availableColors.ts b/src/components/ColorAndIconPicker/availableColors.ts
@@ -0,0 +1,41 @@
+export const AVAILABLE_COLORS = [
+    [
+        '#ffcdd2',
+        '#e57373',
+        '#d32f2f',
+        '#f06292',
+        '#c2185b',
+        '#880e4f',
+        '#f50057',
+    ],
+    [
+        '#e1bee7',
+        '#ba68c8',
+        '#8e24aa',
+        '#aa00ff',
+        '#7e57c2',
+        '#4527a0',
+        '#7c4dff',
+        '#6200ea',
+    ],
+    ['#c5cae9', '#7986cb', '#3949ab', '#304ffe'],
+    ['#e3f2fd', '#64b5f6', '#1976d2', '#0288d1'],
+    ['#40c4ff', '#00b0ff', '#80deea'],
+    ['#00acc1', '#00838f', '#006064'],
+    ['#e0f2f1', '#80cbc4', '#00695c', '#64ffda'],
+    ['#c8e6c9', '#66bb6a', '#2e7d32', '#1b5e20'],
+    ['#00e676', '#aed581', '#689f38', '#33691e'],
+    ['#76ff03', '#64dd17', '#cddc39', '#9e9d24', '#827717'],
+    [
+        '#fff9c4',
+        '#fbc02d',
+        '#f57f17',
+        '#ffff00',
+        '#ffcc80',
+        '#ffccbc',
+        '#ffab91',
+    ],
+    ['#bcaaa4', '#8d6e63', '#4e342e'],
+    ['#fafafa', '#bdbdbd', '#757575', '#424242'],
+    ['#cfd8dc', '#b0bec5', '#607d8b', '#37474f'],
+]