Search fix
This commit is contained in:
parent
e0ff441448
commit
4df197c83e
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { observable, action, computed, autorun } from "mobx";
|
import { observable, action, computed } from "mobx";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { toAscii } from "../helpers";
|
import { toAscii } from "../helpers";
|
||||||
import { constants } from "../constants";
|
import { constants } from "../constants";
|
||||||
|
@ -18,7 +18,6 @@ export class BallotCard extends React.Component {
|
||||||
@observable progress;
|
@observable progress;
|
||||||
@observable totalVoters;
|
@observable totalVoters;
|
||||||
@observable isFinalized;
|
@observable isFinalized;
|
||||||
@observable isFiltered;
|
|
||||||
|
|
||||||
@computed get votesForNumber() {
|
@computed get votesForNumber() {
|
||||||
let votes = (this.totalVoters + this.progress) / 2;
|
let votes = (this.totalVoters + this.progress) / 2;
|
||||||
|
@ -197,22 +196,36 @@ export class BallotCard extends React.Component {
|
||||||
this.getIsFinalized();
|
this.getIsFinalized();
|
||||||
}
|
}
|
||||||
|
|
||||||
hideCard = () => {
|
componentDidMount() {
|
||||||
let { commonStore } = this.props;
|
this.interval = setInterval(() => {
|
||||||
let hideCard = commonStore.isActiveFilter && this.isFinalized;
|
this.calcTimeToFinish()
|
||||||
if (commonStore.searchTerm) {
|
}, 1000)
|
||||||
if (commonStore.searchTerm.length == 0) return hideCard;
|
}
|
||||||
if (String(this.creator).toLowerCase().includes(commonStore.searchTerm)) return (hideCard && false);
|
|
||||||
} else {
|
|
||||||
return hideCard;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
window.clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
|
||||||
|
showCard = () => {
|
||||||
|
let { commonStore } = this.props;
|
||||||
|
let show = commonStore.isActiveFilter ? !this.isFinalized : true;
|
||||||
|
return show;
|
||||||
|
}
|
||||||
|
|
||||||
|
isCreatorPattern = () => {
|
||||||
|
let { commonStore } = this.props;
|
||||||
|
if (commonStore.searchTerm) {
|
||||||
|
if (commonStore.searchTerm.length > 0) {
|
||||||
|
const isCreatorPattern = String(this.creator).toLowerCase().includes(commonStore.searchTerm)
|
||||||
|
return isCreatorPattern;
|
||||||
|
}
|
||||||
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let { contractsStore, ballotStore, votingType, children } = this.props;
|
let { contractsStore, votingType, children, isSearchPattern } = this.props;
|
||||||
let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
|
let ballotClass = (this.showCard() && (this.isCreatorPattern() || isSearchPattern)) ? "ballots-i" : "ballots-i display-none";
|
||||||
let threshold
|
let threshold
|
||||||
switch(votingType) {
|
switch(votingType) {
|
||||||
case "votingToChangeKeys":
|
case "votingToChangeKeys":
|
||||||
|
@ -224,6 +237,9 @@ export class BallotCard extends React.Component {
|
||||||
case "votingToChangeProxy":
|
case "votingToChangeProxy":
|
||||||
threshold = contractsStore.proxyBallotThreshold
|
threshold = contractsStore.proxyBallotThreshold
|
||||||
break;
|
break;
|
||||||
|
default:
|
||||||
|
threshold = contractsStore.keysBallotThreshold
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className={ballotClass}>
|
<div className={ballotClass}>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { observable, action, computed, autorun } from "mobx";
|
import { observable, action } from "mobx";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { BallotCard } from './BallotCard';
|
import { BallotCard } from './BallotCard';
|
||||||
|
|
||||||
|
@ -81,36 +81,21 @@ export class BallotKeysCard extends React.Component {
|
||||||
this.getBallotType();
|
this.getBallotType();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
isSearchPattern = () => {
|
||||||
this.interval = setInterval(() => {
|
|
||||||
this.calcTimeToFinish()
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
window.clearInterval(this.interval);
|
|
||||||
}
|
|
||||||
|
|
||||||
hideCard = () => {
|
|
||||||
let { commonStore } = this.props;
|
let { commonStore } = this.props;
|
||||||
let hideCard = commonStore.isActiveFilter && this.isFinalized;
|
|
||||||
if (commonStore.searchTerm) {
|
if (commonStore.searchTerm) {
|
||||||
if (commonStore.searchTerm.length == 0) return hideCard;
|
const isAffectedKeyPattern = String(this.affectedKey).toLowerCase().includes(commonStore.searchTerm)
|
||||||
if (String(this.affectedKey).toLowerCase().includes(commonStore.searchTerm)) return (hideCard && false);
|
const isAffectedKeyTypeDisplayNamePattern = String(this.affectedKeyTypeDisplayName).toLowerCase().includes(commonStore.searchTerm)
|
||||||
if (String(this.affectedKeyTypeDisplayName).toLowerCase().includes(commonStore.searchTerm)) return (hideCard && false);
|
const isBallotTypeDisplayNamePattern = String(this.ballotTypeDisplayName).toLowerCase().includes(commonStore.searchTerm)
|
||||||
if (String(this.ballotTypeDisplayName).toLowerCase().includes(commonStore.searchTerm)) return (hideCard && false);
|
return (isAffectedKeyPattern || isAffectedKeyTypeDisplayNamePattern || isBallotTypeDisplayNamePattern);
|
||||||
} else {
|
|
||||||
return hideCard;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let { contractsStore, id } = this.props;
|
let { id } = this.props;
|
||||||
let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
|
|
||||||
return (
|
return (
|
||||||
<BallotCard votingType="votingToChangeKeys" id={id}>
|
<BallotCard votingType="votingToChangeKeys" id={id} isSearchPattern={this.isSearchPattern()}>
|
||||||
<div className="ballots-about-i ballots-about-i_action">
|
<div className="ballots-about-i ballots-about-i_action">
|
||||||
<div className="ballots-about-td">
|
<div className="ballots-about-td">
|
||||||
<p className="ballots-about-i--title">Action</p>
|
<p className="ballots-about-i--title">Action</p>
|
||||||
|
|
|
@ -1,14 +1,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import moment from 'moment';
|
import { observable, action } from "mobx";
|
||||||
import { observable, action, computed } from "mobx";
|
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { toAscii } from "../helpers";
|
|
||||||
import { constants } from "../constants";
|
|
||||||
import swal from 'sweetalert2';
|
|
||||||
import { BallotCard } from './BallotCard';
|
import { BallotCard } from './BallotCard';
|
||||||
|
|
||||||
const ACCEPT = 1;
|
|
||||||
const REJECT = 2;
|
|
||||||
@inject("commonStore", "contractsStore", "routing")
|
@inject("commonStore", "contractsStore", "routing")
|
||||||
@observer
|
@observer
|
||||||
export class BallotMinThresholdCard extends React.Component {
|
export class BallotMinThresholdCard extends React.Component {
|
||||||
|
@ -26,25 +20,19 @@ export class BallotMinThresholdCard extends React.Component {
|
||||||
this.getProposedValue(this.props.id);
|
this.getProposedValue(this.props.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
hideCard = () => {
|
isSearchPattern = () => {
|
||||||
let { commonStore } = this.props;
|
let { commonStore } = this.props;
|
||||||
let hideCard = commonStore.isActiveFilter && this.isFinalized;
|
|
||||||
if (commonStore.searchTerm) {
|
if (commonStore.searchTerm) {
|
||||||
if (commonStore.searchTerm.length == 0) return hideCard;
|
const isProposedValuePattern = String(this.proposedValue).toLowerCase().includes(commonStore.searchTerm)
|
||||||
if (String(this.proposedValue).toLowerCase().includes(commonStore.searchTerm)) return (hideCard && false);
|
return (isProposedValuePattern);
|
||||||
if (String(this.creator).toLowerCase().includes(commonStore.searchTerm)) return (hideCard && false);
|
|
||||||
} else {
|
|
||||||
return hideCard;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let { contractsStore, id } = this.props;
|
let { id } = this.props;
|
||||||
let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
|
|
||||||
return (
|
return (
|
||||||
<BallotCard votingType="votingToChangeMinThreshold" id={id}>
|
<BallotCard votingType="votingToChangeMinThreshold" id={id} isSearchPattern={this.isSearchPattern()}>
|
||||||
<div className="ballots-about-i ballots-about-i_proposed-min-threshold">
|
<div className="ballots-about-i ballots-about-i_proposed-min-threshold">
|
||||||
<div className="ballots-about-td">
|
<div className="ballots-about-td">
|
||||||
<p className="ballots-about-i--title">Proposed min threshold</p>
|
<p className="ballots-about-i--title">Proposed min threshold</p>
|
||||||
|
@ -54,71 +42,6 @@ export class BallotMinThresholdCard extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</BallotCard>
|
</BallotCard>
|
||||||
/*<div className={ballotClass}>
|
|
||||||
<div className="ballots-about">
|
|
||||||
<div className="ballots-about-i ballots-about-i_name">
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-about-i--title">Name</p>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-i--name">{this.creator}</p>
|
|
||||||
<p className="ballots-i--created">{this.startTime}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-i ballots-about-i_proposed-min-threshold">
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-about-i--title">Proposed min threshold</p>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p>{this.proposedValue}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-i ballots-about-i_time">
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-about-i--title">Time</p>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-i--time">{this.timeToFinish}</p>
|
|
||||||
<p className="ballots-i--to-close">To close</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-i-scale">
|
|
||||||
<div className="ballots-i-scale-column">
|
|
||||||
<button type="button" onClick={(e) => this.vote({choice: REJECT})} className="ballots-i--vote ballots-i--vote_no">No</button>
|
|
||||||
<div className="vote-scale--container">
|
|
||||||
<p className="vote-scale--value">No</p>
|
|
||||||
<p className="vote-scale--votes">Votes: {this.votesAgainstNumber}</p>
|
|
||||||
<p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
|
|
||||||
<div className="vote-scale">
|
|
||||||
<div className="vote-scale--fill vote-scale--fill_yes" style={{width: `${this.votesAgainstPercents}%`}}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-i-scale-column">
|
|
||||||
<div className="vote-scale--container">
|
|
||||||
<p className="vote-scale--value">Yes</p>
|
|
||||||
<p className="vote-scale--votes">Votes: {this.votesForNumber}</p>
|
|
||||||
<p className="vote-scale--percentage">{this.votesForPercents}%</p>
|
|
||||||
<div className="vote-scale">
|
|
||||||
<div className="vote-scale--fill vote-scale--fill_no" style={{width: `${this.votesForPercents}%`}}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="button" onClick={(e) => this.vote({choice: ACCEPT})} className="ballots-i--vote ballots-i--vote_yes">Yes</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
Minimum {contractsStore.minThresholdBallotThreshold} from {contractsStore.validatorsLength} validators is required to pass the proposal
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div className="ballots-footer">
|
|
||||||
<div className="ballots-footer-left">
|
|
||||||
<button type="button" onClick={(e) => this.finalize(e)} className="ballots-footer-finalize">Finalize ballot</button>
|
|
||||||
<p>{constants.CARD_FINALIZE_DESCRIPTION}</p>
|
|
||||||
</div>
|
|
||||||
<div type="button" className="ballots-i--vote ballots-i--vote_no">Consensus Ballot ID: {this.props.id}</div>
|
|
||||||
</div>
|
|
||||||
</div>*/
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { observable, action, computed } from "mobx";
|
import { observable, action } from "mobx";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { BallotCard } from './BallotCard';
|
import { BallotCard } from './BallotCard';
|
||||||
|
|
||||||
|
@ -29,25 +29,20 @@ export class BallotProxyCard extends React.Component {
|
||||||
this.getContractType();
|
this.getContractType();
|
||||||
}
|
}
|
||||||
|
|
||||||
hideCard = () => {
|
isSearchPattern = () => {
|
||||||
let { commonStore } = this.props;
|
let { commonStore } = this.props;
|
||||||
let hideCard = commonStore.isActiveFilter && this.isFinalized;
|
|
||||||
if (commonStore.searchTerm) {
|
if (commonStore.searchTerm) {
|
||||||
if (commonStore.searchTerm.length == 0) return hideCard;
|
const isProposedAddressPattern = String(this.proposedAddress).toLowerCase().includes(commonStore.searchTerm)
|
||||||
if (String(this.proposedAddress).toLowerCase().includes(commonStore.searchTerm)) return (hideCard && false);
|
const isContractTypePattern = String(this.contractType).toLowerCase().includes(commonStore.searchTerm)
|
||||||
if (String(this.contractType).toLowerCase().includes(commonStore.searchTerm)) return (hideCard && false);
|
return (isProposedAddressPattern || isContractTypePattern);
|
||||||
} else {
|
|
||||||
return hideCard;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { contractsStore, ballotStore, id } = this.props;
|
const { ballotStore, id } = this.props;
|
||||||
let ballotClass = this.hideCard() ? "ballots-i display-none" : "ballots-i";
|
|
||||||
return (
|
return (
|
||||||
<BallotCard votingType="votingToChangeProxy" id={id}>
|
<BallotCard votingType="votingToChangeProxy" id={id} isSearchPattern={this.isSearchPattern()}>
|
||||||
<div className="ballots-about-i ballots-about-i_contract-type">
|
<div className="ballots-about-i ballots-about-i_contract-type">
|
||||||
<div className="ballots-about-td">
|
<div className="ballots-about-td">
|
||||||
<p className="ballots-about-i--title">Contract type</p>
|
<p className="ballots-about-i--title">Contract type</p>
|
||||||
|
@ -66,78 +61,5 @@ export class BallotProxyCard extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</BallotCard>
|
</BallotCard>
|
||||||
);
|
);
|
||||||
/* <div className={ballotClass}>
|
|
||||||
<div className="ballots-about">
|
|
||||||
<div className="ballots-about-i ballots-about-i_name">
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-about-i--title">Name</p>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-i--name">{this.creator}</p>
|
|
||||||
<p className="ballots-i--created">{this.startTime}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-i ballots-about-i_contract-type">
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-about-i--title">Contract type</p>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p>{ballotStore.ProxyBallotType[this.contractType]}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-i ballots-about-i_proposed-address">
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-about-i--title">Proposed contract address</p>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p>{this.proposedAddress}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-i ballots-about-i_time">
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-about-i--title">Time</p>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-about-td">
|
|
||||||
<p className="ballots-i--time">{this.timeToFinish}</p>
|
|
||||||
<p className="ballots-i--to-close">To close</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-i-scale">
|
|
||||||
<div className="ballots-i-scale-column">
|
|
||||||
<button type="button" onClick={(e) => this.vote({choice: REJECT})} className="ballots-i--vote ballots-i--vote_no">No</button>
|
|
||||||
<div className="vote-scale--container">
|
|
||||||
<p className="vote-scale--value">No</p>
|
|
||||||
<p className="vote-scale--votes">Votes: {this.votesAgainstNumber}</p>
|
|
||||||
<p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
|
|
||||||
<div className="vote-scale">
|
|
||||||
<div className="vote-scale--fill vote-scale--fill_yes" style={{width: `${this.votesAgainstPercents}%`}}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-i-scale-column">
|
|
||||||
<div className="vote-scale--container">
|
|
||||||
<p className="vote-scale--value">Yes</p>
|
|
||||||
<p className="vote-scale--votes">Votes: {this.votesForNumber}</p>
|
|
||||||
<p className="vote-scale--percentage">{this.votesForPercents}%</p>
|
|
||||||
<div className="vote-scale">
|
|
||||||
<div className="vote-scale--fill vote-scale--fill_no" style={{width: `${this.votesForPercents}%`}}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="button" onClick={(e) => this.vote({choice: ACCEPT})} className="ballots-i--vote ballots-i--vote_yes">Yes</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
Minimum {contractsStore.proxyBallotThreshold} from {contractsStore.validatorsLength} validators is required to pass the proposal
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div className="ballots-footer">
|
|
||||||
<div className="ballots-footer-left">
|
|
||||||
<button type="button" onClick={(e) => this.finalize(e)} className="ballots-footer-finalize">Finalize ballot</button>
|
|
||||||
<p>{constants.CARD_FINALIZE_DESCRIPTION}</p>
|
|
||||||
</div>
|
|
||||||
<div type="button" className="ballots-i--vote ballots-i--vote_no">Proxy Ballot ID: {this.props.id}</div>
|
|
||||||
</div>
|
|
||||||
</div>*/
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue