File size: 3,165 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
/*

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, { useRef } from 'react';
import { Modal, Form } from '@douyinfe/semi-ui';

const SearchModal = ({

  searchModalVisible,

  handleSearchConfirm,

  handleCloseModal,

  isMobile,

  isAdminUser,

  inputs,

  dataExportDefaultTime,

  timeOptions,

  handleInputChange,

  t,

}) => {
  const formRef = useRef();

  const FORM_FIELD_PROPS = {
    className: 'w-full mb-2 !rounded-lg',
  };

  const createFormField = (Component, props) => (
    <Component {...FORM_FIELD_PROPS} {...props} />
  );

  const { start_timestamp, end_timestamp, username } = inputs;

  return (
    <Modal

      title={t('搜索条件')}

      visible={searchModalVisible}

      onOk={handleSearchConfirm}

      onCancel={handleCloseModal}

      closeOnEsc={true}

      size={isMobile ? 'full-width' : 'small'}

      centered

    >

      <Form ref={formRef} layout='vertical' className='w-full'>

        {createFormField(Form.DatePicker, {

          field: 'start_timestamp',

          label: t('起始时间'),

          initValue: start_timestamp,

          value: start_timestamp,

          type: 'dateTime',

          name: 'start_timestamp',

          onChange: (value) => handleInputChange(value, 'start_timestamp'),

        })}



        {createFormField(Form.DatePicker, {

          field: 'end_timestamp',

          label: t('结束时间'),

          initValue: end_timestamp,

          value: end_timestamp,

          type: 'dateTime',

          name: 'end_timestamp',

          onChange: (value) => handleInputChange(value, 'end_timestamp'),

        })}



        {createFormField(Form.Select, {

          field: 'data_export_default_time',

          label: t('时间粒度'),

          initValue: dataExportDefaultTime,

          placeholder: t('时间粒度'),

          name: 'data_export_default_time',

          optionList: timeOptions,

          onChange: (value) =>

            handleInputChange(value, 'data_export_default_time'),

        })}



        {isAdminUser &&

          createFormField(Form.Input, {

            field: 'username',

            label: t('用户名称'),

            value: username,

            placeholder: t('可选值'),

            name: 'username',

            onChange: (value) => handleInputChange(value, 'username'),

          })}

      </Form>

    </Modal>
  );
};

export default SearchModal;