rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-18 07:52:23 +01:00
Code Issues Releases Activity

(feat) Add characters count to form input

Browse Source
This commit is contained in:
vincent 2023-01-12 17:55:46 +01:00 committed by Sylvain
parent 7edec2bd69
commit a0508e689e
5 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/frontend/src/javascript/components/form/form-input.tsx
View File

@ -1,4 +1,4 @@
import { ReactNode, useCallback } from 'react';
import { ReactNode, useCallback, useState } from 'react';
import * as React from 'react';
import { FieldPathValue } from 'react-hook-form';
import { debounce as _debounce } from 'lodash';
@ -29,6 +29,8 @@ interface FormInputProps<TFieldValues, TInputType> extends FormComponent<TFieldV
* This component is a template for an input component to use within React Hook Form
*/
export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, register, label, tooltip, defaultValue, icon, className, rules, disabled, type, addOn, addOnAction, addOnClassName, addOnAriaLabel, placeholder, error, warning, formState, step, onChange, debounce, accept, nullable = false, ariaLabel, maxLength }: FormInputProps<TFieldValues, TInputType>) => {
const [characterCount, setCharacterCount] = useState(0);
/**
* Debounced (ie. temporised) version of the 'on change' callback.
*/
@ -38,6 +40,7 @@ export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, re
* Handle the change of content in the input field, and trigger the parent callback, if any
*/
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setCharacterCount(e.currentTarget.value.length);
if (typeof onChange === 'function') {
if (debouncedOnChange) {
debouncedOnChange(e);
@ -74,6 +77,7 @@ export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, re
accept={accept}
maxLength={maxLength} />
{(type === 'file' && placeholder) && <span className='fab-button is-black file-placeholder'>{placeholder}</span>}
{maxLength && <span className='countdown'>{characterCount} / {maxLength}</span>}
{addOn && addOnAction && <button aria-label={addOnAriaLabel} type="button" onClick={addOnAction} className={`addon ${addOnClassName || ''} is-btn`}>{addOn}</button>}
{addOn && !addOnAction && <span aria-label={addOnAriaLabel} className={`addon ${addOnClassName || ''}`}>{addOn}</span>}
</AbstractFormItem>

2
app/frontend/src/javascript/components/trainings/trainings.tsx
View File

@ -57,7 +57,7 @@ export const Trainings: React.FC<TrainingsProps> = () => {
return (
<div className='trainings'>
<header>
<h2>{t('app.admin.trainings.trainings')}</h2>
<h2>{t('app.admin.trainings.all_trainings')}</h2>
<div className='grpBtn'>
<FabButton className="main-action-btn" onClick={newTraining}>{t('app.admin.trainings.add_a_new_training')}</FabButton>
</div>

13
app/frontend/src/stylesheets/modules/form/abstract-form-item.scss
View File

@ -31,8 +31,8 @@
&-field {
min-height: 4rem;
display: grid;
grid-template-areas: "icon field addon";
grid-template-columns: min-content minmax(0, 1fr) min-content;
grid-template-areas: "icon field countdown addon";
grid-template-columns: min-content minmax(0, 1fr) max-content min-content;
background-color: var(--gray-soft-lightest);
border: 1px solid var(--gray-soft-dark);
border-radius: var(--border-radius);
@ -74,6 +74,15 @@
}
}
.countdown {
grid-area: countdown;
padding: 0 1.6rem 0 0.8rem;
display: flex;
align-items: center;
@include text-sm;
color: var(--gray-hard-lightest);
}
button.addon {
border: 0;
}

2
app/frontend/templates/admin/trainings/index.html
View File

@ -36,7 +36,7 @@
<uib-tab heading="{{ 'app.admin.trainings.trainings_settings' | translate }}" index="1" class="manage-trainings">
<trainings-settings on-error="onError" on-success="on-success"></trainings-settings>
</uib-tab>
<uib-tab heading="{{ 'app.admin.trainings.trainings' | translate }}" index="0" class="manage-trainings">
<uib-tab heading="{{ 'app.admin.trainings.all_trainings' | translate }}" index="0" class="manage-trainings">
<trainings on-error="onError" on-success="on-success"></trainings>
<div class="m-t m-b">

2
config/locales/app.admin.en.yml
View File

@ -402,7 +402,7 @@ en:
trainings:
trainings_monitoring: "Trainings monitoring"
plan_session: "Schedule a new session"
trainings: "Trainings"
all_trainings: "All trainings"
add_a_new_training: "Add a new training"
name: "Training name"
associated_machines: "Associated machines"