Accordian for shares
Wed Jul 19 2023 13:23:38 GMT+0000 (Coordinated Universal Time)
Saved by @alfred555 #react.js
<AccordionDetails> <div className="row" style={{ marginLeft: '0px', marginRight: '0px', }} > <div className="col" style={{ paddingRight: '0px', borderRight: '1px solid', paddingTop: '40px' }}> <div className="row" style={{ paddingBottom: '24px' }}> <div className="col" style={{ maxWidth: '52px', paddingTop: '10px' }}> <img src={sharePercentage} alt="" width="42px" height="39px" /> </div> <div className="col"> <Typography sx={{ fontWeight: '500', fontSize: '24px', lineHeight: '45px' }}> {/* {calculateTotalShare()} */} % </Typography> <Typography sx={{ fontWeight: '300', fontSize: '14px', lineHeight: '18px' }}> Total Assigned to This Property </Typography> </div> </div> <div className="row"> <ul className="beneficiary-list"> {beneficiaryList1.length !== 0 && beneficiaryList1.map((b: any, i: number) => ( <li onClick={(e) => handleSelectedBeneficiary(b.profileGUID, i, b.surName, b.sharePercentage)} className={(activeBeneficiary === b.profileGUID) ? 'beneficiary-selected-byshare' : 'beneficiary-li'} > {b.foreName} {b.surName} <button className="shareBtn" type="button"> {/* {b.sharePercentage} */} {shareValue} {' '} % </button> </li> ))} </ul> </div> </div> <div className="col" style={{ padding: '40px' }}> <div className="row"> <div className="col"> <Box> <Typography id="input-slider" gutterBottom sx={{ fontWeight: '500', fontSize: '14px', lineHeight: '18px' }}> Share of This Property (%) </Typography> <Typography sx={{ fontWeight: '300', fontSize: '14px', lineHeight: '18px' }}> Seek The Bar To Increase Or Decrease Share for Aron Matew </Typography> <Grid container spacing={2} alignItems="center"> <Grid item xs> <Slider // value={typeof shareValues[n] === 'number' ? shareValues[n] : 0} // onChange={(event, newValue) => handleSliderChange(event, newValue, n)} value={shareValue} onChange={handleSliderChange} aria-labelledby="input-slider" max={totalShare} sx={{ width: '501px', paddingTop: '33px' }} /> <Typography sx={{ display: 'inline-block', fontWeight: '500', fontSize: '18px', }} > {/* {typeof shareValues[n] === 'number' ? shareValues[n] : 0} */} {shareValue} % Share for {' '} {shareListusername} </Typography> </Grid> </Grid> </Box> </div> </div> <div className="row"> <div className="col"> <div className="mb-3"> <label style={{ paddingTop: '24px' }} htmlFor="propertyShare" className="form-label w-100"> Or Enter Percentage Here </label> {/* <Input className="form-control" value={shareValue} size="small" onChange={handleInputChange} onBlur={handleBlur} name="propertyShare" inputProps={{ step: 0, min: 0, max: { totalShare }, type: 'number', 'aria-labelledby': 'input-slider', }} placeholder="0.0%" sx={{ maxWidth: '287px' }} /> */} <input type="number" placeholder="0.0%" maxLength={3} value={shareValue} // onBlur={handleBlur} // className={`${ // value < 1 ? 'validate-field' : 'form-control' // } `} onChange={handleInputChange} /> <br /> </div> </div> <div className="col" /> </div> <div className="row"> <div className="col"> <span className="helper"> If you have decimal no, enter % here (Eg:13.33%) </span> </div> </div> <div className="row"> <div className="col"> <Typography id="input-slider" gutterBottom sx={{ fontWeight: '500', fontSize: '14px', lineHeight: '18px', paddingTop: '40px', }} > Substitute Share (%) </Typography> <Typography sx={{ fontWeight: '300', fontSize: '14px', lineHeight: '18px' }}> You can divide {' '} {shareListusername} {' '} share to substitute </Typography> </div> </div> <div className="row" style={{ paddingTop: '24px' }}> {filteredArray.map((item) => ( <div className="col"> <div className="mb-3"> <label htmlFor="substitute" className="form-label w-100"> {item.foreName} </label> <input type="text" id="substitute" className="form-control" placeholder="0%" value={substituteValues[item.profileGUID] || item.sharePercentage} onChange={(event) => handleInputChangesubstitute(event, item.profileGUID)} /> </div> </div> ))} <div className="col" /> {totalSubstituteValue !== 100 ? <p className="totalShare">Total substitute share percentage must be 100.</p> : <p /> } {totalSubstituteValue !== 0 && shareValue === 0 ? <p className="totalShare">Assign share to the main beneficiary before assigning it to the substitute.</p> : <p /> } <Box sx={{ flex: '1 1 auto' }} /> </div> </div> </div> </AccordionDetails>
Comments