@ant-design/icons#SearchOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#SearchOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: icon.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/button', module).add('icon', () =>
<>
<Tooltip title="search">
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
</Tooltip>
<Button type="primary" shape="circle">
A
</Button>
<Button type="primary" icon={<SearchOutlined />}>
Search
</Button>
<Tooltip title="search">
<Button shape="circle" icon={<SearchOutlined />} />
</Tooltip>
<Button icon={<SearchOutlined />}>Search</Button>
<br />
<Tooltip title="search">
<Button shape="circle" icon={<SearchOutlined />} />
</Tooltip>
<Button icon={<SearchOutlined />}>Search</Button>
<Tooltip title="search">
<Button type="dashed" shape="circle" icon={<SearchOutlined />} />
</Tooltip>
<Button type="dashed" icon={<SearchOutlined />}>
Search
</Button>
</>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p><code>Button</code> components can contain an <code>Icon</code>. This is done by setting the <code>icon</code> property or placing an <code>Icon</code> component within the <code>Button</code>.</p>
<p>If you want specific control over the positioning and placement of the <code>Icon</code>, then that should be done by placing the <code>Icon</code> component within the <code>Button</code> rather than using the <code>icon</code> property.</p></>) } });
Example #2
| Source File: dataApproval.js From credit with Apache License 2.0 | 6 votes |
|
render() {
return (
<div>
<Row>
<Col span={6}>
<label>操作名称：</label><Input style={{ width: 240 }}></Input>
</Col>
<Col span={6}>
<label>用户名：</label><Input style={{ width: 240 }}></Input>
</Col>
<Col span={8}>
<label>地址：</label><Input style={{ width: 240 }}></Input>
<Button style={{ marginLeft: 30 }} type="primary" icon={<SearchOutlined />} >查找</Button>
</Col>
</Row>
<Row style={{ marginTop: 30 }}>
<Col span={18}>
<Table columns={columns1} dataSource={data1} pagination={{ pageSize: 5 }} />
</Col>
</Row>
</div>
)
}
Example #3
| Source File: modelSearch.js From credit with Apache License 2.0 | 6 votes |
|
render() {
return (
<div>
<Row>
<Col span={4}>
<Input addonBefore="模型编号" />
</Col>
<Col span={4}>
<Upload>
<span style={{ marginLeft: 50 }}>特征参数：</span><Button icon={<UploadOutlined />}>上传</Button>
</Upload>
</Col>
</Row>
<Row style={{ marginTop: 30 }}>
<Col span={4}>
<Input addonBefore="模型名称" />
</Col>
<Col span={4}>
<Button type="primary" style={{ marginLeft: 50 }}><SearchOutlined />搜索</Button>
</Col>
</Row>
<Row style={{ marginTop: 30 }}>
<Col span={8}>
<div className="searchResultList">
搜索结果
</div>
</Col>
</Row>
</div >
)
}
Example #4
| Source File: router.js From credit with Apache License 2.0 | 6 votes |
|
institutionRoutes = [
{
path: "/admin/institutiondashboard",
component: InstitutionDashboard,
isShow: true,
title: "综合看板",
icon: AreaChartOutlined
},
{
path: "/admin/datashare",
component: dataShare,
isShow: true,
title: "数据共享",
icon: ShareAltOutlined
},
{
path: "/admin/modelsearch",
component: modelSearch,
isShow: true,
title: "模型搜索",
icon: SearchOutlined
},
{
path: "/admin/learning",
component: learning,
isShow: true,
title: "联邦学习",
icon: GlobalOutlined
},
{
path: "/admin/creditAuth",
component: creditAuth,
isShow: true,
title: "信用认证",
icon: SafetyCertificateOutlined
},
]
Example #5
| Source File: index.js From react_management_template with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<Row>
<Card title="基础按钮" className="base_button" >
<Button type="primary">按钮</Button>
<Button>按钮</Button>
<Button type="dashed">按钮</Button>
<Button type="danger">按钮</Button>
<Button disabled>按钮</Button>
</Card>
<Card title="图形按钮" className="base_button" >
<Button icon={<PlusOutlined />}>创建</Button>
<Button icon={<EditOutlined />}>编辑</Button>
<Button icon={<DeleteOutlined />}type="dashed">删除</Button>
<Button icon={<SearchOutlined />} type="primary">搜索</Button>
<Button icon={<DownloadOutlined />} type="primary">下载</Button>
</Card>
<Card title="Loading按钮" className="base_button" >
<Button type="primary" loading={this.state.loading}>确定</Button>
<Button type="primary" shape="circle" loading={this.state.loading}></Button>
<Button loading={this.state.loading}>点击加载</Button>
<Button shape="circle" loading={this.state.loading}></Button>
<Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
</Card>
<Card title="按钮组" className="base_button" >
<Button.Group>
<Button type="primary" icon={<LeftOutlined/>}>返回</Button>
<Button type="primary" icon={<RightOutlined/>}>前进</Button>
</Button.Group>
</Card>
<Card title="按钮尺寸" className="base_button" >
<Radio.Group value={this.state.size} onChange={this.handleChange}>
<Radio value="small">小</Radio>
<Radio value="default">中</Radio>
<Radio value="large">大</Radio>
</Radio.Group>
<Button size={this.state.size} type="primary">按钮</Button>
<Button size={this.state.size} >按钮</Button>
<Button size={this.state.size} type="dashed">按钮</Button>
<Button size={this.state.size} type="danger">按钮</Button>
<Button size={this.state.size} disabled>按钮</Button>
</Card>
</Row>
</div>
);
}
Example #6
| Source File: index.jsx From prometheusPro with MIT License | 5 votes |
|
HeaderSearch = props => {
const {
className,
defaultValue,
onVisibleChange,
placeholder,
open,
defaultOpen,
...restProps
} = props;
const inputRef = useRef(null);
const [value, setValue] = useMergeValue(defaultValue, {
value: props.value,
onChange: props.onChange,
});
const [searchMode, setSearchMode] = useMergeValue(defaultOpen || false, {
value: props.open,
onChange: onVisibleChange,
});
const inputClass = classNames(styles.input, {
[styles.show]: searchMode,
});
return (
<div
className={classNames(className, styles.headerSearch)}
onClick={() => {
setSearchMode(true);
if (searchMode && inputRef.current) {
inputRef.current.focus();
}
}}
onTransitionEnd={({ propertyName }) => {
if (propertyName === 'width' && !searchMode) {
if (onVisibleChange) {
onVisibleChange(searchMode);
}
}
}}
>
<SearchOutlined
key="Icon"
style={{
cursor: 'pointer',
}}
/>
<AutoComplete
key="AutoComplete"
className={inputClass}
value={value}
style={{
height: 28,
marginTop: -6,
}}
options={restProps.options}
onChange={setValue}
>
<Input
ref={inputRef}
size="middle"
defaultValue={defaultValue}
aria-label={placeholder}
placeholder={placeholder}
onKeyDown={e => {
if (e.key === 'Enter') {
if (restProps.onSearch) {
restProps.onSearch(value);
}
}
}}
onBlur={() => {
setSearchMode(false);
}}
/>
</AutoComplete>
</div>
);
}
Example #7
| Source File: MyAutoComplete.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 5 votes |
|
export function MyAutoComplete({
style,
options = [],
value = '',
onSelect = () => {},
onSearch = () => {},
onChange = () => {},
placeholder = 'Search for people',
}) {
return (
<div style={style}>
<AutoComplete
options={options}
style={{ width: '100%' }}
onSelect={onSelect}
onSearch={onSearch}
filterOption={(inputValue, option) =>
option.value
.toUpperCase()
.indexOf(inputValue.toUpperCase()) !== -1
}
notFoundContent={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
allowClear={true}
backfill={true}
// autoFocus={true}
>
<Input
value={value}
onChange={onChange}
placeholder={placeholder}
prefix={
<SearchOutlined
style={{
fontSize: 16,
color: '#d9d9d9',
}}
/>
}
/>
</AutoComplete>
</div>
)
}
Example #8
| Source File: index.jsx From vpp with MIT License | 5 votes |
|
HeaderSearch = props => {
const {
className,
defaultValue,
onVisibleChange,
placeholder,
open,
defaultOpen,
...restProps
} = props;
const inputRef = useRef(null);
const [value, setValue] = useMergeValue(defaultValue, {
value: props.value,
onChange: props.onChange,
});
const [searchMode, setSearchMode] = useMergeValue(defaultOpen || false, {
value: props.open,
onChange: onVisibleChange,
});
const inputClass = classNames(styles.input, {
[styles.show]: searchMode,
});
return (
<div
className={classNames(className, styles.headerSearch)}
onClick={() => {
setSearchMode(true);
if (searchMode && inputRef.current) {
inputRef.current.focus();
}
}}
onTransitionEnd={({ propertyName }) => {
if (propertyName === 'width' && !searchMode) {
if (onVisibleChange) {
onVisibleChange(searchMode);
}
}
}}
>
<SearchOutlined
key="Icon"
style={{
cursor: 'pointer',
}}
/>
<AutoComplete
key="AutoComplete"
className={inputClass}
value={value}
style={{
height: 28,
marginTop: -6,
}}
options={restProps.options}
onChange={setValue}
>
<Input
ref={inputRef}
defaultValue={defaultValue}
aria-label={placeholder}
placeholder={placeholder}
onKeyDown={e => {
if (e.key === 'Enter') {
if (restProps.onSearch) {
restProps.onSearch(value);
}
}
}}
onBlur={() => {
setSearchMode(false);
}}
/>
</AutoComplete>
</div>
);
}
Example #9
| Source File: index.jsx From erp-crm with MIT License | 4 votes |
|
function SearchItemComponent({ config, onRerender }) {
let { entity, searchConfig } = config;
const { displayLabels, searchFields, outputValue = '_id' } = searchConfig;
const dispatch = useDispatch();
const { crudContextAction } = useCrudContext();
const { panel, collapsedBox, readBox } = crudContextAction;
const { result, isLoading, isSuccess } = useSelector(selectSearchedItems);
const [selectOptions, setOptions] = useState([]);
const [currentValue, setCurrentValue] = useState(undefined);
const isSearching = useRef(false);
const [searching, setSearching] = useState(false);
const [valToSearch, setValToSearch] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');
const [, cancel] = useDebounce(
() => {
setDebouncedValue(valToSearch);
},
500,
[valToSearch]
);
const labels = (optionField) => {
return displayLabels.map((x) => optionField[x]).join(' ');
};
useEffect(() => {
if (debouncedValue != '') {
const options = {
q: debouncedValue,
fields: searchFields,
};
dispatch(crud.search({ entity, options }));
}
return () => {
cancel();
};
}, [debouncedValue]);
const onSearch = (searchText) => {
if (searchText && searchText != '') {
isSearching.current = true;
setSearching(true);
setOptions([]);
setCurrentValue(undefined);
setValToSearch(searchText);
}
};
const onSelect = (data) => {
const currentItem = result.find((item) => {
return item[outputValue] === data;
});
dispatch(crud.currentItem({ data: currentItem }));
panel.open();
collapsedBox.open();
readBox.open();
onRerender();
};
useEffect(() => {
if (isSearching.current) {
if (isSuccess) {
setOptions(result);
} else {
setSearching(false);
setCurrentValue(undefined);
setOptions([]);
}
}
}, [isSuccess, result]);
return (
<Select
loading={isLoading}
showSearch
allowClear
placeholder={<SearchOutlined style={{ float: 'right', padding: '8px 0' }} />}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
notFoundContent={searching ? '... Searching' : <Empty />}
value={currentValue}
onSearch={onSearch}
style={{ width: '100%' }}
onSelect={onSelect}
>
{selectOptions.map((optionField) => (
<Select.Option key={optionField[outputValue]} value={optionField[outputValue]}>
{labels(optionField)}
</Select.Option>
))}
</Select>
);
}
Example #10
| Source File: InfoHeader.js From henan-rescue-viz-website with MIT License | 4 votes |
|
function InfoHeader(props) {
const [isFold, setIsFold] = useState(false)
const [timeRange, setTimeRange] = useState(8)
const [displayList, setDisplayList] = useState([])
const [selectedId, setSelectedId] = useState('')
const [dataSource, setDataSource] = useState('weibo')
const [types, setTypes] = useState([])
useEffect(() => {
if (props.bounds == null) return
const list = props.list.filter(e => props.bounds.containsPoint(e.location))
setDisplayList(list)
}, [props.list, props.bounds])
const onLeftFold = useCallback((e) => {
e.stopPropagation();
setIsFold(!isFold);
}, [isFold])
const handleSliderChange = (value) => {
setTimeRange(value)
props.notifySliderChange(value)
}
const handleItemClicked = (item) => {
setSelectedId(item.id)
props.handleItemClick(item)
}
let handleSouceSwitched = (event) => {
setDataSource(event.target.value)
props.notifyDataSourceSwitch(event.target.value)
}
let souceSwitch = () => {
return <Row className="source-switch" justify="center">
<Col style={{ marginTop: 5 }}>信息来源：</Col>
<Col>
<Radio.Group defaultValue="weibo" buttonStyle="solid" onChange={handleSouceSwitched}>
<Radio.Button value="weibo">微博</Radio.Button>
<Radio.Button value="sheet">在线表格</Radio.Button>
</Radio.Group></Col>
</Row>
}
let headerText = () => {
if (dataSource === 'weibo') {
return <label>本网站仅聚合新浪微博上发布的
有关2021年7月河南暴雨的求助信息，请大家注意辨别信息真伪。
点击标记点可以看到更多信息及原微博地址。</label>
} else {
return <label>在线表格信息来源于志愿者们手工整理有关2021年7月河南暴雨的求助信息, 跳转到
<a href="https://u9u37118bj.feishu.cn/sheets/shtcnemn0sOgZ5Y9Cvp027wHWYd?from=from_copylink" target="_blank" rel="noreferrer">文档地址</a>
(由于有的信息地址不全，地图上的位置可能会有出入) </label>
}
}
const handleCategoryChange = (value) => {
setTypes(CATEGORY_MAP[value] || [])
props.notifyCategoryChange(value)
}
const categories = Object.keys(CATEGORY_MAP)
let slider = () => {
if (dataSource === 'sheet') {
return null
}
let labelText = "最近" + timeRange + "小时";
if (timeRange === 12) {
labelText = "全部记录"
}
return <div className="slider-container">
<Row justify="center" align="middle">
<Col span={12}>
<Slider defaultValue={8} step={2} min={2} max={12} onAfterChange={handleSliderChange}/>
</Col>
<Col className="label-col" span={6}>
<label>{labelText}</label>
</Col>
</Row>
<div className="info-button-list">
<Button type="primary" href="https://u9u37118bj.feishu.cn/docs/doccn3QzzbeQLPQwNSb4Hcl2X1g" target="_blank">关于我们</Button>
<Button type="primary" href="https://u9u37118bj.feishu.cn/sheets/shtcnh4177SPTo2N8NglZHCirDe" target="_blank">实时数据表格</Button>
<Button type="primary" href="https://www.wjx.cn/vj/PZb53C6.aspx" target="_blank">需求反馈</Button>
</div>
</div>
}
return (
<div className="info-container" data-fold={isFold}>
<div className="info" data-fold={isFold}>
{souceSwitch()}
<div>{headerText()}</div>
<br />
{slider()}
</div>
<div className="info-list-header">
<Input placeholder="搜索"
className="info-list-search"
value={props.keyword}
onChange={ e => props.notifyKeywordChange(e.target.value) }
allowClear
prefix={<SearchOutlined className="info-list-search-icon"/>}
style={{ }}
/>
<Select defaultValue='' className="info-list-category" style={{}} onChange={handleCategoryChange}>
<Option value={''}>全选</Option>
{ categories.map(category => <Option value={category} key={category}>{category}</Option>) }
</Select>
<Select mode="multiple"
className="info-list-types"
value={props.selectedTypes}
defaultValue={[]}
showSearch={false}
allowClear
style={{ }}
disabled={types.length === 0}
onChange={value => props.notifyTypesChange(value)}>
{types.map(type => (
<Option key={type}>{type}</Option>
))}
</Select>
</div>
<List
className="info-list"
itemLayout="horizontal"
bordered
dataSource={displayList}
locale={ { emptyText: props.defaultText } }
renderItem={item => (
<List.Item key={item.id} className={item.id === selectedId ? "selected-item" : ''} onClick={ () => { handleItemClicked(item) } }>
<InfoItem info={item} handleCorrection={props.handleCorrection}/>
</List.Item>
)}
/>
<div className="left-fold" data-fold={isFold} onClick={onLeftFold}>{LEFT_FOLD}</div>
</div>
)
}
Example #11
| Source File: adminChallenges.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal title={<span><UploadOutlined/> Upload Challenges</span>} visible={this.state.uploadModalVisible} footer={null} onCancel={() => {this.setState({uploadModalVisible: false})}}>
<UploadChallengesForm handleRefresh={this.handleRefresh.bind(this)} closeUploadChallenges={() => {this.setState({uploadModalVisible: false})}}/>
</Modal>
<div style={{ display: (!this.state.challengeCreate && !this.state.editChallenge) ? "initial" : "none" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<FlagOutlined />} onClick={() => { this.setState({ challengeCreate: true }, this.props.history.push("/Admin/Challenges/Create")) }}>Create New Challenge</Button>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<UploadOutlined />} onClick={() => { this.setState({uploadModalVisible: true}) }}>Upload Challenges</Button>
{this.state.loading && (
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Ellipsis color="#177ddc" size={60} />
<h1>Loading Challenges</h1>
</div>
)}
</div>
<Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh", maxWidth: "25ch" }} icon={<RedoOutlined />} onClick={async () => { await this.handleRefresh(); message.success("Challenge list refreshed.") }} />
</div>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<Button disabled={this.state.disableEditButtons} type="default" style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<EyeOutlined style={{ color: "#49aa19" }} />} onClick={() => { this.editChallengeVisibility(true, this.state.selectedTableKeys, this.state.selectedRows) }}>Show</Button>
<Button disabled={this.state.disableEditButtons} type="default" style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<EyeInvisibleOutlined style={{ color: "#d32029" }} />} onClick={() => { this.editChallengeVisibility(false, this.state.selectedTableKeys, this.state.selectedRows) }}>Hide</Button>
<Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to delete the challenge(s) (' + this.state.selectedTableKeys.join(", ") + ')? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.deleteChallenge(close.bind(this), this.state.selectedTableKeys, this.state.selectedRows) },
onCancel: () => { },
});
}}>Delete Challenges</Button>
</div>
<div>
<Button disabled={this.state.disableEditButtons} type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<DownloadOutlined />} onClick={() => { this.downloadChallenges(this.state.selectedRows) }}>Download</Button>
</div>
</div>
<Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>No Challenges Found/Created</h1>
</div>
)
}}>
<Column title="Name" dataIndex="name" key="name"
render={(text, row, index) => {
return <Link to={"/Challenges/" + row._id}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
autoFocus
placeholder="Search Challenge Name"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.name.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
sorter={(a, b) => {
if (a.name < b.name) return -1
else return 1
}}
/>
<Column filters={this.state.allCat.map(value => { return { text: value.key, value: value.key } })} onFilter={(value, record) => value === record.category} title="Category" dataIndex="category" key="category" render={(text, row, index) => {
return <Link to={"/Challenges/" + row.category}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}} />
<Column sorter={(a, b) => a.points - b.points} title="Points" dataIndex="points" key="points" />
<Column sorter={(a, b) => a.points - b.points} title="Initial Points" dataIndex="initial" key="initial" />
<Column sorter={(a, b) => a.points - b.points} title="Solves to Min." dataIndex="minSolves" key="minSolves" />
<Column sorter={(a, b) => a.points - b.points} title="Min. Points" dataIndex="minimum" key="minimum" />
<Column filters={[{ text: "Visible", value: "true" }, { text: "Hidden", value: "false" }]} onFilter={(value, record) => { return value === record.visibility.props.visibility }} title="Visbility" dataIndex="visibility" key="visibility" />
<Column title="Required Challenge" dataIndex="requires" key="requires"
render={(text, row, index) => {
return <Link to={"/Challenges/" + text}><a style={{ fontWeight: 700 }}>{this.state.IDNameMapping[text]}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
autoFocus
placeholder="Search Challenge Name"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => { if (record.requires) return this.state.IDNameMapping[record.requires].toLowerCase().includes(value) }}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
sorter={(a, b) => {
if (!a.requires) return -1
if (!b.requires) return 1
if (this.state.IDNameMapping[a.requires] < this.state.IDNameMapping[b.requires]) return -1
else return 1
}}
/>
<Column
title=""
key="edit"
render={(text, record) => (
<Button icon={<EditOutlined />} onClick={() => { this.setState({ editChallenge: true, id: record._id }); this.props.history.push("/Admin/Challenges/Edit") }}> Edit</Button>
)}
/>
</Table>
<Divider />
<div style={{ display: "flex", alignItems: "center" }}>
<h1 style={{ fontSize: "150%" }}>Category Management </h1>{this.state.transferDisabled && (<Ellipsis color="#177ddc" size={50} />)}
</div>
<Card className="settings-card">
<h3>Category Meta Information Editor <EyeOutlined /></h3>
<p>Select a category to edit info such as Name, Cover Pictures etc.</p>
<Select style={{ width: "30ch" }} value={this.state.categorySelect} onChange={this.openCategoryEditor.bind(this)}>
{this.state.categoryOptions}
</Select>
{this.state.currentEditCategory && (
<div style={{ padding: "10px", marginTop: "20px", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "10px" }}>
<EditCategoryForm initialData={this.state.currentEditCategory} handleEditCategoryDone={this.handleEditCategoryDone.bind(this)} />
</div>
)}
</Card>
<Card className="settings-card">
<h3>Category Visibility <EyeOutlined /></h3>
<Transfer
dataSource={this.state.allCat}
titles={[<span style={{ color: "#49aa19" }}>Visible Categories <EyeOutlined /></span>, <span style={{ color: "#d32029" }} >Hidden Categories <EyeInvisibleOutlined /></span>]}
targetKeys={this.state.targetKeys}
selectedKeys={this.state.selectedKeys}
onChange={this.handleChange}
onSelectChange={this.handleSelectChange}
render={item => item.key}
pagination
disabled={this.state.transferDisabled}
/>
</Card>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Disable Submissions: <AntdSwitch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("submissionDisabled", value)} checked={this.state.submissionDisabled} /></h3>
<p>Prevents users from submitting any new submissions for all challenges. Hints can still be bought</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Set Socket Limit: <InputNumber
value={this.state.maxSockets}
disabled={this.state.disableLoading}
onChange={(value) => this.setState({ maxSockets: value })}
onPressEnter={(e) => { this.changeSetting("maxSockets", this.state.maxSockets) }} /></h3>
<p>Sets the maximum number of socket connections allowed <b>per account</b> to connect to the live scoreboard. <br /> <b>Press "Enter" to save</b></p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable First Blood for No Category: <AntdSwitch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("disableNonCatFB", value)} checked={this.state.disableNonCatFB} /></h3>
<p>Prevents people with no categories from attaining first blood. Useful if you want to limit First Blood prizes to only eligible participants.</p>
</Card>
</div>
</div>
<Switch>
<Route exact path='/Admin/Challenges/Create' render={(props) => <AdminChallengeCreate {...props} challenges={this.state.dataSource} handleBack={this.handleBack.bind(this)} handleCreateBack={this.handleCreateBack.bind(this)} allCat={this.state.allCat} />} />
<Route exact path='/Admin/Challenges/Edit' render={(props) => <AdminChallengeEdit {...props} allCat={this.state.allCat} IDNameMapping={this.state.IDNameMapping} challenges={this.state.dataSource} id={this.state.id} handleEditBack={this.handleEditBack.bind(this)} handleEditChallBack={this.handleEditChallBack.bind(this)} />} />
</Switch>
</Layout>
);
}
Example #12
| Source File: adminManageAnnouncements.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal
title="Create New Announcement"
visible={this.state.createAnnouncementsModal}
footer={null}
onCancel={() => { this.setState({ createAnnouncementsModal: false }) }}
>
<CreateAnnouncementsForm createAnnouncement={this.createAnnouncement.bind(this)} setState={this.setState.bind(this)} state={this.state} />
</Modal>
<Modal
title="Edit Announcement"
visible={this.state.editAnnouncementsModal}
footer={null}
onCancel={() => { this.setState({ editAnnouncementsModal: false }) }}
destroyOnClose
>
<EditAnnouncementsForm editAnnouncement={this.editAnnouncement.bind(this)} setState={this.setState.bind(this)} state={this.state} initialData={this.state.initialData} />
</Modal>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<NotificationOutlined />} onClick={() => { this.setState({ createAnnouncementsModal: true }) }}>Create New Announcement</Button>
{this.state.loading && (
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Ellipsis color="#177ddc" size={60} />
<h1>Loading Announcements</h1>
</div>
)}
</div>
<Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh" }} icon={<RedoOutlined />} onClick={async () => { await this.fillTableData(); message.success("Announcements list refreshed.") }} />
</div>
<div style={{ display: "flex", alignItems: "center" }}>
<Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to delete the announcement(s) [' + this.state.selectedTableKeys.join(", ") + ']? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.deleteAnnouncement(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Delete Announcements</Button>
</div>
<Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>No announcements have been created.</h1>
</div>
)
}}>
<Column title="Announcement ID" dataIndex="_id" key="_id" />
<Column title="Title" dataIndex="title" key="title"
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Title"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.title.includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />} />
<Column title="Content" dataIndex="content" key="content"
render={(text, row, index) => {
if (text.length > 25) return text.slice(0, 25) + "..."
else return text
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Content"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.content.includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Time" dataIndex="timestamp" key="timestamp"
render={(text, row, index) => {
return new Date(text).toLocaleString("en-US", { timeZone: "Asia/Singapore" });
}} />
<Column
title=""
key="action"
render={(text, record) => (
<Dropdown trigger={['click']} overlay={
<Menu>
<Menu.Item onClick={() => {
this.editAnnouncementOpen(record._id)
}}>
<span>
Edit Announcement <ClusterOutlined />
</span>
</Menu.Item>
</Menu>
} placement="bottomCenter">
<Button>Actions</Button>
</Dropdown>
)}
/>
</Table>
</Layout>
);
}
Example #13
| Source File: adminSubmissions.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal
title="Create New Transaction"
visible={this.state.createTModal}
footer={null}
onCancel={() => { this.setState({ createTModal: false }) }}
>
<CreateT refresh={this.refresh.bind(this)} challengeList={this.state.challengeList} setState={this.setState.bind(this)}></CreateT>
</Modal>
<Modal
title="Edit Transaction"
visible={this.state.editTModal}
footer={null}
destroyOnClose
onCancel={() => { this.setState({ editTModal: false }) }}
>
<EditT initialData={this.state.initialData} refresh={this.refresh.bind(this)} challengeList={this.state.challengeList} setState={this.setState.bind(this)}></EditT>
</Modal>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<FileOutlined />} onClick={() => { this.setState({ createTModal: true }) }}>Create New Transaction</Button>
{this.state.loading && (
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Ellipsis color="#177ddc" size={60} ></Ellipsis>
<h1>Loading Transactions</h1>
</div>
)}
</div>
<Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh", maxWidth: "25ch" }} icon={<RedoOutlined />} onClick={async () => { await this.fillTableData(); message.success("Submissions list refreshed.") }} />
</div>
<div style={{ display: "flex", alignItems: "center" }}>
<Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to delete the transactions(s) [' + this.state.selectedTableKeys.join(", ") + ']? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.deleteTransactions(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Delete Transactions</Button>
</div>
<Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>No Submissions Found/Created.</h1>
</div>
)
}}>
<Column title="Time" dataIndex="timestamp" key="timestamp" />
<Column title="Submittor" dataIndex="author" key="author" render={(text, row, index) => {
return <Link to={"/Profile/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Submittor"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.author.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Team" dataIndex="team" key="team" render={(text, row, index) => {
return <Link to={"/Team/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Team"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.team.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Category" dataIndex="category" key="category" filters={
this.state.categoryList.map((category) => {
return { text: category, value: category }
})} onFilter={(value, record) => { return value === record.category }} />
<Column render={(text, row, index) => {
return <Link to={"/Challenges/" + row.challengeID}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}} title="Challenge" dataIndex="challenge" key="challenge"
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Challenge Name"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.challenge.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />} />
<Column title="Hint ID" dataIndex="hint_id" key="hint_id" filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Hint ID"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.hint_id == parseInt(value)}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />} />
<Column title="Type" dataIndex="type" key="type" filters={[{ text: "Submission", value: "submission" }, { text: "Hint", value: "hint" }, { text: "Blocked Submission", value: "blocked_submission" }, { text: "Initial Register", value: "initial_register" }]} onFilter={(value, record) => { return value === record.type }} />
<Column title="Points Awarded" dataIndex="points" key="points" sorter={(a, b) => a.points - b.points} />
<Column title="Flag Submitted" dataIndex="submission" key="submission" />
<Column title="Correct" dataIndex="correct" key="correct" filters={[{ text: "✅", value: "✅" }, { text: "❌", value: "❌" }]} onFilter={(value, record) => { return value === record.correct }} />
<Column
title=""
key="edit"
render={(text, record) => (
<Button icon={<EditOutlined />} onClick={() => { this.setState({ editTModal: true, initialData: record }) }}> Edit</Button>
)}
/>
</Table>
</Layout >
);
}
Example #14
| Source File: index.js From quick_redis_blog with MIT License | 4 votes |
|
render() {
return (
<div>
<Row gutter={[16, 6]}>
<Col span={24}>
<Button
block
onClick={this.openCreateKeyMadal.bind(this)}
>
{intl.get("HostKey.create.key")}
</Button>
</Col>
<Col span={24}>
<Tooltip
placement="right"
title={intl.get("common.search.tooltip.limit")}
>
<AutoComplete
options={this.state.autoCompleteOptions}
onSelect={this.onAutoCompleteSelect.bind(this)}
onChange={this.onAutoCompleteChange.bind(this)}
style={{ width: "100%" }}
>
<Search
ref={this.searchInput}
onSearch={this.searchKey.bind(this)}
enterButton={
<Button
icon={<SearchOutlined />}
></Button>
}
disabled={this.state.searchDisable}
/>
</AutoComplete>
</Tooltip>
</Col>
<Col span={24}>
<Dropdown
overlay={this.showTreeRightClickMenu.bind(this)}
trigger={["contextMenu"]}
>
<div>
<DirectoryTree
treeData={this.state.treeData}
onSelect={this.onDirectoryTreeSelect.bind(
this
)}
onDoubleClick={this.handleDoubleClick.bind(
this
)}
height={750}
></DirectoryTree>
</div>
</Dropdown>
</Col>
</Row>
<div>
<Modal
title={intl.get("HostKey.create.key")}
okText={intl.get("common.ok")}
cancelText={intl.get("common.cancel")}
visible={this.state.createKeyMadalVisible}
onOk={() => {
let form = this.refs.form;
if (form === undefined) {
return;
}
form.submit();
}}
onCancel={this.cancelCreateKeyMadal}
>
<Form
initialValues={{ ...this.initValues }}
{...this.layout}
ref="form"
onFinish={this.okCreateKeyMadal.bind(this)}
>
<Form.Item
name="key"
label="key"
rules={[
{
required: true,
message: intl.get(
"common.error.input.value"
),
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="keyType"
label={intl.get("HostKey.modal.keyType")}
rules={[
{
required: true,
message: intl.get(
"common.error.input.value"
),
},
]}
>
<Select>
<Option value={REDIS_DATA_TYPE.STRING}>
{REDIS_DATA_TYPE.STRING}
</Option>
<Option value={REDIS_DATA_TYPE.ZSET}>
{REDIS_DATA_TYPE.ZSET}
</Option>
<Option value={REDIS_DATA_TYPE.SET}>
{REDIS_DATA_TYPE.SET}
</Option>
<Option value={REDIS_DATA_TYPE.HASH}>
{REDIS_DATA_TYPE.HASH}
</Option>
<Option value={REDIS_DATA_TYPE.LIST}>
{REDIS_DATA_TYPE.LIST}
</Option>
</Select>
</Form.Item>
</Form>
</Modal>
</div>
</div>
);
}
Example #15
| Source File: index.js From quick_redis_blog with MIT License | 4 votes |
|
render() {
return (
<div>
<Space size="small" direction="vertical">
<Button block onClick={this.openCreateKeyMadal.bind(this)}>
{intl.get("HostKey.create.key")}
</Button>
<Tooltip
placement="right"
title={intl.get("common.search.tooltip.limit")}
>
<AutoComplete
options={this.state.autoCompleteOptions}
onSelect={this.onAutoCompleteSelect.bind(this)}
onChange={this.onAutoCompleteChange.bind(this)}
style={{ width: "100%" }}
>
<Search
ref={this.searchInput}
onSearch={this.searchKey.bind(this)}
enterButton={
<Button
disabled={this.state.searchDisable}
icon={<SearchOutlined />}
></Button>
}
/>
</AutoComplete>
</Tooltip>
<Table
// columns={columns}
columns={[
{
title: "",
dataIndex: "name",
key: "key",
ellipsis: "true",
},
]}
dataSource={this.state.tableData}
bordered={true}
size={"small"}
pagination={{
position: "bottom",
pageSize: this.state.pageSize,
total: this.state.tableTotal,
responsive: true,
current: this.state.currentPage,
onChange: this.onPaginationChange.bind(this),
onShowSizeChange: this.onShowSizeChange.bind(this),
}}
rowClassName={this.renderRowClassName.bind(this)}
onRow={this.onRowEvent.bind(this)}
/>
</Space>
<div>
<Modal
title={intl.get("HostKey.create.key")}
okText={intl.get("common.ok")}
cancelText={intl.get("common.cancel")}
visible={this.state.createKeyMadalVisible}
onOk={() => {
let form = this.refs.form;
if (form === undefined) {
return;
}
form.submit();
}}
onCancel={this.cancelCreateKeyMadal}
>
<Form
initialValues={{ ...this.initValues }}
{...this.layout}
ref="form"
onFinish={this.okCreateKeyMadal.bind(this)}
>
<Form.Item
name="key"
label="key"
rules={[
{
required: true,
message: intl.get(
"common.error.input.value"
),
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="keyType"
label={intl.get("HostKey.modal.keyType")}
rules={[
{
required: true,
message: intl.get(
"common.error.input.value"
),
},
]}
>
<Select>
<Option value={REDIS_DATA_TYPE.STRING}>
{REDIS_DATA_TYPE.STRING}
</Option>
<Option value={REDIS_DATA_TYPE.ZSET}>
{REDIS_DATA_TYPE.ZSET}
</Option>
<Option value={REDIS_DATA_TYPE.SET}>
{REDIS_DATA_TYPE.SET}
</Option>
<Option value={REDIS_DATA_TYPE.HASH}>
{REDIS_DATA_TYPE.HASH}
</Option>
<Option value={REDIS_DATA_TYPE.LIST}>
{REDIS_DATA_TYPE.LIST}
</Option>
</Select>
</Form.Item>
</Form>
</Modal>
</div>
</div>
);
}
Example #16
| Source File: index.jsx From starter-antd-admin-crud-auth-mern with MIT License | 4 votes |
|
export default function SearchItem({ config }) {
let { entity, searchConfig } = config;
const { displayLabels, searchFields, outputValue = "_id" } = searchConfig;
const dispatch = useDispatch();
const [value, setValue] = useState("");
const [options, setOptions] = useState([]);
const { crudContextAction } = useCrudContext();
const { panel, collapsedBox, readBox } = crudContextAction;
let source = request.source();
const { result, isLoading, isSuccess } = useSelector(selectSearchedItems);
const isTyping = useRef(false);
let delayTimer = null;
useEffect(() => {
isLoading && setOptions([{ label: "... Searching" }]);
}, [isLoading]);
const onSearch = (searchText) => {
isTyping.current = true;
clearTimeout(delayTimer);
delayTimer = setTimeout(function () {
if (isTyping.current && searchText !== "") {
dispatch(
crud.search(entity, source, {
question: searchText,
fields: searchFields,
})
);
}
isTyping.current = false;
}, 500);
};
const onSelect = (data) => {
const currentItem = result.find((item) => {
return item[outputValue] === data;
});
dispatch(crud.currentItem(currentItem));
panel.open();
collapsedBox.open();
readBox.open();
};
const onChange = (data) => {
const currentItem = options.find((item) => {
return item.value === data;
});
const currentValue = currentItem ? currentItem.label : data;
setValue(currentValue);
};
useEffect(() => {
let optionResults = [];
result.map((item) => {
const labels = displayLabels.map((x) => item[x]).join(" ");
optionResults.push({ label: labels, value: item[outputValue] });
});
setOptions(optionResults);
}, [result]);
return (
<AutoComplete
value={value}
options={options}
style={{
width: "100%",
}}
onSelect={onSelect}
onSearch={onSearch}
onChange={onChange}
notFoundContent={!isSuccess ? <Empty /> : ""}
allowClear={true}
placeholder="Your Search here"
>
<Input suffix={<SearchOutlined />} />
</AutoComplete>
);
}
Example #17
| Source File: adminUsers.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal
title={<span>Change User Permissions <ClusterOutlined /></span>}
visible={this.state.permissionModal}
onOk={this.changePermissions}
onCancel={() => { this.setState({ permissionModal: false }) }}
confirmLoading={this.state.modalLoading}
>
<Select size="large" value={this.state.permissionChangeTo} style={{ width: "30ch" }} onSelect={(value) => { this.setState({ permissionChangeTo: value }) }}>
<Option value="0">0 - Normal User</Option>
<Option value="1">1 - Challenge Creator User</Option>
<Option value="2">2 - Admin User</Option>
</Select>
<br />
<br />
<ul>
<li><b>0 - Normal User</b>: Has access to the basic functions and nothing else</li>
<li><b>1 - Challenge Creator User</b>: Has the additional power of submitting new challenges, but not modifying existing ones</li>
<li><b>2 - Admin User</b>: Has full access to the platform via the admin panel.</li>
</ul>
</Modal>
<Modal
title="Create New Account"
visible={this.state.createUserModal}
footer={null}
onCancel={() => { this.setState({ createUserModal: false }) }}
>
<RegisterForm createAccount={this.createAccount.bind(this)} setState={this.setState.bind(this)} />
</Modal>
<Modal
title={"Changing Account Password For: " + this.state.username}
visible={this.state.passwordResetModal}
footer={null}
onCancel={() => { this.setState({ passwordResetModal: false }) }}
>
<ChangePasswordForm username={this.state.username} setState={this.setState.bind(this)} />
</Modal>
<Modal
title={"Changing Category For: " + this.state.username}
visible={this.state.categoryChangeModal}
footer={null}
onCancel={() => { this.setState({ categoryChangeModal: false }) }}
>
<SelectParticipantCategoryForm fillTableData={this.fillTableData.bind(this)} categoryList={this.state.categoryList} username={this.state.username} participantCategory={this.state.participantCategory} />
</Modal>
<Modal
title={"Changing Email For: " + this.state.username}
visible={this.state.emailChangeModal}
footer={null}
onCancel={() => { this.setState({ emailChangeModal: false }) }}
>
<ChangeEmailForm fillTableData={this.fillTableData.bind(this)} username={this.state.username} setState={this.setState.bind(this)} />
</Modal>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<UserOutlined />} onClick={() => { this.setState({ createUserModal: true }) }}>Create New User</Button>
{this.state.loading && (
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Ellipsis color="#177ddc" size={60} ></Ellipsis>
<h1>Loading Users</h1>
</div>
)}
</div>
<Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh", maxWidth: "25ch" }} icon={<RedoOutlined />} onClick={async () => { await Promise.all([this.fillTableData(), this.getDisableStates()]); message.success("Users list refreshed.") }} />
</div>
<div style={{ display: "flex", alignItems: "center" }}>
<Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to delete the user(s) (' + this.state.selectedTableKeys.join(", ") + ')? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.deleteAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Delete Users</Button>
<Button type="default" disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<CheckOutlined style={{ color: "#49aa19" }} />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to verify the user(s) (' + this.state.selectedTableKeys.join(", ") + ')?',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.verifyAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Verify Users</Button>
<Button type="default" disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<CloseOutlined style={{ color: "#a61d24" }} />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to un-verify the user(s) (' + this.state.selectedTableKeys.join(", ") + ')?',
content: 'Please note that this action will send a new email per user asking them to re-verify.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.unverifyAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Un-Verify Users</Button>
</div>
<Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>No users found/created</h1>
</div>
)
}}>
<Column title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
return <Link to={"/Profile/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Username"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.username.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
sorter={(a, b) => {
if (a.username < b.username) return -1
else return 1
}}
/>
<Column title="Email" dataIndex="email" key="email"
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Email"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.email.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Permissions" dataIndex="type" key="type" filters={[{ text: "Normal User (0)", value: 0 }, { text: "Challenge Creator (1)", value: 1 }, { text: "Admin (2)", value: 2 }]} onFilter={(value, record) => { return value === record.type }} />
<Column title="Team" dataIndex="team" key="team"
render={(text, row, index) => {
if (text != "N/A") return <Link to={"/Team/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
else return text;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Team"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.team.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Category" dataIndex="category" key="category" filters={
this.state.categoryList.map((category) => {
return { text: category, value: category }
})} onFilter={(value, record) => { return value === record.category }} />
<Column title="Verified" dataIndex="verified" key="verified" filters={[{ text: "Verified", value: "True" }, { text: "Unverified", value: "False" }]} onFilter={(value, record) => { return value === record.verified }} />
<Column
title=""
key="action"
render={(text, record) => (
<Dropdown trigger={['click']} overlay={
<Menu>
<Menu.Item onClick={() => {
this.setState({ permissionModal: true, username: record.username, permissionChangeTo: record.type.toString() })
}}>
<span>
Change Permissions <ClusterOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ passwordResetModal: true, username: record.username })
}}>
<span>
Change Password <KeyOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ emailChangeModal: true, username: record.username })
}}>
<span>
Change Email <MailOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ categoryChangeModal: true, username: record.username, participantCategory: record.category })
}}>
<span>
Change Category <ApartmentOutlined />
</span>
</Menu.Item>
</Menu>
} placement="bottomCenter">
<Button>Actions</Button>
</Dropdown>
)}
/>
</Table>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Disable User Registration: <Switch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("registerDisable", value)} checked={this.state.registerDisable} /></h3>
<p>Disables user registration for unregistered users. Admins can still create users from this page.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable User Logins: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("loginDisable", value)} checked={this.state.loginDisable} /></h3>
<p>Disables user login except for admin users. <br /><b>Note:</b> Users already logged into the platform will remain authenticated as tokens cannot be revoked. If you want to restrict a user from accessing the platform anymore, simply delete their account.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Admin Scores: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("adminShowDisable", value)} checked={this.state.adminShowDisable} /></h3>
<p>Prevents admin scores from showing up on scoreboards and profile pages. Admin solves will still appear under the solve list in challenges. <br /> Please note that disabling/enabling this will require users to reopen ctfx to resync the scoreboard.</p>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Profile Picture Max Upload Size: <InputNumber
formatter={value => `${value}B`}
parser={value => value.replace('B', '')}
value={this.state.uploadSize}
disabled={this.state.uploadLoading}
onChange={(value) => this.setState({ uploadSize: value })}
onPressEnter={(e) => { this.changeSetting("uploadSize", this.state.uploadSize) }} /></h3>
<p>Sets the maximum file upload size for profile pictures (in Bytes). Press <b>Enter</b> to save</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Category Switches: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("categorySwitchDisable", value)} checked={this.state.categorySwitchDisable} /></h3>
<p>Prevents users from switching their scoreboard category. Useful during competitions where you want to lock the user into a category</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>User Category Management <UserOutlined /></h3>
<Space direction="vertical">
{this.state.categoryList.map((category) => {
return (
<div style={{ display: 'flex', alignItems: "center" }}>
<Input disabled value={category} />
<MinusCircleOutlined onClick={() => { this.removeCategory(category) }} style={{ cursor: "pointer", marginLeft: "1ch", color: "#f5222d" }} />
</div>
)
})}
<div style={{ display: "flex" }}>
<Input value={this.state.newCategoryValue} onChange={(e) => { this.setState({ newCategoryValue: e.target.value }) }} />
<Button
loading={this.state.addCategoryLoading}
style={{ marginLeft: "1ch" }}
type="dashed"
onClick={() => {
this.addCategory()
}}
>
<PlusOutlined /> Add Category
</Button>
</div>
</Space>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Max Team Size: <InputNumber
value={this.state.teamMaxSize}
onChange={(value) => this.setState({ teamMaxSize: value })}
onPressEnter={(e) => { this.changeSetting("teamMaxSize", this.state.teamMaxSize) }} />
</h3>
<p>Sets the maximum number of members in a team. Press <b>Enter</b> to save</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Enable Teams: <Switch disabled={this.state.disableLoading3} onClick={(value) => this.disableSetting("teamMode", value)} checked={this.state.teamMode} /></h3>
<p>Enable teams for the platform. Users in a team will have their scores combined on the scoreboard <br /> Please note that disabling/enabling this will require users to reopen ctfx to resync the scoreboard.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Team Switching: <Switch disabled={this.state.disableLoading3} onClick={(value) => this.disableSetting("teamChangeDisable", value)} checked={this.state.teamChangeDisable} /></h3>
<p>Prevents users from leaving, joining & creating a team. Enable this option if you want to prevent any team changes during a competition</p>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Enable Password Reset <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("forgotPass", value)} checked={this.state.forgotPass} /></h3>
<p>Allow users to use the "Forgot Password" option to reset their password. <br />Please ensure that you have connected to an SMTP server correctly in the "Email" tab</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Enable Email Verification <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("emailVerify", value)} checked={this.state.emailVerify} /></h3>
<p>Forces newly registered users to <b>verify their email</b> before being able to access the site.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Profile Picture Upload Path
<Input
value={this.state.uploadPath}
onChange={(e) => this.setState({ uploadPath: e.target.value })}
onPressEnter={(e) => { this.changeSetting("uploadPath", this.state.uploadPath) }} /></h3>
<p>Sets the file upload path for profile pictures. Please ensure that the folder has the appropriate permissions <br />set for the Node process to save the file there. Press <b>Enter</b> to save</p>
</Card>
</div>
</Layout>
);
}
Example #18
| Source File: SearchItem.jsx From erp-crm with MIT License | 4 votes |
|
export default function Search({ config }) {
let { entity, searchConfig } = config;
const { displayLabels, searchFields, outputValue = '_id' } = searchConfig;
const dispatch = useDispatch();
const [value, setValue] = useState('');
const [options, setOptions] = useState([]);
const { erpContextAction } = useErpContext();
const { panel, collapsedBox, readBox } = erpContextAction;
const { result, isLoading, isSuccess } = useSelector(selectSearchedItems);
const isTyping = useRef(false);
let delayTimer = null;
useEffect(() => {
isLoading && setOptions([{ label: '... Searching' }]);
}, [isLoading]);
const onSearch = (searchText) => {
isTyping.current = true;
clearTimeout(delayTimer);
delayTimer = setTimeout(function () {
if (isTyping.current && searchText !== '') {
dispatch(
erp.search(entity, {
question: searchText,
fields: searchFields,
})
);
}
isTyping.current = false;
}, 500);
};
const onSelect = (data) => {
const currentItem = result.find((item) => {
return item[outputValue] === data;
});
dispatch(erp.currentItem({ data: currentItem }));
panel.open();
collapsedBox.open();
readBox.open();
};
const onChange = (data) => {
const currentItem = options.find((item) => {
return item.value === data;
});
const currentValue = currentItem ? currentItem.label : data;
setValue(currentValue);
};
useEffect(() => {
let optionResults = [];
result.map((item) => {
const labels = displayLabels.map((x) => item[x]).join(' ');
optionResults.push({ label: labels, value: item[outputValue] });
});
setOptions(optionResults);
}, [result]);
return (
<AutoComplete
value={value}
options={options}
style={{
width: '100%',
}}
onSelect={onSelect}
onSearch={onSearch}
onChange={onChange}
notFoundContent={!isSuccess ? <Empty /> : ''}
allowClear={true}
placeholder="Your Search here"
>
<Input suffix={<SearchOutlined />} />
</AutoComplete>
);
}
Example #19
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { size } = this.state
return (
<div className="row" id="example-buttons">
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Default</strong>
</h5>
<div className="mb-5">
<Button type="primary" className="mr-3 mb-3">
Primary
</Button>
<Button className="mr-3 mb-3">Default</Button>
<Button type="dashed" className="mr-3 mb-3">
Dashed
</Button>
<Button type="danger" className="mr-3 mb-3">
Danger
</Button>
<Button type="link" className="mr-3 mb-3">
Link
</Button>
</div>
<h5 className="mb-3">
<strong>Size</strong>
</h5>
<div className="mb-5">
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary" size={size} className="mr-3 mb-3">
Primary
</Button>
<Button size={size} className="mr-3 mb-3">
Normal
</Button>
<Button type="dashed" size={size} className="mr-3 mb-3">
Dashed
</Button>
<Button type="danger" size={size} className="mr-3 mb-3">
Danger
</Button>
<Button type="link" size={size} className="mr-3 mb-3">
Link
</Button>
<br />
<Button type="primary" icon={<DownloadOutlined />} size={size} className="mr-3 mb-3" />
<Button
type="primary"
shape="circle"
icon={<DownloadOutlined />}
size={size}
className="mr-3 mb-3"
/>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
size={size}
className="mr-3 mb-3"
/>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
size={size}
className="mr-3 mb-3"
>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size} className="mr-3 mb-3">
Download
</Button>
<br />
<Button.Group size={size} className="mr-3 mb-3">
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
</div>
<h5 className="mb-3">
<strong>Disabled</strong>
</h5>
<div className="mb-5">
<Button type="primary" className="mr-3 mb-3">
Primary
</Button>
<Button type="primary" disabled className="mr-3 mb-3">
Primary(disabled)
</Button>
<br />
<Button className="mr-3 mb-3">Default</Button>
<Button disabled className="mr-3 mb-3">
Default(disabled)
</Button>
<br />
<Button type="dashed" className="mr-3 mb-3">
Dashed
</Button>
<Button type="dashed" disabled className="mr-3 mb-3">
Dashed(disabled)
</Button>
<br />
<Button type="link" className="mr-3 mb-3">
Link
</Button>
<Button type="link" disabled className="mr-3 mb-3">
Link(disabled)
</Button>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Default</strong>
</h5>
<div className="mb-5">
<Button type="primary" shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button type="primary" shape="circle" className="mr-3 mb-3">
A
</Button>
<Button type="primary" icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
<Button shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
<br />
<Button shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
<Button type="dashed" shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button type="dashed" icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
</div>
<h5 className="mb-3">
<strong>Loading</strong>
</h5>
<div className="mb-5">
<Button type="primary" loading className="mr-3 mb-3">
Loading
</Button>
<Button type="primary" size="small" loading className="mr-3 mb-3">
Loading
</Button>
<br />
<Button type="primary" loading className="mr-3 mb-3" />
<Button type="primary" shape="circle" loading className="mr-3 mb-3" />
<Button type="danger" shape="round" loading className="mr-3 mb-3" />
</div>
<h5 className="mb-3">
<strong>Block Buttons</strong>
</h5>
<div className="mb-5">
<Button type="primary" block className="mb-3">
Primary
</Button>
<Button block className="mb-3">
Default
</Button>
<Button type="dashed" block className="mb-3">
Dashed
</Button>
<Button type="danger" block className="mb-3">
Danger
</Button>
<Button type="link" block className="mb-3">
Link
</Button>
</div>
</div>
</div>
)
}
Example #20
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
ExtraAppsTodoistList = () => {
const taskInput = React.createRef()
const treeDataDefault = [
{ name: 'Level 1' },
{
name: 'Level 2',
expanded: true,
children: [{ name: 'Level 2' }, { name: 'Level 2' }, { name: 'Level 2' }],
},
]
const completedDefault = [
{ name: 'Level 0', checked: true },
{ name: 'Level 0', checked: true },
{ name: 'Level 0', checked: true },
]
const [treeData, setTreeData] = useState(treeDataDefault)
const [completed, setCompleted] = useState(completedDefault)
const [hideInput, setHideInput] = useState(true)
const toggleInput = () => {
setHideInput(!hideInput)
}
const addTask = e => {
const task = e.target.value
if (e.which === 13 && task !== '') {
const treeDataProcessed = treeData.concat({
name: task,
})
setTreeData(treeDataProcessed)
taskInput.current.value = ''
}
}
const getNodeKey = ({ treeIndex }) => treeIndex
return (
<div>
<Helmet title="Todoist List" />
<div className="row">
<div className="col-12 col-md-3">
<div className="mb-4">
<Input
prefix={<SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Search mail..."
/>
</div>
<div className={style.categories}>
<div className="d-flex flex-column">
<div
className={` ${style.category} ${style.title} text-dark font-size-18 font-weight-bold`}
>
<span className="text-truncate">Overall</span>
</div>
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} text-dark font-size-18`}
>
<span className="text-truncate">Today</span>
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} text-dark font-size-18`}
>
<span className="text-truncate">Next 7 days</span>
</a>
<div
className={` ${style.category} ${style.title} text-dark font-size-18 font-weight-bold`}
>
<span className="text-truncate">To Do Lists</span>
</div>
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} ${style.current} text-dark font-size-18`}
>
<span className="text-truncate">
Welcome{' '}
<span role="img" aria-label="hello">
👋
</span>
</span>
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} text-dark font-size-18`}
>
<span className="text-truncate">Homework (1)</span>
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} text-dark font-size-18`}
>
<span className="text-truncate">Fitness</span>
</a>
</div>
</div>
</div>
<div className="col-md-9">
<div className="card">
<div className="card-header card-header-flex align-items-center">
<div className="d-flex flex-column justify-content-center mr-auto">
<h5 className="mb-0">
Welcome{' '}
<span role="img" aria-label="hello">
👋
</span>
</h5>
</div>
<div>
<Tooltip placement="top" title="Unlock Account">
<a
href="#"
onClick={e => e.preventDefault()}
className="btn btn-sm btn-light mr-2"
>
<i className="fe fe-unlock" />
</a>
</Tooltip>
<Tooltip placement="top" title="Mark as important">
<a
href="#"
onClick={e => e.preventDefault()}
className="btn btn-sm btn-light mr-2"
>
<i className="fe fe-star" />
</a>
</Tooltip>
<Tooltip placement="top" title="Delete user">
<a href="#" onClick={e => e.preventDefault()} className="btn btn-sm btn-light">
<i className="fe fe-trash" />
</a>
</Tooltip>
</div>
</div>
<div className="card-body">
<h6 className="text-uppercase text-dark font-size-18 font-weight-bold mb-2">
Current tasks
</h6>
<p className="mb-3">Welocme to Todoist! Let's get you started with a few tips</p>
<div className="height-400">
<PerfectScrollbar>
<div className="height-400">
<SortableTree
treeData={treeData}
onChange={tree => setTreeData(tree)}
generateNodeProps={({ node, path }) => ({
title: !node.children ? (
<Checkbox
checked={node.checked}
onChange={event => {
const { checked } = event.target
setTreeData(
changeNodeAtPath({
treeData,
path,
getNodeKey,
newNode: { ...node, checked },
}),
)
}}
>
{node.name}
</Checkbox>
) : (
<span>{node.name}:</span>
),
})}
/>
</div>
</PerfectScrollbar>
</div>
<button
type="button"
className="btn btn-primary btn-with-addon text-nowrap"
onClick={toggleInput}
>
<span className="btn-addon">
<i className="btn-addon-icon fe fe-plus-circle" />
</span>
Add Task
</button>
<input
hidden={hideInput}
className="form-control mt-3"
placeholder="Add task here and press enter..."
type="text"
onKeyPress={e => addTask(e)}
ref={taskInput}
/>
<h6 className="text-uppercase text-dark font-size-18 font-weight-bold mb-2 mt-4">
Completed
</h6>
<p className="mb-3">Welocme to Todoist! Let's get you started with a few tips</p>
<div className="height-200">
<PerfectScrollbar>
<div className="height-200">
<SortableTree
treeData={completed}
onChange={tree => setCompleted(tree)}
generateNodeProps={({ node }) => ({
title: !node.children ? (
<Checkbox checked={node.checked}>{node.name}</Checkbox>
) : (
<span>{node.name}:</span>
),
})}
/>
</div>
</PerfectScrollbar>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-4">
<div className="card">
<div className="card-body">
<Chart4 />
</div>
</div>
</div>
<div className="col-lg-4">
<div className="card">
<div className="card-body">
<Chart4v1 />
</div>
</div>
</div>
<div className="col-lg-4">
<div className="card">
<div className="card-body">
<Chart4v2 />
</div>
</div>
</div>
</div>
<div className="card">
<div className="card-body">
<Table6 />
</div>
</div>
</div>
</div>
</div>
)
}
Example #21
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
AppsMessaging = () => {
const [activeIndex, setActiveIndex] = useState(0)
const { name, position, dialog, avatar } = dialogs[activeIndex]
const changeDialog = (e, index) => {
e.preventDefault()
setActiveIndex(index)
}
return (
<div>
<Helmet title="Messaging" />
<div className="row">
<div className="col-12 col-md-3">
<div className="mb-4">
<Input
prefix={<SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Search users..."
/>
</div>
<div className={style.dialogs}>
<PerfectScrollbar>
{dialogs.map((item, index) => (
<a
href="#"
onClick={e => changeDialog(e, index)}
key={item.name}
className={`${style.item} ${
index === activeIndex ? style.current : ''
} d-flex flex-nowrap align-items-center`}
>
<div className="kit__utils__avatar kit__utils__avatar--size46 mr-3 flex-shrink-0">
<img src={item.avatar} alt={item.name} />
</div>
<div className={`${style.info} flex-grow-1`}>
<div className="text-uppercase font-size-12 text-truncate text-gray-6">
{item.position}
</div>
<div className="text-dark font-size-18 font-weight-bold text-truncate">
{item.name}
</div>
</div>
<div
hidden={!item.unread}
className={`${style.unread} flex-shrink-0 align-self-start`}
>
<div className="badge badge-success">{item.unread}</div>
</div>
</a>
))}
</PerfectScrollbar>
</div>
</div>
<div className="col-12 col-md-9">
<div className="card">
<div className="card-header card-header-flex align-items-center">
<div className="d-flex flex-column justify-content-center mr-auto">
<h5 className="mb-0 mr-2 font-size-18">
{name} <span className="font-size-14 text-gray-6">({position})</span>
</h5>
</div>
<div>
<Tooltip placement="top" title="Unlock Account">
<a
href="#"
onClick={e => e.preventDefault()}
className="btn btn-sm btn-light mr-2"
>
<i className="fe fe-unlock" />
</a>
</Tooltip>
<Tooltip placement="top" title="Mark as important">
<a
href="#"
onClick={e => e.preventDefault()}
className="btn btn-sm btn-light mr-2"
>
<i className="fe fe-star" />
</a>
</Tooltip>
<Tooltip placement="top" title="Delete user">
<a href="#" onClick={e => e.preventDefault()} className="btn btn-sm btn-light">
<i className="fe fe-trash" />
</a>
</Tooltip>
</div>
</div>
<div className="card-body">
<div className="height-700">
<PerfectScrollbar>
<div className="d-flex flex-column justify-content-end height-100p">
{dialog.map(message => (
<div
key={Math.random()}
className={`${style.message} ${
message.owner !== 'you' ? style.answer : ''
}`}
>
<div className={style.messageContent}>
<div className="text-gray-4 font-size-12 text-uppercase">
{message.owner}, {message.time}
</div>
<div>{message.content}</div>
</div>
<div className={`${style.messageAvatar} kit__utils__avatar`}>
<img
src={`${
message.owner !== 'you'
? avatar
: 'resources/images/avatars/avatar-2.png'
}`}
alt={name}
/>
</div>
</div>
))}
</div>
</PerfectScrollbar>
</div>
<div className="pt-2 pb-2">{name} is typing...</div>
<div className="input-group mb-3">
<input type="text" className="form-control" placeholder="Send message..." />
<div className="input-group-append">
<button className="btn btn-primary" type="button">
<i className="fe fe-send align-middle" />
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #22
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
AppsMail = () => {
const columns = [
{
title: '',
dataIndex: 'favorites',
key: 'favorites',
render: text => (
<i
className={text === true ? 'icmn-star-full text-warning' : 'icmn-star-full text-default'}
/>
),
},
{
title: 'From',
dataIndex: 'from',
key: 'from',
render: text => (
<a href="#" onClick={e => e.preventDefault()}>
{text}
</a>
),
sorter: (a, b) => a.from.length - b.from.length,
},
{
title: 'Message',
dataIndex: 'message',
key: 'message',
sorter: (a, b) => a.message.length - b.message.length,
},
{
title: '',
dataIndex: 'attachments',
key: 'attachments',
render: text => {
if (text === true) {
return <i className="icmn-attachment text-default" />
}
return ''
},
},
{
title: '',
dataIndex: 'time',
key: 'time',
},
]
return (
<div>
<Helmet title="Mail" />
<div className="row">
<div className="col-12 col-md-3">
<div className="mb-4">
<Input
prefix={<SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Search mail..."
/>
</div>
<div className={style.categories}>
<PerfectScrollbar>
<div className="d-flex flex-column">
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} ${style.current} text-dark font-size-18 font-weight-bold`}
>
<span className="text-truncate">Inbox</span>
<span>(2)</span>
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} text-dark font-size-18`}
>
<span className="text-truncate">Snoozed</span>
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} text-dark font-size-18`}
>
<span className="text-truncate">Sent</span>
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} text-dark font-size-18 font-weight-bold`}
>
<span className="text-truncate">Drafts</span>
<span>(1)</span>
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className={`${style.category} text-dark font-size-18`}
>
<span className="text-truncate">Spam</span>
</a>
</div>
</PerfectScrollbar>
</div>
</div>
<div className="col-12 col-md-9">
<div className="card">
<div className="card-header card-header-flex">
<Tabs defaultActiveKey="1" className="mr-auto kit-tabs-bold">
<TabPane tab="Notifications" key="1" />
<TabPane
tab={
<span>
Social
<span className=" ml-2 badge badge-primary text-uppercase">4 new</span>
</span>
}
key="2"
/>
<TabPane tab="Primary" key="3" />
</Tabs>
<div className="d-inline-flex align-items-center">
<a
href="#"
onClick={e => e.preventDefault()}
className="btn btn-sm btn-light mr-2"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Unlock Account"
>
<i className="fe fe-unlock" />
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="btn btn-sm btn-light mr-2"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Mark as important"
>
<i className="fe fe-star" />
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="btn btn-sm btn-light"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Delete user"
>
<i className="fe fe-trash" />
</a>
</div>
</div>
<div className="card-body">
<div className="kit__utils__table">
<Table columns={columns} rowSelection={rowSelection} dataSource={mails} />
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #23
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
Search = ({ intl: { formatMessage } }) => {
const [showSearch, setShowSearch] = useState(false)
const [searchText, setSearchText] = useState('')
useEffect(() => {
document.addEventListener('keydown', handleKeyDown, false)
return () => {
document.removeEventListener('keydown', handleKeyDown)
}
})
const showLiveSearch = () => {
setShowSearch(true)
setTimeout(() => {
searchInput.focus()
}, 100)
}
const changeSearchText = e => {
setSearchText(e.target.value)
}
const hideLiveSearch = () => {
searchInput.blur()
setShowSearch('')
setSearchText('')
}
const handleKeyDown = event => {
if (showSearch) {
const key = event.keyCode.toString()
if (key === '27') {
hideLiveSearch()
}
}
}
const handleNode = node => {
searchInput = node
}
return (
<div className="d-inline-block mr-4">
<Input
className={style.extInput}
placeholder={formatMessage({ id: 'topBar.typeToSearch' })}
prefix={<SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
style={{ width: 200 }}
onFocus={showLiveSearch}
/>
<div
className={`${
showSearch ? `${style.livesearch} ${style.livesearchVisible}` : style.livesearch
}`}
id="livesearch"
>
<button className={style.close} type="button" onClick={hideLiveSearch}>
<i className="icmn-cross" />
</button>
<div className="container-fluid">
<div className={style.wrapper}>
<input
type="search"
className={style.searchInput}
value={searchText}
onChange={changeSearchText}
id="livesearchInput"
placeholder={formatMessage({ id: 'topBar.typeToSearch' })}
ref={handleNode}
/>
<ul className={style.options}>
<li className={style.option}>
<Checkbox checked>Search within app</Checkbox>
</li>
<li className={style.option}>Press enter to search</li>
</ul>
{!searchText && (
<div className={style.results}>
<div className={style.resultsTitle}>
<span>No Results Found</span>
</div>
</div>
)}
{searchText && (
<div className={style.results}>
<div className={style.resultsTitle}>
<span>Pages Search Results</span>
</div>
<div className="row">
<div className="col-lg-4">
<div className={style.resultContent}>
<div
className={style.resultThumb}
style={{ backgroundImage: 'url(resources/images/content/photos/1.jpeg)' }}
>
#1
</div>
<div className={style.result}>
<div className={style.resultText}> Samsung Galaxy A50 4GB/64GB</div>
<div className={style.resultSource}>In some partition</div>
</div>
</div>
<div className={style.resultContent}>
<div
className={style.resultThumb}
style={{ backgroundImage: 'url(resources/images/content/photos/2.jpeg)' }}
>
KF
</div>
<div className={style.result}>
<div className={style.resultText}>Apple iPhone 11 64GB</div>
<div className={style.resultSource}>In some partition</div>
</div>
</div>
<div className={style.resultContent}>
<div
className={style.resultThumb}
style={{ backgroundImage: 'url(resources/images/content/photos/3.jpeg)' }}
>
GF
</div>
<div className={style.result}>
<div className={style.resultText}>
Samsung Galaxy A51 SM-A515F/DS 4GB/64GB
</div>
<div className={style.resultSource}>In some partition</div>
</div>
</div>
<div className={style.resultContent}>
<div
className={style.resultThumb}
style={{ backgroundImage: 'url(resources/images/content/photos/4.jpeg)' }}
>
QT
</div>
<div className={style.result}>
<div className={style.resultText}>Xiaomi Redmi 8 4GB/64GB</div>
<div className={style.resultSource}>In some partition</div>
</div>
</div>
</div>
<div className="col-lg-4">
<div className={style.resultContent}>
<div className={style.resultThumb}>01</div>
<div className={style.result}>
<div className={style.resultText}>White Case</div>
<div className={style.resultSource}>In some partition</div>
</div>
</div>
<div className={style.resultContent}>
<div className={style.resultThumb}>02</div>
<div className={style.result}>
<div className={style.resultText}>Blue Case</div>
<div className={style.resultSource}>In some partition</div>
</div>
</div>
<div className={style.resultContent}>
<div className={style.resultThumb}>03</div>
<div className={style.result}>
<div className={style.resultText}>Green Case</div>
<div className={style.resultSource}>In some partition</div>
</div>
</div>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>
)
}
Example #24
| Source File: index.js From website with MIT License | 4 votes |
|
Estado = regionWithStyle(({ uf, className }) => {
const dispatch = useDispatch();
const sectors = useSelector(getSectors);
const events = useSelector(getEvents);
const lastCheck = useSelector(getLastCheck);
const loading = useSelector(createLoadingSelector([LOAD_SECTORS]));
const selectedSectors = useSelector(getSelectedSectors);
const regionInfo = useSelector(getRegions(uf));
const [categoryFilter, setCategoryFilter] = useState(false);
const currRegion =
uf && regions.filter(item => item.initial === uf.toUpperCase())[0];
const handleCategorySearch = ev => {
const { value } = ev.target;
setCategoryFilter(value);
};
useEffect(() => {
ReactGA.initialize(process.env.NEXT_PUBLIC_GA_KEY);
ReactGA.pageview(document.location.pathname);
dispatch(loadRegions(uf));
dispatch(
loadSectors({
ordering: 'events_count',
region__initial: currRegion.initial,
limit: 100
})
);
return function cleanup() {
dispatch(resetState());
};
}, [uf]);
useEffect(() => {
if (!sectors.length) return;
if (!lastCheck) {
for (let sectorId of Object.keys(selectedSectors).filter(
key => !!selectedSectors[key]
)) {
dispatch(loadEvents(sectorId, currRegion?.initial));
}
}
if (selectedSectors[lastCheck])
dispatch(loadEvents(lastCheck, currRegion?.initial));
}, [selectedSectors]);
const categories = categoryFilter
? sectors.filter(item => {
return normalizeSearch(item.name).includes(
normalizeSearch(categoryFilter)
);
})
: sectors;
const categoriesList = categories.filter(item => selectedSectors[item.id]);
// doesnt reverse array if the
// category wasnt checked from the ui
const checkedFromUi = useMemo(() => {
return !!lastCheck;
}, [selectedSectors]);
const filteredCategories = checkedFromUi
? categoriesList.reverse()
: categoriesList;
const handleSectorCheck = sectorId => ev => {
dispatch(selectSector(sectorId));
};
return (
<div className={'estado-page ' + className}>
<Reset />
<Head>
<HeadTags region={currRegion} />
<title>
Corona Brasil - {currRegion?.name} - Saiba o que está funcionando em
sua cidade e estado
</title>
<link rel='icon' href='/favicon.ico' />
</Head>
<RegionProvider region={currRegion}>
<Header />
<div className='alert'>
Você tem alguma informação sobre sua cidade/estado?{' '}
<a href={EVENTS_FORM} target='__blank'>
Ajude no combate à pandemia clicando aqui
</a>
!
</div>
<RegionOverview />
<article className='description'>
<div className='title-container'>
<Title.h1>
Acontecimentos - {currRegion?.name}
<Dot type='dark' />
</Title.h1>
<SocialSharing message={sharing.whatsapp(currRegion?.name)} />
</div>
<div className='contact'>
{regionInfo?.phone && (
<div className='phone'>
<span className='label'>Ouvidoria: </span>
<a href={`tel:+55${regionInfo?.phone}`}>{regionInfo?.phone}</a>
</div>
)}
<div className='social'>
{regionInfo?.twitter && (
<a target='__blank' href={regionInfo?.twitter}>
<TwitterOutlined />
</a>
)}
{regionInfo?.instagram && (
<a target='__blank' href={regionInfo?.instagram}>
<InstagramOutlined />
</a>
)}
{regionInfo?.official_site && (
<a target='__blank' href={regionInfo?.official_site}>
<GlobalOutlined />
</a>
)}
</div>
</div>
<Text>
O funcionamento de transportes públicos, bares, restaurantes,
mercados, farmácias, padarias e outros estabelecimentos está mudando
a cada semana, em cada estado ou cidade.
<br /> Confira o que está funcionando no Brasil, até quando e por
quê.
</Text>
</article>
<section className='events'>
<div className='events__menu'>
<List
header={
<>
<div className='header'>
<h2>Categorias</h2>{' '}
</div>
<div className='search'>
<Input
prefix={<SearchOutlined />}
placeholder='Buscar categoria'
onChange={handleCategorySearch}
/>
</div>
</>
}
bordered
loading={
loading?.[LOAD_SECTORS]?.phase === 'LOADING' || !sectors.length
}
>
<div className='list-container'>
{categories.map(item => (
<List.Item key={JSON.stringify(item)}>
<Checkbox
checked={!!selectedSectors?.[item.id]}
onChange={handleSectorCheck(item.id)}
/>
<SectorIcon sector={item.id} />
<span className='name'>{item.name}</span>
<Badge count={item.events_count} />
</List.Item>
))}
</div>
</List>
</div>
<div className='events__group'>
{!filteredCategories.length && (
<Empty description='Selecione uma categoria.' />
)}
{filteredCategories.map(item => (
<Event
key={JSON.stringify(item)}
sector={item.id}
title={item.name}
>
{events?.[item.id] && !events?.[item.id].results.length && (
<Empty
image={
<img width={150} src='/static/icons/loudspeaker.svg' />
}
description={
<div>
<p>
Ooops, nenhuma informação sobre{' '}
<strong>{item.name}</strong> encontrada :/
</p>{' '}
<a target='__blank' href={EVENTS_FORM}>
Você tem alguma informação? Ajude no combate à
pandemia clicando aqui!
</a>
</div>
}
/>
)}
{events?.[item.id] &&
events?.[item.id].results.map(item => (
<Event.Item
key={JSON.stringify(item)}
event={item}
city={item?.city?.name}
status={item.status_type}
title={item.name}
description={item?.text || item?.source?.text}
></Event.Item>
))}
</Event>
))}
</div>
</section>
</RegionProvider>
<Footer />
</div>
);
})
