sprechtl/PomeloNote
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

popup now working

Browse source 
note deletion via popup working
popup is not closing properly (1st close ok, after that not working (bcs 1 bool for all modals))
This commit is contained in:
dhain 2022-10-16 23:08:15 +02:00
parent cdefc2e993
commit f266f3579c
3 changed files with 49 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/svelte/package-lock.json generated
View file

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"bootstrap-icons": "^1.9.1", "bootstrap-icons": "^1.9.1",
"nookies": "^2.5.2", "nookies": "^2.5.2",
"sv-popup": "^0.2.5",
"webworker": "^0.8.4" "webworker": "^0.8.4"
}, },
"devDependencies": { "devDependencies": {
@ -2084,6 +2085,11 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/sv-popup": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/sv-popup/-/sv-popup-0.2.5.tgz",
"integrity": "sha512-JhBu4piXaauamT4vMEcFCydvxJ8e72G7c9F3caZVAPsiFqWPTYT3JDz99FlR+YCnbOp1emsZqqOPVvCwHgURog=="
},
"node_modules/svelte": { "node_modules/svelte": {
"version": "3.50.1", "version": "3.50.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
@ -3833,6 +3839,11 @@
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true "dev": true
}, },
"sv-popup": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/sv-popup/-/sv-popup-0.2.5.tgz",
"integrity": "sha512-JhBu4piXaauamT4vMEcFCydvxJ8e72G7c9F3caZVAPsiFqWPTYT3JDz99FlR+YCnbOp1emsZqqOPVvCwHgURog=="
},
"svelte": { "svelte": {
"version": "3.50.1", "version": "3.50.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",

1
frontend/svelte/package.json
View file

@ -24,6 +24,7 @@
"dependencies": { "dependencies": {
"bootstrap-icons": "^1.9.1", "bootstrap-icons": "^1.9.1",
"nookies": "^2.5.2", "nookies": "^2.5.2",
"sv-popup": "^0.2.5",
"webworker": "^0.8.4" "webworker": "^0.8.4"
} }
} }

54
frontend/svelte/src/routes/+page.svelte
View file

@ -2,6 +2,7 @@
import type {Note} from "../models/types"; import type {Note} from "../models/types";
import {onMount} from "svelte"; import {onMount} from "svelte";
import {StrapiNoteRepository} from "../models/StrapiNoteRepository"; import {StrapiNoteRepository} from "../models/StrapiNoteRepository";
import {Content, Modal, Trigger} from "sv-popup";
const noteRepo: StrapiNoteRepository = StrapiNoteRepository.getInstance(); const noteRepo: StrapiNoteRepository = StrapiNoteRepository.getInstance();
let notes: Note[]; let notes: Note[];
@ -28,22 +29,10 @@
* @param title The title of the new Note * @param title The title of the new Note
* @return The created Note Object * @return The created Note Object
*/ */
async function addNote(title: string) : Promise<Note> { async function addNote(title: string): Promise<Note> {
return await noteRepo.createNote({title: title,}); return await noteRepo.createNote({title: title,});
} }
/**
* Gives the user a prompt if they are sure to delete this note and deletes it if they confirm
* @param note The note to be deleted
*/
function deleteNotePrompt(note) {
const reallyDelete = confirm("Do you really want to delete this Note?");
//TODO: custom confirm popup
if (reallyDelete) {
deleteNote(note);
}
}
/** /**
* Deletes the note from the "notes" Array and the database * Deletes the note from the "notes" Array and the database
* @param note The note to be deleted * @param note The note to be deleted
@ -77,6 +66,12 @@
noteRepo.currentNoteId = note.id; noteRepo.currentNoteId = note.id;
window.location = "/editor"; window.location = "/editor";
} }
function closeModal(){
closeModalBool = true;
}
let closeModalBool = false;
</script> </script>
@ -92,6 +87,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<!-- Add Note Button --> <!-- Add Note Button -->
<div class="offset-md-7 col-md-1"> <div class="offset-md-7 col-md-1">
@ -118,10 +114,34 @@
</div> </div>
<div class="col-1"> <div class="col-1">
<button style="display: none" id={"noteButton" + note.id} <!-- Delete Note Popup -->
on:click={() => deleteNotePrompt(note)}> <Modal basic small={true} button={false} close={closeModalBool}> <!-- TODO: how to close properly?! no idea -->
<i class="bi bi-x"></i> <Content>
</button> <div class="row" style="margin-bottom: 10px;">
<h5>Do you really want to delete the "{note.title}" note?</h5>
</div>
<div class="row">
<div class="col-4 offset-2">
<button class="btn btn-primary"
on:click={() => deleteNote(note)}
on:click={() => closeModal()}>
<b>Yes</b>
</button>
</div>
<div class="col-4 offset-2">
<button class="btn btn-primary" autofocus
on:click={() => closeModal()}>
<b>No</b>
</button>
</div>
</div>
</Content>
<Trigger>
<button style="display: none" id={"noteButton" + note.id}>
<i class="bi bi-x"></i>
</button>
</Trigger>
</Modal>
</div> </div>
</div> </div>
</li> </li>