Notifications

KordonDev · Dec 4, 2022 · 1cd4511 · 1cd4511
1 parent 39f155c
commit 1cd4511
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 11 deletions.
diff --git a/frontend/src/components/Navigation/Navigation.svelte b/frontend/src/components/Navigation/Navigation.svelte
@@ -5,7 +5,6 @@
 </script>
 
 <nav>
-  <a href={routes.Login.link} use:link>Einloggen</a>
   <a href={routes.MemberOverview.link} use:link>Übersicht</a>
   <a href={routes.AddMember.link} use:link>Mitglied hinzufügen</a>
   <a href={routes.Users.link} use:link>User</a>

diff --git a/frontend/src/views/member/AddMember.svelte b/frontend/src/views/member/AddMember.svelte
@@ -5,6 +5,7 @@
   import type { Member } from "./member.service";
   import { createMember } from "./member.service";
   import MemberForm from "./MemberForm.svelte";
+  import Navigation from "../../components/Navigation/Navigation.svelte";
 
   let member: Member = {
     id: "0",
@@ -37,6 +38,8 @@
   }
 </script>
 
+<Navigation />
+
 <h1>Mitglied hinzufügen</h1>
 <MemberForm
   {member}

diff --git a/frontend/src/views/member/MemberDetail.svelte b/frontend/src/views/member/MemberDetail.svelte
@@ -6,6 +6,7 @@
   import { deleteMember, getMember, updateMember } from "./member.service";
   import MemberForm from "./MemberForm.svelte";
   import MemberCard from "./MemberCard.svelte";
+  import Navigation from "../../components/Navigation/Navigation.svelte";
 
   export let params = { id: undefined };
 
@@ -41,6 +42,8 @@
   }
 </script>
 
+<Navigation />
+
 {#await memberPromise then member}
   <MemberCard {member} />
 

diff --git a/frontend/src/views/security/Login.svelte b/frontend/src/views/security/Login.svelte
@@ -1,11 +1,29 @@
 <script lang="ts">
-  import { replace } from "svelte-spa-router";
+  import { createNotification } from "../../components/Notification/notificationStore";
+  import { link, replace } from "svelte-spa-router";
   import { routes } from "../../routes";
   import { login } from "./security.service";
 
   let username = "";
   const handleLogin = () => {
-    login(username).then(() => replace(routes.MemberOverview.link));
+    login(username)
+      .then((u) => {
+        console.log(u);
+        createNotification(
+          {
+            color: "green",
+            text: `Login erfolgreich.`,
+          },
+          5
+        );
+        replace(routes.MemberOverview.link);
+      })
+      .catch((err) => {
+        createNotification({
+          color: "red",
+          text: `Fehler beim Login`,
+        });
+      });
   };
 </script>
 
@@ -17,3 +35,5 @@
     <button type="submit">Einloggen</button>
   </form>
 </div>
+
+<a href={routes.Register.link} use:link>Registrieren</a>
diff --git a/frontend/src/views/security/Register.svelte b/frontend/src/views/security/Register.svelte
@@ -1,10 +1,29 @@
 <script lang="ts">
+  import { routes } from "../../routes";
+  import { link } from "svelte-spa-router";
   import { register } from "./security.service";
+  import { createNotification } from "src/components/Notification/notificationStore";
 
   let username = "";
   const login = (e: SubmitEvent) => {
     e.preventDefault();
-    register(username);
+    register(username)
+      .then((u) => {
+        console.log(u);
+        createNotification(
+          {
+            color: "green",
+            text: `Registrierung '${u.name}' erfolgreich. Jetzt direkt einloggen.`,
+          },
+          5
+        );
+      })
+      .catch((err) => {
+        createNotification({
+          color: "red",
+          text: `Fehler bei der Registrierung. ${err}`,
+        });
+      });
   };
 </script>
 
@@ -13,3 +32,5 @@
   <input bind:value={username} />
   <button type="submit">Register</button>
 </form>
+
+<a href={routes.Login.link} use:link>Einloggen</a>
diff --git a/frontend/src/views/user/UserOverview.svelte b/frontend/src/views/user/UserOverview.svelte
@@ -3,19 +3,58 @@
   import { currentUser } from "../../components/userStore";
   import Navigation from "../../components/Navigation/Navigation.svelte";
   import UserTable from "./UserTable.svelte";
-  import { getAllUser } from "./user.service";
+  import { getAllUser, toggleApproveUser } from "./user.service";
+  import { createNotification } from "../../components/Notification/notificationStore";
 
   function toogleApproved(id: number) {
-    console.log(id);
+    toggleApproveUser(id)
+      .then((user) => {
+        createNotification(
+          {
+            color: "green",
+            text: `Toggled ${user.name} approve Status.`,
+          },
+          5
+        );
+      })
+      .catch(() => {
+        createNotification(
+          {
+            color: "red",
+            text: `Fehler beim updaten.`,
+          },
+          5
+        );
+      });
   }
   function toogleAdmin(id: number) {
-    console.log("Admin", id);
+    toggleApproveUser(id)
+      .then((user) => {
+        createNotification(
+          {
+            color: "green",
+            text: `Toggled ${user.name} admin Status.`,
+          },
+          5
+        );
+      })
+      .catch(() => {
+        createNotification(
+          {
+            color: "red",
+            text: `Fehler beim updaten.`,
+          },
+          5
+        );
+      });
   }
 
   let me = [];
+  let disable = true;
   currentUser.subscribe((u) => {
     if (u) {
       me = [u];
+      disable = u.isAdmin;
     } else {
       me = [];
     }
@@ -25,10 +64,22 @@
 </script>
 
 <Navigation />
-<Heading>User</Heading>
+<Heading class="mb-4">User</Heading>
 
-<UserTable users={me} onApprove={toogleApproved} onAdmin={toogleAdmin} />
+<Heading class="mb-2">Du</Heading>
+<UserTable
+  users={me}
+  onApprove={toogleApproved}
+  onAdmin={toogleAdmin}
+  {disable}
+/>
 
 {#await usersPromise then users}
-  <UserTable {users} onApprove={toogleApproved} onAdmin={toogleAdmin} />
+  <Heading class="mb-2">Alle</Heading>
+  <UserTable
+    {users}
+    onApprove={toogleApproved}
+    onAdmin={toogleAdmin}
+    {disable}
+  />
 {/await}
diff --git a/frontend/src/views/user/UserTable.svelte b/frontend/src/views/user/UserTable.svelte
@@ -7,10 +7,12 @@
     TableHead,
     TableHeadCell,
   } from "flowbite-svelte";
+  import type { User } from "./user.service";
 
   export let users: User[];
   export let onApprove: (userId: number) => void;
   export let onAdmin: (userId: number) => void;
+  export let disable: boolean;
 </script>
 
 <Table>
@@ -28,13 +30,15 @@
             type="checkbox"
             checked={user.isApproved}
             on:change={() => onApprove(user.id)}
+            disabled={disable}
           />
         </TableBodyCell>
         <TableBodyCell>
           <input
             type="checkbox"
             checked={user.isAdmin}
             on:change={() => onAdmin(user.id)}
+            disabled={disable}
           />
         </TableBodyCell>
       </TableBodyRow>

diff --git a/frontend/src/views/user/user.service.ts b/frontend/src/views/user/user.service.ts
@@ -15,8 +15,14 @@ export function getAllUser(): Promise<User[]> {
   return fetchApi(`/users/`);
 }
 
-export function toggleApproveUser(userId: number) {
+export function toggleApproveUser(userId: number): Promise<User> {
   return fetchApi(`/users/${userId}/toogle-approve`, {
     method: "PATCH",
   });
 }
+
+export function toggleAdminUser(userId: number): Promise<User> {
+  return fetchApi(`/users/${userId}/toogle-admin`, {
+    method: "PATCH",
+  });
+}