(PC-30054)[PRO] feat: remove select when only one bank account in Inv…

…oices
pass-culture · Jun 7, 2024 · cfc1389 · cfc1389
1 parent 5992179
commit cfc1389
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 32 deletions.
diff --git a/pro/src/pages/Reimbursements/ReimbursementsInvoices/InvoicesFilters.module.scss b/pro/src/pages/Reimbursements/ReimbursementsInvoices/InvoicesFilters.module.scss
@@ -2,11 +2,24 @@
 @use "styles/mixins/_rem.scss" as rem;
 @use "styles/variables/_size.scss" as size;
 
-.reset-filters {
+.filters {
   margin-top: rem.torem(30px);
+  display: flex;
+  flex-wrap: wrap;
   margin-bottom: rem.torem(36px);
 }
 
+.selectors {
+  flex-grow: 1;
+  justify-content: space-between;
+}
+
+.reset-filters {
+  margin-top: rem.torem(30px);
+  margin-left: auto;
+  align-items: center;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
@@ -52,4 +65,8 @@
       width: 100%;
     }
   }
+
+  .reset-filters {
+    margin-top: 0;
+  }
 }
diff --git a/pro/src/pages/Reimbursements/ReimbursementsInvoices/InvoicesFilters.tsx b/pro/src/pages/Reimbursements/ReimbursementsInvoices/InvoicesFilters.tsx
@@ -84,47 +84,53 @@ export const InvoicesFilters = ({
     <>
       <div className={styles['header']}>
         <h2 className={styles['header-title']}>Affichage des justificatifs</h2>
+      </div>
+
+      <div className={styles['filters']}>
+        <FormLayout.Row inline className={styles['selectors']}>
+          {selectableOptions.length > 1 && (
+            <FieldLayout
+              label="Compte bancaire"
+              name="reimbursementPoint"
+              isOptional
+            >
+              <SelectInput
+                defaultOption={{
+                  label: 'Tous les comptes bancaires',
+                  value: 'all',
+                }}
+                onChange={setReimbursementPointFilter}
+                name="reimbursementPoint"
+                options={selectableOptions}
+                value={selectedReimbursementPoint}
+              />
+            </FieldLayout>
+          )}
+
+          <fieldset>
+            <legend>Période</legend>
+            <PeriodSelector
+              onBeginningDateChange={setStartDateFilter}
+              onEndingDateChange={setEndDateFilter}
+              maxDateEnding={getToday()}
+              periodBeginningDate={selectedPeriodStart}
+              periodEndingDate={selectedPeriodEnd}
+            />
+          </fieldset>
+        </FormLayout.Row>
         <Button
           className={styles['reset-filters']}
           disabled={areFiltersDefault}
           onClick={resetFilters}
           variant={ButtonVariant.TERNARYPINK}
           icon={fullRefreshIcon}
         >
-          Réinitialiser les filtres
+          {selectableOptions.length === 1
+            ? 'Réinitialiser le filtre'
+            : 'Réinitialiser les filtres'}
         </Button>
       </div>
 
-      <FormLayout.Row inline>
-        <FieldLayout
-          label="Compte bancaire"
-          name="reimbursementPoint"
-          isOptional
-        >
-          <SelectInput
-            defaultOption={{
-              label: 'Tous les comptes bancaires',
-              value: 'all',
-            }}
-            onChange={setReimbursementPointFilter}
-            name="reimbursementPoint"
-            options={selectableOptions}
-            value={selectedReimbursementPoint}
-          />
-        </FieldLayout>
-
-        <fieldset>
-          <legend>Période</legend>
-          <PeriodSelector
-            onBeginningDateChange={setStartDateFilter}
-            onEndingDateChange={setEndDateFilter}
-            maxDateEnding={getToday()}
-            periodBeginningDate={selectedPeriodStart}
-            periodEndingDate={selectedPeriodEnd}
-          />
-        </fieldset>
-      </FormLayout.Row>
-
       <div className={styles['button-group']}>
         <div className={styles['button-group-separator']} />
         <div className={styles['button-group-button']}>