Merge pull request #6171 from espoon-voltti/application-employee-reor…

…der-unit-preferences Lisätty palveluohjaukselle mahdollisuus muuttaa hakemuksen hakutoiveiden järjestystä
espoon-voltti · Dec 23, 2024 · 2db1167 · 2db1167
2 parents 82c49dc + 7cbe86f
commit 2db1167
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/frontend/src/employee-frontend/components/application-page/ApplicationEditView.tsx b/frontend/src/employee-frontend/components/application-page/ApplicationEditView.tsx
@@ -9,6 +9,7 @@ import { Link } from 'react-router'
 import styled from 'styled-components'
 
 import { Result, wrapResult } from 'lib-common/api'
+import { swapElements } from 'lib-common/array'
 import DateRange from 'lib-common/date-range'
 import {
   Address,
@@ -41,6 +42,8 @@ import { defaultMargins, Gap } from 'lib-components/white-space'
 import colors from 'lib-customizations/common'
 import { featureFlags } from 'lib-customizations/employee'
 import {
+  faArrowDown,
+  faArrowUp,
   faChild,
   faExclamationTriangle,
   faFileAlt,
@@ -84,6 +87,11 @@ const SubRadios = styled.div`
   margin-bottom: ${defaultMargins.s};
   margin-left: ${defaultMargins.XL};
 `
+const PreferredUnitGridContainer = styled.div`
+  display: inline-grid;
+  grid-column-gap: ${defaultMargins.s};
+  grid-template-columns: 1fr auto auto auto auto;
+`
 
 export default React.memo(function ApplicationEditView({
   application,
@@ -718,9 +726,38 @@ export default React.memo(function ApplicationEditView({
               <InputWarning text={i18n.application.preferences.unitMismatch} />
             ) : null}
             {preferredUnits.map((unit, i) => (
-              <HorizontalContainer key={unit.id}>
+              <PreferredUnitGridContainer key={unit.id}>
                 <Link to={`/units/${unit.id}`}>{`${i + 1}. ${unit.name}`}</Link>
-                <Gap size="s" horizontal />
+                <Button
+                  appearance="inline"
+                  icon={faArrowUp}
+                  text={i18n.application.preferences.moveUp}
+                  onClick={() =>
+                    setApplication(
+                      set(
+                        'form.preferences.preferredUnits',
+                        swapElements(preferredUnits, i, i - 1)
+                      )
+                    )
+                  }
+                  disabled={i == 0}
+                  data-qa="button-move-up-preferred-unit"
+                />
+                <Button
+                  appearance="inline"
+                  icon={faArrowDown}
+                  text={i18n.application.preferences.moveDown}
+                  onClick={() =>
+                    setApplication(
+                      set(
+                        'form.preferences.preferredUnits',
+                        swapElements(preferredUnits, i, i + 1)
+                      )
+                    )
+                  }
+                  disabled={i == preferredUnits.length - 1}
+                  data-qa="button-move-down-preferred-unit"
+                />
                 <Button
                   appearance="inline"
                   icon={faTimes}
@@ -737,15 +774,14 @@ export default React.memo(function ApplicationEditView({
                 />
                 {!preferencesInUnitsList.some(({ id }) => id === unit.id) ? (
                   <>
-                    <Gap size="s" horizontal />
                     <FontAwesomeIcon
                       size="sm"
                       icon={faExclamationTriangle}
                       color={colors.status.warning}
                     />
                   </>
                 ) : null}
-              </HorizontalContainer>
+              </PreferredUnitGridContainer>
             ))}
           </VerticalContainer>
         </ListGrid>

diff --git a/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx b/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx
@@ -486,6 +486,8 @@ export const fi = {
     preferences: {
       title: 'Hakutoive',
       preferredUnits: 'Hakutoiveet',
+      moveUp: 'Siirrä ylös',
+      moveDown: 'Siirrä alas',
       missingPreferredUnits: 'Valitse vähintään yksi hakutoive',
       unitMismatch: 'Hakutoiveet eivät vastaa haettavia yksiköitä',
       unitsOnMap: 'Yksiköt kartalla',