From 5e06de508dea2edcc65e72dfc03c0acb61f6ff9f Mon Sep 17 00:00:00 2001 From: Sylvain Date: Tue, 26 Jan 2021 11:37:05 +0100 Subject: [PATCH] interface to filter list of schedules --- .../javascript/components/labelled-input.tsx | 22 +++++++++ .../components/payment-schedules-list.tsx | 27 ++++++++++- app/frontend/src/stylesheets/application.scss | 2 + .../stylesheets/modules/labelled-input.scss | 48 +++++++++++++++++++ .../modules/payment-schedules-list.scss | 8 ++++ config/locales/app.admin.en.yml | 5 ++ config/locales/app.admin.fr.yml | 5 ++ 7 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 app/frontend/src/javascript/components/labelled-input.tsx create mode 100644 app/frontend/src/stylesheets/modules/labelled-input.scss create mode 100644 app/frontend/src/stylesheets/modules/payment-schedules-list.scss diff --git a/app/frontend/src/javascript/components/labelled-input.tsx b/app/frontend/src/javascript/components/labelled-input.tsx new file mode 100644 index 000000000..6714c436a --- /dev/null +++ b/app/frontend/src/javascript/components/labelled-input.tsx @@ -0,0 +1,22 @@ +/** + * This component shows input field with its label, styled + */ + +import React from 'react'; + +interface LabelledInputProps { + id: string, + type: string, + label: string, + value: any, + onChange: (value: any) => void +} + +export const LabelledInput: React.FC = ({ id, type, label, value, onChange }) => { + return ( +
+ + +
+ ); +} diff --git a/app/frontend/src/javascript/components/payment-schedules-list.tsx b/app/frontend/src/javascript/components/payment-schedules-list.tsx index 276a05cb8..7b7f21472 100644 --- a/app/frontend/src/javascript/components/payment-schedules-list.tsx +++ b/app/frontend/src/javascript/components/payment-schedules-list.tsx @@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next'; import { Loader } from './loader'; import { react2angular } from 'react2angular'; import PaymentScheduleAPI from '../api/payment-schedule'; +import { LabelledInput } from './labelled-input'; declare var Application: IApplication; @@ -15,13 +16,37 @@ const paymentSchedulesList = PaymentScheduleAPI.list({ query: { page: 1, size: 2 const PaymentSchedulesList: React.FC = () => { const { t } = useTranslation('admin'); + const [referenceFilter, setReferenceFilter] = useState(''); + const [customerFilter, setCustomerFilter] = useState(''); + const [dateFilter, setDateFilter] = useState(null); const paymentSchedules = paymentSchedulesList.read(); return (
+

+ + {t('app.admin.invoices.payment_schedules.filter_schedules')} +

+
+ + + +
    - {paymentSchedules.map(p => `
  • ${p.reference}
    • `)} + {paymentSchedules.map(p =>
  • {p.reference}
    • )}
); diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss index 0097bf975..814f37643 100644 --- a/app/frontend/src/stylesheets/application.scss +++ b/app/frontend/src/stylesheets/application.scss @@ -25,5 +25,7 @@ @import "modules/payment-schedule-summary"; @import "modules/wallet-info"; @import "modules/stripe-modal"; +@import "modules/labelled-input"; +@import "modules/payment-schedules-list"; @import "app.responsive"; diff --git a/app/frontend/src/stylesheets/modules/labelled-input.scss b/app/frontend/src/stylesheets/modules/labelled-input.scss new file mode 100644 index 000000000..3f8381b4d --- /dev/null +++ b/app/frontend/src/stylesheets/modules/labelled-input.scss @@ -0,0 +1,48 @@ +.input-with-label { + position: relative; + display: inline-table; + border-collapse: separate; + box-sizing: border-box; + + label.label { + padding: 6px 12px; + font-size: 16px; + font-weight: 400; + line-height: 1; + color: #555555; + text-align: center; + background-color: #eeeeee; + border: 1px solid #c4c4c4; + border-radius: 4px 0 0 4px; + width: 1%; + white-space: nowrap; + vertical-align: middle; + display: table-cell; + box-sizing: border-box; + border-right: 0; + } + + input.input { + padding: 6px 12px; + height: 38px; + font-size: 16px; + line-height: 1.5; + border: 1px solid #c4c4c4; + border-radius: 0 4px 4px 0; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + display: table-cell; + position: relative; + z-index: 2; + float: left; + width: 100%; + margin: 0; + box-sizing: border-box; + + &:focus { + border-color: #fdde3f; + outline: 0; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(253, 222, 63, .6); + } + } +} diff --git a/app/frontend/src/stylesheets/modules/payment-schedules-list.scss b/app/frontend/src/stylesheets/modules/payment-schedules-list.scss new file mode 100644 index 000000000..858794e35 --- /dev/null +++ b/app/frontend/src/stylesheets/modules/payment-schedules-list.scss @@ -0,0 +1,8 @@ +.schedules-filters { + display: flex; + justify-content: space-between; + + & > * { + width: 31%; + } +} diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index 958341564..acb7f4dda 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -640,6 +640,11 @@ en: currency_info_html: "Please specify below the currency used for online payment. You should provide a three-letter ISO code, from the list of Stripe supported currencies." currency_alert_html: "Warning: the currency cannot be changed after the first online payment was made. Please define this setting carefully before opening Fab-manager to your members." stripe_currency: "Stripe currency" + payment_schedules: + filter_schedules: "Filter schedules" + reference: "Reference" + customer: "Customer" + date: "Date" #management of users, labels, groups, and so on members: users_management: "Users management" diff --git a/config/locales/app.admin.fr.yml b/config/locales/app.admin.fr.yml index 1566c0b9e..538de78af 100644 --- a/config/locales/app.admin.fr.yml +++ b/config/locales/app.admin.fr.yml @@ -640,6 +640,11 @@ fr: currency_info_html: "Veuillez indiquer la devise à utiliser lors des paiements en ligne. Vous devez fournir un code ISO à trois lettres, issu de la liste des devises supportées par Stripe." currency_alert_html: "Attention : la devise ne peut pas être modifiée après que le premier paiement en ligne ait été effectué. Veuillez définir attentivement ce paramètre avant d'ouvrir Fab-manager à vos membres." stripe_currency: "Devise Stripe" + payment_schedules: + filter_schedules: "Filtrer les échéanciers" + reference: "Référence" + customer: "Client" + date: "Date" #management of users, labels, groups, and so on members: users_management: "Gestion des utilisateurs"