Skip to content

Add Scrum Preview Modal Functionality #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add Scrum Preview Modal Functionality #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
73f2a19
Fixes issue #69 : Enhanced feedback to Selection/Deselection of CheckBox
Preeti9764 Apr 2, 2025
765e75b
Added a Preview Scrum Button
Preeti9764 Apr 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,17 @@ li {
list-style-type: disc !important;
margin-left: 1rem;
}
.selectedLabel {
font-weight: 400;
color: #333333;
}

.unselectedLabel {
font-weight: 300;
color: #666666;
}

.selectedLabel, .unselectedLabel {
transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
}

113 changes: 93 additions & 20 deletions src/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,74 @@
<link rel="stylesheet" type="text/css" href="index.css">
<script src="./scripts/fontawesome.js"></script>
<style type="text/css">
html,body{
html, body {
width: 350px !important;
height: 600px !important;
max-height: 600px !important;
overflow-y: scroll;
}
</style>
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
display: none; /* Ensure hidden */
align-items: center;
justify-content: center;
}

.modal-content {
background: white;
border-radius: 12px;
padding: 20px;
max-width: 450px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}




.close {
float: right;
font-size: 28px;
cursor: pointer;
}
.toast {
position: absolute;
top: 10px;
right: 10px;
background: #4CAF50;
color: white;
padding: 10px 15px;
border-radius: 5px;
display: none;
z-index: 2000;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.3s ease;
}

.toast.show {
display: block;
opacity: 1;
}

.button-container {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
Expand Down Expand Up @@ -42,10 +103,10 @@ <h6 class="center">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="Your Project Name" id="projectName" type="text">
<label for="projectName">Your Project Name</label>
</div>
<div class="input-field col s12">
<input placeholder="Your Project Name" id="projectName" type="text">
<label for="projectName">Your Project Name</label>
</div>
<div class="input-field col s12">
<input placeholder="Required for getting data from github" id="githubUsername" type="text">
<label for="githubUsername">Your Github Username</label>
Expand All @@ -54,11 +115,9 @@ <h6 class="center">
<input type="checkbox" class="filled-in" id="lastWeekContribution"/>
<label for="lastWeekContribution">Show past <span id="noDays"></span> from today</label>
</div>

<div class="input-field col s6">
<div>Starting Date:</div>
<input id="startingDate" type="date" class="datepicker" placeholder=" ">

</div>
<div class="input-field col s6">
<div>Ending Date</div>
Expand All @@ -73,29 +132,43 @@ <h6 class="center">
<input placeholder="Reason" id="userReason" type="text">
<label for="userReason">What is stopping you from doing your work?</label>
</div>
<div class="button-container">
<button id="openModal" class="btn">Generate Scrum</button>
</div>
<div class="col s12">

<h5>Note:</h5>
<h6>
<ul>
<li>The PRs fetched are according to the date last reviewed by anyone. So if you reviewed a PR 10 days back, and someone reviewed it 2 days back, it will appear in your last week's activity. See <a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">this issue</a>.
</li>
<li>By using the extension you understand that there might be discrepancies in the SCRUM generated. You are advised to edit the SCRUM afterwards to remove any discrepancies.
</li>
<li>The PRs fetched are according to the date last reviewed by anyone. So if you reviewed a PR 10 days back, and someone reviewed it 2 days back, it will appear in your last week's activity. See <a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">this issue</a>.</li>
<li>By using the extension you understand that there might be discrepancies in the SCRUM generated. You are advised to edit the SCRUM afterwards to remove any discrepancies.</li>
</ul>
</h6>
</div>
</div>
</div>

<hr />
<footer>
<div class="center">
<a target="_blank" href="https://github.com/fossasia/scrum_helper"><h6><i class="fa fa-github" aria-hidden="true"></i> view code</h6></a>
</div>
</footer>
<!-- Scrum Modal -->
<div id="scrumModal" class="modal">
<div class="modal-content">
<span class="close" id="closeModal">&times;</span>
<h5>Scrum Preview</h5>
<pre id="scrumContent">[Scrum content preview here]</pre>
<button id="copyScrum" class="btn">Copy</button>

<!-- Toast INSIDE modal -->
<div id="toast" class="toast">Copied successfully!</div>
</div>
</div>


<footer>
<div class="center">
<a target="_blank" href="https://github.com/fossasia/scrum_helper"><h6><i class="fa fa-github" aria-hidden="true"></i> view code</h6></a>
</div>
</footer>

<script src="scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" type="text/javascript" src="materialize/js/materialize.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
58 changes: 58 additions & 0 deletions src/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,64 @@ function handleGsocClick() {
chrome.storage.local.set({ gsoc: 1 });
handleLastWeekContributionChange();
}
document.getElementById("openModal").addEventListener("click", () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (complexity): Consider extracting the modal and clipboard handling logic into well-named helper functions to improve code organization and readability by reducing inline nesting and complexity within event listeners, promoting a more modular structure..

Consider extracting the modal and clipboard handling logic into small, well-named helper functions. For example, you can refactor the inline callbacks like this:

function showScrumModal() {
  chrome.storage.local.get(['projectName', 'githubUsername', 'userReason'], (items) => {
    const projectName = items.projectName || "[Project]";
    const githubUsername = items.githubUsername || "[Username]";
    const userReason = items.userReason || "None";

    // TEMP: Hardcoded sample data (replace later with GitHub API logic)
    const pastWork = [
      `(${projectName}) - Made PR (#71) - Fixes issue #69 : Enhanced feedback to Selection/Deselection of CheckBox open`,
      `(${projectName}) - Opened Issue(#69) - UI Issue with Checkbox Selection/Deselection Feedback open`,
      `(${projectName}) - Reviewed PR - #70 (Fixed UI Issue with Checkbox Selection/Deselection Feedback) open`
    ].join('\n');

    const scrum = `1. What did I do last week?\n ${pastWork}\n\n 2. What I plan to do this week?\n\n 3. What is stopping me from doing my work?\n      ${userReason}`;

    document.getElementById("scrumContent").textContent = scrum;

    // Show modal & disable body scroll
    const modal = document.getElementById("scrumModal");
    modal.style.display = "flex"; // changed from block to flex for proper centering
    document.body.style.overflow = "hidden";
  });
}

function hideScrumModal() {
  document.getElementById("scrumModal").style.display = "none";
  document.body.style.overflow = "";
}

function copyScrumContent() {
  const content = document.getElementById("scrumContent").textContent;
  const toast = document.getElementById("toast");

  navigator.clipboard.writeText(content).then(() => {
    toast.classList.add("show");
    toast.style.display = "block";

    setTimeout(() => {
      toast.classList.remove("show");
      toast.style.display = "none";
    }, 3000);
  });
}

Then, attach them to your events:

document.getElementById("openModal").addEventListener("click", showScrumModal);
document.getElementById("closeModal").addEventListener("click", hideScrumModal);
document.getElementById("copyScrum").addEventListener("click", copyScrumContent);

This refactoring reduces inline nesting and improves readability while keeping functionality intact.

chrome.storage.local.get(
['projectName', 'githubUsername', 'userReason'],
(items) => {
const projectName = items.projectName || "[Project]";
const githubUsername = items.githubUsername || "[Username]";
const userReason = items.userReason || "None";

// TEMP: Hardcoded sample data (replace later with GitHub API logic)
const pastWork = [
`(${projectName}) - Made PR (#71) - Fixes issue #69 : Enhanced feedback to Selection/Deselection of CheckBox open`,
`(${projectName}) - Opened Issue(#69) - UI Issue with Checkbox Selection/Deselection Feedback open`,
`(${projectName}) - Reviewed PR - #70 (Fixed UI Issue with Checkbox Selection/Deselection Feedback) open`
].join('\n');

const scrum =
`1. What did I do last week?
${pastWork}

2. What I plan to do this week?


3. What is stopping me from doing my work?
${userReason}`;

document.getElementById("scrumContent").textContent = scrum;

// Show modal & disable body scroll
const modal = document.getElementById("scrumModal");
modal.style.display = "flex"; // changed from block to flex for proper centering
document.body.style.overflow = "hidden";
}
);
});

document.getElementById("closeModal").addEventListener("click", () => {
// Hide modal & re-enable scroll
document.getElementById("scrumModal").style.display = "none";
document.body.style.overflow = "";
});

document.getElementById("copyScrum").addEventListener("click", () => {
const content = document.getElementById("scrumContent").textContent;
const toast = document.getElementById("toast");

navigator.clipboard.writeText(content).then(() => {
toast.classList.add("show");
toast.style.display = "block";

setTimeout(() => {
toast.classList.remove("show");
toast.style.display = "none";
}, 3000);
});
});



enableToggleElement.addEventListener('change', handleEnableChange);
githubUsernameElement.addEventListener('keyup', handleGithubUsernameChange);
projectNameElement.addEventListener('keyup', handleProjectNameChange);
Expand Down