Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

working api create note, view note, view notes, create task with ui

Browse Source
This commit is contained in:
Timothy Cardoza
2026-02-27 14:53:53 -06:00
parent 20a19006d5
commit 89b5063786
3 changed files with 58 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test-embed.html
+32 -12
View File
@@ -160,11 +160,12 @@
<p><strong>2. Creating Notes Programmatically (API):</strong></p>
<p>Before embedding, a sister app can create a Note via PocketBase API to retrieve a new
<code>noteId</code>. By default, notes should have an array of <code>tags</code> and a
<code>title</code>.</p>
<code>title</code>.
</p>
<p><em>Using the PocketBase JS SDK:</em></p>
<pre
style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
const record = await pb.collection('notes').create({
const record = await pb.collection('TasGrid_Notes').create({
title: "Sister App Payload",
content: "&lt;p&gt;Initial content here...&lt;/p&gt;",
tags: ["sister_app_export"],
@@ -178,7 +179,7 @@ const newNoteId = record.id;
<p><em>Using standard REST API (fetch):</em></p>
<pre
style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
const res = await fetch('https://pocketbase.ccllc.pro/api/collections/notes/records', {
const res = await fetch('https://pocketbase.ccllc.pro/api/collections/TasGrid_Notes/records', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -197,14 +198,24 @@ const newNoteId = data.id;</pre>
<p><strong>3. Authentication Protocol:</strong></p>
<p>The parent application must send a <code>postMessage</code> to the iframe immediately after the
iframe loads (or whenever auth state changes).</p>
iframe loads (or whenever auth state changes). Since iframes reset their internal state on
navigation,
you should always sync auth on the <code>onload</code> event.</p>
<p><em>Example using vanilla JS:</em></p>
<pre
style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto; font-size: 12px;">
iframe.contentWindow.postMessage({
type: "TASGRID_AUTH",
token: "YOUR_POCKETBASE_TOKEN",
user: { /* optional PB user record */ }
}, "*");</pre>
// 1. Define sync function
function syncAuth(iframe) {
iframe.contentWindow.postMessage({
type: "TASGRID_AUTH",
token: pb.authStore.token,
user: pb.authStore.model
}, "*");
}
// 2. Attach to iframe (either in HTML or via JS)
// &lt;iframe onload="syncAuth(this)" src="..."&gt;&lt;/iframe&gt;
</pre>
<p><strong>4. Responsiveness:</strong></p>
<p>Both routes are designed to be fluid. Ensure your iframe container has defined dimensions; the
@@ -221,7 +232,7 @@ iframe.contentWindow.postMessage({
<span>Notes Embed</span>
<code style="font-size: 10px;">/embed/notes</code>
</div>
<iframe id="notes-iframe" src="http://localhost:4000/embed/notes"></iframe>
<iframe id="notes-iframe" src="http://localhost:4000/embed/notes" onload="syncAuthOnLoad(this)"></iframe>
</div>
<div class="iframe-container">
@@ -230,7 +241,8 @@ iframe.contentWindow.postMessage({
<span>Quick Add Embed</span>
<code style="font-size: 10px;">/embed/quick-add</code>
</div>
<iframe id="quick-add-iframe" src="http://localhost:4000/embed/quick-add"></iframe>
<iframe id="quick-add-iframe" src="http://localhost:4000/embed/quick-add"
onload="syncAuthOnLoad(this)"></iframe>
</div>
</div>
@@ -238,6 +250,14 @@ iframe.contentWindow.postMessage({
const pb = new PocketBase('https://pocketbase.ccllc.pro');
const statusEl = document.getElementById('status');
function syncAuthOnLoad(iframe) {
console.log(`Iframe ${iframe.id} loaded, checking auth sync...`);
if (pb.authStore.isValid) {
console.log(`Syncing existing auth to ${iframe.id}`);
sendAuthToIframes();
}
}
function loadSpecificNote() {
const id = document.getElementById('note-id-input').value.trim();
const iframe = document.getElementById('notes-iframe');
@@ -261,7 +281,7 @@ iframe.contentWindow.postMessage({
try {
// Using PocketBase SDK to mimic a REST API call from sister app
const record = await pb.collection('notes').create({
const record = await pb.collection('TasGrid_Notes').create({
title: title,
content: "<p>This note was created automatically via the API script!</p>",
tags: ["api_generated"],