QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 04:40:32 +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
import React, { useCallback, useEffect, useState } from 'react';
import React from 'react';
import { FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes';
import classNames from 'classnames';
import { MenuItem, Button } from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import { FSelect } from '../Forms';
/**
* Currency select field.
* @returns {React.ReactNode}
*/
export function CurrencySelectList({
currenciesList,
selectedCurrencyCode,
defaultSelectText = <T id={'select_currency_code'} />,
onCurrencySelected,
popoverFill = false,
disabled = false,
// #ownProps
items,
name,
placeholder = <T id={'select_currency_code'} />,
...props
}) {
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 (
<Select
items={currenciesList}
itemRenderer={currencyCodeRenderer}
itemPredicate={filterCurrencies}
onItemSelect={onCurrencySelect}
filterable={true}
popoverProps={{
minimal: true,
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>
<FSelect
name={name}
items={items}
textAccessor={'currency_code'}
valueAccessor={'id'}
placeholder={placeholder}
popoverProps={{ minimal: true, usePortal: true, inline: false }}
{...props}
/>
);
}

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 './Icon';
export * from './Items';
export * from './ItemsCategories';
export * from './Select';
export * from './FormattedMessage';
export * from './MaterialProgressBar';

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

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

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

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

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

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

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

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

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

@@ -58,6 +58,7 @@ function VendorFormPrimarySection() {
>
<FInputGroup name={'company_name'} />
</FFormGroup>
{/*----------- Display Name -----------*/}
<FFormGroup
name={'display_name'}
@@ -68,8 +69,8 @@ function VendorFormPrimarySection() {
<Hint />
</>
}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
inline={true}
fastField
inline
>
<DisplayNameList
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-description: #1f3255;
--color-dashboard-card-background: #fff;
--color-dashboard-card-border: #d2dce2;
// Sidebar
--color-sidebar-toggle: #6b8193;
--color-sidebar-background: #01115e;
@@ -401,6 +404,9 @@ body.bp4-dark {
--color-datatable-empty-status-title: var(--color-light-gray4);
--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
--color-sidebar-toggle: rgba(255, 255, 255, 0.5);
--color-sidebar-background: var(--color-dark-gray3);

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

@@ -5,25 +5,23 @@
.page-form {
--color-page-form-header-background: #fff;
--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-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';
padding-bottom: 20px;
&__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;
bottom: 0;
width: 100%;

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

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

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

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

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

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

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

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