feat: delete entry

Author: peterpeterparker

templates/vanilla-js-example/src/components/delete.js

@@ -0,0 +1,60 @@
+import {deleteAsset, deleteDoc} from '@junobuild/core';
+import {addEventClick, reload} from '../utils/utils';
+
+const deleteItem = async (item) => {
+  try {
+    const {
+      data: {url}
+    } = item;
+
+    if (url !== undefined) {
+      const {pathname: fullPath} = new URL(url);
+
+      await deleteAsset({
+        collection: 'images',
+        fullPath
+      });
+    }
+
+    await deleteDoc({
+      collection: 'notes',
+      doc: item
+    });
+
+    reload();
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+export const renderDelete = ({table, item, index}) => {
+  addEventClick({
+    target: table,
+    selector: `#deleteItem${index}`,
+    fn: async () => await deleteItem(item)
+  });
+
+  return `<button
+        id="deleteItem${index}"
+        role="cell"
+        class="hover:text-lavender-blue-500 active:text-lavender-blue-400">
+        <svg width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" fill="currentColor">
+          <g>
+            <rect fill="none" class="opacity-25" width="29" height="29" />
+            <path
+              fill="none"
+              d="M14.5,6.26H5.19l1.26,17.82c.09,1.21,1.09,2.14,2.3,2.14h11.49c1.21,0,2.22-.94,2.3-2.14l1.26-17.82h-9.31Z"
+            />
+            <path d="M26.17,5.26h-6.88v-1.26c0-1.35-1.09-2.44-2.44-2.44h-4.7c-1.35,0-2.44,1.1-2.44,2.44v1.26H2.83c-.55,0-1,.45-1,1s.45,1,1,1h1.43l1.2,16.89c.12,1.72,1.57,3.07,3.3,3.07h11.49c1.73,0,3.18-1.35,3.3-3.07l1.2-16.89h1.43c.55,0,1-.45,1-1s-.45-1-1-1ZM11.71,4c0-.24.2-.44.44-.44h4.7c.24,0,.44.2.44.44v1.26h-5.58v-1.26ZM21.55,24.01c-.05.68-.62,1.21-1.3,1.21h-11.49c-.68,0-1.25-.53-1.3-1.21l-1.18-16.75h16.47l-1.18,16.75Z" />
+            <path
+              class="dark:text-black"
+              d="M11.29,8.71c-.55,0-1,.45-1,1v12.81c0,.55.45,1,1,1s1-.45,1-1v-12.81c0-.55-.45-1-1-1Z"
+            />
+            <path
+              class="dark:text-black"
+              d="M17.71,8.71c-.55,0-1,.45-1,1v12.81c0,.55.45,1,1,1s1-.45,1-1v-12.81c0-.55-.45-1-1-1Z"
+            />
+          </g>
+        </svg>
+      </button>`;
+};

templates/vanilla-js-example/src/components/login.js

@@ -1,5 +1,5 @@
 import {signIn} from '@junobuild/core';
-import {addEventClick} from '../utils/render.utils';
+import {addEventClick} from '../utils/utils';
 
 export const renderLogin = (app) => {
   addEventClick({

templates/vanilla-js-example/src/components/logout.js

@@ -1,5 +1,5 @@
 import {signOut} from '@junobuild/core';
-import {addEventClick} from '../utils/render.utils';
+import {addEventClick} from '../utils/utils';
 
 export const renderLogout = (app) => {
   addEventClick({

templates/vanilla-js-example/src/components/modal.js

@@ -1,6 +1,6 @@
 import {authSubscribe, setDoc, uploadFile} from '@junobuild/core';
 import {nanoid} from 'nanoid';
-import {addEventClick} from '../utils/render.utils';
+import {addEventClick, reload} from '../utils/utils';
 
 let user;
 authSubscribe((u) => (user = u));
@@ -47,11 +47,6 @@ const submitEntry = async (modal) => {
 
     closeModal(modal);
 
-    const reload = () => {
-      const event = new Event('reload');
-      window.dispatchEvent(event);
-    };
-
     reload();
   } catch (err) {
     console.error(err);

templates/vanilla-js-example/src/components/table.js

@@ -1,4 +1,5 @@
 import {listDocs} from '@junobuild/core';
+import {renderDelete} from './delete';
 
 const list = async () => {
   const {items} = await listDocs({
@@ -51,9 +52,12 @@ const list = async () => {
                         <path d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z" />
                       </g>
                     </svg>
-                  </a>`
+                  </a>
+                    `
                     : ''
                 }
+                
+                ${renderDelete({table, item, index})}
               </div>
             </div>`;
           })

templates/vanilla-js-example/src/utils/render.utils.js renamed to templates/vanilla-js-example/src/utils/utils.js

@@ -11,3 +11,8 @@ export const addEventClick = ({target, selector, fn}) => {
   });
   observer.observe(target, {childList: true, subtree: true});
 };
+
+export const reload = () => {
+  const event = new Event('reload');
+  window.dispatchEvent(event);
+};