QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 14:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-10-18 18:12:26 +02:00
parent 40395274d0
commit aff8155bd6
15 changed files with 105 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
packages/webapp/src/components/Currencies/CurrencySelectList.tsx
View File

@@ -1,83 +1,28 @@
// @ts-nocheck // @ts-nocheck
import React, { useCallback, useEffect, useState } from 'react'; import React from 'react';
import { FormattedMessage as T } from '@/components'; import { FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes'; import { FSelect } from '../Forms';
import classNames from 'classnames';
import { MenuItem, Button } from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
/**
* Currency select field.
* @returns {React.ReactNode}
*/
export function CurrencySelectList({ export function CurrencySelectList({
currenciesList, // #ownProps
selectedCurrencyCode, items,
defaultSelectText = <T id={'select_currency_code'} />, name,
onCurrencySelected, placeholder = <T id={'select_currency_code'} />,
popoverFill = false, ...props
disabled = false,
}) { }) {
const [selectedCurrency, setSelectedCurrency] = useState(null);
// Filters currencies list.
const filterCurrencies = (query, currency, _index, exactMatch) => {
const normalizedTitle = currency.currency_code.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return (
`${currency.currency_code} ${normalizedTitle}`.indexOf(
normalizedQuery,
) >= 0
);
}
};
const onCurrencySelect = useCallback((currency) => {
setSelectedCurrency({ ...currency });
onCurrencySelected && onCurrencySelected(currency);
});
const currencyCodeRenderer = useCallback((CurrencyCode, { handleClick }) => {
return (
<MenuItem
key={CurrencyCode.id}
text={CurrencyCode.currency_code}
onClick={handleClick}
/>
);
}, []);
useEffect(() => {
if (typeof selectedCurrencyCode !== 'undefined') {
const currency = selectedCurrencyCode
? currenciesList.find((a) => a.currency_code === selectedCurrencyCode)
: null;
setSelectedCurrency(currency);
}
}, [selectedCurrencyCode, currenciesList, setSelectedCurrency]);
return ( return (
<Select <FSelect
items={currenciesList} name={name}
itemRenderer={currencyCodeRenderer} items={items}
itemPredicate={filterCurrencies} textAccessor={'currency_code'}
onItemSelect={onCurrencySelect} valueAccessor={'id'}
filterable={true} placeholder={placeholder}
popoverProps={{ popoverProps={{ minimal: true, usePortal: true, inline: false }}
minimal: true, {...props}
usePortal: !popoverFill, />
inline: popoverFill,
}}
className={classNames('form-group--select-list', {
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
})}
>
<Button
disabled={disabled}
text={
selectedCurrency ? selectedCurrency.currency_code : defaultSelectText
}
/>
</Select>
); );
} }

63
packages/webapp/src/components/ItemsCategories/CategoriesSelectList.tsx
View File

@@ -1,63 +0,0 @@
// @ts-nocheck
import React, { useCallback } from 'react';
import { FormattedMessage as T } from '@/components';
import { ListSelect } from '@/components';
import { MenuItem } from '@blueprintjs/core';
import { saveInvoke } from '@/utils';
import classNames from 'classnames';
import { CLASSES } from '@/constants/classes';
export function CategoriesSelectList({
categories,
selecetedCategoryId,
defaultSelectText = <T id={'select_category'} />,
onCategorySelected,
popoverFill = false,
className,
...restProps
}) {
// Filter Items Category
const filterItemCategory = (query, item, _index, exactMatch) => {
const normalizedTitle = item.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${item.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
}
};
const handleItemCategorySelected = useCallback(
(ItemCategory) => saveInvoke(onCategorySelected, ItemCategory),
[onCategorySelected],
);
const categoryItem = useCallback(
(item, { handleClick }) => (
<MenuItem key={item.id} text={item.name} onClick={handleClick} />
),
[],
);
return (
<ListSelect
items={categories}
selectedItemProp={'id'}
selectedItem={selecetedCategoryId}
textProp={'name'}
defaultText={defaultSelectText}
onItemSelect={handleItemCategorySelected}
itemPredicate={filterItemCategory}
itemRenderer={categoryItem}
popoverProps={{ minimal: true, usePortal: !popoverFill }}
className={classNames(
'form-group--select-list',
{
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
},
className,
)}
{...restProps}
/>
);
}

2
packages/webapp/src/components/ItemsCategories/index.tsx
View File

@@ -1,2 +0,0 @@
// @ts-nocheck
export * from './CategoriesSelectList';

1
packages/webapp/src/components/index.tsx
View File

@@ -49,7 +49,6 @@ export * from './FlexGrid';
export * from './Menu'; export * from './Menu';
export * from './Icon'; export * from './Icon';
export * from './Items'; export * from './Items';
export * from './ItemsCategories';
export * from './Select'; export * from './Select';
export * from './FormattedMessage'; export * from './FormattedMessage';
export * from './MaterialProgressBar'; export * from './MaterialProgressBar';

34
packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
View File

@@ -39,28 +39,18 @@ export default function CustomerFinancialPanel() {
<Row> <Row>
<Col xs={6}> <Col xs={6}>
{/*------------ Currency -----------*/} {/*------------ Currency -----------*/}
<FastField name={'currency_code'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'currency_code'}
<FormGroup label={<T id={'currency'} />}
label={<T id={'currency'} />} fastField
className={classNames( inline
'form-group--select-list', >
'form-group--balance-currency', <CurrencySelectList
Classes.FILL, name="currency_code"
)} items={currencies}
inline={true} disabled={customerId}
> />
<CurrencySelectList </FFormGroup>
currenciesList={currencies}
selectedCurrencyCode={value}
onCurrencySelected={(currency) => {
form.setFieldValue('currency_code', currency.currency_code);
}}
disabled={customerId}
/>
</FormGroup>
)}
</FastField>
{/*------------ Opening balance -----------*/} {/*------------ Opening balance -----------*/}
<CustomerOpeningBalanceField /> <CustomerOpeningBalanceField />

7
packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
View File

@@ -124,10 +124,15 @@ function CustomerFormFormik({
} }
export const CustomerFormHeaderPrimary = styled.div` export const CustomerFormHeaderPrimary = styled.div`
--x-border: #e4e4e4;
.bp4-dark & {
--x-border: var(--color-dark-gray3);
}
padding: 10px 0 0; padding: 10px 0 0;
margin: 0 0 20px; margin: 0 0 20px;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #e4e4e4; border-bottom: 1px solid var(--x-border);
max-width: 1000px; max-width: 1000px;
`; `;

32
packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
View File

@@ -39,27 +39,17 @@ export default function VendorFinanicalPanelTab() {
<Row> <Row>
<Col xs={6}> <Col xs={6}>
{/*------------ Currency -----------*/} {/*------------ Currency -----------*/}
<FastField name={'currency_code'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'currency_code'}
<FormGroup label={<T id={'currency'} />}
label={<T id={'currency'} />} fastField
className={classNames( inline
'form-group--select-list', >
'form-group--balance-currency', <CurrencySelectList
Classes.FILL, name="currency_code"
)} items={currencies}
inline={true} />
> </FFormGroup>
<CurrencySelectList
currenciesList={currencies}
selectedCurrencyCode={value}
onCurrencySelected={(currency) => {
form.setFieldValue('currency_code', currency.currency_code);
}}
/>
</FormGroup>
)}
</FastField>
{/*------------ Opening balance -----------*/} {/*------------ Opening balance -----------*/}
<VendorOpeningBalanceField /> <VendorOpeningBalanceField />

7
packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
View File

@@ -138,10 +138,15 @@ function VendorFormFormik({
} }
export const VendorFormHeaderPrimary = styled.div` export const VendorFormHeaderPrimary = styled.div`
--x-color-border: #e4e4e4;
.bp4-dark & {
--x-color-border: var(--color-dark-gray3);
}
padding: 10px 0 0; padding: 10px 0 0;
margin: 0 0 20px; margin: 0 0 20px;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #e4e4e4; border-bottom: 1px solid var(--x-color-border);
max-width: 1000px; max-width: 1000px;
`; `;

5
packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
View File

@@ -58,6 +58,7 @@ function VendorFormPrimarySection() {
> >
<FInputGroup name={'company_name'} /> <FInputGroup name={'company_name'} />
</FFormGroup> </FFormGroup>
{/*----------- Display Name -----------*/} {/*----------- Display Name -----------*/}
<FFormGroup <FFormGroup
name={'display_name'} name={'display_name'}
@@ -68,8 +69,8 @@ function VendorFormPrimarySection() {
<Hint /> <Hint />
</> </>
} }
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)} fastField
inline={true} inline
> >
<DisplayNameList <DisplayNameList
name={'display_name'} name={'display_name'}

6
packages/webapp/src/style/_variables.scss
View File

@@ -110,6 +110,9 @@ $ns: bp4;
--color-datatable-empty-status-title: #2c3a5d; --color-datatable-empty-status-title: #2c3a5d;
--color-datatable-empty-status-description: #1f3255; --color-datatable-empty-status-description: #1f3255;
--color-dashboard-card-background: #fff;
--color-dashboard-card-border: #d2dce2;
// Sidebar // Sidebar
--color-sidebar-toggle: #6b8193; --color-sidebar-toggle: #6b8193;
--color-sidebar-background: #01115e; --color-sidebar-background: #01115e;
@@ -401,6 +404,9 @@ body.bp4-dark {
--color-datatable-empty-status-title: var(--color-light-gray4); --color-datatable-empty-status-title: var(--color-light-gray4);
--color-datatable-empty-status-description: var(--color-light-gray5); --color-datatable-empty-status-description: var(--color-light-gray5);
--color-dashboard-card-background: var(--color-dark-gray1);
--color-dashboard-card-border: var(--color-dark-gray3);
// Sidebar // Sidebar
--color-sidebar-toggle: rgba(255, 255, 255, 0.5); --color-sidebar-toggle: rgba(255, 255, 255, 0.5);
--color-sidebar-background: var(--color-dark-gray3); --color-sidebar-background: var(--color-dark-gray3);

20
packages/webapp/src/style/components/PageForm.scss
View File

@@ -5,25 +5,23 @@
.page-form { .page-form {
--color-page-form-header-background: #fff; --color-page-form-header-background: #fff;
--color-page-form-header-border: #d2dce2; --color-page-form-header-border: #d2dce2;
--color-page-form-floating-actions-background: #fff;
--color-page-form-floating-actions-border: rgb(210, 221, 226);
--color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
:global(.bp4-dark) & { .bp4-dark & {
--color-page-form-header-background: var(--color-dark-gray1); --color-page-form-header-background: var(--color-dark-gray1);
--color-page-form-header-border: rgba(255, 255, 255, 0.1); --color-page-form-header-border: rgba(255, 255, 255, 0.1);
--color-page-form-floating-actions-background: var(--color-dark-gray1);
--color-page-form-floating-actions-border: var(--color-dark-gray4);
--color-page-form-floating-actions-shadow: vargba(0, 0, 0, 0.05);
} }
$self: '.page-form'; $self: '.page-form';
padding-bottom: 20px; padding-bottom: 20px;
&__floating-actions { &__floating-actions {
--color-page-form-floating-actions-background: #fff;
--color-page-form-floating-actions-border: rgb(210, 221, 226);
--color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
:global(.bp4-dark) & {
--color-page-form-floating-actions-background: var(--color-dark-gray1);
--color-page-form-floating-actions-border: var(--color-dark-gray5);
--color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
}
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;

8
packages/webapp/src/style/pages/Customers/Form.scss
View File

@@ -4,6 +4,12 @@
$self: '.page-form'; $self: '.page-form';
padding: 20px; padding: 20px;
--x-color-tabs-border: #f0f0f0;
.bp4-dark & {
--x-color-tabs-border: var(--color-dark-gray3);
}
#{$self}__header { #{$self}__header {
padding: 0; padding: 0;
} }
@@ -136,7 +142,7 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background: #f0f0f0; background: var(--x-color-tabs-border);
} }
> *:not(:last-child) { > *:not(:last-child) {

4
packages/webapp/src/style/pages/Dashboard/Dashboard.scss
View File

@@ -498,8 +498,8 @@ $dashboard-views-bar-height: 44px;
} }
&__card { &__card {
border: 1px solid #d2dce2; border: 1px solid var(--color-dashboard-card-border);
background: #fff; background: var(--color-dashboard-card-background);
&--page { &--page {
flex: 1 0 0; flex: 1 0 0;

12
packages/webapp/src/style/pages/Items/Form.scss
View File

@@ -3,6 +3,14 @@
$self: '.page-form'; $self: '.page-form';
padding: 20px; padding: 20px;
--x-header-border: #eaeaea;
--x-section-border: #eaeaea;
.bp4-dark & {
--x-header-border: var(--color-dark-gray3);
--x-section-border: var(--color-dark-gray3);
}
#{$self}__header { #{$self}__header {
padding: 0; padding: 0;
} }
@@ -10,7 +18,7 @@
overflow: hidden; overflow: hidden;
padding-top: 5px; padding-top: 5px;
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid var(--x-header-border);
padding-bottom: 5px; padding-bottom: 5px;
max-width: 1000px; max-width: 1000px;
} }
@@ -66,7 +74,7 @@
} }
&--selling-cost { &--selling-cost {
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid var(--x-section-border);
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
} }

21
packages/webapp/src/style/pages/Vendors/Form.scss
View File

@@ -4,6 +4,16 @@
$self: '.page-form'; $self: '.page-form';
padding: 20px; padding: 20px;
--x-border: #e4e4e4;
--x-color-tabs-border: #f0f0f0;
--x-color-tabs-tab-item-text: #888;
.bp4-dark & {
--x-border: var(--color-dark-gray3);
--x-color-tabs-border: var(--color-dark-gray3);
--x-color-tabs-tab-item-text: var(--color-light-gray1);
}
#{$self}__header { #{$self}__header {
padding: 0; padding: 0;
} }
@@ -11,7 +21,7 @@
padding: 10px 0 0; padding: 10px 0 0;
margin: 0 0 20px; margin: 0 0 20px;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #e4e4e4; border-bottom: 1px solid var(--x-border);
max-width: 1000px; max-width: 1000px;
} }
@@ -136,7 +146,7 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background: #f0f0f0; background: var(--x-color-tabs-border);
} }
> *:not(:last-child) { > *:not(:last-child) {
@@ -145,7 +155,7 @@
&.bp4-large > .bp4-tab { &.bp4-large > .bp4-tab {
font-size: 15px; font-size: 15px;
color: #555; color: var(--x-color-tabs-tab-item-text);
&[aria-selected='true'], &[aria-selected='true'],
&:not([aria-disabled='true']):hover { &:not([aria-disabled='true']):hover {
@@ -154,9 +164,4 @@
} }
} }
} }
#{$self}__floating-actions {
// margin-left: -40px;
// margin-right: -40px;
}
} }