Admin page

package.json

@@ -44,7 +44,10 @@
     "@sveltejs/adapter-node": "^1.0.0-next.95",
     "@types/auth0": "^2.35.3",
     "cookie": "^0.4.1",
+    "gridjs": "^5.1.0",
+    "gridjs-svelte": "^2.1.1",
     "husky": "^8.0.1",
-    "pretty-quick": "^3.1.3"
+    "pretty-quick": "^3.1.3",
+    "svelte-simple-modal": "^1.4.1"
   }
 }

src/app.css

@@ -30,6 +30,8 @@
   --global-border-radius: 6px;
 
   --global-letter-spacing: 0.03em;
+
+  --global-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 }
 
 :root .dark {

src/lib/authInterface.d.ts

@@ -7,4 +7,5 @@ export interface UserObjectInterface {
   sub?: string;
   updated_at?: string;
   username?: string;
+  role?: string[];
 }

src/lib/builderForm/BuilderForm.svelte

@@ -18,10 +18,11 @@
   let keywordList: string[] = $currentBuilderStatus.keywords;
   let ingredientList: string[] = $currentBuilderStatus.ingredients;
   let instructionList: InstructionsInterface[] = $currentBuilderStatus.instructions;
-  let recipeYield: string = $currentBuilderStatus.yield;
+  // let recipeYield: string = $currentBuilderStatus.yield;
+  let recipeYield: string = '2';
   let category: string = $currentBuilderStatus.category;
   let cuisine: string = $currentBuilderStatus.cuisine;
-  let calories: string = $currentBuilderStatus.nutrition.calories;
+  let calories: string = $currentBuilderStatus.nutrition.calories.toString();
   let totalTime: number = $currentBuilderStatus.totalTime;
 
   // Keywords
@@ -233,7 +234,7 @@
 
   <!-- Calories -->
   <div class="formGroup">
-    <label class="formLabel" for="yield">Calories for dish</label>
+    <label class="formLabel" for="calories">Calories for dish</label>
     <input
       class="formInput"
       id="calories"

src/lib/button/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let formType: string | undefined = undefined;
-  export let variant: string = 'primary';
+  export let variant: 'primary' | 'link' | 'accent' | 'success' | 'danger' = 'primary';
 </script>
 
 <button class={`${variant} ${$$props.class}`} type={formType} on:click><slot /></button>
@@ -47,4 +47,23 @@
     background-color: var(--accent);
     color: var(--white);
   }
+
+  button.danger {
+    background-color: hsla(var(--red-hue), 95%, 92%);
+    outline: 1px solid hsla(var(--red-hue), 95%, 80%);
+  }
+
+  button.danger:hover,
+  button.danger:focus {
+    background-color: hsla(var(--red-hue), 95%, 85%);
+  }
+
+  button.success {
+    background-color: hsla(var(--green-hue), 95%, 92%);
+    outline: 1px solid hsla(var(--green-hue), 95%, 80%);
+  }
+  button.success:hover,
+  button.success:focus {
+    background-color: hsla(var(--green-hue), 95%, 85%);
+  }
 </style>

src/lib/data/biscuits.json

@@ -6,7 +6,8 @@
   },
   "description": "Biscuits for biscuits and gravy",
   "keywords": ["biscuit", "bread", "breakfast"],
-  "yield": "6 biscuits",
+  "totalTime": "100",
+  "yield": "6",
   "category": "Bread",
   "cuisine": "American",
   "ingredients": [

src/lib/data/empty.json

@@ -5,7 +5,7 @@
     "reference": ""
   },
   "description": "",
-  "totalTime": 0,
+  "totalTime": "",
   "keywords": [],
   "yield": "",
   "category": "",

src/lib/data/example.json

@@ -11,7 +11,7 @@
   "category": "Dessert",
   "cuisine": "American",
   "nutrition": {
-    "calories": "270 calories"
+    "calories": "270"
   },
   "ingredients": [
     "2 cups of flour",

src/lib/header/Header.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import { user } from '$lib/stores';
   import AuthButton from '$lib/auth/authButton.svelte';
   import Logo from '$lib/logo/Logo.svelte';
 </script>
@@ -14,6 +15,11 @@
       <li class:active={$page.url.pathname.includes('/builder')}>
         <a sveltekit:prefetch href="/builder">Builder</a>
       </li>
+      {#if $user?.role?.includes('admin')}
+        <li class:active={$page.url.pathname.includes('/admin')}>
+          <a sveltekit:prefetch href="/admin">admin</a>
+        </li>
+      {/if}
     </ul>
   </nav>
   <div class="brand">

src/lib/modals/DecisionPopup.svelte

@@ -0,0 +1,42 @@
+<script>
+  export let decision = 'approve';
+  import Icon from '$lib/icon/Icon.svelte';
+</script>
+
+{#if decision === 'approve'}
+  <section class="decision approve">
+    <Icon name="check-circle" size="50px" />
+    <span> You have approved this recipe </span>
+  </section>
+{/if}
+
+{#if decision === 'deny'}
+  <section class="decision deny">
+    <Icon name="x-circle" size="50px" />
+    <span> You have denied this recipe </span>
+  </section>
+{/if}
+
+<style>
+  .decision {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 25px;
+  }
+
+  .approve :global(svg) {
+    stroke: hsla(var(--green-hue), 95%, 40%);
+  }
+
+  .deny :global(svg) {
+    stroke: hsla(var(--red-hue), 95%, 40%);
+  }
+
+  .decision span {
+    margin: var(--global-padding-x) 0;
+    letter-spacing: var(--global-letter-spacing);
+    text-transform: lowercase;
+    font-weight: 500;
+  }
+</style>

src/lib/recipes/Recipe.svelte

@@ -48,7 +48,7 @@
 
       <!-- Yield information -->
       {#if data.yield}
-        <div class="section recipe_author">
+        <div class="section recipe_yield">
           <span>Yields <b>{data.yield}</b> portions</span>
         </div>
       {/if}
@@ -162,12 +162,16 @@
   }
 
   .recipe_name,
+  .recipe_nutrition,
+  .recipe_yield,
   .recipe_author,
   .recipe_category,
   .recipe_author a {
     color: var(--white);
   }
   .recipe_author,
+  .recipe_nutrition,
+  .recipe_yield,
   .recipe_category {
     padding-left: 6px;
   }

src/lib/recipes/RecipeList.svelte

@@ -37,9 +37,11 @@
   {/if}
 
   {#if !isLoading && $recipeList.length}
-    {#each $recipeList as recipe}
-      <a href={`recipes/${recipe.ID}`}> {recipe.name} </a>
-    {/each}
+    <ul>
+      {#each $recipeList as recipe}
+        <li><a href={`recipes/${recipe.ID}`}> {recipe.name} </a></li>
+      {/each}
+    </ul>
   {/if}
 
   {#if !isLoading && !isError && !$recipeList.length}

src/lib/responsesInterface.d.ts

@@ -5,11 +5,21 @@ export interface RecipeListInterface extends RecipeInterface {
   CreatedAt: Date;
   UpdatedAt: Date;
   DeletedAt?: any;
+  userID: string;
 }
 
 export interface RecipeByIDInterface extends RecipeInterface {
   ID: number;
   CreatedAt: Date;
   UpdatedAt: Date;
   DeletedAt?: any;
+  userID: string;
+}
+
+export interface UnapprovedRecipeInterface extends RecipeInterface {
+  ID: number;
+  CreatedAt: Date;
+  UpdatedAt: Date;
+  DeletedAt?: any;
+  userID: string;
 }

src/lib/stores.ts

@@ -7,9 +7,11 @@ import * as emptyRecipe from '$lib/data/empty.json';
 export const currentBuilderStatus = writable(emptyRecipe);
 export const recipeList = writable([] as RecipeListInterface[]);
 export const recipe = writable({} as RecipeByIDInterface);
+export const unapprovedRecipeList = writable([] as RecipeListInterface[]);
 
 // Authentication
 export const isAuthenticated = writable(false);
 export const user = writable(({} as UserObjectInterface) || {});
 export const popupOpen = writable(false);
 export const error = writable();
+export const isAdmin = writable(false);

src/routes/admin.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { user } from '$lib/stores';
+  import { API_BASE_URL } from '$lib/consts';
+  import { unapprovedRecipeList } from '$lib/stores';
+  import Grid from 'gridjs-svelte';
+  import { html } from 'gridjs';
+
+  const getUnapprovedRecipes = API_BASE_URL + '/recipes/' + '?approved=false';
+  let isLoading: Boolean = true;
+  let isError: Boolean = false;
+  let recipes: any;
+
+  onMount(async () => {
+    if (!$user?.role?.includes('admin')) {
+      goto('/');
+    }
+
+    fetch(getUnapprovedRecipes)
+      .then((response) => response.json())
+      .then((data) => {
+        unapprovedRecipeList.set(data);
+        isLoading = false;
+      })
+      .catch((error) => {
+        console.log(error);
+        isError = true;
+        isLoading = false;
+        return [];
+      });
+  });
+
+  let newArr = $unapprovedRecipeList.map((recipe) => {
+    return {
+      id: recipe.ID,
+      name: recipe.name,
+      created: recipe.CreatedAt,
+      user: recipe.userID
+    };
+  });
+
+  const generateHref = (id: string) => {
+    return `/admin/${id}`;
+  };
+
+  const formatTime = (date: string) => {
+    return date.split('T')[0];
+  };
+
+  const formatUser = (user: string) => {
+    return user.split('auth0|')[1];
+  };
+
+  const columns = [
+    {
+      name: 'id',
+      formatter: (cell: string) => html(`<a href=${generateHref(cell)}>${cell}</a>`)
+    },
+    'name',
+    {
+      name: 'created',
+      formatter: (cell: string) => html(`<span>${formatTime(cell)}</span>`)
+    },
+    {
+      name: 'user',
+      formatter: (cell: string) => html(`<span>${formatUser(cell)}</span>`)
+    }
+  ];
+</script>
+
+<svelte:head>
+  <title>admin | twotop</title>
+  <meta name="Admin | twotop" content="approve recipes" />
+</svelte:head>
+
+<section>
+  <h1>Recipes to approve</h1>
+  <Grid {columns} data={newArr} />
+</section>
+
+<style>
+  :global(.gridjs-table) {
+    background-color: var(--primary);
+    border-radius: var(--global-border-radius);
+    box-shadow: var(--global-box-shadow);
+    margin-left: auto;
+    margin-right: auto;
+    border-collapse: collapse;
+  }
+
+  :global(.gridjs-thead) {
+    background-color: var(--primary-light);
+  }
+
+  :global(.gridjs-tr) {
+    border-bottom: 1px solid var(--primary-light);
+  }
+  :global(.gridjs-th-content) {
+    padding: var(--global-padding-x);
+  }
+
+  :global(.gridjs-td) {
+    padding: var(--global-padding-x);
+  }
+</style>