Skip to content

Issue 4 delete #8

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
devtanole wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Issue 4 delete #8

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
993c4ec
finish delete
devtanole Oct 1, 2024
72a8a64
fix delete showing on new entry view
devtanole Oct 1, 2024
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
4 changes: 4 additions & 0 deletions css/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
display: none !important;
}

.hide {
visibility: hidden !important;
}

.container {
max-width: 575px;
margin: 0 auto;
Expand Down
16 changes: 16 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,22 @@ textarea {
text-decoration: none;
}

.delete-button {
color: red;
text-decoration: red underline;
background-color: transparent;
text-transform: none;
border: none;
margin-left: 6px;
cursor: pointer;
}

.save {
position: relative;
top: -18px;
left: -22px;
}

.new {
cursor: pointer;
background-color: rgb(115, 21, 204);
Expand Down
14 changes: 12 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,11 @@ <h1 class="new-entry header-entries">New Entry</h1>
<label for="notes">Notes</label>
<textarea required id="notes" name="notes"></textarea>
</div>
<div>
<button type="submit" class="button">SAVE</button>
<div class="form-actions">
<button class="delete-button hide" type="button">
Delete Entry
</button>
<button type="submit" class="button save">SAVE</button>
</div>
</div>
</form>
Expand All @@ -80,6 +83,13 @@ <h1 class="header-entries">Entries</h1>
<p id="none" class="hidden">No entries yet</p>
<ul class="entry-list"></ul>
</div>
<dialog>
<p><strong>Are you sure you want to delete this entry?</strong></p>
<div class="modal">
<button class="cancel-modal">CANCEL</button>
<button class="confirm-modal">CONFIRM</button>
</div>
</dialog>
</main>
<script src="js/data.js"></script>
<script src="js/main.js"></script>
Expand Down
42 changes: 41 additions & 1 deletion js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ const $entryFormViewElement = document.querySelector(
const $entriesViewElement = document.querySelector('div[data-view="entries"]');
const $headerLinks = document.querySelectorAll('.head-links');
const $headerEntry = document.querySelector('.header-entries');
const $deleteButton = document.querySelector('.delete-button');
const $modalElement = document.querySelector('dialog');
const $cancelModal = document.querySelector('.cancel-modal');
const $confirmModal = document.querySelector('.confirm-modal');
if ($formElement == null || $entryImage == null || $entryListElement == null)
throw new Error('failed');
$photoUrlElement.addEventListener('input', (event) => {
Expand Down Expand Up @@ -66,6 +70,39 @@ function resetForm() {
$entryImage.setAttribute('src', placeholderImage);
$headerEntry.textContent = 'New Entry';
}
$deleteButton?.addEventListener('click', () => {
$modalElement?.showModal();
});
$cancelModal?.addEventListener('click', () => {
$modalElement?.close();
});
$confirmModal?.addEventListener('click', () => {
if (data.editing === null) return;
const entryItem = data.editing;
const entryId = entryItem.entryId;
let entryIndex = -1;
for (let i = 0; i < data.entries.length; i++) {
if (data.entries[i].entryId === entryId) {
entryIndex = i;
break;
}
}
if (entryIndex >= 0) {
data.entries.splice(entryIndex, 1);
const $liEntryToRemove = document.querySelector(
'li[data-entry-id="' + entryId + '"]',
);
$liEntryToRemove?.remove();
data.editing = null;
writeData();
resetForm();
$modalElement?.close();
toggleNoEntries();
viewSwap('entries');
} else {
throw new Error('Entry could not be found!');
}
});
// issue 2
document.addEventListener('DOMContentLoaded', () => {
for (const entry of data.entries) {
Expand Down Expand Up @@ -119,7 +156,6 @@ $entryListElement.addEventListener('click', (event) => {
for (const entry of data.entries) {
if (entry.entryId === $clickedEntryId) {
data.editing = entry;
//$headerEntry.textContent = 'Entries';
prepopulateFormForEntryEdit(entry);
viewSwap('entry-form');
break;
Expand All @@ -134,6 +170,9 @@ function prepopulateFormForEntryEdit(entry) {
formControls.notes.value = entry.notes;
$entryImage.setAttribute('src', entry.photoUrl);
$headerEntry.textContent = 'Edit Entry';
if (data.editing !== null) {
$deleteButton?.classList.remove('hide');
}
}
function toggleNoEntries() {
if ($noEntriesText == null) throw new Error('failed');
Expand All @@ -147,6 +186,7 @@ function viewSwap(viewName) {
if (viewName === 'entries') {
$entriesViewElement.classList.remove('hidden');
$entryFormViewElement.classList.add('hidden');
$deleteButton?.classList.add('hide');
} else if (viewName === 'entry-form') {
$entryFormViewElement.classList.remove('hidden');
$entriesViewElement.classList.add('hidden');
Expand Down
46 changes: 45 additions & 1 deletion ts/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ const $entriesViewElement = document.querySelector('div[data-view="entries"]');

const $headerLinks = document.querySelectorAll('.head-links');
const $headerEntry = document.querySelector('.header-entries') as HTMLElement;
const $deleteButton = document.querySelector('.delete-button');
const $modalElement = document.querySelector('dialog');
const $cancelModal = document.querySelector('.cancel-modal');
const $confirmModal = document.querySelector('.confirm-modal');

if ($formElement == null || $entryImage == null || $entryListElement == null)
throw new Error('failed');

Expand Down Expand Up @@ -76,6 +81,42 @@ function resetForm(): void {
$headerEntry.textContent = 'New Entry';
}

$deleteButton?.addEventListener('click', () => {
$modalElement?.showModal();
});

$cancelModal?.addEventListener('click', () => {
$modalElement?.close();
});

$confirmModal?.addEventListener('click', () => {
if (data.editing === null) return;
const entryItem: JournalEntry = data.editing;
const entryId = entryItem.entryId;
let entryIndex: number = -1;
for (let i = 0; i < data.entries.length; i++) {
if (data.entries[i].entryId === entryId) {
entryIndex = i;
break;
}
}
if (entryIndex >= 0) {
data.entries.splice(entryIndex, 1);
const $liEntryToRemove = document.querySelector(
'li[data-entry-id="' + entryId + '"]',
);
$liEntryToRemove?.remove();
data.editing = null;
writeData();
resetForm();
$modalElement?.close();
toggleNoEntries();
viewSwap('entries');
} else {
throw new Error('Entry could not be found!');
}
});

// issue 2

document.addEventListener('DOMContentLoaded', () => {
Expand Down Expand Up @@ -143,7 +184,6 @@ $entryListElement.addEventListener('click', (event: Event) => {
for (const entry of data.entries) {
if (entry.entryId === $clickedEntryId) {
data.editing = entry;
// $headerEntry.textContent = 'Entries';
prepopulateFormForEntryEdit(entry);
viewSwap('entry-form');
break;
Expand All @@ -159,6 +199,9 @@ function prepopulateFormForEntryEdit(entry: JournalEntry): void {
formControls.notes.value = entry.notes;
$entryImage.setAttribute('src', entry.photoUrl);
$headerEntry.textContent = 'Edit Entry';
if (data.editing !== null) {
$deleteButton?.classList.remove('hide');
}
}

function toggleNoEntries(): void {
Expand All @@ -176,6 +219,7 @@ function viewSwap(viewName: 'entries' | 'entry-form'): void {
if (viewName === 'entries') {
$entriesViewElement.classList.remove('hidden');
$entryFormViewElement.classList.add('hidden');
$deleteButton?.classList.add('hide');
} else if (viewName === 'entry-form') {
$entryFormViewElement.classList.remove('hidden');
$entriesViewElement.classList.add('hidden');
Expand Down