sozsoft/sozsoft-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tasarımsal güncellemeler

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2026-06-10 10:53:32 +03:00
parent c1e7f8cd1d
commit 4e439f3bf5
14 changed files with 208 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/public/version.json
View file

@ -1,5 +1,5 @@
{ {
"commit": "b286332", "commit": "c1e7f8c",
"releases": [ "releases": [
{ {
"version": "1.1.04", "version": "1.1.04",

21
ui/src/components/template/MobileNav.tsx
View file

@ -1,7 +1,12 @@
import { useState, Suspense, lazy } from 'react' import { useState, Suspense, lazy } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import Drawer from '@/components/ui/Drawer' import Drawer from '@/components/ui/Drawer'
import { NAV_MODE_THEMED, NAV_MODE_TRANSPARENT, DIR_RTL } from '@/constants/theme.constant' import {
DIR_RTL,
MODE_DARK,
NAV_MODE_DARK,
NAV_MODE_THEMED,
} from '@/constants/theme.constant'
import withHeaderItem, { WithHeaderItemProps } from '@/utils/hoc/withHeaderItem' import withHeaderItem, { WithHeaderItemProps } from '@/utils/hoc/withHeaderItem'
import NavToggle from '@/components/shared/NavToggle' import NavToggle from '@/components/shared/NavToggle'
import useResponsive from '@/utils/hooks/useResponsive' import useResponsive from '@/utils/hooks/useResponsive'
@ -32,21 +37,17 @@ const MobileNav = () => {
const mode = useStoreState((state) => state.theme.mode) const mode = useStoreState((state) => state.theme.mode)
const direction = useStoreState((state) => state.theme.direction) const direction = useStoreState((state) => state.theme.direction)
const currentRouteKey = useStoreState((state) => state.base.common.currentRouteKey) const currentRouteKey = useStoreState((state) => state.base.common.currentRouteKey)
const sideNavCollapse = useStoreState((state) => state.theme.layout.sideNavCollapse)
const userAuthority = useStoreState((state) => state.auth.user.authority) const userAuthority = useStoreState((state) => state.auth.user.authority)
const { smaller } = useResponsive() const { smaller } = useResponsive()
const mobileNavMode = mode === MODE_DARK && navMode !== NAV_MODE_THEMED ? NAV_MODE_DARK : navMode
const navColor = () => { const navColor = () => {
if (navMode === NAV_MODE_THEMED) { if (mobileNavMode === NAV_MODE_THEMED) {
return `bg-${themeColor}-${primaryColorLevel} side-nav-${navMode}` return `bg-${themeColor}-${primaryColorLevel} side-nav-${navMode}`
} }
if (navMode === NAV_MODE_TRANSPARENT) { return `side-nav-${mobileNavMode}`
return `side-nav-${mode}`
}
return `side-nav-${navMode}`
} }
const { mainMenu: navigationConfig } = useStoreState((state) => state.abpConfig.menu) const { mainMenu: navigationConfig } = useStoreState((state) => state.abpConfig.menu)
@ -61,6 +62,8 @@ const MobileNav = () => {
<Drawer <Drawer
title="Navigation" title="Navigation"
isOpen={isOpen} isOpen={isOpen}
className={classNames(mode === MODE_DARK && 'bg-gray-800 text-gray-100')}
headerClass={classNames(mode === MODE_DARK && 'border-gray-700')}
bodyClass={classNames(navColor(), 'p-0')} bodyClass={classNames(navColor(), 'p-0')}
width={320} width={320}
placement={direction === DIR_RTL ? 'right' : 'left'} placement={direction === DIR_RTL ? 'right' : 'left'}
@ -70,7 +73,7 @@ const MobileNav = () => {
<Suspense fallback={<></>}> <Suspense fallback={<></>}>
{isOpen && ( {isOpen && (
<VerticalMenuContent <VerticalMenuContent
navMode={navMode} navMode={mobileNavMode}
collapsed={false} collapsed={false}
navigationTree={navigationConfig} navigationTree={navigationConfig}
routeKey={currentRouteKey} routeKey={currentRouteKey}

2
ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
View file

@ -23,7 +23,7 @@ const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
return ( return (
<div className="flex flex-col h-full justify-between"> <div className="flex flex-col h-full justify-between">
<div className="flex flex-col gap-y-3 mb-2"> <div className="flex flex-col gap-y-3 mb-2 ml-1">
<div> <div>
<h6 className="mb-3">{translate('::App.SiteManagement.Theme.Style')}</h6> <h6 className="mb-3">{translate('::App.SiteManagement.Theme.Style')}</h6>
<StyleSwitcher onStyleChange={handleStyleChange} /> <StyleSwitcher onStyleChange={handleStyleChange} />

2
ui/src/views/admin/listForm/edit/FormTabDetails.tsx
View file

@ -294,7 +294,7 @@ function FormTabDetails(
</Field> </Field>
</FormItem> </FormItem>
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')} label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
invalid={errors.layoutDto?.grid && touched.layoutDto?.grid} invalid={errors.layoutDto?.grid && touched.layoutDto?.grid}

46
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
View file

@ -1,5 +1,5 @@
import { Container } from '@/components/shared' import { Container } from '@/components/shared'
import { Button, FormContainer, FormItem, Input, Select } from '@/components/ui' import { Button, Card, FormContainer, FormItem, Input, Select } from '@/components/ui'
import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models' import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
import { SelectBoxOption } from '@/types/shared' import { SelectBoxOption } from '@/types/shared'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
@ -28,18 +28,18 @@ function FormFieldTabDetails({
const { translate } = useLocalization() const { translate } = useLocalization()
return ( return (
<Container className="grid xl:grid-cols-2"> <Formik
<Formik enableReinitialize
enableReinitialize initialValues={initialValues}
initialValues={initialValues} validationSchema={schema}
validationSchema={schema} onSubmit={async (values, formikHelpers) => {
onSubmit={async (values, formikHelpers) => { await onSubmit(ListFormFieldEditTabs.DetailsForm, values, formikHelpers)
await onSubmit(ListFormFieldEditTabs.DetailsForm, values, formikHelpers) }}
}} >
> {({ touched, errors, isSubmitting, values }) => (
{({ touched, errors, isSubmitting, values }) => ( <Form>
<Form> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<FormContainer size="sm"> <Card>
<FormItem <FormItem
label={translate('::ListForms.ListFormFieldEdit.FieldName')} label={translate('::ListForms.ListFormFieldEdit.FieldName')}
invalid={errors.fieldName && touched.fieldName} invalid={errors.fieldName && touched.fieldName}
@ -68,6 +68,8 @@ function FormFieldTabDetails({
> >
<Field type="text" name="bandName" component={Input} /> <Field type="text" name="bandName" component={Input} />
</FormItem> </FormItem>
</Card>
<Card>
<FormItem label={translate('::ListForms.ListFormEdit.CustomValueType')}> <FormItem label={translate('::ListForms.ListFormEdit.CustomValueType')}>
<Field type="text" name="sourceDbType"> <Field type="text" name="sourceDbType">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
@ -84,7 +86,6 @@ function FormFieldTabDetails({
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem label={translate('::ListForms.ListFormFieldEdit.DetailsAlignment')}> <FormItem label={translate('::ListForms.ListFormFieldEdit.DetailsAlignment')}>
<Field type="text" name="alignment"> <Field type="text" name="alignment">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
@ -130,15 +131,14 @@ function FormFieldTabDetails({
textArea={true} textArea={true}
/> />
</FormItem> </FormItem>
</Card>
<Button block variant="solid" loading={isSubmitting} type="submit"> </div>
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} <Button block variant="solid" loading={isSubmitting} type="submit">
</Button> {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</FormContainer> </Button>
</Form> </Form>
)} )}
</Formik> </Formik>
</Container>
) )
} }

46
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
View file

@ -1,5 +1,5 @@
import { Container } from '@/components/shared' import { Container } from '@/components/shared'
import { Button, FormContainer, FormItem, Input, Select } from '@/components/ui' import { Button, Card, FormContainer, FormItem, Input, Select } from '@/components/ui'
import { import {
ColumnFormatEditDto, ColumnFormatEditDto,
GridColumnJoinConditionEnum, GridColumnJoinConditionEnum,
@ -39,18 +39,18 @@ function FormFieldTabJoinOptions({
const { translate } = useLocalization() const { translate } = useLocalization()
return ( return (
<Container className="grid xl:grid-cols-2"> <Formik
<Formik enableReinitialize
enableReinitialize initialValues={initialValues}
initialValues={initialValues} validationSchema={schema}
validationSchema={schema} onSubmit={async (values, formikHelpers) => {
onSubmit={async (values, formikHelpers) => { await onSubmit(ListFormFieldEditTabs.JoinOptionsForm, values, formikHelpers)
await onSubmit(ListFormFieldEditTabs.JoinOptionsForm, values, formikHelpers) }}
}} >
> {({ touched, errors, isSubmitting, values }) => (
{({ touched, errors, isSubmitting, values }) => ( <Form>
<Form> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<FormContainer size="sm"> <Card>
<FormItem <FormItem
labelClass="!justify-start" labelClass="!justify-start"
labelWidth="40%" labelWidth="40%"
@ -147,7 +147,8 @@ function FormFieldTabJoinOptions({
component={Input} component={Input}
/> />
</FormItem> </FormItem>
</Card>
<Card>
<FormItem <FormItem
label={translate('::ListForms.ListFormFieldEdit.JoinOptionsFieldNameAlias')} label={translate('::ListForms.ListFormFieldEdit.JoinOptionsFieldNameAlias')}
invalid={ invalid={
@ -231,15 +232,14 @@ function FormFieldTabJoinOptions({
component={Input} component={Input}
/> />
</FormItem> </FormItem>
</Card>
<Button block variant="solid" loading={isSubmitting} type="submit"> </div>
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} <Button block variant="solid" loading={isSubmitting} type="submit">
</Button> {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</FormContainer> </Button>
</Form> </Form>
)} )}
</Formik> </Formik>
</Container>
) )
} }

70
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
View file

@ -1,5 +1,5 @@
import { Container } from '@/components/shared' import { Container } from '@/components/shared'
import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui' import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models' import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
import type { DatabaseColumnDto, SqlObjectExplorerDto } from '@/proxy/sql-query-manager/models' import type { DatabaseColumnDto, SqlObjectExplorerDto } from '@/proxy/sql-query-manager/models'
import { sqlObjectManagerService } from '@/services/sql-query-manager.service' import { sqlObjectManagerService } from '@/services/sql-query-manager.service'
@ -46,7 +46,9 @@ function TablePickerModal({
const { translate } = useLocalization() const { translate } = useLocalization()
const [step, setStep] = useState<'table' | 'columns'>('table') const [step, setStep] = useState<'table' | 'columns'>('table')
const [tableSearch, setTableSearch] = useState('') const [tableSearch, setTableSearch] = useState('')
const [pickerTable, setPickerTable] = useState<{ schemaName: string; tableName: string } | null>(null) const [pickerTable, setPickerTable] = useState<{ schemaName: string; tableName: string } | null>(
null,
)
const [pickerColumns, setPickerColumns] = useState<DatabaseColumnDto[]>([]) const [pickerColumns, setPickerColumns] = useState<DatabaseColumnDto[]>([])
const [isLoadingColumns, setIsLoadingColumns] = useState(false) const [isLoadingColumns, setIsLoadingColumns] = useState(false)
const [keyCol, setKeyCol] = useState('') const [keyCol, setKeyCol] = useState('')
@ -76,7 +78,7 @@ function TablePickerModal({
<span className="text-sm font-semibold text-gray-700 dark:text-gray-200"> <span className="text-sm font-semibold text-gray-700 dark:text-gray-200">
{step === 'table' {step === 'table'
? translate('::ListForms.Wizard.Step3.SelectTable') || 'Tablo Seç' ? translate('::ListForms.Wizard.Step3.SelectTable') || 'Tablo Seç'
: pickerTable?.tableName ?? ''} : (pickerTable?.tableName ?? '')}
</span> </span>
</div> </div>
<button <button
@ -120,7 +122,11 @@ function TablePickerModal({
setPickerColumns([]) setPickerColumns([])
setIsLoadingColumns(true) setIsLoadingColumns(true)
try { try {
const res = await sqlObjectManagerService.getTableColumns(dsCode, t.schemaName, t.tableName) const res = await sqlObjectManagerService.getTableColumns(
dsCode,
t.schemaName,
t.tableName,
)
setPickerColumns(res.data ?? []) setPickerColumns(res.data ?? [])
} catch { } catch {
setPickerColumns([]) setPickerColumns([])
@ -159,7 +165,9 @@ function TablePickerModal({
> >
<option value="">-- Seçiniz --</option> <option value="">-- Seçiniz --</option>
{pickerColumns.map((c) => ( {pickerColumns.map((c) => (
<option key={c.columnName} value={c.columnName}>{c.columnName}</option> <option key={c.columnName} value={c.columnName}>
{c.columnName}
</option>
))} ))}
</select> </select>
</div> </div>
@ -174,7 +182,9 @@ function TablePickerModal({
> >
<option value="">-- Seçiniz --</option> <option value="">-- Seçiniz --</option>
{pickerColumns.map((c) => ( {pickerColumns.map((c) => (
<option key={c.columnName} value={c.columnName}>{c.columnName}</option> <option key={c.columnName} value={c.columnName}>
{c.columnName}
</option>
))} ))}
</select> </select>
</div> </div>
@ -187,7 +197,9 @@ function TablePickerModal({
type="button" type="button"
disabled={!keyCol || !nameCol} disabled={!keyCol || !nameCol}
onClick={() => { onClick={() => {
onSelect(`SELECT "${keyCol}" AS "Key", "${nameCol}" AS "Name" FROM "${pickerTable?.tableName}" ORDER BY "${nameCol}";`) onSelect(
`SELECT "${keyCol}" AS "Key", "${nameCol}" AS "Name" FROM "${pickerTable?.tableName}" ORDER BY "${nameCol}";`,
)
}} }}
className="mt-1 w-full py-1.5 text-xs font-semibold rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors" className="mt-1 w-full py-1.5 text-xs font-semibold rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
> >
@ -246,18 +258,18 @@ function FormFieldTabLookup({
} }
return ( return (
<Container className="grid xl:grid-cols-2"> <Formik
<Formik enableReinitialize
enableReinitialize initialValues={getNormalizedInitialValues(initialValues)}
initialValues={getNormalizedInitialValues(initialValues)} validationSchema={schema}
validationSchema={schema} onSubmit={async (values) => {
onSubmit={async (values) => { await onSubmit(ListFormFieldEditTabs.LookupForm, values)
await onSubmit(ListFormFieldEditTabs.LookupForm, values) }}
}} >
> {({ touched, errors, isSubmitting, values }) => (
{({ touched, errors, isSubmitting, values }) => ( <Form>
<Form> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<FormContainer size="sm"> <Card>
<FormItem <FormItem
label={translate('::ListForms.ListFormFieldEdit.LookupDataSourceType')} label={translate('::ListForms.ListFormFieldEdit.LookupDataSourceType')}
invalid={errors.lookupDto?.dataSourceType && touched.lookupDto?.dataSourceType} invalid={errors.lookupDto?.dataSourceType && touched.lookupDto?.dataSourceType}
@ -351,7 +363,8 @@ function FormFieldTabLookup({
component={Input} component={Input}
/> />
</FormItem> </FormItem>
</Card>
<Card>
<FormItem <FormItem
label={translate('::ListForms.ListFormFieldEdit.LookupCascadeRelationField')} label={translate('::ListForms.ListFormFieldEdit.LookupCascadeRelationField')}
invalid={ invalid={
@ -432,15 +445,14 @@ function FormFieldTabLookup({
component={Input} component={Input}
/> />
</FormItem> </FormItem>
</Card>
<Button block variant="solid" loading={isSubmitting} type="submit"> </div>
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} <Button block variant="solid" loading={isSubmitting} type="submit">
</Button> {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</FormContainer> </Button>
</Form> </Form>
)} )}
</Formik> </Formik>
</Container>
) )
} }

44
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
View file

@ -1,5 +1,5 @@
import { Container } from '@/components/shared' import { Container } from '@/components/shared'
import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui' import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models' import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
import { SelectBoxOption } from '@/types/shared' import { SelectBoxOption } from '@/types/shared'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
@ -32,18 +32,18 @@ function FormFieldTabOptions({
const { translate } = useLocalization() const { translate } = useLocalization()
return ( return (
<Container className="grid xl:grid-cols-2"> <Formik
<Formik enableReinitialize
enableReinitialize initialValues={initialValues}
initialValues={initialValues} validationSchema={schema}
validationSchema={schema} onSubmit={async (values, formikHelpers) => {
onSubmit={async (values, formikHelpers) => { await onSubmit(ListFormFieldEditTabs.OptionsForm, values, formikHelpers)
await onSubmit(ListFormFieldEditTabs.OptionsForm, values, formikHelpers) }}
}} >
> {({ touched, errors, isSubmitting, values }) => (
{({ touched, errors, isSubmitting, values }) => ( <Form>
<Form> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<FormContainer size="sm"> <Card>
<FormItem <FormItem
label={translate('::ListForms.ListFormFieldEdit.OptionsListOrderNo')} label={translate('::ListForms.ListFormFieldEdit.OptionsListOrderNo')}
invalid={errors.listOrderNo && touched.listOrderNo} invalid={errors.listOrderNo && touched.listOrderNo}
@ -85,6 +85,8 @@ function FormFieldTabOptions({
> >
<Field type="number" name="sortIndex" component={Input} /> <Field type="number" name="sortIndex" component={Input} />
</FormItem> </FormItem>
</Card>
<Card>
<FormItem <FormItem
label={translate('::ListForms.ListFormFieldEdit.OptionsIsActive')} label={translate('::ListForms.ListFormFieldEdit.OptionsIsActive')}
invalid={errors.isActive && touched.isActive} invalid={errors.isActive && touched.isActive}
@ -108,15 +110,15 @@ function FormFieldTabOptions({
<FormItem label={translate('::ListForms.ListFormEdit.AllowAdding')}> <FormItem label={translate('::ListForms.ListFormEdit.AllowAdding')}>
<Field name="allowAdding" component={Checkbox} /> <Field name="allowAdding" component={Checkbox} />
</FormItem> </FormItem>
</Card>
</div>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</FormContainer> </Form>
</Form> )}
)} </Formik>
</Formik>
</Container>
) )
} }

45
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
View file

@ -1,5 +1,5 @@
import { Container } from '@/components/shared' import { Container } from '@/components/shared'
import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui' import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models' import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldProps, Form, Formik } from 'formik' import { Field, FieldProps, Form, Formik } from 'formik'
@ -38,18 +38,18 @@ function FormFieldTabPivotSetting({
const { translate } = useLocalization() const { translate } = useLocalization()
return ( return (
<Container className="grid xl:grid-cols-2"> <Formik
<Formik enableReinitialize
enableReinitialize initialValues={initialValues}
initialValues={initialValues} validationSchema={schema}
validationSchema={schema} onSubmit={async (values, formikHelpers) => {
onSubmit={async (values, formikHelpers) => { await onSubmit(ListFormFieldEditTabs.PivotSettingsForm, values, formikHelpers)
await onSubmit(ListFormFieldEditTabs.PivotSettingsForm, values, formikHelpers) }}
}} >
> {({ touched, errors, isSubmitting, values }) => (
{({ touched, errors, isSubmitting, values }) => ( <Form>
<Form> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<FormContainer size="sm"> <Card>
<FormItem <FormItem
label={translate('::ListForms.ListFormFieldEdit.PivotSettingIsPivot')} label={translate('::ListForms.ListFormFieldEdit.PivotSettingIsPivot')}
invalid={errors.pivotSettingsDto?.isPivot && touched.pivotSettingsDto?.isPivot} invalid={errors.pivotSettingsDto?.isPivot && touched.pivotSettingsDto?.isPivot}
@ -137,7 +137,9 @@ function FormFieldTabPivotSetting({
)} )}
</Field> </Field>
</FormItem> </FormItem>
</Card>
<Card>
<FormItem <FormItem
label={translate('::ListForms.ListFormFieldEdit.PivotSettingGroupInterval')} label={translate('::ListForms.ListFormFieldEdit.PivotSettingGroupInterval')}
invalid={ invalid={
@ -210,15 +212,14 @@ function FormFieldTabPivotSetting({
> >
<Field name="pivotSettingsDto.wordWrapEnabled" component={Checkbox} /> <Field name="pivotSettingsDto.wordWrapEnabled" component={Checkbox} />
</FormItem> </FormItem>
</Card>
<Button block variant="solid" loading={isSubmitting} type="submit"> </div>
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} <Button block variant="solid" loading={isSubmitting} type="submit">
</Button> {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</FormContainer> </Button>
</Form> </Form>
)} )}
</Formik> </Formik>
</Container>
) )
} }

23
ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
View file

@ -405,8 +405,7 @@ function FormFields({
<Table compact> <Table compact>
<THead> <THead>
<Tr> <Tr>
{/* <Th className="w-[40px]"></Th> */} <Th className='w-3/12'>
<Th>
<div> <div>
<Button <Button
shape="circle" shape="circle"
@ -446,10 +445,10 @@ function FormFields({
)} )}
</div> </div>
</Th> </Th>
<Th>Field</Th> <Th className="w-3/12">Field</Th>
<Th>Culture</Th> <Th className="w-2/12">Culture</Th>
<Th>Role</Th> <Th className="hidden sm:table-cell w-2/12">Role</Th>
<Th>User</Th> <Th className="hidden sm:table-cell w-2/12">User</Th>
</Tr> </Tr>
</THead> </THead>
<TBody> <TBody>
@ -464,7 +463,7 @@ function FormFields({
}} }}
key={field.id} key={field.id}
> >
<Td className="flex items-center space-x-1"> <Td className="flex items-center !p-0">
<Button <Button
shape="circle" shape="circle"
variant="plain" variant="plain"
@ -483,20 +482,20 @@ function FormFields({
<span>{!field?.visible && <FaEyeSlash />}</span> <span>{!field?.visible && <FaEyeSlash />}</span>
<span>{!field?.isActive && <FaTimes />}</span> <span>{!field?.isActive && <FaTimes />}</span>
</Td> </Td>
<Td>{field.fieldName}</Td> <Td className='!p-0'>{field.fieldName}</Td>
<Td className="flex items-center space-x-1"> <Td className='align-middle text-center !p-0'>
<Avatar <Avatar
size={18} size={18}
shape="circle" shape="circle"
src={`/img/countries/${field.cultureName ?? 'default'}.png`} src={`/img/countries/${field.cultureName ?? 'default'}.png`}
title={field.cultureName}
/> />
<span className="ltr:ml-2 rtl:mr-2">{field.cultureName}</span>
</Td> </Td>
<Td> <Td className="hidden sm:table-cell !p-0">
{field.roleId && {field.roleId &&
(roleList.find((a) => a.value === field.roleId)?.label ?? 'X')} (roleList.find((a) => a.value === field.roleId)?.label ?? 'X')}
</Td> </Td>
<Td> <Td className="hidden sm:table-cell !p-0">
{field.userId && {field.userId &&
(userList.find((a) => a.value === field.userId)?.label ?? 'X')} (userList.find((a) => a.value === field.userId)?.label ?? 'X')}
</Td> </Td>

45
ui/src/views/list/GanttView.tsx
View file

@ -244,23 +244,26 @@ const GanttView = (props: GanttViewProps) => {
progressExpr={gridDto.gridOptions.ganttOptionDto?.progressExpr} progressExpr={gridDto.gridOptions.ganttOptionDto?.progressExpr}
/> />
<Toolbar> <Toolbar multiline>
<Item name="undo" /> <Item name="undo" locateInMenu="auto" />
<Item name="redo" /> <Item name="redo" locateInMenu="auto" />
<Item name="separator" /> <Item name="separator" locateInMenu="auto" />
<Item name="collapseAll" /> <Item name="collapseAll" locateInMenu="auto" />
<Item name="expandAll" /> <Item name="expandAll" locateInMenu="auto" />
{gridDto.gridOptions.ganttOptionDto?.allowTaskAdding && <Item name="addTask" />} {gridDto.gridOptions.ganttOptionDto?.allowTaskAdding && (
{gridDto.gridOptions.ganttOptionDto?.allowTaskDeleting && ( <Item name="addTask" locateInMenu="auto" />
<Item name="deleteTask" />
)} )}
<Item name="separator" /> {gridDto.gridOptions.ganttOptionDto?.allowTaskDeleting && (
<Item name="zoomIn" /> <Item name="deleteTask" locateInMenu="auto" />
<Item name="zoomOut" /> )}
<Item name="separator" /> <Item name="separator" locateInMenu="auto" />
<Item name="zoomIn" locateInMenu="auto" />
<Item name="zoomOut" locateInMenu="auto" />
<Item name="separator" locateInMenu="auto" />
<Item <Item
location="after" location="after"
widget="dxSelectBox" widget="dxSelectBox"
locateInMenu="auto"
options={{ options={{
width: 150, width: 150,
items: [ items: [
@ -279,9 +282,21 @@ const GanttView = (props: GanttViewProps) => {
onValueChanged: (e: any) => setScaleType(e.value), onValueChanged: (e: any) => setScaleType(e.value),
}} }}
/> />
<Item location="after" widget="dxButton" options={getRefreshButtonOptions()} /> <Item
location="after"
widget="dxButton"
locateInMenu="auto"
showText="always"
options={getRefreshButtonOptions()}
/>
{checkPermission(gridDto?.gridOptions.permissionDto.u) && ( {checkPermission(gridDto?.gridOptions.permissionDto.u) && (
<Item location="after" widget="dxButton" options={getSettingButtonOptions()} /> <Item
location="after"
widget="dxButton"
locateInMenu="auto"
showText="always"
options={getSettingButtonOptions()}
/>
)} )}
</Toolbar> </Toolbar>

5
ui/src/views/list/Grid.tsx
View file

@ -1829,7 +1829,10 @@ const Grid = (props: GridProps) => {
setExtraFilters={setExtraFilters} setExtraFilters={setExtraFilters}
/> />
</Template> </Template>
<Toolbar visible={toolbarData.length > 0 || filterToolbarData.length > 0}> <Toolbar
visible={toolbarData.length > 0 || filterToolbarData.length > 0}
multiline
>
{toolbarData.map((item) => ( {toolbarData.map((item) => (
<Item key={item.name} {...item}></Item> <Item key={item.name} {...item}></Item>
))} ))}

1
ui/src/views/list/Tree.tsx
View file

@ -1601,6 +1601,7 @@ const Tree = (props: TreeProps) => {
</Template> </Template>
<Toolbar <Toolbar
visible={(toolbarData?.length ?? 0) > 0 || (filterToolbarData?.length ?? 0) > 0} visible={(toolbarData?.length ?? 0) > 0 || (filterToolbarData?.length ?? 0) > 0}
multiline
> >
{toolbarData?.map((item) => ( {toolbarData?.map((item) => (
<Item key={item.name} {...item}></Item> <Item key={item.name} {...item}></Item>

14
ui/src/views/list/useToolbar.tsx
View file

@ -127,6 +127,8 @@ const useToolbar = ({
items.push({ items.push({
widget: 'dxButton', widget: 'dxButton',
name: 'refreshButton', name: 'refreshButton',
locateInMenu: 'auto',
showText: 'always',
options: { options: {
icon: 'refresh', icon: 'refresh',
onClick: refreshData, onClick: refreshData,
@ -147,6 +149,8 @@ const useToolbar = ({
widget: 'dxButton', widget: 'dxButton',
name: 'workflowStart', name: 'workflowStart',
location: 'after', location: 'after',
locateInMenu: 'auto',
showText: 'always',
options: { options: {
icon: 'play', icon: 'play',
text: 'Workflow Start', text: 'Workflow Start',
@ -204,6 +208,8 @@ const useToolbar = ({
widget: 'dxButton', widget: 'dxButton',
name: `workflowApproval_${criteria.id}`, name: `workflowApproval_${criteria.id}`,
location: 'after', location: 'after',
locateInMenu: 'auto',
showText: 'always',
options: { options: {
icon: 'check', icon: 'check',
text: criteria.title, text: criteria.title,
@ -272,6 +278,8 @@ const useToolbar = ({
items.push({ items.push({
widget: 'dxButton', widget: 'dxButton',
name: 'expandAllButton', name: 'expandAllButton',
locateInMenu: 'auto',
showText: 'always',
options: { options: {
icon: 'plus', icon: 'plus',
text: translate('::ListForms.ListFormEdit.ExpandAll'), text: translate('::ListForms.ListFormEdit.ExpandAll'),
@ -284,6 +292,8 @@ const useToolbar = ({
items.push({ items.push({
widget: 'dxButton', widget: 'dxButton',
name: 'collapseAllButton', name: 'collapseAllButton',
locateInMenu: 'auto',
showText: 'always',
options: { options: {
icon: 'minus', icon: 'minus',
text: translate('::ListForms.ListFormEdit.CollapseAll'), text: translate('::ListForms.ListFormEdit.CollapseAll'),
@ -407,6 +417,8 @@ const useToolbar = ({
const buttonDeleteAll: DataGridTypes.ToolbarItem = { const buttonDeleteAll: DataGridTypes.ToolbarItem = {
location: 'after', location: 'after',
widget: 'dxButton', widget: 'dxButton',
locateInMenu: 'auto',
showText: 'always',
name: 'deleteAllRecords', name: 'deleteAllRecords',
options: { options: {
text: translate('::ListForms.ListForm.DeleteAllRecords'), text: translate('::ListForms.ListForm.DeleteAllRecords'),
@ -490,6 +502,8 @@ const useToolbar = ({
const buttonCustom: DataGridTypes.ToolbarItem = { const buttonCustom: DataGridTypes.ToolbarItem = {
location: 'after', location: 'after',
widget: 'dxButton', widget: 'dxButton',
locateInMenu: 'auto',
showText: 'always',
name: action.hint, name: action.hint,
options: { options: {
hint: translate('::' + action.hint), hint: translate('::' + action.hint),