Dialog Maximize özelliği eklendi
This commit is contained in:
Sedat ÖZTÜRK
parent
df9b6ff362
commit
66037bf001
16 changed files with 1336 additions and 1029 deletions
|
|
@ -648,6 +648,12 @@
|
|||
"en": "Forum",
|
||||
"tr": "Forum"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "App.Forum.Dashboard",
|
||||
"en": "Dashboard",
|
||||
"tr": "Gösterge Paneli"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "App.Forum.Dashboard.Categories",
|
||||
|
|
|
|||
|
|
@ -52,9 +52,11 @@
|
|||
|
||||
.dialog-content.maximized {
|
||||
border-radius: 0 !important;
|
||||
max-height: 100vh !important;
|
||||
height: 100vh !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@apply my-0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useState, useEffect, useMemo } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import {
|
||||
FaUpload,
|
||||
FaCheckCircle,
|
||||
|
|
@ -18,6 +19,7 @@ import { ListFormImportDto, ListFormImportExecuteDto } from '@/proxy/imports/mod
|
|||
import { ImportService } from '@/services/import.service'
|
||||
import { GridDto } from '@/proxy/form/models'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
|
||||
interface ImportDashboardProps {
|
||||
gridDto: GridDto
|
||||
|
|
@ -214,16 +216,17 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
}
|
||||
|
||||
const editableColumns = getEditableColumns()
|
||||
const { isMaximized } = useDialogContext()
|
||||
|
||||
return (
|
||||
<div className="mx-auto px-4 py-2">
|
||||
<div className="flex flex-col w-full mt-4">
|
||||
{/* Navigation Tabs */}
|
||||
<div className="flex space-x-1 mb-4 bg-white rounded-lg p-1 shadow-sm border border-slate-200">
|
||||
<div className="flex space-x-1 mb-4 bg-white rounded-lg p-1 shadow-sm border border-slate-200 flex-shrink-0">
|
||||
{['import', 'preview', 'history'].map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab as TabNames)}
|
||||
className={`px-6 py-3 rounded-md font-medium transition-all duration-200 flex items-center space-x-2 ${
|
||||
className={`px-3 py-2 rounded-md font-medium transition-all duration-200 flex items-center space-x-2 ${
|
||||
activeTab === tab
|
||||
? 'bg-blue-500 text-white shadow-md'
|
||||
: 'text-slate-600 hover:text-slate-800 hover:bg-slate-50'
|
||||
|
|
@ -238,6 +241,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className={classNames(isMaximized ? 'flex-1 min-h-0 overflow-auto' : '')}>
|
||||
{activeTab === 'import' && (
|
||||
<div className="space-y-6">
|
||||
{/* Template Generator & File Upload - Side by Side */}
|
||||
|
|
@ -300,7 +304,7 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
{editableColumns.map((column: any) => (
|
||||
<tr key={column.fieldName} className="hover:bg-slate-50">
|
||||
<td className="px-2 py-2 font-medium text-slate-800">
|
||||
{column.captionName || column.fieldName}
|
||||
{translate('::' + column.captionName)}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-slate-600">
|
||||
<span
|
||||
|
|
@ -535,7 +539,8 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
{translate('::App.Listforms.ImportManager.LoadingExecutionDetails')}
|
||||
</span>
|
||||
</div>
|
||||
) : sessionExecutes[session.id] && sessionExecutes[session.id].length > 0 ? (
|
||||
) : sessionExecutes[session.id] &&
|
||||
sessionExecutes[session.id].length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{sessionExecutes[session.id].map((execute) => (
|
||||
<div key={execute.id} className="p-3 rounded-lg">
|
||||
|
|
@ -633,5 +638,6 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,54 @@ import WindowControls from '../WindowControls'
|
|||
import { motion } from 'framer-motion'
|
||||
import { SCREENS } from '@/utils/tailwind'
|
||||
import useWindowSize from '../hooks/useWindowSize'
|
||||
import { useState, useCallback } from 'react'
|
||||
import { useState, useCallback, createContext, useContext } from 'react'
|
||||
import type ReactModal from 'react-modal'
|
||||
import type { MouseEvent } from 'react'
|
||||
import { Container } from '@/components/shared'
|
||||
import type { MouseEvent, ReactNode } from 'react'
|
||||
|
||||
interface DialogContextValue {
|
||||
isMaximized: boolean
|
||||
}
|
||||
|
||||
const DialogContext = createContext<DialogContextValue>({ isMaximized: false })
|
||||
|
||||
export const useDialogContext = () => useContext(DialogContext)
|
||||
|
||||
const DialogBody = ({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children?: ReactNode
|
||||
className?: string
|
||||
}) => {
|
||||
const { isMaximized } = useContext(DialogContext)
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
isMaximized && 'flex-1 min-h-0 flex flex-col overflow-hidden',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
DialogBody.displayName = 'Dialog.Body'
|
||||
|
||||
const DialogFooter = ({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children?: ReactNode
|
||||
className?: string
|
||||
}) => {
|
||||
const { isMaximized } = useContext(DialogContext)
|
||||
return (
|
||||
<div className={classNames(isMaximized && 'flex-shrink-0', className)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
DialogFooter.displayName = 'Dialog.Footer'
|
||||
|
||||
export interface DialogProps extends ReactModal.Props {
|
||||
closable?: boolean
|
||||
|
|
@ -186,7 +230,15 @@ const Dialog = (props: DialogProps) => {
|
|||
>
|
||||
{closable && !showWindowControls && renderCloseButton}
|
||||
{closable && showWindowControls && renderWindowControls}
|
||||
<DialogContext.Provider value={{ isMaximized }}>
|
||||
{isMaximized ? (
|
||||
<div className="flex-1 min-h-0 flex flex-col overflow-hidden">
|
||||
{children}
|
||||
</div>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</DialogContext.Provider>
|
||||
</motion.div>
|
||||
</Modal>
|
||||
)
|
||||
|
|
@ -194,4 +246,13 @@ const Dialog = (props: DialogProps) => {
|
|||
|
||||
Dialog.displayName = 'Dialog'
|
||||
|
||||
export default Dialog
|
||||
type DialogType = typeof Dialog & {
|
||||
Body: typeof DialogBody
|
||||
Footer: typeof DialogFooter
|
||||
}
|
||||
|
||||
const DialogWithSubComponents = Dialog as DialogType
|
||||
DialogWithSubComponents.Body = DialogBody
|
||||
DialogWithSubComponents.Footer = DialogFooter
|
||||
|
||||
export default DialogWithSubComponents
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import classNames from 'classnames'
|
||||
import { FaChevronRight, FaChevronDown } from 'react-icons/fa'
|
||||
import Container from '@/components/shared/Container'
|
||||
import { Button, Checkbox, Dialog, Input, Menu, toast } from '@/components/ui'
|
||||
import { useConfig } from '@/components/ui/ConfigProvider'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
import Notification from '@/components/ui/Notification'
|
||||
import {
|
||||
GetPermissionListResultDto,
|
||||
|
|
@ -17,6 +19,166 @@ import { ChangeEvent, useEffect, useMemo, useState } from 'react'
|
|||
|
||||
type OpenState = Record<string, boolean>
|
||||
|
||||
function PermissionDialogContent({
|
||||
name,
|
||||
translate,
|
||||
permissionList,
|
||||
selectedGroup,
|
||||
selectedGroupPermissions,
|
||||
filteredPermissions,
|
||||
isAllSelected,
|
||||
isAllSelectedForGroup,
|
||||
isLoading,
|
||||
searchTerm,
|
||||
openPermissions,
|
||||
mode,
|
||||
onSelectAll,
|
||||
onDialogClose,
|
||||
onDialogOk,
|
||||
handleExpandAll,
|
||||
handleCollapseAll,
|
||||
changeGroup,
|
||||
togglePermission,
|
||||
isParent,
|
||||
getChildren,
|
||||
onClickCheckbox,
|
||||
setSearchTerm,
|
||||
setCopyDialogOpen,
|
||||
}: any) {
|
||||
const { isMaximized } = useDialogContext()
|
||||
|
||||
return (
|
||||
<>
|
||||
<h5 className="mb-1 flex-shrink-0">
|
||||
{translate('::Permission')} - {name}
|
||||
</h5>
|
||||
<hr className="mt-1 mb-2 flex-shrink-0"></hr>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 mb-1 flex-shrink-0">
|
||||
<div className="w-full md:w-1/3">
|
||||
<Checkbox name="all" checked={isAllSelected} onChange={onSelectAll}>
|
||||
{translate('AbpPermissionManagement::SelectAllInAllTabs')}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className="w-full md:w-2/3">
|
||||
<Checkbox name="group" checked={isAllSelectedForGroup} onChange={onSelectAll}>
|
||||
{translate('AbpPermissionManagement::SelectAllInThisTab')}
|
||||
</Checkbox>
|
||||
<Button size="sm" variant="plain" onClick={handleExpandAll} icon={<FaChevronRight />}>
|
||||
{translate('::ListForms.ListFormEdit.ExpandAll')}
|
||||
</Button>
|
||||
<Button size="sm" variant="plain" onClick={handleCollapseAll} icon={<FaChevronDown />}>
|
||||
{translate('::ListForms.ListFormEdit.CollapseAll')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={classNames(
|
||||
'flex flex-col md:flex-row gap-4',
|
||||
isMaximized ? 'flex-1 min-h-0' : '',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'w-full md:w-1/3 overflow-y-auto',
|
||||
isMaximized ? 'min-h-0' : 'max-h-[450px]',
|
||||
)}
|
||||
>
|
||||
<hr className="mb-2"></hr>
|
||||
<Menu
|
||||
className="w-full"
|
||||
variant={mode}
|
||||
defaultActiveKeys={[selectedGroup?.displayName ?? '']}
|
||||
>
|
||||
{permissionList?.groups.map((group: any) => (
|
||||
<Menu.MenuItem
|
||||
key={group.name}
|
||||
className="break-all whitespace-normal"
|
||||
eventKey={group.name}
|
||||
onSelect={changeGroup}
|
||||
>
|
||||
{translate('::' + group.displayName)} (
|
||||
{group.permissions.filter((a: any) => a.isGranted).length})
|
||||
</Menu.MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'w-full md:w-2/3 overflow-y-auto flex flex-col',
|
||||
isMaximized ? 'min-h-0' : 'max-h-[450px]',
|
||||
)}
|
||||
>
|
||||
<hr className="mb-2 flex-shrink-0"></hr>
|
||||
<div className="flex items-center gap-2 mb-2 flex-shrink-0">
|
||||
<Input
|
||||
size="sm"
|
||||
placeholder={translate('::Search')}
|
||||
value={searchTerm}
|
||||
onChange={(e: any) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="my-1">
|
||||
{filteredPermissions.map((permission: any) => {
|
||||
const isParentPerm = isParent(permission)
|
||||
const permKey = permission.name || ''
|
||||
return (
|
||||
<div key={permission.name} className={`ml-${permission.level * 4} group`}>
|
||||
<div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all">
|
||||
{isParentPerm ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
togglePermission(permKey)
|
||||
}}
|
||||
className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 transition"
|
||||
>
|
||||
{openPermissions[permKey] || searchTerm ? (
|
||||
<FaChevronDown className="text-gray-500 text-xs" />
|
||||
) : (
|
||||
<FaChevronRight className="text-gray-500 text-xs" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-5" />
|
||||
)}
|
||||
<Checkbox
|
||||
name={permission.name}
|
||||
checked={permission.isGranted}
|
||||
onChange={() => onClickCheckbox(permission)}
|
||||
>
|
||||
<span className="text-sm text-gray-700 group-hover:text-gray-900 transition">
|
||||
{translate('::' + permission.displayName)}
|
||||
</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog.Footer className="flex justify-between items-center mt-4 pt-3 border-t">
|
||||
<div className="flex items-center">
|
||||
<Button variant="solid" color="sky-500" onClick={() => setCopyDialogOpen(true)}>
|
||||
{translate('::AbpIdentity.Roles.CopyPermissions')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={onDialogClose}>
|
||||
{translate('::Cancel')}
|
||||
</Button>
|
||||
<Button variant="solid" loading={isLoading} onClick={onDialogOk}>
|
||||
{isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function RolesPermission({
|
||||
open,
|
||||
onDialogClose,
|
||||
|
|
@ -368,122 +530,34 @@ function RolesPermission({
|
|||
onClose={onDialogClose}
|
||||
onRequestClose={onDialogClose}
|
||||
>
|
||||
<h5 className="mb-1">
|
||||
{translate('::Permission')} - {name}
|
||||
</h5>
|
||||
<hr className="mt-1 mb-2"></hr>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 mb-1">
|
||||
<div className="w-full md:w-1/3">
|
||||
<Checkbox name="all" checked={isAllSelected} onChange={onSelectAll}>
|
||||
{translate('AbpPermissionManagement::SelectAllInAllTabs')}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className="w-full md:w-2/3">
|
||||
<Checkbox name="group" checked={isAllSelectedForGroup} onChange={onSelectAll}>
|
||||
{translate('AbpPermissionManagement::SelectAllInThisTab')}
|
||||
</Checkbox>
|
||||
|
||||
<Button size="sm" variant="plain" onClick={handleExpandAll} icon={<FaChevronRight />}>
|
||||
{translate('::ListForms.ListFormEdit.ExpandAll')}
|
||||
</Button>
|
||||
<Button size="sm" variant="plain" onClick={handleCollapseAll} icon={<FaChevronDown />}>
|
||||
{translate('::ListForms.ListFormEdit.CollapseAll')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="w-full md:w-1/3 max-h-[450px] overflow-y-auto">
|
||||
<hr className="mb-2"></hr>
|
||||
<Menu
|
||||
className="w-full"
|
||||
variant={mode}
|
||||
defaultActiveKeys={[selectedGroup?.displayName ?? '']}
|
||||
>
|
||||
{permissionList?.groups.map((group: any) => (
|
||||
<Menu.MenuItem
|
||||
key={group.name}
|
||||
className="break-all whitespace-normal"
|
||||
eventKey={group.name}
|
||||
onSelect={changeGroup}
|
||||
>
|
||||
{translate('::' + group.displayName)} (
|
||||
{group.permissions.filter((a: any) => a.isGranted).length})
|
||||
</Menu.MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</div>
|
||||
<div className="w-full md:w-2/3 max-h-[450px] overflow-y-auto">
|
||||
<hr className="mb-2"></hr>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Input
|
||||
size="sm"
|
||||
className=""
|
||||
placeholder={translate('::Search')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
<Dialog.Body className="flex flex-col">
|
||||
<PermissionDialogContent
|
||||
name={name}
|
||||
translate={translate}
|
||||
permissionList={permissionList}
|
||||
selectedGroup={selectedGroup}
|
||||
selectedGroupPermissions={selectedGroupPermissions}
|
||||
filteredPermissions={filteredPermissions}
|
||||
isAllSelected={isAllSelected}
|
||||
isAllSelectedForGroup={isAllSelectedForGroup}
|
||||
isLoading={isLoading}
|
||||
searchTerm={searchTerm}
|
||||
openPermissions={openPermissions}
|
||||
mode={mode}
|
||||
onSelectAll={onSelectAll}
|
||||
onDialogClose={onDialogClose}
|
||||
onDialogOk={onDialogOk}
|
||||
handleExpandAll={handleExpandAll}
|
||||
handleCollapseAll={handleCollapseAll}
|
||||
changeGroup={changeGroup}
|
||||
togglePermission={togglePermission}
|
||||
isParent={isParent}
|
||||
getChildren={getChildren}
|
||||
onClickCheckbox={onClickCheckbox}
|
||||
setSearchTerm={setSearchTerm}
|
||||
setCopyDialogOpen={setCopyDialogOpen}
|
||||
/>
|
||||
</div>
|
||||
<div className="my-1">
|
||||
{filteredPermissions.map((permission) => {
|
||||
const isParentPerm = isParent(permission)
|
||||
const permKey = permission.name || ''
|
||||
const children = getChildren(permKey)
|
||||
return (
|
||||
<div key={permission.name} className={`ml-${permission.level * 4} group`}>
|
||||
<div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all">
|
||||
{/* Expand Icon */}
|
||||
{isParentPerm ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
togglePermission(permKey)
|
||||
}}
|
||||
className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 transition"
|
||||
>
|
||||
{openPermissions[permKey] || searchTerm ? (
|
||||
<FaChevronDown className="text-gray-500 text-xs" />
|
||||
) : (
|
||||
<FaChevronRight className="text-gray-500 text-xs" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-5" />
|
||||
)}
|
||||
|
||||
{/* Checkbox */}
|
||||
<Checkbox
|
||||
name={permission.name}
|
||||
checked={permission.isGranted}
|
||||
onChange={() => onClickCheckbox(permission)}
|
||||
>
|
||||
<span className="text-sm text-gray-700 group-hover:text-gray-900 transition">
|
||||
{translate('::' + permission.displayName)}
|
||||
</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-6">
|
||||
<div className="flex items-center">
|
||||
<Button variant="solid" color="sky-500" onClick={() => setCopyDialogOpen(true)}>
|
||||
{translate('::AbpIdentity.Roles.CopyPermissions')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={onDialogClose}>
|
||||
{translate('::Cancel')}
|
||||
</Button>
|
||||
<Button variant="solid" loading={isLoading} onClick={onDialogOk}>
|
||||
{isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Body>
|
||||
</Dialog>
|
||||
|
||||
{/* Copy Permissions Dialog */}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import classNames from 'classnames'
|
||||
import { FaChevronRight, FaChevronDown } from 'react-icons/fa'
|
||||
import { Badge, Button, Checkbox, Dialog, Input, Menu, toast } from '@/components/ui'
|
||||
type OpenState = Record<string, boolean>
|
||||
import { useConfig } from '@/components/ui/ConfigProvider'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
import Notification from '@/components/ui/Notification'
|
||||
import {
|
||||
GetPermissionListResultDto,
|
||||
|
|
@ -16,6 +18,166 @@ import { useStoreActions, useStoreState } from '@/store'
|
|||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { ChangeEvent, useEffect, useMemo, useState } from 'react'
|
||||
|
||||
function UserPermissionDialogContent({
|
||||
name,
|
||||
translate,
|
||||
permissionList,
|
||||
selectedGroup,
|
||||
selectedGroupPermissions,
|
||||
filteredPermissions,
|
||||
isAllSelected,
|
||||
isAllSelectedForGroup,
|
||||
isLoading,
|
||||
searchTerm,
|
||||
openPermissions,
|
||||
mode,
|
||||
providerName,
|
||||
onSelectAll,
|
||||
onDialogClose,
|
||||
onDialogOk,
|
||||
handleExpandAll,
|
||||
handleCollapseAll,
|
||||
changeGroup,
|
||||
togglePermission,
|
||||
isParent,
|
||||
onClickCheckbox,
|
||||
setSearchTerm,
|
||||
}: any) {
|
||||
const { isMaximized } = useDialogContext()
|
||||
|
||||
return (
|
||||
<>
|
||||
<h5 className="mb-1 flex-shrink-0">
|
||||
{translate('::Permission')} - {name}
|
||||
</h5>
|
||||
<hr className="mt-1 mb-2 flex-shrink-0"></hr>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 mb-1 flex-shrink-0">
|
||||
<div className="w-full md:w-1/3">
|
||||
<Checkbox name="all" checked={isAllSelected} onChange={onSelectAll}>
|
||||
{translate('AbpPermissionManagement::SelectAllInAllTabs')}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className="w-full md:w-2/3">
|
||||
<Checkbox name="group" checked={isAllSelectedForGroup} onChange={onSelectAll}>
|
||||
{translate('AbpPermissionManagement::SelectAllInThisTab')}
|
||||
</Checkbox>
|
||||
<Button size="sm" variant="plain" onClick={handleExpandAll} icon={<FaChevronRight />}>
|
||||
{translate('::ListForms.ListFormEdit.ExpandAll')}
|
||||
</Button>
|
||||
<Button size="sm" variant="plain" onClick={handleCollapseAll} icon={<FaChevronDown />}>
|
||||
{translate('::ListForms.ListFormEdit.CollapseAll')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={classNames(
|
||||
'flex flex-col md:flex-row gap-4',
|
||||
isMaximized ? 'flex-1 min-h-0' : '',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'w-full md:w-1/3 overflow-y-auto',
|
||||
isMaximized ? 'min-h-0' : 'max-h-[450px]',
|
||||
)}
|
||||
>
|
||||
<hr className="mb-2"></hr>
|
||||
<Menu variant={mode} defaultActiveKeys={[selectedGroup?.displayName ?? '']}>
|
||||
{permissionList?.groups.map((group: any) => (
|
||||
<Menu.MenuItem
|
||||
key={group.name}
|
||||
className="break-all whitespace-normal"
|
||||
eventKey={group.name}
|
||||
onSelect={() => changeGroup(group.name)}
|
||||
>
|
||||
{translate('::' + group.displayName)} (
|
||||
{group.permissions.filter((a: any) => a.isGranted).length})
|
||||
</Menu.MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'w-full md:w-2/3 overflow-y-auto flex flex-col',
|
||||
isMaximized ? 'min-h-0' : 'max-h-[450px]',
|
||||
)}
|
||||
>
|
||||
<hr className="mb-2 flex-shrink-0"></hr>
|
||||
<div className="flex items-center gap-2 mb-2 flex-shrink-0">
|
||||
<Input
|
||||
size="sm"
|
||||
placeholder={translate('::Search')}
|
||||
value={searchTerm}
|
||||
onChange={(e: any) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="my-1">
|
||||
{filteredPermissions.map((permission: any) => {
|
||||
const isParentPerm = isParent(permission)
|
||||
const permKey = permission.name || ''
|
||||
return (
|
||||
<div key={permission.name} className={`ml-${permission.level * 4} group`}>
|
||||
<div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all">
|
||||
{isParentPerm ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
togglePermission(permKey)
|
||||
}}
|
||||
className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 transition"
|
||||
>
|
||||
{openPermissions[permKey] || searchTerm ? (
|
||||
<FaChevronDown className="text-gray-500 text-xs" />
|
||||
) : (
|
||||
<FaChevronRight className="text-gray-500 text-xs" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-5" />
|
||||
)}
|
||||
<Checkbox
|
||||
name={permission.name}
|
||||
checked={permission.isGranted}
|
||||
onChange={() => onClickCheckbox(permission)}
|
||||
disabled={permission.grantedProviders.some(
|
||||
(provider: any) => provider.providerName === 'R',
|
||||
)}
|
||||
>
|
||||
<span className="text-sm text-gray-700 group-hover:text-gray-900 transition">
|
||||
{translate('::' + permission.displayName)}
|
||||
{permission.grantedProviders.map((provider: any) => {
|
||||
const badgeContent =
|
||||
provider.providerName !== providerName
|
||||
? `${provider.providerName}: ${provider.providerKey}`
|
||||
: provider.providerName
|
||||
return (
|
||||
<Badge key={provider.providerKey} className="m-2" content={badgeContent} />
|
||||
)
|
||||
})}
|
||||
</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog.Footer className="flex justify-end items-center mt-4 pt-3 border-t gap-2">
|
||||
<Button variant="plain" onClick={onDialogClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="solid" loading={isLoading} onClick={onDialogOk}>
|
||||
{isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function UsersPermission({
|
||||
open,
|
||||
onDialogClose,
|
||||
|
|
@ -297,125 +459,33 @@ function UsersPermission({
|
|||
onClose={onDialogClose}
|
||||
onRequestClose={onDialogClose}
|
||||
>
|
||||
<h5 className="mb-1">
|
||||
{translate('::Permission')} - {name}
|
||||
</h5>
|
||||
<hr className="mt-1 mb-2"></hr>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="w-full md:w-1/3">
|
||||
<Checkbox name="all" checked={isAllSelected} onChange={onSelectAll}>
|
||||
{translate('AbpPermissionManagement::SelectAllInAllTabs')}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className="w-full md:w-2/3">
|
||||
<Checkbox name="group" checked={isAllSelectedForGroup} onChange={onSelectAll}>
|
||||
{translate('AbpPermissionManagement::SelectAllInThisTab')}
|
||||
</Checkbox>
|
||||
<Button size="sm" variant="plain" onClick={handleExpandAll} icon={<FaChevronRight />}>
|
||||
{translate('::ListForms.ListFormEdit.ExpandAll')}
|
||||
</Button>
|
||||
<Button size="sm" variant="plain" onClick={handleCollapseAll} icon={<FaChevronDown />}>
|
||||
{translate('::ListForms.ListFormEdit.CollapseAll')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="w-full md:w-1/3 max-h-[450px] overflow-y-auto">
|
||||
<hr className="mb-2"></hr>
|
||||
<Menu variant={mode} defaultActiveKeys={[selectedGroup?.displayName ?? '']}>
|
||||
{permissionList?.groups.map((group) => (
|
||||
<Menu.MenuItem
|
||||
key={group.name}
|
||||
className="break-all whitespace-normal"
|
||||
eventKey={group.name}
|
||||
onSelect={() => {
|
||||
changeGroup(group.name)
|
||||
}}
|
||||
>
|
||||
{translate('::' + group.displayName)} (
|
||||
{group.permissions.filter((a) => a.isGranted).length})
|
||||
</Menu.MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</div>
|
||||
<div className="w-full md:w-2/3 max-h-[450px] overflow-y-auto">
|
||||
<hr className="mb-2"></hr>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Input
|
||||
size="sm"
|
||||
className=""
|
||||
placeholder={translate('::Search')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
<Dialog.Body className="flex flex-col">
|
||||
<UserPermissionDialogContent
|
||||
name={name}
|
||||
translate={translate}
|
||||
permissionList={permissionList}
|
||||
selectedGroup={selectedGroup}
|
||||
selectedGroupPermissions={selectedGroupPermissions}
|
||||
filteredPermissions={filteredPermissions}
|
||||
isAllSelected={isAllSelected}
|
||||
isAllSelectedForGroup={isAllSelectedForGroup}
|
||||
isLoading={isLoading}
|
||||
searchTerm={searchTerm}
|
||||
openPermissions={openPermissions}
|
||||
mode={mode}
|
||||
providerName={providerName}
|
||||
onSelectAll={onSelectAll}
|
||||
onDialogClose={onDialogClose}
|
||||
onDialogOk={onDialogOk}
|
||||
handleExpandAll={handleExpandAll}
|
||||
handleCollapseAll={handleCollapseAll}
|
||||
changeGroup={changeGroup}
|
||||
togglePermission={togglePermission}
|
||||
isParent={isParent}
|
||||
onClickCheckbox={onClickCheckbox}
|
||||
setSearchTerm={setSearchTerm}
|
||||
/>
|
||||
</div>
|
||||
<div className="my-1">
|
||||
{filteredPermissions.map((permission) => {
|
||||
const isParentPerm = isParent(permission)
|
||||
const permKey = permission.name || ''
|
||||
const children = getChildren(permKey)
|
||||
return (
|
||||
<div key={permission.name} className={`ml-${permission.level * 4} group`}>
|
||||
<div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all">
|
||||
{/* Expand Icon */}
|
||||
{isParentPerm ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
togglePermission(permKey)
|
||||
}}
|
||||
className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 transition"
|
||||
>
|
||||
{openPermissions[permKey] || searchTerm ? (
|
||||
<FaChevronDown className="text-gray-500 text-xs" />
|
||||
) : (
|
||||
<FaChevronRight className="text-gray-500 text-xs" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-5" />
|
||||
)}
|
||||
|
||||
{/* Checkbox */}
|
||||
<Checkbox
|
||||
name={permission.name}
|
||||
checked={permission.isGranted}
|
||||
onChange={() => onClickCheckbox(permission)}
|
||||
disabled={permission.grantedProviders.some((provider) => provider.providerName === 'R')}
|
||||
>
|
||||
<span className="text-sm text-gray-700 group-hover:text-gray-900 transition">
|
||||
{translate('::' + permission.displayName)}
|
||||
{permission.grantedProviders.map((provider) => {
|
||||
const badgeContent = provider.providerName !== providerName
|
||||
? `${provider.providerName}: ${provider.providerKey}`
|
||||
: provider.providerName;
|
||||
return (
|
||||
<Badge
|
||||
key={provider.providerKey}
|
||||
className="m-2"
|
||||
content={badgeContent}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right mt-6">
|
||||
<Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={onDialogClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="solid" loading={isLoading} onClick={onDialogOk}>
|
||||
{isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Body>
|
||||
</Dialog>
|
||||
) : (
|
||||
<></>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
import classNames from 'classnames'
|
||||
import { useState } from 'react'
|
||||
import { Badge, Button } from '@/components/ui'
|
||||
import { Container } from '@/components/shared'
|
||||
import { Dialog, Notification, toast } from '@/components/ui'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
import type { BranchSeedResultDto } from '@/proxy/branch/seed'
|
||||
import { runBranchSeed } from '@/services/branch.service'
|
||||
|
||||
function BranchSeed({
|
||||
open,
|
||||
onDialogClose,
|
||||
function BranchSeedContent({
|
||||
id,
|
||||
name,
|
||||
}: {
|
||||
open: boolean
|
||||
onDialogClose: () => void
|
||||
id: string
|
||||
name: string
|
||||
}) {
|
||||
const { isMaximized } = useDialogContext()
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [result, setResult] = useState<BranchSeedResultDto | null>(null)
|
||||
|
||||
|
|
@ -52,48 +51,45 @@ function BranchSeed({
|
|||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Dialog
|
||||
width="75%"
|
||||
height="60%"
|
||||
isOpen={open}
|
||||
onClose={onDialogClose}
|
||||
onRequestClose={onDialogClose}
|
||||
>
|
||||
<h5 className="mb-4 text-lg font-semibold">Branch Seed - {name}</h5>
|
||||
<hr className="mb-3" />
|
||||
<>
|
||||
<h5 className="mb-4 text-lg font-semibold flex-shrink-0">Branch Seed - {name}</h5>
|
||||
<hr className="mb-3 flex-shrink-0" />
|
||||
|
||||
<div className="mt-3 space-y-4">
|
||||
{/* Başlık ve buton aynı satırda */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
{result &&
|
||||
(result.success ? (
|
||||
<div
|
||||
className={classNames(
|
||||
'mt-3 space-y-4',
|
||||
isMaximized ? 'flex-1 min-h-0 flex flex-col overflow-hidden' : '',
|
||||
)}
|
||||
>
|
||||
{/* Sonuç durumu */}
|
||||
{result && (
|
||||
<div className="flex-shrink-0">
|
||||
{result.success ? (
|
||||
<span className="text-green-600 font-semibold">✅ Seed İşlemi Başarılı</span>
|
||||
) : (
|
||||
<span className="text-red-600 font-semibold">❌ Seed İşlemi Başarısız</span>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<Button size="sm" variant="solid" onClick={handleRunSeed} loading={isLoading}>
|
||||
{isLoading ? 'Seed Çalıştırılıyor...' : 'Seed İşlemini Başlat'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sonuç Detayları */}
|
||||
{result && (
|
||||
<>
|
||||
<p className="font-medium text-gray-700">{result.message}</p>
|
||||
<p className="font-medium text-gray-700 flex-shrink-0">{result.message}</p>
|
||||
|
||||
<p className="text-sm text-gray-600">
|
||||
<p className="text-sm text-gray-600 flex-shrink-0">
|
||||
Toplam eklenen kayıt:{' '}
|
||||
<span className="font-bold text-blue-600">{result.totalInsertedCount}</span>
|
||||
</p>
|
||||
|
||||
{/* Detay Tablosu */}
|
||||
{result.details.length > 0 && (
|
||||
<div className="overflow-x-auto overflow-y-auto border border-gray-200 rounded-md max-h-[50vh]">
|
||||
<div
|
||||
className={classNames(
|
||||
'overflow-x-auto overflow-y-auto border border-gray-200 rounded-md',
|
||||
isMaximized ? 'flex-1 min-h-0' : 'max-h-[50vh]',
|
||||
)}
|
||||
>
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-gray-100 sticky top-0">
|
||||
<tr>
|
||||
|
|
@ -112,13 +108,10 @@ function BranchSeed({
|
|||
<Badge content={d.insertedCount} />
|
||||
</div>
|
||||
</td>
|
||||
{/* Eklenen kolonunu tek satır formatında göster */}
|
||||
<td className="border px-3 py-2">{d.insertedItems.join(', ')}</td>
|
||||
|
||||
<td className="border px-3 py-2 text-yellow-700">
|
||||
{d.warnings.join(', ')}
|
||||
</td>
|
||||
|
||||
<td className="border px-3 py-2 text-red-700">{d.errors.join(', ')}</td>
|
||||
</tr>
|
||||
))}
|
||||
|
|
@ -128,11 +121,44 @@ function BranchSeed({
|
|||
)}
|
||||
|
||||
{!result.details.length && (
|
||||
<p className="text-gray-500 text-sm">Hiç detay bilgisi bulunamadı.</p>
|
||||
<p className="text-gray-500 text-sm flex-shrink-0">Hiç detay bilgisi bulunamadı.</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Dialog.Footer className="flex justify-end items-center pt-3 border-t mt-4">
|
||||
<Button variant="solid" onClick={handleRunSeed} loading={isLoading}>
|
||||
{isLoading ? 'Seed Çalıştırılıyor...' : 'Seed İşlemini Başlat'}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function BranchSeed({
|
||||
open,
|
||||
onDialogClose,
|
||||
id,
|
||||
name,
|
||||
}: {
|
||||
open: boolean
|
||||
onDialogClose: () => void
|
||||
id: string
|
||||
name: string
|
||||
}) {
|
||||
return (
|
||||
<Container>
|
||||
<Dialog
|
||||
width="75%"
|
||||
height="60%"
|
||||
isOpen={open}
|
||||
onClose={onDialogClose}
|
||||
onRequestClose={onDialogClose}
|
||||
>
|
||||
<Dialog.Body className="flex flex-col">
|
||||
<BranchSeedContent id={id} name={name} />
|
||||
</Dialog.Body>
|
||||
</Dialog>
|
||||
</Container>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { useState, useCallback, useMemo, useEffect } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { Button, Dialog, Notification, toast, Checkbox } from '@/components/ui'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
import {
|
||||
FaPlus,
|
||||
FaTrash,
|
||||
|
|
@ -761,6 +763,15 @@ function generateAlterTableSql(
|
|||
const STEPS = ['Sütun Tasarımı', 'Entity Ayarları', 'Index / Key', 'İlişkiler', 'T-SQL Önizleme'] as const
|
||||
type Step = 0 | 1 | 2 | 3 | 4
|
||||
|
||||
function StepContentWrapper({ children }: { children: React.ReactNode }) {
|
||||
const { isMaximized } = useDialogContext()
|
||||
return (
|
||||
<div className={isMaximized ? 'flex-1 min-h-0 overflow-auto' : 'min-h-[420px]'}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Simple Menu Tree (read-only selection) ───────────────────────────────────
|
||||
|
||||
interface SimpleMenuTreeNodeProps {
|
||||
|
|
@ -1646,14 +1657,14 @@ const SqlTableDesignerDialog = ({
|
|||
<>
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button size="sm" variant="solid" color="blue-600" onClick={addFullAuditedColumns}>
|
||||
<Button size="xs" variant="solid" color="blue-600" onClick={addFullAuditedColumns}>
|
||||
{translate('::App.SqlQueryManager.AddFullAuditedColumns')}
|
||||
</Button>
|
||||
<Button size="sm" variant="solid" color="green-600" onClick={addMultiTenantColumns}>
|
||||
<Button size="xs" variant="solid" color="green-600" onClick={addMultiTenantColumns}>
|
||||
{translate('::App.SqlQueryManager.AddMultiTenantColumns')}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
size="xs"
|
||||
variant="solid"
|
||||
color="amber-600"
|
||||
onClick={importColumnsFromRememberedCreateTable}
|
||||
|
|
@ -1664,7 +1675,7 @@ const SqlTableDesignerDialog = ({
|
|||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
size="xs"
|
||||
variant="solid"
|
||||
color="red-600"
|
||||
icon={<FaTrash />}
|
||||
|
|
@ -1673,7 +1684,7 @@ const SqlTableDesignerDialog = ({
|
|||
{translate('::App.SqlQueryManager.ClearAllColumns')}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
size="xs"
|
||||
variant="solid"
|
||||
color="blue-600"
|
||||
icon={<FaPlus />}
|
||||
|
|
@ -2634,9 +2645,9 @@ const SqlTableDesignerDialog = ({
|
|||
|
||||
return (
|
||||
<Dialog isOpen={isOpen} onClose={handleClose} onRequestClose={handleClose} width={900}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Dialog.Body className="flex flex-col gap-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 border-b pb-3">
|
||||
<div className="flex items-center gap-3 border-b pb-3 flex-shrink-0">
|
||||
<FaTable className="text-2xl text-blue-500" />
|
||||
<div>
|
||||
<h5 className="font-bold">
|
||||
|
|
@ -2653,19 +2664,19 @@ const SqlTableDesignerDialog = ({
|
|||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
{renderStepIndicator()}
|
||||
<div className="flex-shrink-0">{renderStepIndicator()}</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="min-h-[420px]">
|
||||
<StepContentWrapper>
|
||||
{step === 0 && renderColumnDesigner()}
|
||||
{step === 1 && renderEntitySettings()}
|
||||
{step === 2 && renderIndexes()}
|
||||
{step === 3 && renderRelationships()}
|
||||
{step === 4 && renderSqlPreview()}
|
||||
</div>
|
||||
</StepContentWrapper>
|
||||
</Dialog.Body>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between items-center border-t pt-3 mt-1">
|
||||
<Dialog.Footer className="flex justify-between items-center border-t pt-3 mt-1">
|
||||
<Button variant="plain" onClick={handleClose}>
|
||||
{translate('::Cancel')}
|
||||
</Button>
|
||||
|
|
@ -2696,8 +2707,7 @@ const SqlTableDesignerDialog = ({
|
|||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Footer>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import React, { useState } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import { Button, Input, Dialog, FormContainer, FormItem, Upload, Radio } from '@/components/ui'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
import { FaFileAlt, FaFileUpload, FaPlus, FaTrash } from 'react-icons/fa'
|
||||
import { Field, FieldProps, Form, Formik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
|
|
@ -29,13 +31,18 @@ interface NoteModalProps {
|
|||
onNoteAdded?: (note: any) => void
|
||||
}
|
||||
|
||||
export const NoteModal: React.FC<NoteModalProps> = ({
|
||||
function NoteModalContent({
|
||||
entityName,
|
||||
entityId,
|
||||
isOpen,
|
||||
onClose,
|
||||
onNoteAdded: onActivityAdded,
|
||||
}) => {
|
||||
onNoteAdded,
|
||||
}: {
|
||||
entityName: string
|
||||
entityId: string
|
||||
onClose: () => void
|
||||
onNoteAdded?: (note: any) => void
|
||||
}) {
|
||||
const { isMaximized } = useDialogContext()
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [fileList, setFileList] = useState<File[]>([])
|
||||
const { translate } = useLocalization()
|
||||
|
|
@ -57,7 +64,7 @@ export const NoteModal: React.FC<NoteModalProps> = ({
|
|||
fileList.forEach((file) => formData.append('Files', file))
|
||||
|
||||
const createdActivity = await noteService.create(formData)
|
||||
if (onActivityAdded) onActivityAdded(createdActivity)
|
||||
if (onNoteAdded) onNoteAdded(createdActivity)
|
||||
setFileList([])
|
||||
onClose()
|
||||
} catch (err) {
|
||||
|
|
@ -81,10 +88,9 @@ export const NoteModal: React.FC<NoteModalProps> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<Dialog isOpen={isOpen} onClose={onClose} width={700}>
|
||||
<div className="p-2 w-full mx-auto">
|
||||
<>
|
||||
{/* Başlık */}
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<div className="flex items-center justify-between mb-5 flex-shrink-0">
|
||||
<h3 className="text-xl font-semibold flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-100 rounded-full">
|
||||
<FaPlus className="text-purple-600 text-lg" />
|
||||
|
|
@ -99,8 +105,11 @@ export const NoteModal: React.FC<NoteModalProps> = ({
|
|||
onSubmit={handleSave}
|
||||
>
|
||||
{({ values, touched, errors, setFieldValue, isSubmitting }) => (
|
||||
<Form>
|
||||
<FormContainer size="sm">
|
||||
<Form className={classNames('flex flex-col', isMaximized ? 'flex-1 min-h-0' : '')}>
|
||||
<FormContainer
|
||||
size="sm"
|
||||
className={classNames(isMaximized ? 'flex-1 min-h-0 overflow-y-auto' : '')}
|
||||
>
|
||||
{/* NOT TİPİ */}
|
||||
<FormItem invalid={!!(errors.type && touched.type)} errorMessage={errors.type}>
|
||||
<div className="flex gap-2">
|
||||
|
|
@ -151,7 +160,7 @@ export const NoteModal: React.FC<NoteModalProps> = ({
|
|||
<HtmlEditor
|
||||
value={field.value}
|
||||
onValueChanged={(e) => setFieldValue('content', e.value)}
|
||||
height={220}
|
||||
height={isMaximized ? '50vh' : 220}
|
||||
placeholder={translate('::ListForms.ListForm.NoteModal.Content')}
|
||||
>
|
||||
<MediaResizing enabled={true} />
|
||||
|
|
@ -258,7 +267,7 @@ export const NoteModal: React.FC<NoteModalProps> = ({
|
|||
</FormContainer>
|
||||
|
||||
{/* ALT BUTONLAR */}
|
||||
<div className="mt-5 flex justify-between items-center pt-4 border-t border-gray-200">
|
||||
<Dialog.Footer className="mt-5 flex justify-between items-center pt-4 border-t border-gray-200">
|
||||
<Button variant="default" size="md" onClick={onClose} disabled={uploading}>
|
||||
{translate('::Cancel')}
|
||||
</Button>
|
||||
|
|
@ -271,11 +280,31 @@ export const NoteModal: React.FC<NoteModalProps> = ({
|
|||
>
|
||||
{uploading ? translate('::App.Loading') : translate('::ListForms.Wizard.Add')}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Footer>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const NoteModal: React.FC<NoteModalProps> = ({
|
||||
entityName,
|
||||
entityId,
|
||||
isOpen,
|
||||
onClose,
|
||||
onNoteAdded,
|
||||
}) => {
|
||||
return (
|
||||
<Dialog isOpen={isOpen} onClose={onClose} width={700}>
|
||||
<Dialog.Body className="flex flex-col p-2">
|
||||
<NoteModalContent
|
||||
entityName={entityName}
|
||||
entityId={entityId}
|
||||
onClose={onClose}
|
||||
onNoteAdded={onNoteAdded}
|
||||
/>
|
||||
</Dialog.Body>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export function AdminView({
|
|||
const navigationItems = [
|
||||
{
|
||||
id: 'stats' as AdminSection,
|
||||
label: translate('::App.Videoroom.Dashboard'),
|
||||
label: translate('::App.Forum.Dashboard'),
|
||||
icon: FaChartBar,
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -167,11 +167,11 @@ export function CategoryManagement({
|
|||
</h2>
|
||||
<Button
|
||||
variant="solid"
|
||||
icon={<FaPlus className="w-4 h-4" />}
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
disabled={loading}
|
||||
className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
<span>{translate('::App.Forum.CategoryManagement.AddCategory')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -369,56 +369,56 @@ export function CategoryManagement({
|
|||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
size="xs"
|
||||
icon={
|
||||
category.isActive ? (
|
||||
<FaEye className="w-4 h-4" />
|
||||
) : (
|
||||
<FaEyeSlash className="w-4 h-4" />
|
||||
)
|
||||
}
|
||||
size='xs'
|
||||
onClick={() => handleToggleActive(category)}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
category.isActive
|
||||
? 'text-green-600 hover:bg-green-100'
|
||||
: 'text-red-600 hover:bg-red-100'
|
||||
}`}
|
||||
title={category.isActive ? 'Hide Category' : 'Show Category'}
|
||||
></Button>
|
||||
>
|
||||
{category.isActive ? (
|
||||
<FaEye className="w-3 h-3" />
|
||||
) : (
|
||||
<FaEyeSlash className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="xs"
|
||||
size='xs'
|
||||
onClick={() => handleToggleLocked(category)}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
category.isLocked
|
||||
? 'text-yellow-600 hover:bg-yellow-100'
|
||||
: 'text-green-600 hover:bg-green-100'
|
||||
}`}
|
||||
title={category.isLocked ? 'Unlock Category' : 'Lock Category'}
|
||||
icon={
|
||||
category.isLocked ? (
|
||||
<FaLock className="w-4 h-4" />
|
||||
>
|
||||
{category.isLocked ? (
|
||||
<FaLock className="w-3 h-3" />
|
||||
) : (
|
||||
<FaUnlock className="w-4 h-4" />
|
||||
)
|
||||
}
|
||||
></Button>
|
||||
<FaUnlock className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="xs"
|
||||
size='xs'
|
||||
onClick={() => handleEdit(category)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
className="p-1 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.CategoryManagement.EditCategory')}
|
||||
icon={<FaEdit className="w-4 h-4" />}
|
||||
></Button>
|
||||
>
|
||||
<FaEdit className="w-3 h-3" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="xs"
|
||||
size='xs'
|
||||
onClick={() => confirmDeleteCategory(category)}
|
||||
className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
|
||||
className="p-1 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.CategoryManagement.DeleteCategory')}
|
||||
icon={<FaTrash className="w-4 h-4" />}
|
||||
></Button>
|
||||
>
|
||||
<FaTrash className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -165,12 +165,12 @@ export function PostManagement({
|
|||
{translate('::App.Forum.PostManagement.Title')}
|
||||
</h2>
|
||||
<Button
|
||||
icon={<FaPlus className="w-4 h-4" />}
|
||||
variant="solid"
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
disabled={loading}
|
||||
className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
<span>{translate('::App.Forum.PostManagement.AddPost')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -399,15 +399,9 @@ export function PostManagement({
|
|||
|
||||
<div className="flex items-center space-x-2 ml-4">
|
||||
<Button
|
||||
icon={
|
||||
post.isAcceptedAnswer ? (
|
||||
<FaCheckCircle className="w-4 h-4" />
|
||||
) : (
|
||||
<FaCircle className="w-4 h-4" />
|
||||
)
|
||||
}
|
||||
size='xs'
|
||||
onClick={() => handleToggleAcceptedAnswer(post)}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
post.isAcceptedAnswer
|
||||
? 'text-emerald-600 hover:bg-emerald-100'
|
||||
: 'text-gray-400 hover:bg-gray-100'
|
||||
|
|
@ -417,24 +411,30 @@ export function PostManagement({
|
|||
? 'Remove Accepted Answer'
|
||||
: 'Mark as Accepted Answer'
|
||||
}
|
||||
></Button>
|
||||
|
||||
<Button
|
||||
icon={<FaEdit className="w-4 h-4" />}
|
||||
onClick={() => handleEdit(post)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.PostManagement.EditPost')}
|
||||
>
|
||||
|
||||
{post.isAcceptedAnswer ? (
|
||||
<FaCheckCircle className="w-3 h-3" />
|
||||
) : (
|
||||
<FaCircle className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
icon={<FaTrashAlt className="w-4 h-4" />}
|
||||
size='xs'
|
||||
onClick={() => handleEdit(post)}
|
||||
className="p-1 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.PostManagement.EditPost')}
|
||||
>
|
||||
<FaEdit className="w-3 h-3" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size='xs'
|
||||
onClick={() => confirmDeletePost(post)}
|
||||
className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
|
||||
className="p-1 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.PostManagement.DeletePost')}
|
||||
>
|
||||
|
||||
<FaTrashAlt className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -208,11 +208,11 @@ export function TopicManagement({
|
|||
</h2>
|
||||
<Button
|
||||
variant="solid"
|
||||
icon={<FaPlus className="w-4 h-4" />}
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
disabled={loading}
|
||||
className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
<span>{translate('::App.Forum.TopicManagement.AddTopic')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -400,69 +400,73 @@ export function TopicManagement({
|
|||
|
||||
<div className="flex items-center space-x-2 ml-4">
|
||||
<Button
|
||||
icon={
|
||||
topic.isPinned ? (
|
||||
<FaThumbtack className="w-4 h-4" />
|
||||
) : (
|
||||
<FaTree className="w-4 h-4" />
|
||||
)
|
||||
}
|
||||
size='xs'
|
||||
onClick={() => handlePin(topic)}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
topic.isPinned
|
||||
? 'text-orange-600 hover:bg-orange-100'
|
||||
: 'text-gray-400 hover:bg-gray-100'
|
||||
}`}
|
||||
title={topic.isPinned ? 'Unpin Topic' : 'Pin Topic'}
|
||||
></Button>
|
||||
>
|
||||
{topic.isPinned ? (
|
||||
<FaThumbtack className="w-3 h-3" />
|
||||
) : (
|
||||
<FaTree className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
icon={
|
||||
topic.isLocked ? (
|
||||
<FaLock className="w-4 h-4" />
|
||||
) : (
|
||||
<FaUnlock className="w-4 h-4" />
|
||||
)
|
||||
}
|
||||
size='xs'
|
||||
onClick={() => handleLock(topic)}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
topic.isLocked
|
||||
? 'text-yellow-600 hover:bg-yellow-100'
|
||||
: 'text-green-600 hover:bg-green-100'
|
||||
}`}
|
||||
title={topic.isLocked ? 'Unlock Topic' : 'Lock Topic'}
|
||||
></Button>
|
||||
>
|
||||
{topic.isLocked ? (
|
||||
<FaLock className="w-3 h-3" />
|
||||
) : (
|
||||
<FaUnlock className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
icon={
|
||||
topic.isSolved ? (
|
||||
<FaCheckCircle className="w-4 h-4" />
|
||||
) : (
|
||||
<FaCircle className="w-4 h-4" />
|
||||
)
|
||||
}
|
||||
size='xs'
|
||||
onClick={() => handleSolved(topic)}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
topic.isSolved
|
||||
? 'text-emerald-600 hover:bg-emerald-100'
|
||||
: 'text-gray-400 hover:bg-gray-100'
|
||||
}`}
|
||||
title={topic.isSolved ? 'Mark as Unsolved' : 'Mark as Solved'}
|
||||
></Button>
|
||||
>
|
||||
{topic.isSolved ? (
|
||||
<FaCheckCircle className="w-3 h-3" />
|
||||
) : (
|
||||
<FaCircle className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
icon={<FaEdit className="w-4 h-4" />}
|
||||
size='xs'
|
||||
onClick={() => handleEdit(topic)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
className="p-1 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.TopicManagement.EditTopic')}
|
||||
></Button>
|
||||
>
|
||||
<FaEdit className="w-3 h-3" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
icon={<FaTrashAlt className="w-4 h-4" />}
|
||||
size='xs'
|
||||
onClick={() => confirmDeleteTopic(topic)}
|
||||
className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
|
||||
className="p-1 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.TopicManagement.DeleteTopic')}
|
||||
></Button>
|
||||
>
|
||||
<FaTrashAlt className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1476,7 +1476,9 @@ const Grid = (props: GridProps) => {
|
|||
onClose={() => filterData.setIsImportModalOpen(false)}
|
||||
onRequestClose={() => filterData.setIsImportModalOpen(false)}
|
||||
>
|
||||
<Dialog.Body className="flex flex-col">
|
||||
<ImportDashboard gridDto={gridDto} />
|
||||
</Dialog.Body>
|
||||
</Dialog>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -404,11 +404,17 @@ const SchedulerView = (props: SchedulerViewProps) => {
|
|||
canUpdate: listFormField?.canUpdate ?? false,
|
||||
canCreate: listFormField?.canCreate ?? false,
|
||||
canExport: listFormField?.canExport ?? false,
|
||||
allowEditing: listFormField?.allowEditing ?? true,
|
||||
allowAdding: listFormField?.allowAdding ?? true,
|
||||
dataField: i.dataField,
|
||||
name: i.dataField,
|
||||
editorType2: i.editorType2,
|
||||
editorType:
|
||||
i.editorType2 == PlatformEditorTypes.dxGridBox ? 'dxDropDownBox' : i.editorType2,
|
||||
i.editorType2 == PlatformEditorTypes.dxGridBox
|
||||
? 'dxDropDownBox'
|
||||
: i.editorType2 == PlatformEditorTypes.dxImageUpload
|
||||
? undefined
|
||||
: i.editorType2,
|
||||
colSpan: i.colSpan,
|
||||
isRequired: i.isRequired,
|
||||
editorOptions,
|
||||
|
|
@ -419,7 +425,10 @@ const SchedulerView = (props: SchedulerViewProps) => {
|
|||
item.label = { text: captionize(i.dataField.split(':')[1]) }
|
||||
}
|
||||
|
||||
if ((currentMode == 'edit' && !item.canUpdate) || (currentMode == 'new' && !item.canCreate)) {
|
||||
if (
|
||||
(currentMode == 'edit' && !item.canUpdate) ||
|
||||
(currentMode == 'new' && !item.canCreate)
|
||||
) {
|
||||
item.editorOptions = {
|
||||
...item.editorOptions,
|
||||
readOnly: true,
|
||||
|
|
@ -492,18 +501,22 @@ const SchedulerView = (props: SchedulerViewProps) => {
|
|||
// Tabbed varsa belirli class'lara sahip elementi bul ve flex-direction'ı değiştir
|
||||
if (hasTabbedItems) {
|
||||
setTimeout(() => {
|
||||
const targetElement = document.querySelector('.dx-item-content.dx-box-item-content.dx-box-flex.dx-box.dx-widget.dx-collection')
|
||||
const targetElement = document.querySelector(
|
||||
'.dx-item-content.dx-box-item-content.dx-box-flex.dx-box.dx-widget.dx-collection',
|
||||
)
|
||||
if (targetElement) {
|
||||
const htmlElement = targetElement as HTMLElement
|
||||
|
||||
// Mevcut style'ı al ve flex-direction: row'u column'a çevir
|
||||
const currentStyle = htmlElement.getAttribute('style') || ''
|
||||
const updatedStyle = currentStyle.replace(/flex-direction:\s*row/gi, 'flex-direction: column')
|
||||
const updatedStyle = currentStyle.replace(
|
||||
/flex-direction:\s*row/gi,
|
||||
'flex-direction: column',
|
||||
)
|
||||
htmlElement.setAttribute('style', updatedStyle)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
},
|
||||
[gridDto, translate, isPopupFullScreen, listFormCode],
|
||||
)
|
||||
|
|
@ -540,7 +553,7 @@ const SchedulerView = (props: SchedulerViewProps) => {
|
|||
key={`Scheduler-${listFormCode}-${schedulerDataSource ? 'loaded' : 'loading'}`}
|
||||
id={'Scheduler-' + listFormCode}
|
||||
dataSource={schedulerDataSource}
|
||||
dateSerializationFormat='yyyy-MM-ddTHH:mm:ss'
|
||||
dateSerializationFormat="yyyy-MM-ddTHH:mm:ss"
|
||||
textExpr={gridDto.gridOptions.schedulerOptionDto?.textExpr || 'text'}
|
||||
startDateExpr={gridDto.gridOptions.schedulerOptionDto?.startDateExpr || 'startDate'}
|
||||
endDateExpr={gridDto.gridOptions.schedulerOptionDto?.endDateExpr || 'endDate'}
|
||||
|
|
|
|||
|
|
@ -1068,12 +1068,16 @@ const Tree = (props: TreeProps) => {
|
|||
canUpdate: listFormField?.canUpdate ?? false,
|
||||
canCreate: listFormField?.canCreate ?? false,
|
||||
canExport: listFormField?.canExport ?? false,
|
||||
allowEditing: listFormField?.allowEditing ?? true,
|
||||
allowAdding: listFormField?.allowAdding ?? true,
|
||||
dataField: i.dataField,
|
||||
name: i.dataField,
|
||||
editorType2: i.editorType2,
|
||||
editorType:
|
||||
i.editorType2 == PlatformEditorTypes.dxGridBox
|
||||
? 'dxDropDownBox'
|
||||
: i.editorType2 == PlatformEditorTypes.dxImageUpload
|
||||
? undefined
|
||||
: i.editorType2,
|
||||
colSpan: i.colSpan,
|
||||
isRequired: i.isRequired,
|
||||
|
|
|
|||
Loading…
Reference in a new issue