Form Buttons güncellemeleri
This commit is contained in:
parent
be34af298e
commit
c947fb2a1c
5 changed files with 62 additions and 13 deletions
|
|
@ -82,7 +82,7 @@ define(['./workbox-a959eb95'], (function (workbox) { 'use strict';
|
||||||
"revision": "3ca0b8505b4bec776b69afdba2768812"
|
"revision": "3ca0b8505b4bec776b69afdba2768812"
|
||||||
}, {
|
}, {
|
||||||
"url": "/index.html",
|
"url": "/index.html",
|
||||||
"revision": "0.7curt4sl6"
|
"revision": "0.au42u1lvc1"
|
||||||
}], {});
|
}], {});
|
||||||
workbox.cleanupOutdatedCaches();
|
workbox.cleanupOutdatedCaches();
|
||||||
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/index.html"), {
|
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/index.html"), {
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,17 @@ import navigationIcon from '@/configs/navigation-icon.config'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
import CustomStore from 'devextreme/data/custom_store'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { FaPlus, FaTrash, FaEdit, FaFileAlt, FaSave } from 'react-icons/fa'
|
import { FaPlus, FaTrash, FaEdit, FaFileAlt, FaSave, FaInfo, FaBackward } from 'react-icons/fa'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { GridColumnData, GridExtraFilterState } from '../list/GridColumnData'
|
import { GridColumnData } from '../list/GridColumnData'
|
||||||
import { useToolbar } from '../list/useToolbar'
|
import { useToolbar } from '../list/useToolbar'
|
||||||
import { PermissionResults, RowMode } from './types'
|
import { PermissionResults, RowMode } from './types'
|
||||||
import { GridDto } from '@/proxy/form/models'
|
import { GridDto } from '@/proxy/form/models'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||||||
|
import { usePermission } from '@/utils/hooks/usePermission'
|
||||||
|
import { GridExtraFilterState } from '../list/Utils'
|
||||||
|
import { usePWA } from '@/utils/hooks/usePWA'
|
||||||
|
|
||||||
const FormButtons = (props: {
|
const FormButtons = (props: {
|
||||||
mode: RowMode
|
mode: RowMode
|
||||||
|
|
@ -50,6 +53,8 @@ const FormButtons = (props: {
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [deleteRowId, setDeleteRowId] = useState<string>()
|
const [deleteRowId, setDeleteRowId] = useState<string>()
|
||||||
const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
|
const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
|
||||||
|
const { checkPermission } = usePermission()
|
||||||
|
const isPwaMode = usePWA()
|
||||||
|
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const { translate } = useLocalization()
|
const { translate } = useLocalization()
|
||||||
|
|
@ -112,7 +117,7 @@ const FormButtons = (props: {
|
||||||
<Button
|
<Button
|
||||||
key={'toolbarButton-' + i}
|
key={'toolbarButton-' + i}
|
||||||
variant="default"
|
variant="default"
|
||||||
size="sm"
|
size="xs"
|
||||||
{...(item.options?.icon
|
{...(item.options?.icon
|
||||||
? {
|
? {
|
||||||
icon: React.createElement(navigationIcon[item.options.icon], {
|
icon: React.createElement(navigationIcon[item.options.icon], {
|
||||||
|
|
@ -139,7 +144,7 @@ const FormButtons = (props: {
|
||||||
<Button
|
<Button
|
||||||
key={'commandColumnButton-' + i}
|
key={'commandColumnButton-' + i}
|
||||||
variant="default"
|
variant="default"
|
||||||
size="sm"
|
size="xs"
|
||||||
{...(item.icon
|
{...(item.icon
|
||||||
? {
|
? {
|
||||||
icon: React.createElement(navigationIcon[item.icon], {
|
icon: React.createElement(navigationIcon[item.icon], {
|
||||||
|
|
@ -166,7 +171,7 @@ const FormButtons = (props: {
|
||||||
{mode != 'new' && (
|
{mode != 'new' && (
|
||||||
<Button
|
<Button
|
||||||
variant="solid"
|
variant="solid"
|
||||||
size="sm"
|
size="xs"
|
||||||
color="red-500"
|
color="red-500"
|
||||||
title={translate('::Delete')}
|
title={translate('::Delete')}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|
@ -180,7 +185,7 @@ const FormButtons = (props: {
|
||||||
{mode != 'new' && (
|
{mode != 'new' && (
|
||||||
<Button
|
<Button
|
||||||
variant="solid"
|
variant="solid"
|
||||||
size="sm"
|
size="xs"
|
||||||
title={translate('::AddNew')}
|
title={translate('::AddNew')}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (onActionNew) {
|
if (onActionNew) {
|
||||||
|
|
@ -197,7 +202,7 @@ const FormButtons = (props: {
|
||||||
{mode == 'view' && (
|
{mode == 'view' && (
|
||||||
<Button
|
<Button
|
||||||
variant="solid"
|
variant="solid"
|
||||||
size="sm"
|
size="xs"
|
||||||
title={translate('::Edit')}
|
title={translate('::Edit')}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (onActionEdit) {
|
if (onActionEdit) {
|
||||||
|
|
@ -218,7 +223,7 @@ const FormButtons = (props: {
|
||||||
{(mode == 'edit' || (onActionView && mode == 'new')) && (
|
{(mode == 'edit' || (onActionView && mode == 'new')) && (
|
||||||
<Button
|
<Button
|
||||||
variant="solid"
|
variant="solid"
|
||||||
size="sm"
|
size="xs"
|
||||||
title={translate('::Detail')}
|
title={translate('::Detail')}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (onActionView) {
|
if (onActionView) {
|
||||||
|
|
@ -236,10 +241,27 @@ const FormButtons = (props: {
|
||||||
<FaFileAlt />
|
<FaFileAlt />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
{mode === 'new' && (
|
||||||
|
<Button
|
||||||
|
variant="solid"
|
||||||
|
size="xs"
|
||||||
|
color="gray-500"
|
||||||
|
title={translate('::Cancel')}
|
||||||
|
onClick={() => {
|
||||||
|
if (onActionView && id) {
|
||||||
|
onActionView()
|
||||||
|
} else {
|
||||||
|
navigate(-1)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FaBackward />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
{(mode == 'edit' || mode == 'new') && (
|
{(mode == 'edit' || mode == 'new') && (
|
||||||
<Button
|
<Button
|
||||||
variant="solid"
|
variant="solid"
|
||||||
size="sm"
|
size="xs"
|
||||||
title={translate('::Save')}
|
title={translate('::Save')}
|
||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
{...(permissions.c || permissions.u ? {} : { disabled: true })}
|
{...(permissions.c || permissions.u ? {} : { disabled: true })}
|
||||||
|
|
@ -247,6 +269,25 @@ const FormButtons = (props: {
|
||||||
<FaSave />
|
<FaSave />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
{checkPermission(gridDto?.gridOptions.permissionDto.c) && (
|
||||||
|
<Button
|
||||||
|
variant="solid"
|
||||||
|
color="green-500"
|
||||||
|
size="xs"
|
||||||
|
title={translate('::ListForms.ListForm.Manage')}
|
||||||
|
onClick={() => {
|
||||||
|
window.open(
|
||||||
|
ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(
|
||||||
|
':listFormCode',
|
||||||
|
listFormCode,
|
||||||
|
),
|
||||||
|
isPwaMode ? '_self' : '_blank',
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FaInfo />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<Dialog
|
<Dialog
|
||||||
id="confirmDelete"
|
id="confirmDelete"
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,14 @@ const FormDevExpress = (props: {
|
||||||
onFieldDataChanged={(e: FieldDataChangedEvent) => {
|
onFieldDataChanged={(e: FieldDataChangedEvent) => {
|
||||||
setFormData({ ...formData, [e.dataField!]: e.value })
|
setFormData({ ...formData, [e.dataField!]: e.value })
|
||||||
}}
|
}}
|
||||||
|
onContentReady={(e) => {
|
||||||
|
const firstItem = formItems?.flatMap((g) => g.items || []).find((it) => !!it.name)
|
||||||
|
|
||||||
|
if (firstItem?.name) {
|
||||||
|
const editor = e.component.getEditor(firstItem.name as string)
|
||||||
|
editor?.focus()
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{formItems.map((formGroupItem, i) => {
|
{formItems.map((formGroupItem, i) => {
|
||||||
return (
|
return (
|
||||||
|
|
@ -90,7 +98,7 @@ const FormDevExpress = (props: {
|
||||||
{...formItem}
|
{...formItem}
|
||||||
editorOptions={{
|
editorOptions={{
|
||||||
...formItem.editorOptions,
|
...formItem.editorOptions,
|
||||||
...(mode === 'view' ? { readOnly: true } : {}),
|
...(mode === 'view' ? { readOnly: true } : { autoFocus: i === 1 }),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -94,7 +94,7 @@ const FormEdit = (
|
||||||
formItems={formItems}
|
formItems={formItems}
|
||||||
setFormData={setFormData}
|
setFormData={setFormData}
|
||||||
/>
|
/>
|
||||||
<hr className="my-4" />
|
<hr className="my-2" />
|
||||||
<SubForms gridDto={gridDto!} formData={formData} level={level ?? 0} />
|
<SubForms gridDto={gridDto!} formData={formData} level={level ?? 0} />
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -89,7 +89,7 @@ const FormView = (
|
||||||
formItems={formItems}
|
formItems={formItems}
|
||||||
setFormData={() => {}}
|
setFormData={() => {}}
|
||||||
/>
|
/>
|
||||||
<hr className="my-4" />
|
<hr className="my-2" />
|
||||||
<SubForms gridDto={gridDto!} formData={formData} level={level ?? 0} refreshData={fetchData} />
|
<SubForms gridDto={gridDto!} formData={formData} level={level ?? 0} refreshData={fetchData} />
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue