From 57e20c8716bf7607f447b0849df561ca53e5442c Mon Sep 17 00:00:00 2001 From: Ryan Long Date: Fri, 23 Sep 2022 19:04:42 -0400 Subject: [PATCH 1/4] init commit for admin page --- src/lib/authInterface.d.ts | 1 + src/lib/header/Header.svelte | 6 ++++++ src/lib/stores.ts | 1 + src/routes/admin.svelte | 0 4 files changed, 8 insertions(+) create mode 100644 src/routes/admin.svelte diff --git a/src/lib/authInterface.d.ts b/src/lib/authInterface.d.ts index 1425c80..d787ba1 100644 --- a/src/lib/authInterface.d.ts +++ b/src/lib/authInterface.d.ts @@ -7,4 +7,5 @@ export interface UserObjectInterface { sub?: string; updated_at?: string; username?: string; + role?: string[]; } diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte index 29add9f..b3939ba 100644 --- a/src/lib/header/Header.svelte +++ b/src/lib/header/Header.svelte @@ -1,5 +1,6 @@ @@ -14,6 +15,11 @@
  • Builder
    • + {#if $user?.role?.includes('admin')} +
  • + admin +
    • + {/if}
    diff --git a/src/lib/stores.ts b/src/lib/stores.ts index a571a86..30b4c92 100644 --- a/src/lib/stores.ts +++ b/src/lib/stores.ts @@ -13,3 +13,4 @@ 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); diff --git a/src/routes/admin.svelte b/src/routes/admin.svelte new file mode 100644 index 0000000..e69de29 From 2a4542706edd6f5420c51ecc4fbcd86b51273d14 Mon Sep 17 00:00:00 2001 From: Ryan Long Date: Sat, 24 Sep 2022 00:48:20 -0400 Subject: [PATCH 2/4] add data --- package.json | 2 ++ src/lib/responsesInterface.d.ts | 10 ++++++ src/lib/stores.ts | 1 + src/routes/admin.svelte | 57 +++++++++++++++++++++++++++++++++ src/routes/admin/[id].svelte | 0 src/routes/recipes/[id].svelte | 1 - yarn.lock | 17 ++++++++++ 7 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 src/routes/admin/[id].svelte diff --git a/package.json b/package.json index 437dc0d..4af3751 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,8 @@ "@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" } diff --git a/src/lib/responsesInterface.d.ts b/src/lib/responsesInterface.d.ts index 850ebf8..8736a56 100644 --- a/src/lib/responsesInterface.d.ts +++ b/src/lib/responsesInterface.d.ts @@ -5,6 +5,7 @@ export interface RecipeListInterface extends RecipeInterface { CreatedAt: Date; UpdatedAt: Date; DeletedAt?: any; + userID: string; } export interface RecipeByIDInterface extends RecipeInterface { @@ -12,4 +13,13 @@ export interface RecipeByIDInterface extends RecipeInterface { CreatedAt: Date; UpdatedAt: Date; DeletedAt?: any; + userID: string; +} + +export interface UnapprovedRecipeInterface extends RecipeInterface { + ID: number; + CreatedAt: Date; + UpdatedAt: Date; + DeletedAt?: any; + userID: string; } diff --git a/src/lib/stores.ts b/src/lib/stores.ts index 30b4c92..391e75b 100644 --- a/src/lib/stores.ts +++ b/src/lib/stores.ts @@ -7,6 +7,7 @@ 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); diff --git a/src/routes/admin.svelte b/src/routes/admin.svelte index e69de29..0d6540a 100644 --- a/src/routes/admin.svelte +++ b/src/routes/admin.svelte @@ -0,0 +1,57 @@ + + + + admin | twotop + + + +
    +

    Recipes to approve

    + +
    + + diff --git a/src/routes/admin/[id].svelte b/src/routes/admin/[id].svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/recipes/[id].svelte b/src/routes/recipes/[id].svelte index 23b3229..db12fa3 100644 --- a/src/routes/recipes/[id].svelte +++ b/src/routes/recipes/[id].svelte @@ -20,7 +20,6 @@ .then((data) => { recipe.set(data); isLoading = false; - console.log(recipe); }) .catch((error) => { console.log(error); diff --git a/yarn.lock b/yarn.lock index c810f7d..528fa00 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1221,6 +1221,18 @@ grapheme-splitter@^1.0.4: resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e" integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ== +gridjs-svelte@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/gridjs-svelte/-/gridjs-svelte-2.1.1.tgz#1356ed519aafe20ffd1c8195945e4ac598e2d3ec" + integrity sha512-tYkgdqNKSnfmAYYc8EP4axn/Xlugp7VLwAlpNkP4SBLHHYD/ejD2DJ+FMatDNqcJ1Z1kuMnJWO+VBcAOirEByw== + +gridjs@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/gridjs/-/gridjs-5.1.0.tgz#77563e766c1faf6e8042577404098bb05ec514d0" + integrity sha512-ElT4RccHVZXR6mAn0Neh7jRv0yLPYLl9tWr9EC1tIJ7UC035kScGc/VMSJlPmOTyUU6qPUz1mtmzg/i8+IT24g== + dependencies: + preact "^10.10.6" + has-flag@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" @@ -1693,6 +1705,11 @@ postcss@^8.4.16: picocolors "^1.0.0" source-map-js "^1.0.2" +preact@^10.10.6: + version "10.11.0" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.0.tgz#26af45a0613f4e17a197cc39d7a1ea23e09b2532" + integrity sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w== + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" From c3e5c2ff29cf2d11462ecb1706a66c876e9a88af Mon Sep 17 00:00:00 2001 From: Ryan Long Date: Sat, 24 Sep 2022 09:17:32 -0400 Subject: [PATCH 3/4] update admin page --- package.json | 3 +- src/app.css | 2 + src/lib/button/Button.svelte | 21 +++++- src/lib/modals/DecisionPopup.svelte | 42 +++++++++++ src/routes/admin.svelte | 53 ++++++++++++- src/routes/admin/[id].svelte | 111 ++++++++++++++++++++++++++++ yarn.lock | 5 ++ 7 files changed, 233 insertions(+), 4 deletions(-) create mode 100644 src/lib/modals/DecisionPopup.svelte diff --git a/package.json b/package.json index 4af3751..1542d5c 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "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" } } diff --git a/src/app.css b/src/app.css index 2262bb0..fcba834 100644 --- a/src/app.css +++ b/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 { diff --git a/src/lib/button/Button.svelte b/src/lib/button/Button.svelte index b58c575..9c32b0e 100644 --- a/src/lib/button/Button.svelte +++ b/src/lib/button/Button.svelte @@ -1,6 +1,6 @@ @@ -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%); + } diff --git a/src/lib/modals/DecisionPopup.svelte b/src/lib/modals/DecisionPopup.svelte new file mode 100644 index 0000000..c8b9997 --- /dev/null +++ b/src/lib/modals/DecisionPopup.svelte @@ -0,0 +1,42 @@ + + +{#if decision === 'approve'} +
    + + You have approved this recipe +
    +{/if} + +{#if decision === 'deny'} +
    + + You have denied this recipe +
    +{/if} + + diff --git a/src/routes/admin.svelte b/src/routes/admin.svelte index 0d6540a..89fca35 100644 --- a/src/routes/admin.svelte +++ b/src/routes/admin.svelte @@ -5,7 +5,7 @@ import { API_BASE_URL } from '$lib/consts'; import { unapprovedRecipeList } from '$lib/stores'; import Grid from 'gridjs-svelte'; - import { clear_loops } from 'svelte/internal'; + import { html } from 'gridjs'; const getUnapprovedRecipes = API_BASE_URL + '/recipes/' + '?approved=false'; let isLoading: Boolean = true; @@ -40,7 +40,33 @@ }; }); - const columns = ['id', 'name', 'created', 'user']; + 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(`${cell}`) + }, + 'name', + { + name: 'created', + formatter: (cell: string) => html(`${formatTime(cell)}`) + }, + { + name: 'user', + formatter: (cell: string) => html(`${formatUser(cell)}`) + } + ]; @@ -54,4 +80,27 @@ diff --git a/src/routes/admin/[id].svelte b/src/routes/admin/[id].svelte index e69de29..c58f818 100644 --- a/src/routes/admin/[id].svelte +++ b/src/routes/admin/[id].svelte @@ -0,0 +1,111 @@ + + + + recipe | twotop + + + +{#if isError} + +{/if} + +{#if isLoading} + +{/if} + +{#if !isLoading && !isError} +
    + +
    + actions + + +
    +
    + +{/if} + + diff --git a/yarn.lock b/yarn.lock index 528fa00..4ead812 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2026,6 +2026,11 @@ svelte-search@^1.1.0: resolved "https://registry.yarnpkg.com/svelte-search/-/svelte-search-1.1.0.tgz#c41cc089a6a15d40911912d7ce497e6ae49d2150" integrity sha512-e5hci9fZPMXb3fuRZvcYJGqh448M8vV3biY4lN4Nr9fqrG/HBnTjWYstKb399aUe9tsBxRbxRAWgtKicisL23g== +svelte-simple-modal@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-1.4.1.tgz#1f5c23df26619a2a7f262b5259287b9497b9d19a" + integrity sha512-em/uxH1xvQZoXTOq81Kk0u9ltjf/EyQkNiKTQJQmdCygDMqyUfMCFzLnbIQ4ApfV4BcRh6eYbwbCeeWTOyfpsg== + svelte-typeahead@^4.3.2: version "4.3.2" resolved "https://registry.yarnpkg.com/svelte-typeahead/-/svelte-typeahead-4.3.2.tgz#52efd89acc5a41e34d778c8284f95007081aecc7" From ebb9245ee3a7b4d2b6c52d9a444449d0ff34366d Mon Sep 17 00:00:00 2001 From: Ryan Long Date: Mon, 26 Sep 2022 10:26:16 -0400 Subject: [PATCH 4/4] fix a few bugs --- src/lib/builderForm/BuilderForm.svelte | 7 ++++--- src/lib/data/biscuits.json | 3 ++- src/lib/data/empty.json | 2 +- src/lib/data/example.json | 2 +- src/lib/recipes/Recipe.svelte | 6 +++++- src/lib/recipes/RecipeList.svelte | 8 +++++--- 6 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/lib/builderForm/BuilderForm.svelte b/src/lib/builderForm/BuilderForm.svelte index dd615c6..93f6f04 100644 --- a/src/lib/builderForm/BuilderForm.svelte +++ b/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 @@
    - + {#if data.yield} -
    +
    Yields {data.yield} portions
    {/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; } diff --git a/src/lib/recipes/RecipeList.svelte b/src/lib/recipes/RecipeList.svelte index 09fb061..76224dd 100644 --- a/src/lib/recipes/RecipeList.svelte +++ b/src/lib/recipes/RecipeList.svelte @@ -37,9 +37,11 @@ {/if} {#if !isLoading && $recipeList.length} - {#each $recipeList as recipe} - {recipe.name} - {/each} + {/if} {#if !isLoading && !isError && !$recipeList.length}