QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 12:50:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimize: style dashboard topbar.

Browse Source 
fix: seed view roles relations.
fix: stopped all resources reducers temp.
fix: stopped filter dropdown component temp.
This commit is contained in:
Ahmed Bouhuolia
2020-10-18 00:31:02 +02:00
parent f211950c7f
commit 00ba1bb75e
8 changed files with 260 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

409
client/src/components/FilterDropdown.js
View File

@@ -42,212 +42,221 @@ export default function FilterDropdown({
refetchDebounceWait = 10,
initialCondition,
}) {
const { formatMessage } = useIntl();
const fieldsKeyMapped = new Map(fields.map((field) => [field.key, field]));
const conditionalsItems = useMemo(
() => [
{ value: 'and', label: formatMessage({ id: 'and' }) },
{ value: 'or', label: formatMessage({ id: 'or' }) },
],
[formatMessage],
);
const resourceFields = useMemo(
() => [
...fields.map((field) => ({
value: field.key,
label: field.label_name,
})),
],
[fields],
);
const defaultFilterCondition = useMemo(
() => ({
condition: 'and',
field_key: initialCondition.fieldKey,
comparator: initialCondition.comparator,
value: initialCondition.value,
}),
[fields],
);
const { setFieldValue, getFieldProps, values } = useFormik({
enableReinitialize: true,
initialValues: {
conditions: [defaultFilterCondition],
},
});
const onClickNewFilter = useCallback(() => {
if (values.conditions.length >= 12) {
limitToast = Toaster.show(
{
message: formatMessage({ id: 'you_reached_conditions_limit' }),
intent: Intent.WARNING,
},
limitToast,
);
} else {
setFieldValue('conditions', [
...values.conditions,
last(values.conditions),
]);
}
}, [values, defaultFilterCondition, setFieldValue]);
const filteredFilterConditions = useMemo(() => {
const requiredProps = ['field_key', 'condition', 'comparator', 'value'];
const conditions = values.conditions.filter(
(condition) => !checkRequiredProperties(condition, requiredProps),
);
return uniqueMultiProps(conditions, requiredProps);
}, [values.conditions]);
const prevConditions = usePrevious(filteredFilterConditions);
const onFilterChangeThrottled = useRef(
debounce((conditions) => {
onFilterChange && onFilterChange(conditions);
}, refetchDebounceWait),
);
useEffect(() => {
if (!isEqual(prevConditions, filteredFilterConditions) && prevConditions) {
onFilterChange && onFilterChange(filteredFilterConditions);
}
}, [filteredFilterConditions, prevConditions]);
// Handle click remove condition.
const onClickRemoveCondition = (index) => () => {
if (values.conditions.length === 1) {
setFieldValue('conditions', [defaultFilterCondition]);
return;
}
const conditions = [...values.conditions];
conditions.splice(index, 1);
setFieldValue('conditions', [...conditions]);
};
// Transform dynamic value field.
const transformValueField = (value) => {
if (value instanceof Date) {
return moment(value).format('YYYY-MM-DD');
} else if (typeof value === 'object') {
return value.id;
}
return value;
};
// Override getFieldProps for conditions fields.
const fieldProps = (name, index) => {
const override = {
...getFieldProps(`conditions[${index}].${name}`),
};
return {
...override,
onChange: (e) => {
if (name === 'field_key') {
const currentField = fieldsKeyMapped.get(
values.conditions[index].field_key,
);
const nextField = fieldsKeyMapped.get(e.currentTarget.value);
if (currentField.data_type !== nextField.data_type) {
setFieldValue(`conditions[${index}].value`, '');
}
const comparatorsObs = getConditionTypeCompatators(nextField.data_type);
const currentCompatator = values.conditions[index].comparator;
if (!currentCompatator || comparatorsObs.map(c => c.value).indexOf(currentCompatator) === -1) {
const defaultCompatator = getConditionDefaultCompatator(nextField.data_type);
setFieldValue(`conditions[${index}].comparator`, defaultCompatator.value);
}
}
override.onChange(e);
},
};
};
// Compatator field props.
const comparatorFieldProps = (name, index) => {
const condition = values.conditions[index];
const field = fieldsKeyMapped.get(condition.field_key);
return {
...fieldProps(name, index),
dataType: field.data_type,
};
};
// Value field props.
const valueFieldProps = (name, index) => {
const condition = values.conditions[index];
const field = fieldsKeyMapped.get(condition.field_key);
return {
...fieldProps(name, index),
dataType: field.data_type,
resourceKey: field.resource_key,
options: field.options,
dataResource: field.data_resource,
onChange: (value) => {
const transformedValue = transformValueField(value);
setFieldValue(`conditions[${index}].${name}`, transformedValue);
},
};
};
return (
<div class="filter-dropdown">
<div class="filter-dropdown__body">
{values.conditions.map((condition, index) => (
<div class="filter-dropdown__condition">
<FormGroup className={'form-group--condition'}>
<HTMLSelect
options={conditionalsItems}
className={Classes.FILL}
disabled={index > 1}
{...fieldProps('condition', index)}
/>
</FormGroup>
<FormGroup className={'form-group--field'}>
<HTMLSelect
options={resourceFields}
value={1}
className={Classes.FILL}
{...fieldProps('field_key', index)}
/>
</FormGroup>
<FormGroup className={'form-group--comparator'}>
<DynamicFilterCompatatorField
className={Classes.FILL}
{...comparatorFieldProps('comparator', index)}
/>
</FormGroup>
<DynamicFilterValueField {...valueFieldProps('value', index)} />
<Button
icon={<Icon icon="times" iconSize={14} />}
minimal={true}
onClick={onClickRemoveCondition(index)}
/>
</div>
))}
</div>
<div class="filter-dropdown__footer">
<Button
minimal={true}
intent={Intent.PRIMARY}
onClick={onClickNewFilter}
>
<T id={'new_conditional'} />
</Button>
</div>
</div>
);
// const { formatMessage } = useIntl();
// const fieldsKeyMapped = new Map(fields.map((field) => [field.key, field]));
// const conditionalsItems = useMemo(
// () => [
// { value: 'and', label: formatMessage({ id: 'and' }) },
// { value: 'or', label: formatMessage({ id: 'or' }) },
// ],
// [formatMessage],
// );
// const resourceFields = useMemo(
// () => [
// ...fields.map((field) => ({
// value: field.key,
// label: field.label_name,
// })),
// ],
// [fields],
// );
// const defaultFilterCondition = useMemo(
// () => ({
// condition: 'and',
// field_key: initialCondition.fieldKey,
// comparator: initialCondition.comparator,
// value: initialCondition.value,
// }),
// [fields],
// );
// const { setFieldValue, getFieldProps, values } = useFormik({
// enableReinitialize: true,
// initialValues: {
// conditions: [defaultFilterCondition],
// },
// });
// const onClickNewFilter = useCallback(() => {
// if (values.conditions.length >= 12) {
// limitToast = Toaster.show(
// {
// message: formatMessage({ id: 'you_reached_conditions_limit' }),
// intent: Intent.WARNING,
// },
// limitToast,
// );
// } else {
// setFieldValue('conditions', [
// ...values.conditions,
// last(values.conditions),
// ]);
// }
// }, [values, defaultFilterCondition, setFieldValue]);
// const filteredFilterConditions = useMemo(() => {
// const requiredProps = ['field_key', 'condition', 'comparator', 'value'];
// const conditions = values.conditions.filter(
// (condition) => !checkRequiredProperties(condition, requiredProps),
// );
// return uniqueMultiProps(conditions, requiredProps);
// }, [values.conditions]);
// const prevConditions = usePrevious(filteredFilterConditions);
// const onFilterChangeThrottled = useRef(
// debounce((conditions) => {
// onFilterChange && onFilterChange(conditions);
// }, refetchDebounceWait),
// );
// useEffect(() => {
// if (!isEqual(prevConditions, filteredFilterConditions) && prevConditions) {
// onFilterChange && onFilterChange(filteredFilterConditions);
// }
// }, [filteredFilterConditions, prevConditions]);
// // Handle click remove condition.
// const onClickRemoveCondition = (index) => () => {
// if (values.conditions.length === 1) {
// setFieldValue('conditions', [defaultFilterCondition]);
// return;
// }
// const conditions = [...values.conditions];
// conditions.splice(index, 1);
// setFieldValue('conditions', [...conditions]);
// };
// // Transform dynamic value field.
// const transformValueField = (value) => {
// if (value instanceof Date) {
// return moment(value).format('YYYY-MM-DD');
// } else if (typeof value === 'object') {
// return value.id;
// }
// return value;
// };
// // Override getFieldProps for conditions fields.
// const fieldProps = (name, index) => {
// const override = {
// ...getFieldProps(`conditions[${index}].${name}`),
// };
// return {
// ...override,
// onChange: (e) => {
// if (name === 'field_key') {
// const currentField = fieldsKeyMapped.get(
// values.conditions[index].field_key,
// );
// const nextField = fieldsKeyMapped.get(e.currentTarget.value);
// if (currentField.data_type !== nextField.data_type) {
// setFieldValue(`conditions[${index}].value`, '');
// }
// const comparatorsObs = getConditionTypeCompatators(nextField.data_type);
// const currentCompatator = values.conditions[index].comparator;
// if (!currentCompatator || comparatorsObs.map(c => c.value).indexOf(currentCompatator) === -1) {
// const defaultCompatator = getConditionDefaultCompatator(nextField.data_type);
// setFieldValue(`conditions[${index}].comparator`, defaultCompatator.value);
// }
// }
// override.onChange(e);
// },
// };
// };
// // Compatator field props.
// const comparatorFieldProps = (name, index) => {
// const condition = values.conditions[index];
// const field = fieldsKeyMapped.get(condition.field_key);
// return {
// ...fieldProps(name, index),
// dataType: field.data_type,
// };
// };
// // Value field props.
// const valueFieldProps = (name, index) => {
// const condition = values.conditions[index];
// const field = fieldsKeyMapped.get(condition.field_key);
// return {
// ...fieldProps(name, index),
// dataType: field.data_type,
// resourceKey: field.resource_key,
// options: field.options,
// dataResource: field.data_resource,
// onChange: (value) => {
// const transformedValue = transformValueField(value);
// setFieldValue(`conditions[${index}].${name}`, transformedValue);
// },
// };
// };
// return (
// <div class="filter-dropdown">
// <div class="filter-dropdown__body">
// {values.conditions.map((condition, index) => (
// <div class="filter-dropdown__condition">
// <FormGroup className={'form-group--condition'}>
// <HTMLSelect
// options={conditionalsItems}
// className={Classes.FILL}
// disabled={index > 1}
// {...fieldProps('condition', index)}
// />
// </FormGroup>
// <FormGroup className={'form-group--field'}>
// <HTMLSelect
// options={resourceFields}
// value={1}
// className={Classes.FILL}
// {...fieldProps('field_key', index)}
// />
// </FormGroup>
// <FormGroup className={'form-group--comparator'}>
// <DynamicFilterCompatatorField
// className={Classes.FILL}
// {...comparatorFieldProps('comparator', index)}
// />
// </FormGroup>
// <DynamicFilterValueField {...valueFieldProps('value', index)} />
// <Button
// icon={<Icon icon="times" iconSize={14} />}
// minimal={true}
// onClick={onClickRemoveCondition(index)}
// />
// </div>
// ))}
// </div>
// <div class="filter-dropdown__footer">
// <Button
// minimal={true}
// intent={Intent.PRIMARY}
// onClick={onClickNewFilter}
// >
// <T id={'new_conditional'} />
// </Button>
// </div>
// </div>
// );
}

2
client/src/containers/Accounts/AccountsDataTable.js
View File

@@ -224,7 +224,7 @@ function AccountsDataTable({
{
id: 'type',
Header: formatMessage({ id: 'type' }),
accessor: 'type.name',
accessor: 'type.label',
className: 'type',
width: 140,
},

1
client/src/containers/Settings/withSettings.js
View File

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
export const mapStateToProps = (state, props) => ({
organizationSettings: state.settings.data.organization,
manualJournalsSettings: state.settings.data.manual_journals,
});
export default connect(mapStateToProps);

23
client/src/store/accounts/accounts.actions.js
View File

@@ -35,9 +35,6 @@ export const fetchAccountsList = () => {
payload: {
accounts: response.data.accounts,
}
})
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
resolve(response);
})
@@ -71,7 +68,7 @@ export const fetchAccountsTable = ({ query } = {}) => {
dispatch({
type: t.ACCOUNTS_PAGE_SET,
accounts: response.data.accounts,
customViewId: response.data.customViewId,
customViewId: response.data?.filter_meta?.view?.custom_view_id,
});
dispatch({
type: t.ACCOUNTS_ITEMS_SET,
@@ -81,15 +78,9 @@ export const fetchAccountsTable = ({ query } = {}) => {
type: t.ACCOUNTS_TABLE_LOADING,
loading: false,
});
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
resolve(response);
})
.catch((error) => {
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
reject(error);
});
});
@@ -122,9 +113,6 @@ export const submitAccount = ({ form }) => {
dispatch({
type: t.ACCOUNT_ERRORS_CLEAR,
});
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
resolve(response);
})
.catch((error) => {
@@ -140,9 +128,6 @@ export const submitAccount = ({ form }) => {
payload: { error },
});
}
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
reject(data?.errors);
});
});
@@ -157,9 +142,6 @@ export const editAccount = (id, form) => {
ApiService.post(`accounts/${id}`, form)
.then((response) => {
dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS });
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
resolve(response);
})
.catch((error) => {
@@ -170,9 +152,6 @@ export const editAccount = (id, form) => {
if (error) {
dispatch({ type: t.ACCOUNT_FORM_ERRORS, error });
}
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
reject(data?.errors);
});
});

46
client/src/store/resources/resources.actions.js
View File

@@ -4,14 +4,14 @@ import t from 'store/types';
export const fetchResourceColumns = ({ resourceSlug }) => {
return (dispatch) => new Promise((resolve, reject) => {
ApiService.get(`resources/${resourceSlug}/columns`).then((response) => {
dispatch({
type: t.RESOURCE_COLUMNS_SET,
columns: response.data.resource_columns,
resource_slug: resourceSlug,
});
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
// dispatch({
// type: t.RESOURCE_COLUMNS_SET,
// columns: response.data.resource_columns,
// resource_slug: resourceSlug,
// });
// dispatch({
// type: t.SET_DASHBOARD_REQUEST_COMPLETED,
// });
resolve(response);
}).catch((error) => { reject(error); });
});
@@ -20,14 +20,14 @@ export const fetchResourceColumns = ({ resourceSlug }) => {
export const fetchResourceFields = ({ resourceSlug }) => {
return (dispatch) => new Promise((resolve, reject) => {
ApiService.get(`resources/${resourceSlug}/fields`).then((response) => {
dispatch({
type: t.RESOURCE_FIELDS_SET,
fields: response.data.resource_fields,
resource_slug: resourceSlug,
});
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
// dispatch({
// type: t.RESOURCE_FIELDS_SET,
// fields: response.data.resource_fields,
// resource_slug: resourceSlug,
// });
// dispatch({
// type: t.SET_DASHBOARD_REQUEST_COMPLETED,
// });
resolve(response);
}).catch((error) => { reject(error); });
});
@@ -36,13 +36,13 @@ export const fetchResourceFields = ({ resourceSlug }) => {
export const fetchResourceData = ({ resourceSlug }) => {
return (dispatch) => new Promise((resolve, reject) => {
ApiService.get(`/resources/${resourceSlug}/data`).then((response) => {
dispatch({
type: t.RESOURCE_DATA_SET,
payload: {
data: response.data.data,
resource_key: resourceSlug,
},
});
// dispatch({
// type: t.RESOURCE_DATA_SET,
// payload: {
// data: response.data.data,
// resource_key: resourceSlug,
// },
// });
resolve(response);
}).catch(error => { reject(error); });
});

27
client/src/style/pages/dashboard.scss
View File

@@ -4,18 +4,10 @@
display: flex;
height: 100vh;
&:before{
content: "";
height: 1px;
background: #01194e;
position: fixed;
top: 0;
width: 100%;
}
&__topbar{
width: 100%;
min-height: 62px;
min-height: 60px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #F2EFEF;
@@ -210,9 +202,9 @@
margin-left: 2px;
h1{
font-size: 26px;
font-weight: 300;
color: #2c2c39;
font-size: 22px;
color: #333363;
font-weight: 400;
margin: 0;
}
h3{
@@ -220,7 +212,7 @@
padding-left: 10px;
font-size: 16px;
font-weight: 300;
color: #777;
color: #101052;
margin: 0 0 0 12px;
padding-top: 4px;
padding-bottom: 4px;
@@ -268,6 +260,15 @@
flex-direction: column;
height: 100%;
&:before{
content: "";
height: 1px;
background: #01194e;
position: fixed;
top: 0;
width: 100%;
}
.sidebar--mini-sidebar + &{
margin-left: 50px;
width: calc(100% - 50px);

6
client/src/style/pages/make-journal-entries.scss
View File

@@ -103,11 +103,15 @@
.td.actions{
.bp3-button{
background-color: transparent;
color: #E68F8E;
color: #e66d6d;
&:hover{
color: #c23030;
}
svg{
color: inherit;
}
}
}