65 lines
2.2 KiB
React
Raw Normal View History

/*
Copyright (C) 2025 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
♻️ refactor: restructure MjLogsTable into modular component architecture Refactor the monolithic MjLogsTable component (971 lines) into a modular, maintainable architecture following the same pattern as LogsTable refactor. ## What Changed ### 🏗️ Architecture - Split large single file into focused, single-responsibility components - Introduced custom hook `useMjLogsData` for centralized state management - Created dedicated column definitions file for better organization - Implemented specialized modal components for Midjourney-specific features ### 📁 New Structure ``` web/src/components/table/mj-logs/ ├── index.jsx # Main page component orchestrator ├── MjLogsTable.jsx # Pure table rendering component ├── MjLogsActions.jsx # Actions area (banner + compact mode) ├── MjLogsFilters.jsx # Search form component ├── MjLogsColumnDefs.js # Column definitions and renderers └── modals/ ├── ColumnSelectorModal.jsx # Column visibility settings └── ContentModal.jsx # Content viewer (text + image preview) web/src/hooks/mj-logs/ └── useMjLogsData.js # Custom hook for state & logic ``` ### 🎯 Key Improvements - **Maintainability**: Clear separation of concerns, easier to understand - **Reusability**: Modular components can be reused independently - **Performance**: Optimized with `useMemo` for column rendering - **Testing**: Single-responsibility components easier to test - **Developer Experience**: Better code organization and readability ### 🎨 Midjourney-Specific Features Preserved - All task type rendering with icons (IMAGINE, UPSCALE, VARIATION, etc.) - Status rendering with appropriate colors and icons - Image preview functionality for generated artwork - Progress indicators for task completion - Admin-only columns for channel and submission results - Banner notification system for callback settings ### 🔧 Technical Details - Centralized all business logic in `useMjLogsData` custom hook - Extracted comprehensive column definitions with Lucide React icons - Split complex UI into focused components (table, actions, filters, modals) - Maintained responsive design patterns for mobile compatibility - Preserved admin permission handling for restricted features ### 🐛 Fixes - Improved component prop passing patterns - Enhanced type safety through better state management - Optimized rendering performance with proper memoization ## Breaking Changes None - all existing imports and functionality preserved.
2025-07-18 22:19:58 +08:00
import React from 'react';
import { Layout } from '@douyinfe/semi-ui';
import CardPro from '../../common/ui/CardPro.js';
import MjLogsTable from './MjLogsTable.jsx';
import MjLogsActions from './MjLogsActions.jsx';
import MjLogsFilters from './MjLogsFilters.jsx';
import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
import ContentModal from './modals/ContentModal.jsx';
import { useMjLogsData } from '../../../hooks/mj-logs/useMjLogsData.js';
import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
✨ refactor: move table pagination to CardPro footer for consistent layout Implement unified pagination system by moving pagination from CardTable to CardPro footer area, ensuring consistent visual layout across all table pages. ## Changes Made ### Core Components - **CardPro**: Add `paginationArea` prop to display pagination in card footer - **CardTable**: Add `hidePagination` prop to control internal pagination visibility - **utils.js**: Add `createCardProPagination` helper with responsive design - Mobile: small size + showQuickJumper + showTotal - Desktop: default size + showTotal only ### Table Pages Updated - Users table (type1): Add external pagination control - Channels table (type3): Move pagination to CardPro footer - Tokens table (type1): Implement unified pagination layout - Redemptions table (type1): Apply consistent pagination pattern - Usage-logs table (type2): Migrate to external pagination - MJ-logs table (type2): Update pagination configuration - Task-logs table (type2): Standardize pagination approach ### Bug Fixes - Fix CardTable desktop pagination visibility when hidePagination=true - Standardize data access pattern across all table components - Remove redundant data destructuring in users table for consistency ## Benefits - ✅ Consistent pagination position across all tables - ✅ Better visual hierarchy with fixed footer pagination - ✅ Responsive design optimized for mobile and desktop - ✅ Unified codebase with reusable pagination utility - ✅ Backward compatible with existing table functionality ## Files Modified - `web/src/components/common/ui/CardPro.js` - `web/src/components/common/ui/CardTable.js` - `web/src/helpers/utils.js` - `web/src/components/table/*/index.jsx` (7 tables) - `web/src/components/table/*/*.jsx` (7 table components)
2025-07-20 02:27:33 +08:00
import { createCardProPagination } from '../../../helpers/utils';
♻️ refactor: restructure MjLogsTable into modular component architecture Refactor the monolithic MjLogsTable component (971 lines) into a modular, maintainable architecture following the same pattern as LogsTable refactor. ## What Changed ### 🏗️ Architecture - Split large single file into focused, single-responsibility components - Introduced custom hook `useMjLogsData` for centralized state management - Created dedicated column definitions file for better organization - Implemented specialized modal components for Midjourney-specific features ### 📁 New Structure ``` web/src/components/table/mj-logs/ ├── index.jsx # Main page component orchestrator ├── MjLogsTable.jsx # Pure table rendering component ├── MjLogsActions.jsx # Actions area (banner + compact mode) ├── MjLogsFilters.jsx # Search form component ├── MjLogsColumnDefs.js # Column definitions and renderers └── modals/ ├── ColumnSelectorModal.jsx # Column visibility settings └── ContentModal.jsx # Content viewer (text + image preview) web/src/hooks/mj-logs/ └── useMjLogsData.js # Custom hook for state & logic ``` ### 🎯 Key Improvements - **Maintainability**: Clear separation of concerns, easier to understand - **Reusability**: Modular components can be reused independently - **Performance**: Optimized with `useMemo` for column rendering - **Testing**: Single-responsibility components easier to test - **Developer Experience**: Better code organization and readability ### 🎨 Midjourney-Specific Features Preserved - All task type rendering with icons (IMAGINE, UPSCALE, VARIATION, etc.) - Status rendering with appropriate colors and icons - Image preview functionality for generated artwork - Progress indicators for task completion - Admin-only columns for channel and submission results - Banner notification system for callback settings ### 🔧 Technical Details - Centralized all business logic in `useMjLogsData` custom hook - Extracted comprehensive column definitions with Lucide React icons - Split complex UI into focused components (table, actions, filters, modals) - Maintained responsive design patterns for mobile compatibility - Preserved admin permission handling for restricted features ### 🐛 Fixes - Improved component prop passing patterns - Enhanced type safety through better state management - Optimized rendering performance with proper memoization ## Breaking Changes None - all existing imports and functionality preserved.
2025-07-18 22:19:58 +08:00
const MjLogsPage = () => {
const mjLogsData = useMjLogsData();
const isMobile = useIsMobile();
♻️ refactor: restructure MjLogsTable into modular component architecture Refactor the monolithic MjLogsTable component (971 lines) into a modular, maintainable architecture following the same pattern as LogsTable refactor. ## What Changed ### 🏗️ Architecture - Split large single file into focused, single-responsibility components - Introduced custom hook `useMjLogsData` for centralized state management - Created dedicated column definitions file for better organization - Implemented specialized modal components for Midjourney-specific features ### 📁 New Structure ``` web/src/components/table/mj-logs/ ├── index.jsx # Main page component orchestrator ├── MjLogsTable.jsx # Pure table rendering component ├── MjLogsActions.jsx # Actions area (banner + compact mode) ├── MjLogsFilters.jsx # Search form component ├── MjLogsColumnDefs.js # Column definitions and renderers └── modals/ ├── ColumnSelectorModal.jsx # Column visibility settings └── ContentModal.jsx # Content viewer (text + image preview) web/src/hooks/mj-logs/ └── useMjLogsData.js # Custom hook for state & logic ``` ### 🎯 Key Improvements - **Maintainability**: Clear separation of concerns, easier to understand - **Reusability**: Modular components can be reused independently - **Performance**: Optimized with `useMemo` for column rendering - **Testing**: Single-responsibility components easier to test - **Developer Experience**: Better code organization and readability ### 🎨 Midjourney-Specific Features Preserved - All task type rendering with icons (IMAGINE, UPSCALE, VARIATION, etc.) - Status rendering with appropriate colors and icons - Image preview functionality for generated artwork - Progress indicators for task completion - Admin-only columns for channel and submission results - Banner notification system for callback settings ### 🔧 Technical Details - Centralized all business logic in `useMjLogsData` custom hook - Extracted comprehensive column definitions with Lucide React icons - Split complex UI into focused components (table, actions, filters, modals) - Maintained responsive design patterns for mobile compatibility - Preserved admin permission handling for restricted features ### 🐛 Fixes - Improved component prop passing patterns - Enhanced type safety through better state management - Optimized rendering performance with proper memoization ## Breaking Changes None - all existing imports and functionality preserved.
2025-07-18 22:19:58 +08:00
return (
<>
{/* Modals */}
<ColumnSelectorModal {...mjLogsData} />
<ContentModal {...mjLogsData} />
<Layout>
<CardPro
type="type2"
statsArea={<MjLogsActions {...mjLogsData} />}
searchArea={<MjLogsFilters {...mjLogsData} />}
✨ refactor: move table pagination to CardPro footer for consistent layout Implement unified pagination system by moving pagination from CardTable to CardPro footer area, ensuring consistent visual layout across all table pages. ## Changes Made ### Core Components - **CardPro**: Add `paginationArea` prop to display pagination in card footer - **CardTable**: Add `hidePagination` prop to control internal pagination visibility - **utils.js**: Add `createCardProPagination` helper with responsive design - Mobile: small size + showQuickJumper + showTotal - Desktop: default size + showTotal only ### Table Pages Updated - Users table (type1): Add external pagination control - Channels table (type3): Move pagination to CardPro footer - Tokens table (type1): Implement unified pagination layout - Redemptions table (type1): Apply consistent pagination pattern - Usage-logs table (type2): Migrate to external pagination - MJ-logs table (type2): Update pagination configuration - Task-logs table (type2): Standardize pagination approach ### Bug Fixes - Fix CardTable desktop pagination visibility when hidePagination=true - Standardize data access pattern across all table components - Remove redundant data destructuring in users table for consistency ## Benefits - ✅ Consistent pagination position across all tables - ✅ Better visual hierarchy with fixed footer pagination - ✅ Responsive design optimized for mobile and desktop - ✅ Unified codebase with reusable pagination utility - ✅ Backward compatible with existing table functionality ## Files Modified - `web/src/components/common/ui/CardPro.js` - `web/src/components/common/ui/CardTable.js` - `web/src/helpers/utils.js` - `web/src/components/table/*/index.jsx` (7 tables) - `web/src/components/table/*/*.jsx` (7 table components)
2025-07-20 02:27:33 +08:00
paginationArea={createCardProPagination({
currentPage: mjLogsData.activePage,
pageSize: mjLogsData.pageSize,
total: mjLogsData.logCount,
onPageChange: mjLogsData.handlePageChange,
onPageSizeChange: mjLogsData.handlePageSizeChange,
isMobile: isMobile,
t: mjLogsData.t,
✨ refactor: move table pagination to CardPro footer for consistent layout Implement unified pagination system by moving pagination from CardTable to CardPro footer area, ensuring consistent visual layout across all table pages. ## Changes Made ### Core Components - **CardPro**: Add `paginationArea` prop to display pagination in card footer - **CardTable**: Add `hidePagination` prop to control internal pagination visibility - **utils.js**: Add `createCardProPagination` helper with responsive design - Mobile: small size + showQuickJumper + showTotal - Desktop: default size + showTotal only ### Table Pages Updated - Users table (type1): Add external pagination control - Channels table (type3): Move pagination to CardPro footer - Tokens table (type1): Implement unified pagination layout - Redemptions table (type1): Apply consistent pagination pattern - Usage-logs table (type2): Migrate to external pagination - MJ-logs table (type2): Update pagination configuration - Task-logs table (type2): Standardize pagination approach ### Bug Fixes - Fix CardTable desktop pagination visibility when hidePagination=true - Standardize data access pattern across all table components - Remove redundant data destructuring in users table for consistency ## Benefits - ✅ Consistent pagination position across all tables - ✅ Better visual hierarchy with fixed footer pagination - ✅ Responsive design optimized for mobile and desktop - ✅ Unified codebase with reusable pagination utility - ✅ Backward compatible with existing table functionality ## Files Modified - `web/src/components/common/ui/CardPro.js` - `web/src/components/common/ui/CardTable.js` - `web/src/helpers/utils.js` - `web/src/components/table/*/index.jsx` (7 tables) - `web/src/components/table/*/*.jsx` (7 table components)
2025-07-20 02:27:33 +08:00
})}
🌟 feat(ui): reusable CompactModeToggle & mobile-friendly CardPro Summary ------- Introduce a reusable compact-mode toggle component and greatly improve the CardPro header for small screens. Removes duplicated code, adds i18n support, and refines overall responsiveness. Details ------- 🎨 UI / Components • Create `common/ui/CompactModeToggle.js` – Provides a single source of truth for switching between “Compact list” and “Adaptive list” – Automatically hides itself on mobile devices via `useIsMobile()` • Refactor table modules to use the new component – `Users`, `Tokens`, `Redemptions`, `Channels`, `TaskLogs`, `MjLogs`, `UsageLogs` – Deletes legacy in-file toggle buttons & reduces repetition 📱 CardPro improvements • Hide `actionsArea` and `searchArea` on mobile, showing a single “Show Actions / Hide Actions” toggle button • Add i18n: texts are now pulled from injected `t()` function (`显示操作项` / `隐藏操作项` etc.) • Extend PropTypes to accept the `t` prop; supply a safe fallback • Minor cleanup: remove legacy DOM observers & flag CSS, simplify logic 🔧 Integration • Pass the `t` translation function to every `CardPro` usage across table pages • Remove temporary custom class hooks after logic simplification Benefits -------- ✓ Consistent, DRY compact-mode handling across the entire dashboard ✓ Better mobile experience with decluttered headers ✓ Full translation support for newly added strings ✓ Easier future maintenance (single compact toggle, unified CardPro API)
2025-07-19 01:34:59 +08:00
t={mjLogsData.t}
♻️ refactor: restructure MjLogsTable into modular component architecture Refactor the monolithic MjLogsTable component (971 lines) into a modular, maintainable architecture following the same pattern as LogsTable refactor. ## What Changed ### 🏗️ Architecture - Split large single file into focused, single-responsibility components - Introduced custom hook `useMjLogsData` for centralized state management - Created dedicated column definitions file for better organization - Implemented specialized modal components for Midjourney-specific features ### 📁 New Structure ``` web/src/components/table/mj-logs/ ├── index.jsx # Main page component orchestrator ├── MjLogsTable.jsx # Pure table rendering component ├── MjLogsActions.jsx # Actions area (banner + compact mode) ├── MjLogsFilters.jsx # Search form component ├── MjLogsColumnDefs.js # Column definitions and renderers └── modals/ ├── ColumnSelectorModal.jsx # Column visibility settings └── ContentModal.jsx # Content viewer (text + image preview) web/src/hooks/mj-logs/ └── useMjLogsData.js # Custom hook for state & logic ``` ### 🎯 Key Improvements - **Maintainability**: Clear separation of concerns, easier to understand - **Reusability**: Modular components can be reused independently - **Performance**: Optimized with `useMemo` for column rendering - **Testing**: Single-responsibility components easier to test - **Developer Experience**: Better code organization and readability ### 🎨 Midjourney-Specific Features Preserved - All task type rendering with icons (IMAGINE, UPSCALE, VARIATION, etc.) - Status rendering with appropriate colors and icons - Image preview functionality for generated artwork - Progress indicators for task completion - Admin-only columns for channel and submission results - Banner notification system for callback settings ### 🔧 Technical Details - Centralized all business logic in `useMjLogsData` custom hook - Extracted comprehensive column definitions with Lucide React icons - Split complex UI into focused components (table, actions, filters, modals) - Maintained responsive design patterns for mobile compatibility - Preserved admin permission handling for restricted features ### 🐛 Fixes - Improved component prop passing patterns - Enhanced type safety through better state management - Optimized rendering performance with proper memoization ## Breaking Changes None - all existing imports and functionality preserved.
2025-07-18 22:19:58 +08:00
>
<MjLogsTable {...mjLogsData} />
</CardPro>
</Layout>
</>
);
};
export default MjLogsPage;