File size: 3,678 Bytes
4ef3a0e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/*

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

*/

import React from 'react';
import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
import { getChannelsColumns } from '../ChannelsColumnDefs';

const ColumnSelectorModal = ({

  showColumnSelector,

  setShowColumnSelector,

  visibleColumns,

  handleColumnVisibilityChange,

  handleSelectAll,

  initDefaultColumns,

  COLUMN_KEYS,

  t,

  // Props needed for getChannelsColumns

  updateChannelBalance,

  manageChannel,

  manageTag,

  submitTagEdit,

  testChannel,

  setCurrentTestChannel,

  setShowModelTestModal,

  setEditingChannel,

  setShowEdit,

  setShowEditTag,

  setEditingTag,

  copySelectedChannel,

  refresh,

  activePage,

  channels,

}) => {
  // Get all columns for display in selector
  const allColumns = getChannelsColumns({
    t,
    COLUMN_KEYS,
    updateChannelBalance,
    manageChannel,
    manageTag,
    submitTagEdit,
    testChannel,
    setCurrentTestChannel,
    setShowModelTestModal,
    setEditingChannel,
    setShowEdit,
    setShowEditTag,
    setEditingTag,
    copySelectedChannel,
    refresh,
    activePage,
    channels,
  });

  return (
    <Modal

      title={t('列设置')}

      visible={showColumnSelector}

      onCancel={() => setShowColumnSelector(false)}

      footer={

        <div className='flex justify-end'>

          <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>

          <Button onClick={() => setShowColumnSelector(false)}>

            {t('取消')}

          </Button>

          <Button onClick={() => setShowColumnSelector(false)}>

            {t('确定')}

          </Button>

        </div>

      }

    >

      <div style={{ marginBottom: 20 }}>

        <Checkbox

          checked={Object.values(visibleColumns).every((v) => v === true)}

          indeterminate={

            Object.values(visibleColumns).some((v) => v === true) &&

            !Object.values(visibleColumns).every((v) => v === true)

          }

          onChange={(e) => handleSelectAll(e.target.checked)}

        >

          {t('全选')}

        </Checkbox>

      </div>

      <div

        className='flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4'

        style={{ border: '1px solid var(--semi-color-border)' }}

      >

        {allColumns.map((column) => {

          // Skip columns without title

          if (!column.title) {

            return null;

          }



          return (

            <div key={column.key} className='w-1/2 mb-4 pr-2'>

              <Checkbox

                checked={!!visibleColumns[column.key]}

                onChange={(e) =>

                  handleColumnVisibilityChange(column.key, e.target.checked)

                }

              >

                {column.title}

              </Checkbox>

            </div>

          );

        })}

      </div>

    </Modal>
  );
};

export default ColumnSelectorModal;