From 629fc32d8049d82570fff0ebaf2952a08a47a834 Mon Sep 17 00:00:00 2001 From: YongChenSu Date: Sun, 17 Nov 2024 22:48:30 +0800 Subject: [PATCH 1/5] feat: add ReportDialog --- .../TimeAndSalary/ReportDialog.js | 29 +++++++++++++ .../TimeAndSalary/ReportDialog.module.css | 43 +++++++++++++++++++ .../TimeAndSalary/WorkingHourTable.js | 13 ++++++ .../Article/Article.module.css | 22 +++++++++- .../ExperienceDetail/Article/ArticleInfo.js | 10 +++++ .../ExperienceDetail/Article/ReactionZone.js | 10 +++++ .../Article/ReactionZone.module.css | 14 ++++++ .../TimeAndSalary/common/formatter.js | 4 ++ 8 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js create mode 100644 src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.module.css diff --git a/src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js b/src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js new file mode 100644 index 000000000..749b53052 --- /dev/null +++ b/src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js @@ -0,0 +1,29 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './ReportDialog.module.css'; +import cn from 'classnames'; + +const ReportDialog = ({ reportCount, isHighlighted }) => { + return ( +
+
{reportCount ? reportCount : '!'}
+
+
+ ); +}; + +ReportDialog.propTypes = { + isHighlighted: PropTypes.bool, + reportCount: PropTypes.number, +}; +ReportDialog.defaultProps = { + isHighlighted: false, + reportCount: 0, +}; + +export default ReportDialog; diff --git a/src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.module.css b/src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.module.css new file mode 100644 index 000000000..52ce932a9 --- /dev/null +++ b/src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.module.css @@ -0,0 +1,43 @@ +@value gray-dark, main-yellow from "../../common/variables.module.css"; + +.dialogBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + color: white; + z-index: 1; + min-width: 25px; + width: fit-content; + font-size: 13px; + height: 20px; + padding: 3px 6px; + background-color: var(--dialog-color); +} + +.dialogTriangle { + position: absolute; + bottom: -5px; + left: 2px; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 10px solid var(--dialog-color); + z-index: 0; +} + +.dialogWrapper { + --dialog-color: gray-dark; + position: relative; + width: fit-content; +} + +.enabled { + --dialog-color: #333; +} + +.enabled.highlighted:hover { + --dialog-color: main-yellow; +} diff --git a/src/components/CompanyAndJobTitle/TimeAndSalary/WorkingHourTable.js b/src/components/CompanyAndJobTitle/TimeAndSalary/WorkingHourTable.js index d44ac6615..3cf8ff040 100644 --- a/src/components/CompanyAndJobTitle/TimeAndSalary/WorkingHourTable.js +++ b/src/components/CompanyAndJobTitle/TimeAndSalary/WorkingHourTable.js @@ -17,9 +17,11 @@ import { getWeekWorkTime, formatWage, formatDate, + getReportCount, } from '../../TimeAndSalary/common/formatter'; import injectHideContentBlock from '../../TimeAndSalary/common/injectHideContentBlock'; import usePermission from 'hooks/usePermission'; +import ReportDialog from './ReportDialog'; const SalaryHeader = ({ isInfoSalaryModalOpen, toggleInfoSalaryModal }) => ( @@ -126,6 +128,17 @@ const columnProps = [ ), Children: TimeHeader, }, + { + className: styles.colDataTime, + title: '回報', + dataField: R.compose( + reportCount => , + getReportCount, + // TODO: 暫時給 10 筆資料，屆時要換成 R.prop('salary_work_times'), or report_count + () => Array(10).fill(0), + ), + Children: () => '回報', + }, ]; const WorkingHourTable = ({ data, pageType }) => { diff --git a/src/components/ExperienceDetail/Article/Article.module.css b/src/components/ExperienceDetail/Article/Article.module.css index aeb4d0e66..d9d2bddaf 100644 --- a/src/components/ExperienceDetail/Article/Article.module.css +++ b/src/components/ExperienceDetail/Article/Article.module.css @@ -1,4 +1,4 @@ -@value white-light, border-gray, main-yellow, yellow-light from "../../common/variables.module.css"; +@value white-light, border-gray, main-yellow, yellow-light, below-mobile from "../../common/variables.module.css"; $padding: 40px; $paddingS: 16px; @@ -88,3 +88,23 @@ $paddingS: 16px; justify-content: center; margin-bottom: 30px; } + +.reportDialogContainer { + display: flex; + align-items: center; + position: absolute; + right: 20px; +} + +.reportText { + margin-left: 2.5px; +} + +@media (max-width: below-mobile) { + .reportDialogContainer { + position: relative; + justify-content: flex-end; + margin-bottom: 8px; + right: 0px; + } +} diff --git a/src/components/ExperienceDetail/Article/ArticleInfo.js b/src/components/ExperienceDetail/Article/ArticleInfo.js index 01d10939e..8c5f323f9 100644 --- a/src/components/ExperienceDetail/Article/ArticleInfo.js +++ b/src/components/ExperienceDetail/Article/ArticleInfo.js @@ -12,6 +12,7 @@ import { } from 'constants/companyJobTitle'; import { originalCompanyNameSelector } from '../experienceSelector'; import RatingInfo from './RatingInfo'; +import ReportDialog from 'components/CompanyAndJobTitle/TimeAndSalary/ReportDialog'; const formatDate = date => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月`; const formatExperienceInYear = year => { @@ -123,10 +124,19 @@ InterviewInfoBlocks.propTypes = { hideContent: PropTypes.bool, }; +const reportCount = 90; // for temp + const WorkInfoBlocks = ({ experience, hideContent }) => { + // TODO: 有 report count 後，要看 console.log({ experience }); const expInYearText = formatExperienceInYear(experience.experience_in_year); return ( +
+ + {Boolean(reportCount) && ( +
有使用者回報
+ )} +
( ); ReactionButton.propTypes = { - Icon: PropTypes.func.isRequired, + Icon: PropTypes.func, active: PropTypes.bool, children: PropTypes.node, className: PropTypes.string,