Merge pull request #3330 from NCI-Agency/GH-3235-enhance-person-view-…

…and-anet-responsive Enhance person view and make ANET more responsive
NCI-Agency · Mar 30, 2021 · 7bf0253 · 7bf0253
2 parents 3664279 + 30b6597
commit 7bf0253
Show file tree

Hide file tree

Showing 23 changed files with 1,446 additions and 874 deletions.
diff --git a/anet-dictionary.yml b/anet-dictionary.yml
@@ -329,6 +329,8 @@ fields:
     firstName: First name
     lastName: Last name
     domainUsername: Domain username
+    position: Current Position
+    prevPositions: Previous Positions
     emailAddress:
       label: Email
       placeholder: Only the following email domain names are allowed. ( example.com, cmil.mil, mission.ita, nato.int, *.isaf.nato.int )
@@ -398,6 +400,7 @@ fields:
         app6Modifier: K
     gender: Gender
     endOfTourDate: End of tour
+    biography: Biography
     customFields:
       multipleButtons:
         type: enumset
@@ -728,7 +731,30 @@ fields:
       countries: [Albania , Armenia, Australia, Austria, Azerbaijan, Belgium, Bosnia-Herzegovina, Bulgaria, Croatia, Czech Republic, Denmark, Estonia, Finland,
                   Georgia, Germany, Greece, Hungary, Iceland, Italy, Latvia, Lithuania, Luxembourg, Macedonia, Mongolia, Montenegro, Netherlands, New Zealand,
                   Norway, Poland, Portugal, Romania, Slovakia, Slovenia, Spain, Sweden, Turkey, Ukraine, United Kingdom, United States of America]
-
+      # number of fields after Avatar in the left column for advisors
+      # adjust this number if two columns are not balanced on the Person Page
+      numberOfFieldsInLeftColumn: 6
+      # select and order person fields (including custom fields)
+      showPageOrderedFields:
+        - position
+        - prevPositions
+        - domainUsername
+        - emailAddress
+        - multipleButtons
+        - inputFieldName
+        - phoneNumber
+        - country
+        - colourOptions
+        - textareaFieldName
+        - code
+        - rank
+        - numberFieldName
+        - nlt
+        - nlt_dt
+        - gender
+        - endOfTourDate
+        - biography
+        - arrayFieldName
     position:
       name: NATO Billet
       type: ANET User
@@ -842,7 +868,30 @@ fields:
                 yes:
                   label: 👍
                   color: '#0000ff'
-
+      # number of fields after Avatar in the left column for principals
+      # adjust this number if two columns are not balanced on the Person Page
+      numberOfFieldsInLeftColumn: 6
+      # select and order person fields (including custom fields)
+      showPageOrderedFields:
+        - position
+        - prevPositions
+        - phoneNumber
+        - country
+        - colourOptions
+        - textareaFieldName
+        - domainUsername
+        - emailAddress
+        - multipleButtons
+        - inputFieldName
+        - code
+        - rank
+        - numberFieldName
+        - nlt
+        - nlt_dt
+        - gender
+        - endOfTourDate
+        - biography
+        - arrayFieldName
     position:
       name: Afghan Tashkil
       type: Afghan Partner

diff --git a/client/src/components/AdvancedSearch.js b/client/src/components/AdvancedSearch.js
@@ -1,6 +1,7 @@
 import { Classes, Menu, MenuItem } from "@blueprintjs/core"
 import { Popover2, Popover2InteractionKind } from "@blueprintjs/popover2"
 import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"
+import styled from "@emotion/styled"
 import { resetPagination, SEARCH_OBJECT_LABELS, setSearchQuery } from "actions"
 import ButtonToggleGroup from "components/ButtonToggleGroup"
 import RemoveButton from "components/RemoveButton"
@@ -99,22 +100,10 @@ const AdvancedSearch = ({
         <div className="advanced-search form-horizontal">
           <Form onSubmit={onSubmit}>
             <FormGroup>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  flexWrap: "nowrap",
-                  padding: "10px"
-                }}
-              >
+              <ButtonGroupContainerS>
                 <ButtonToggleGroup
                   value={objectType}
                   onChange={changeObjectType}
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    flexWrap: "nowrap"
-                  }}
                 >
                   {possibleFilterTypes.map(type => (
                     <Button
@@ -129,6 +118,8 @@ const AdvancedSearch = ({
 
                 <div
                   style={{
+                    display: "flex",
+                    alignItems: "center",
                     visibility:
                       possibleFilterTypes.length > 1 && objectType
                         ? "visible"
@@ -142,7 +133,7 @@ const AdvancedSearch = ({
                     buttonStyle="link"
                   />
                 </div>
-              </div>
+              </ButtonGroupContainerS>
             </FormGroup>
 
             <FormControl defaultValue={text} className="hidden" />
@@ -344,10 +335,10 @@ const SearchFilter = ({
 
   return (
     <FormGroup controlId={queryKey}>
-      <Col sm={3} lg={2} componentClass={ControlLabel}>
+      <Col xs={12} sm={3} lg={2} componentClass={ControlLabel}>
         {label}
       </Col>
-      <Col sm={8} lg={9}>
+      <Col xs={10} sm={8} lg={9}>
         <div>
           <ChildComponent
             value={filter.value || ""}
@@ -357,7 +348,7 @@ const SearchFilter = ({
           />
         </div>
       </Col>
-      <Col sm={1} lg={1}>
+      <Col xs={1} sm={1} lg={1}>
         <RemoveButton
           title="Remove this filter"
           altText="Remove this filter"
@@ -387,3 +378,24 @@ SearchFilter.propTypes = {
     props: PropTypes.object
   })
 }
+
+const ButtonGroupContainerS = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 10px;
+
+  & > .btn-group {
+    display: flex;
+    flex-direction: row;
+  }
+
+  @media (max-width: 768px) {
+    & > .btn-group {
+      display: flex;
+      flex-wrap: wrap;
+      & > * {
+        flex: 1 1 auto;
+      }
+    }
+  }
+`