CRUD - link entries management

[jipsonminibhavan]

As a user I like to see a list of all created links, add new links, update or delete existing links.

link listing:

GIVEN that user enters the application after login
WHEN he is authorized
THEN a list of all existing links will get displayed

add new links:

GIVEN that user enters the application after login
WHEN they are authorized
THEN a create new link button is visible
AND When they click on the button they will enter a new page with a form to create a new link
AND the form will contain a url field and a path field
AND when the user clicks the form button create link they will get redirected to the list

delete link:

GIVEN that user enters the application after login
WHEN they are authorized
THEN a list of all existing links will get displayed
AND each entry will have a delete button
AND when they click on a delete button, they need to confirm the deletion

update link

GIVEN that user enters the application after login
WHEN they are authorized
THEN a list of all existing links will get displayed
AND each entry will have a edit button
AND when they click on a edit button, they will enter a new page with form with the current link data prefilled in a form
AND there will be a back button when the user clicks on it they will get redirected to the list
AND when the user clicks the form button Save they will get redirected to the list

Business Value

It enable non tech folks to mange the links without deeper developer knowledge. And it will save a lot of time.

Backend Issue:

• Modelldefinition (mit Mongoose) Modelldefinition (mit Mongoose) #24
  Link-Schema mit Eigenschaften für URL und Pfad
• Backend-API-Endpunkte (mit Express) Backend-API-Endpunkte (mit Express) #25
  GET /api/links, um alle Links abzurufen.
  POST /api/links, um einen neuen Link zu erstellen.
  DELETE /api/links/:id, um einen Link zu löschen.
  PUT /api/links/:id, um einen Link zu aktualisieren.
• url slug url slug url slug #26
  npm install mongoose-slug-generator

Frontend CRUD #27

• Eine Komponente, um alle Links aufzulisten (LinkList). Add linklist #29

• Eine Komponente, um einen neuen Link hinzuzufügen (AddLinkForm).

• Eine Komponente, um einen Link zu aktualisieren (UpdateLinkForm).

• Fetch-API , damit das Frontend mit dem Backend kommunizieren kann.

• Routing, Zustandsverwaltung mit Pinia

• Links auflisten: Nach dem Einloggen zeigt die Anwendung eine Liste aller bestehenden Links an. Jeder Link hat Schaltflächen zum Bearbeiten Edit und Löschen Delete.

• Neuen Link hinzufügen: Ein sichtbarer Button create link führt auf eine Seite mit einem Formular, um einen neuen Link zu erstellen. Nach dem Erstellen Button Save wird der Nutzer zur Liste umgeleitet.

• Link löschen: Nutzer können einen Link löschen, müssen aber vorher eine Bestätigung abgeben.

• Link aktualisieren: Die Bearbeitung eines Links erfolgt über ein Formular mit vorab ausgefüllten Daten des Links. Ein Zurück-Button leitet zurück zur Liste, und ein Speichern-Button aktualisiert den Link und leitet ebenfalls zurück.

Quellen:

• https://www.npmjs.com/package/mongoose-slug-generator ,
• https://medium.com/fbdevclagos/how-to-create-unique-urls-in-an-expressjs-and-mongodb-app-78865802902e ,
• https://stackoverflow.com/questions/74606684/how-do-i-generate-a-unique-slug-with-typescript-and-mongoose ,