- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| munch-ease-frontend | -
-
- |
- 0% | -0/6 | -0% | -0/1 | -0% | -0/1 | -0% | -0/6 | -
| munch-ease-frontend/scripts | -
-
- |
- 0% | -0/32 | -0% | -0/1 | -0% | -0/1 | -0% | -0/32 | -
| munch-ease-frontend/src | -
-
- |
- 47.52% | -125/263 | -57.14% | -12/21 | -57.14% | -4/7 | -47.52% | -125/263 | -
| munch-ease-frontend/src/api | -
-
- |
- 77.41% | -312/403 | -54.83% | -51/93 | -71.42% | -20/28 | -77.41% | -312/403 | -
| munch-ease-frontend/src/components | -
-
- |
- 0% | -0/234 | -0% | -0/3 | -0% | -0/3 | -0% | -0/234 | -
| munch-ease-frontend/src/components/ingredients | -
-
- |
- 0% | -0/330 | -0% | -0/3 | -0% | -0/3 | -0% | -0/330 | -
| munch-ease-frontend/src/components/meals | -
-
- |
- 0% | -0/934 | -0% | -0/5 | -0% | -0/5 | -0% | -0/934 | -
| munch-ease-frontend/src/components/recipes | -
-
- |
- 0% | -0/550 | -0% | -0/4 | -0% | -0/4 | -0% | -0/550 | -
| munch-ease-frontend/src/components/shopping | -
-
- |
- 0% | -0/815 | -0% | -0/5 | -0% | -0/5 | -0% | -0/815 | -
| munch-ease-frontend/src/composables | -
-
- |
- 11.88% | -29/244 | -50% | -5/10 | -57.14% | -4/7 | -11.88% | -29/244 | -
| munch-ease-frontend/src/domain | -
-
- |
- 81.39% | -105/129 | -73.8% | -31/42 | -83.33% | -10/12 | -81.39% | -105/129 | -
| munch-ease-frontend/src/router | -
-
- |
- 0% | -0/106 | -0% | -0/2 | -0% | -0/2 | -0% | -0/106 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| vue.config.js | -
-
- |
- 0% | -0/6 | -0% | -0/1 | -0% | -0/1 | -0% | -0/6 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | #!/usr/bin/env node -/** - * Warn if backend openapi.json is newer than generated src/api/types.ts - */ -const { statSync, existsSync } = require('fs') -const { resolve } = require('path') - -const backendSpec = resolve(__dirname, '..', '..', 'munch-ease-backend', 'openapi.json') -const generated = resolve(__dirname, '..', 'src', 'api', 'types.ts') - -if (!existsSync(backendSpec)) { - console.log('codegen-check: Skipping (backend openapi.json not found).') - process.exit(0) -} -if (!existsSync(generated)) { - console.log('codegen-check: src/api/types.ts not found. Run: npm run codegen') - process.exit(1) -} - -try { - const specMtime = statSync(backendSpec).mtimeMs - const genMtime = statSync(generated).mtimeMs - if (specMtime > genMtime) { - console.log('codegen-check: OpenAPI spec is newer than generated types. Consider running: npm run codegen') - process.exit(2) - } else { - console.log('codegen-check: OK (generated types up to date).') - } -} catch (e) { - console.error('codegen-check: Error reading timestamps:', e.message) - process.exit(3) -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| codegen-check.js | -
-
- |
- 0% | -0/32 | -0% | -0/1 | -0% | -0/1 | -0% | -0/32 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div> - <ul class="nav"> - <li class="nav-item"> - <router-link - class="nav-link" - :to="{ name: 'recipes' }" - active-class="active" - > - Recipes - </router-link> - </li> - <li class="nav-item"> - <router-link - class="nav-link" - :to="{ name: 'mealplan' }" - active-class="active" - > - Meal Plan - </router-link> - </li> - <li class="nav-item"> - <router-link - class="nav-link" - :to="{ name: 'shopping' }" - active-class="active" - > - Shopping - </router-link> - </li> - </ul> - </div> - <div class="viewport"> - <router-view /> - </div> - - <alert-toast /> -</template> - -<script setup> -import AlertToast from './components/AlertToast.vue' - -// components in <script setup> are auto-registered by import + usage -</script> - -<style> -#app { - font-family: Avenir, Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; -} - -/* Make nav bar links buttons across top of screen */ -.nav { - position: fixed; - left: 0; - right: 0; - top: 0; - z-index: 1; - - display: flex; - justify-content: space-around; - list-style-type: none; - margin: 0; - padding: 0; - position: fixed; - top: 0; - width: 100%; - background-color: #333; -} - -.nav li { - flex: 1; -} - -/* Style the links inside the navigation bar */ -.nav a { - display: inline-block; - color: #f2f2f2; - text-align: center; - padding: 14px 16px; - text-decoration: none; -} - -/* Have active route use different color */ -.nav li:has(> a.active) { - background-color: #4caf50; - color: white; -} - -.viewport { - max-width: 1200px; - margin: auto; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { api } from '@/api/client' -import type { Person } from '@/domain/types' - -let cachedUser: Person | null = null - -export async function currentUser(): Promise<Person | null> { - if (cachedUser) return cachedUser - try { - const res = await api.POST('/api/v1/auth/refresh', { params: { cookie: { user_id: 0 } } }) - if (!res.response.ok) return null - cachedUser = res.data ?? null - } catch (_) { - cachedUser = null - } - return cachedUser -} - -export async function login(username: string): Promise<Person> { - const res = await api.POST('/api/v1/auth/login', { body: { username } }) - if (!res.response.ok) { - const err = res.error - throw ( - (err instanceof Error && err) || - (typeof err === 'string' ? new Error(err) : new Error(`${res.response.status} ${res.response.statusText || 'HTTP error'}`)) - ) - } - cachedUser = res.data ?? null - if (!cachedUser) throw new Error('Login failed: empty response') - return cachedUser -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -20x -20x -20x -20x -20x -1x - | import createClient from 'openapi-fetch'
-import type { paths } from './types'
-
-// Vue CLI uses process.env.VUE_APP_*
-const vueCliBase: string | undefined = typeof process !== 'undefined' ? (process.env?.VUE_APP_API_BASE ?? undefined) : undefined
-const isTest = typeof process !== 'undefined' && (process.env?.VITEST === 'true' || process.env?.NODE_ENV === 'test')
-// Prefer absolute http URL in tests to avoid TLS issues and ease MSW interception
-// Use host-only base URL; always pass full "/api/v1/..." paths to the client methods
-const defaultBase = ''
-const baseUrl: string = isTest ? 'http://localhost' : (vueCliBase || defaultBase)
-
-export const api = createClient<paths>({
- baseUrl,
- fetch: (input: RequestInfo | URL, init?: RequestInit) => {
- return globalThis.fetch(input, {
- credentials: 'include',
- ...init,
- })
- },
-})
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| auth.ts | -
-
- |
- 0% | -0/30 | -0% | -0/1 | -0% | -0/1 | -0% | -0/30 | -
| client.ts | -
-
- |
- 100% | -20/20 | -25% | -1/4 | -100% | -1/1 | -100% | -20/20 | -
| sdk.ts | -
-
- |
- 82.71% | -292/353 | -56.81% | -50/88 | -73.07% | -19/26 | -82.71% | -292/353 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -6x -6x -6x -6x -6x -1x -1x -1x -1x -1x -9x -9x -9x -9x -9x -9x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -9x -1x -1x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -1x -1x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -1x -1x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -1x - - - - - - - - - - - -1x -2x -2x -2x -1x -1x -1x -1x -1x - - - - - -1x - - - - -1x -2x -2x -2x -1x -1x -1x -2x -2x -2x -2x -2x -2x -2x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -3x -3x -3x -1x -1x -1x -1x -3x -3x -3x -3x -3x -1x -2x -2x -2x -1x -1x -1x -1x -1x -1x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -1x -1x -1x -1x -1x -1x -1x -1x -1x - - - - - - - - - - - - - - - -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - - - - - - -1x -1x - - - - - -1x - - - - - - - - -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -2x -2x -2x -2x -2x -2x -2x -2x - - - - - - - -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -1x -2x -2x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - | import { api } from '@/api/client'
-import type { components } from '@/api/types'
-import { toDate, decodeMeal, decodeRecipe, decodeIngredients, decodeShoppingList, decodeShoppingListItems, decodeIngredient, decodeLookup } from '@/domain/decoders'
-import type {
- Recipe,
- Meal,
- Ingredient,
- ShoppingList,
- ShoppingListItemWithRefs,
- CurrentShoppingListDTO,
- PurchasedShoppingListDTO,
- ShoppingLookups,
-} from '@/domain/types'
-import { fromOpenApiPage, type Page } from '@/domain/pagination'
-
-function httpError(response: Response, error: unknown): Error {
- if (error instanceof Error) return error
- if (typeof error === 'string') return new Error(error)
- return new Error(`${response.status} ${response.statusText || 'HTTP error'}`)
-}
-
-// decodeLookup moved to domain/decoders to be reused across SDK and other modules
-
-// Shopping list mapped view types now come from domain/types
-
-function attachItemRefs(
- items: Array<ShoppingListItemWithRefs> | null | undefined,
- lookups: ShoppingLookups
-): void {
- if (!Array.isArray(items)) return
- for (const item of items) {
- const ingredientId = item.ingredientId ?? undefined
- const mealId = item.mealId ?? undefined
- const recipeId = item.recipeId ?? undefined
- const listId = item.listId ?? undefined
- const created = item.createdDate
-
- if (ingredientId !== undefined && lookups.ingredientsLookup) {
- const v = lookups.ingredientsLookup[String(ingredientId)]
- if (v !== undefined) item.ingredient = v
- }
- if (mealId !== undefined && lookups.mealsLookup) {
- const v = lookups.mealsLookup[String(mealId)]
- if (v !== undefined) item.meal = v
- }
- if (recipeId !== undefined && lookups.recipesLookup) {
- const v = lookups.recipesLookup[String(recipeId)]
- if (v !== undefined) item.recipe = v
- }
- if (listId !== undefined && lookups.shoppingListLookup) {
- const v = lookups.shoppingListLookup[String(listId)]
- if (v !== undefined) item.list = v
- }
- if (created !== undefined) item.createdDate = toDate(created)
- }
-}
-
-export function mapPurchasedShoppingList(dto: components['schemas']['PurchasedShoppingList'] | null | undefined): PurchasedShoppingListDTO | null {
- if (!dto) return null
-
- const mealsLookupRaw = dto.mealsLookup
- const recipesLookupRaw = dto.recipesLookup
- const ingredientsLookupRaw = dto.ingredientsLookup
- const listRaw = dto.list
-
- const mealsLookup = decodeLookup(mealsLookupRaw, decodeMeal)
- const recipesLookup = decodeLookup(recipesLookupRaw, decodeRecipe)
- const ingredientsLookup = decodeLookup(ingredientsLookupRaw, decodeIngredient)
-
- let list: import('@/domain/types').ShoppingListWithRefs | undefined
- if (listRaw) {
- const base = decodeShoppingList(listRaw)
- if (base) {
- const items = Array.isArray(listRaw.items) ? decodeShoppingListItems(listRaw.items) : []
- list = { ...base, items }
- const lookups: ShoppingLookups = {
- ...(ingredientsLookup && { ingredientsLookup }),
- ...(mealsLookup && { mealsLookup }),
- ...(recipesLookup && { recipesLookup }),
- ...(list && { shoppingListLookup: { [String(list.id)]: list } }),
- }
- attachItemRefs(list.items, lookups)
- }
- }
-
- return {
- ...(ingredientsLookup && { ingredientsLookup }),
- ...(mealsLookup && { mealsLookup }),
- ...(recipesLookup && { recipesLookup }),
- ...(list && { list }),
- // include shoppingListLookup when list exists for consistency with lookups type
- ...(list && { shoppingListLookup: { [String(list.id)]: list } }),
- }
-}
-
-export function mapCurrentShoppingList(dto: components['schemas']['CurrentShoppingList'] | null | undefined): CurrentShoppingListDTO | null {
- if (!dto) return null
-
- const outstandingRaw = dto.outstandingItems
- const requestedRaw = dto.requestedMeals
- const purchasedRaw = dto.purchasedItems
-
- const ingredientsLookupRaw = dto.ingredientsLookup
- const mealsLookupRaw = dto.mealsLookup
- const recipesLookupRaw = dto.recipesLookup
- const shoppingListLookupRaw = dto.shoppingListLookup
-
- const ingredientsLookup = decodeLookup(ingredientsLookupRaw, decodeIngredient)
- const mealsLookup = decodeLookup(mealsLookupRaw, decodeMeal)
- const recipesLookup = decodeLookup(recipesLookupRaw, decodeRecipe)
-
- let shoppingListLookup: Record<string, ShoppingList> | undefined
- if (shoppingListLookupRaw) {
- shoppingListLookup = decodeLookup(shoppingListLookupRaw, decodeShoppingList)
- }
-
- const dtoOut: CurrentShoppingListDTO = {
- outstandingItems: decodeShoppingListItems(outstandingRaw ?? []),
- requestedMeals: decodeShoppingListItems(requestedRaw ?? []),
- purchasedItems: decodeShoppingListItems(purchasedRaw ?? []),
- ...(ingredientsLookup && { ingredientsLookup }),
- ...(mealsLookup && { mealsLookup }),
- ...(recipesLookup && { recipesLookup }),
- ...(shoppingListLookup && { shoppingListLookup }),
- }
-
- const lookups: ShoppingLookups = {
- ...(ingredientsLookup && { ingredientsLookup }),
- ...(mealsLookup && { mealsLookup }),
- ...(recipesLookup && { recipesLookup }),
- ...(shoppingListLookup && { shoppingListLookup }),
- }
- attachItemRefs(dtoOut.outstandingItems ?? null, lookups)
- attachItemRefs(dtoOut.requestedMeals ?? null, lookups)
- attachItemRefs(dtoOut.purchasedItems ?? null, lookups)
-
- return dtoOut
-}
-
-export async function listRecipes(params?: { q?: string | null; cursor?: string | null; limit?: number }): Promise<Page<Recipe>> {
- const query: Record<string, unknown> = {}
- if (params) {
- if (params.q !== undefined) query.q = params.q
- if (params.cursor !== undefined) query.cursor = params.cursor
- if (typeof params.limit === 'number') query.limit = params.limit
- }
- const { data, error, response } = await api.GET('/api/v1/recipes', { params: { query } })
- if (!response.ok) throw httpError(response, error)
- return fromOpenApiPage(data ?? null, (r) => decodeRecipe(r))
-}
-
-export async function getRecipe(id: number | string): Promise<Recipe> {
- const { data, error, response } = await api.GET('/api/v1/recipes/{recipe_id}', { params: { path: { recipe_id: Number(id) } } })
- if (!response.ok) throw httpError(response, error)
- const mapped = decodeRecipe(data)
- if (!mapped) throw new Error('Recipe not found')
- return mapped
-}
-
-export async function saveRecipe(recipe: components['schemas']['Recipe-Input']): Promise<Recipe | null> {
- const { data, error, response } = await api.POST('/api/v1/recipes', { body: recipe, params: { cookie: { user_id: 0 } } })
- if (!response.ok) throw httpError(response, error)
- return decodeRecipe(data)
-}
-
-export async function deleteRecipe(id: number | string): Promise<void> {
- const { error, response } = await api.DELETE('/api/v1/recipes/{recipe_id}', { params: { path: { recipe_id: Number(id) }, cookie: { user_id: 0 } } })
- if (!response.ok) throw httpError(response, error)
-}
-
-export async function parseRecipe(url: string): Promise<Recipe | null> {
- const { data, error, response } = await api.GET('/api/v1/recipes/parse', { params: { query: { url }, cookie: { user_id: 0 } } })
- if (!response.ok) throw httpError(response, error)
- return decodeRecipe(data)
-}
-
-export async function parseIngredients(lines: string[]): Promise<Ingredient[]> {
- const { data, error, response } = await api.GET('/api/v1/recipes/ingredients/parse', {
- params: { query: { ingredients: lines } },
- })
- if (!response.ok) throw httpError(response, error)
- return decodeIngredients(data ?? [])
-}
-
-export async function parseProduct(
- ingredient: Pick<components['schemas']['Ingredient'], 'name' | 'line'>,
- url: string
-): Promise<components['schemas']['Product'] | null> {
- const body: components['schemas']['ProductUrl'] = { url, tags: [ingredient.name, ingredient.line] }
- const res = await api.POST('/api/v1/products', { body })
- if (!res.response.ok) throw httpError(res.response, res.error)
- return res.data ?? null
-}
-
-// Persons
-async function listPersons(params?: { q?: string | null; cursor?: string | null; limit?: number }): Promise<Page<components['schemas']['Person']>> {
- const query: Record<string, unknown> = {}
- if (params) {
- if (params.q !== undefined) query.q = params.q
- if (params.cursor !== undefined) query.cursor = params.cursor
- if (typeof params.limit === 'number') query.limit = params.limit
- }
- const { data, error, response } = await api.GET('/api/v1/persons', { params: { query } })
- if (!response.ok) throw httpError(response, error)
- const normalized = Array.isArray(data) ? { items: data } : (data ?? null)
- return fromOpenApiPage<components['schemas']['Person'], components['schemas']['Person']>(normalized, (p) => p)
-}
-
-export async function getPersonsInHome(): Promise<Page<components['schemas']['Person']>> {
- return listPersons()
-}
-
-export async function searchPersons(name: string): Promise<Page<components['schemas']['Person']>> {
- return listPersons({ q: name })
-}
-
-// Meals
-export async function getUpcomingMeals(from: Date, to: Date): Promise<Meal[]> {
- const { data, error, response } = await api.GET('/api/v1/meals/upcoming', {
- params: { query: { from: from.toISOString(), to: to.toISOString() } },
- })
- if (!response.ok) throw httpError(response, error)
- const list = Array.isArray(data) ? data : []
- return list
- .map((m) => decodeMeal(m))
- .filter((m): m is Meal => !!m)
- .sort((a, b) => ((a.suggestedDate?.getTime() ?? 0) - (b.suggestedDate?.getTime() ?? 0)))
-}
-
-export async function getMeal(id: number | string): Promise<Meal> {
- const { data, error, response } = await api.GET('/api/v1/meals/{meal_id}', { params: { path: { meal_id: Number(id) } } })
- if (!response.ok) throw httpError(response, error)
- const mapped = decodeMeal(data)
- if (!mapped) throw new Error('Meal not found')
- return mapped
-}
-
-export async function saveMeal(meal: components['schemas']['Meal-Input']): Promise<Meal | null> {
- const hasId = typeof meal.id === 'number' && meal.id >= 0
- if (hasId) {
- const { data, error, response } = await api.PUT('/api/v1/meals/{meal_id}', {
- params: { path: { meal_id: Number(meal.id) } },
- body: meal,
- })
- if (!response.ok) throw httpError(response, error)
- return decodeMeal(data)
- } else {
- const { data, error, response } = await api.POST('/api/v1/meals', { body: meal })
- if (!response.ok) throw httpError(response, error)
- return decodeMeal(data)
- }
-}
-
-export async function markMealConsumed(mealId: number | string): Promise<Meal> {
- const { data, error, response } = await api.POST('/api/v1/meals/{meal_id}/consumed', {
- params: { path: { meal_id: Number(mealId) }, cookie: { user_id: 0 } },
- })
- if (!response.ok) throw httpError(response, error)
- const mapped = decodeMeal(data)
- if (!mapped) throw new Error('Meal not found')
- return mapped
-}
-
-export async function deleteMeal(mealId: number | string): Promise<void> {
- const { error, response } = await api.DELETE('/api/v1/meals/{meal_id}', {
- params: { path: { meal_id: Number(mealId) }, cookie: { user_id: 0 } },
- })
- if (!response.ok) throw httpError(response, error)
-}
-
-// Shopping
-export async function getMyShoppingList(): Promise<Ingredient[]> {
- const { data, error, response } = await api.GET('/api/v1/shopping/current/me/ingredients', { params: { cookie: { user_id: 0 } } })
- if (!response.ok) throw httpError(response, error)
- return decodeIngredients(data ?? [])
-}
-
-export async function saveMyShoppingList(items: components['schemas']['Ingredient'][]): Promise<Ingredient[]> {
- const { data, error, response } = await api.POST('/api/v1/shopping/current/me/ingredients', {
- body: items,
- params: { cookie: { user_id: 0 } },
- })
- if (!response.ok) throw httpError(response, error)
- return decodeIngredients(data ?? [])
-}
-
-export async function getShoppingList(id: number | string): Promise<import('@/domain/types').ShoppingListWithRefs | null> {
- const { data, error, response } = await api.GET('/api/v1/shopping/{list_id}', { params: { path: { list_id: Number(id) } } })
- if (!response.ok) throw httpError(response, error)
- const mapped = mapPurchasedShoppingList(data)
- return mapped?.list ?? null
-}
-
-export async function getCurrentShoppingList(): Promise<CurrentShoppingListDTO> {
- const { data, error, response } = await api.GET('/api/v1/shopping/current')
- if (!response.ok) throw httpError(response, error)
- const mapped = mapCurrentShoppingList(data)
- if (!mapped) throw new Error('Failed to map current shopping list')
- return mapped
-}
-
-type PurchaseExisting = { type: 'existing'; id: number; personId: number; ingredientId?: number | null }
-type PurchaseRefs = { type: 'refs'; personId: number; ingredientId?: number | null; recipeId?: number | null; mealId?: number | null }
-export type PurchaseRequest = PurchaseExisting | PurchaseRefs
-
-export async function purchaseShoppingList(
- completedRequests: PurchaseRequest[]
-): Promise<import('@/domain/types').ShoppingListWithRefs | null> {
- if (!Array.isArray(completedRequests) || completedRequests.length === 0) return null
- // Map incoming requests: if id provided and >= 0, use it; otherwise send identifiers for ingredient/recipe/meal
- const items: components['schemas']['ShoppingListItem'][] = completedRequests.map((i) =>
- i.type === 'existing'
- ? { id: i.id, personId: i.personId, ingredientId: i.ingredientId ?? null }
- : {
- id: -1,
- personId: i.personId,
- ingredientId: i.ingredientId ?? null,
- recipeId: i.recipeId ?? null,
- mealId: i.mealId ?? null,
- }
- )
-
- if (items.length === 0) return null
-
- const body: components['schemas']['ShoppingList'] = {
- id: -1,
- storeName: '',
- purchasedById: -1,
- items,
- }
- const { data, error, response } = await api.POST('/api/v1/shopping', {
- body,
- params: { cookie: { user_id: 0 } },
- })
- if (!response.ok) throw httpError(response, error)
- const mapped = mapPurchasedShoppingList(data)
- return mapped?.list ?? null
-}
-
-export async function requestMeal(mealId: number | string): Promise<void> {
- const { error, response } = await api.POST('/api/v1/shopping/current/meals/me', {
- body: { mealId: Number(mealId) },
- params: { cookie: { user_id: 0 } },
- })
- if (!response.ok) throw httpError(response, error)
-}
-
-export async function unrequestMeal(mealId: number | string): Promise<void> {
- const { error, response } = await api.DELETE('/api/v1/shopping/current/meals/{meal_id}', {
- params: { path: { meal_id: Number(mealId) }, cookie: { user_id: 0 } },
- })
- if (!response.ok) throw httpError(response, error)
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div class="card"> - <a @click="emit('click')"> - <h2>{{ title }}</h2> - <img - :src="image" - :alt="title" - > - </a> - </div> -</template> - -<script setup> -const emit = defineEmits(['click']) -defineProps({ - title: { type: String, required: true }, - image: { type: String, required: true }, -}) -</script> - -<style scoped> -img { - width: 100%; - height: auto; -} - -.card { - display: inline-block; - border: 1px solid #ccc; - border-radius: 5px; - padding: 10px; - margin-bottom: 10px; - width: 20em; - margin: 1em 1ex; -} - -.card:hover { - background-color: #ccc; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div - v-if="showAlert" - :class="['alert', type]" - @click="dismiss" - > - <img - v-if="icon" - :src="icon" - alt="Notification icon" - > - <div class="message-container"> - <h4 class="heading"> - {{ heading }} - </h4> - <p class="message"> - {{ message }} - </p> - </div> - </div> -</template> - -<script setup> -import { computed, watch } from 'vue' -import { useAlert } from '@/composables/useAlert' - -const alertIcons = { - error: new URL('@/assets/notification-error.svg', import.meta.url).toString(), - success: new URL('@/assets/notification-success.svg', import.meta.url).toString(), - info: new URL('@/assets/notification-info.svg', import.meta.url).toString(), -} - -const { current, clear, scheduleAutoDismiss } = useAlert() - -const showAlert = computed(() => !!current.value) -const heading = computed(() => current.value?.heading ?? '') -const message = computed(() => current.value?.message ?? '') -const type = computed(() => current.value?.type ?? '') -const icon = computed(() => (type.value && alertIcons[type.value] ? alertIcons[type.value] : null)) - -function dismiss() { - clear() -} - -watch( - () => current.value?._ts, - (ts) => { - if (ts) scheduleAutoDismiss(5000) - } -) -</script> - -<style scoped> -/* Display as a toast, in the bottom right corner */ -/* Place the icon to the left for the full height, then have the heading and message stacked to the right */ - -.alert { - position: fixed; - bottom: 1em; - right: 1em; - display: flex; - align-items: center; - padding: 1em; - border-radius: 5px; - color: white; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); - text-align: left; -} - -.alert img { - width: 2em; - height: 2em; - margin-right: 1em; - - /* Invert svg colors */ - filter: invert(1); -} - -.alert.error { - background-color: #f44336; -} - -.alert.success { - background-color: #4caf50; -} - -.alert.info { - background-color: #2196f3; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div class="login"> - <h1>Login Page</h1> - <ul class="button-group"> - <li - v-for="(person, index) in persons" - :key="person.id ?? index" - > - <button - type="button" - class="btn btn-primary" - @click="onLogin(person)" - > - {{ person.name }} - </button> - </li> - </ul> - </div> -</template> - -<script setup lang="ts"> -import { ref, onMounted } from 'vue' -import { useRouter } from 'vue-router' -import { getPersonsInHome } from '@/api/sdk' -import { login as loginApi } from '@/api/auth' -import type { Person } from '@/domain/types' - -const props = defineProps({ - redirect: { type: String, default: '/' }, -}) - -const router = useRouter() -const persons = ref<Person[]>([]) - -onMounted(async () => { - const page = await getPersonsInHome() - persons.value = page.items -}) - -async function onLogin(selectedPerson: Person) { - const person = await loginApi(selectedPerson.name) - if (person?.id >= 0) { - router.push(props.redirect) - return - } - alert('Login failed') -} -</script> - -<style scoped> -/* Remove the default list styling */ -ul { - list-style-type: none; - padding: 0; -} - -/* Center the buttons in the middle of the page, and let them wrap */ - -.button-group { - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -/* Display each button as a large round circle */ - -button { - width: 100px; - height: 100px; - border-radius: 50%; - margin: 10px; - font-size: 1.5em; - - /* Center the text in the middle of the button */ - display: flex; - justify-content: center; - align-items: center; - - /* Add a shadow to make the buttons look like they are floating */ - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -} - -/* Some nice flat nuetral shades for the user buttons */ - -li:nth-child(1) > button { - background-color: #3939ff; - color: white; -} - -li:nth-child(2) > button { - background-color: #156a14; - color: white; -} - -li:nth-child(3) > button { - background-color: #325293; - color: white; -} - -li:nth-child(4) > button { - background-color: #9a1f1f; - color: white; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| ActionItem.vue | -
-
- |
- 0% | -0/40 | -0% | -0/1 | -0% | -0/1 | -0% | -0/40 | -
| AlertToast.vue | -
-
- |
- 0% | -0/90 | -0% | -0/1 | -0% | -0/1 | -0% | -0/90 | -
| LoginPage.vue | -
-
- |
- 0% | -0/104 | -0% | -0/1 | -0% | -0/1 | -0% | -0/104 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div class="compact-parse-results"> - <p class="parse-element teaser-image"> - <img :src="ingredient.product?.imgSmall ?? missingProduct"> - </p> - <p class="ingredient-details"> - <span - class="parse-element quantity" - :class="{ missing: !ingredient?.quantity }" - >{{ - ingredient?.quantity || 'qty' - }}</span> - <span - class="parse-element unit" - :class="{ missing: !ingredient?.unit }" - >{{ - ingredient?.unit || 'unit' - }}</span> - <span class="parse-element helper">of</span> - <span - class="parse-element name" - :class="{ missing: !ingredient?.name }" - >{{ - ingredient?.name || 'name' - }}</span>: - <span - class="parse-element product-name" - :class="{ missing: !ingredient?.product }" - > - <a - v-if="ingredient?.product?.link" - :href="ingredient?.product?.link" - target="”_blank”" - > - ( {{ ingredient?.product?.name }} - <img - :src="externalLink" - style=" - width: 1em; - height: 1em; - vertical-align: middle; - margin-left: 0.5em; - margin-bottom: 0.2em; - " - > - ) - </a> - <a - v-else-if="ingredient?.name" - :href="searchlink" - target="_blank" - > (search?) </a> - <a v-else> (product) </a> - </span> - </p> - </div> -</template> - -<script setup> -import { computed } from 'vue' -const missingProduct = new URL('@/assets/missing-product.svg', import.meta.url).toString() -const externalLink = new URL('@/assets/external-link.svg', import.meta.url).toString() - -const props = defineProps({ - ingredient: { type: Object, required: true }, -}) - -const searchlink = computed(() => - props.ingredient?.name - ? 'https://www.woolworths.com.au/shop/search/products?searchTerm=' + - encodeURIComponent(props.ingredient.name) - : '' -) -</script> - -<style scoped> -.compact-parse-results { - flex: left; - display: flex; - justify-content: left; - text-align: left; -} - -.parse-element { - margin: auto 0; - margin-right: 1em; - border-bottom: solid 1px #ccc; - font-weight: bold; -} - -.parse-element.missing { - color: red; - border: solid red 1px; -} - -.parse-element.teaser-image, -.parse-element.helper { - border: none; - font-weight: normal; -} - -.parse-element.teaser-image img { - padding: 0; - border: none; - width: 2em; - height: 2em; -} - -.ingredient-details { - flex: 1; -} - -.quantity { - color: blue; -} - -.unit { - color: green; -} - -.name { - color: black; -} - -.product-name { - color: purple; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div :class="{ editing: editing }"> - <button - v-if="editing" - @click="emit('on-add')" - > - <img - class="icon" - :src="addCart" - > <br> - Add Ingredient - </button> - <button - v-if="!editOnly" - @click="toggleEditing" - > - <span v-if="editing"> - <img - class="icon" - :src="editOff" - > <br> - Done Editing - </span> - <span v-else> - <img - class="icon" - :src="editOn" - > <br> - Edit My List - </span> - </button> - <ul> - <li - v-for="ingredient in ingredients" - :key="ingredient" - > - <div v-if="editing"> - <p class="ingredient-line"> - <ingredient-line - :ingredient="ingredient" - @update-ingredient="updateIngredient" - @update-product-link="updateProduct" - /> - </p> - <button @click="emit('on-delete', ingredient)"> - <img - class="icon" - :src="trash" - > - </button> - </div> - <div v-else> - <compact-parsed-ingredient :ingredient="ingredient" /> - </div> - </li> - </ul> - </div> -</template> - -<script setup> -import { ref } from 'vue' -import { parseProduct, parseIngredients } from '@/api/sdk' -import IngredientLine from './IngredientLine.vue' -import CompactParsedIngredient from './CompactParsedIngredient.vue' -const addCart = new URL('@/assets/add-cart.svg', import.meta.url).toString() -const editOff = new URL('@/assets/edit-off.svg', import.meta.url).toString() -const editOn = new URL('@/assets/edit.svg', import.meta.url).toString() -const trash = new URL('@/assets/trash.svg', import.meta.url).toString() - -const props = defineProps({ - ingredients: { type: Array, required: true }, - editOnly: { type: Boolean, default: false }, -}) -const emit = defineEmits(['on-add', 'on-delete', 'on-update-ingredient', 'on-editing']) - -const editing = ref(props.editOnly ?? false) - -async function updateProduct(ingredient, product_link) { - const product = await parseProduct(ingredient, product_link) - emit('on-update-ingredient', ingredient, { ...ingredient, product }) -} - -async function updateIngredient(ingredient, line) { - const newIngredients = await parseIngredients([line]) - emit('on-update-ingredient', ingredient, newIngredients[0]) -} - -function toggleEditing() { - editing.value = !editing.value - emit('on-editing', editing.value) -} -</script> - -<style scoped> -.icon { - width: 2em; - height: 2em; -} - -ul { - padding: 0; -} - -li { - list-style: none; -} - -li > div { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; -} - -.editing li { - border: 1px solid #ccc; - border-radius: 5px; - padding: 5px; -} - -.ingredient-line { - flex: 1; - margin: 0; - margin-right: 1em; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div class="ingredient-item"> - <p> - <input - v-model="ingredientText" - placeholder="Enter an ingredient" - @keyup.enter="updateIngredient" - @blur="updateIngredient" - > - <input - v-if="ingredient.line" - v-model="productLink" - class="product-link-input" - placeholder="Enter product link" - @keyup.enter="updateProductLink" - @blur="updateProductLink" - > - </p> - <p v-if="ingredient.line"> - <!-- Single line parse results --> - <compact-parsed-ingredient :ingredient="ingredient" /> - </p> - </div> -</template> - -<script setup lang="ts"> -import { ref, watch } from 'vue' -import CompactParsedIngredient from './CompactParsedIngredient.vue' -import type { Ingredient } from '@/domain/types' - -const props = defineProps<{ ingredient: Ingredient }>() -const emit = defineEmits<{ - (e: 'update-ingredient', ingredient: Ingredient, newLine: string): void - (e: 'update-product-link', ingredient: Ingredient, link: string): void -}>() - -const ingredientText = ref<string>(props.ingredient?.line ?? '') -const productLink = ref<string>(props.ingredient.product?.link ?? '') - -watch( - () => props.ingredient, - (newIngredient) => { - ingredientText.value = newIngredient?.line ?? '' - productLink.value = newIngredient?.product?.link ?? '' - }, - { deep: true } -) - -function updateIngredient() { - if (ingredientText.value != props.ingredient.line) { - emit('update-ingredient', props.ingredient, ingredientText.value) - } -} - -function updateProductLink() { - if (productLink.value && productLink.value != props.ingredient.product?.link) { - emit('update-product-link', props.ingredient, productLink.value) - } -} -</script> - -<style scoped> -input { - border: 0; - font-size: larger; - border-bottom: 1px solid #ccc; - border-left: 1px solid #ccc; - width: 100%; - padding: 0.5vh; -} - -.product-link-input { - color: #777; - margin-top: 0.5vh; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| CompactParsedIngredient.vue | -
-
- |
- 0% | -0/128 | -0% | -0/1 | -0% | -0/1 | -0% | -0/128 | -
| EditableIngredientsPanel.vue | -
-
- |
- 0% | -0/126 | -0% | -0/1 | -0% | -0/1 | -0% | -0/126 | -
| IngredientLine.vue | -
-
- |
- 0% | -0/76 | -0% | -0/1 | -0% | -0/1 | -0% | -0/76 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div class="date-picker"> - <input - v-model="selectedDate" - type="text" - placeholder="Select a date" - @focus="showDatePicker = true" - @blur="showDatePicker = false" - > - <div - v-if="showDatePicker" - class="date-picker-dropdown" - > - <ul> - <li - v-for="(day, index) in days" - :key="index" - @mousedown="selectDate(day)" - > - {{ formatDay(day) }} - </li> - </ul> - </div> - </div> -</template> - -<script setup lang="ts"> -import { ref, computed, watch } from 'vue' - -const props = defineProps<{ date?: Date }>() -const emit = defineEmits<{ (e: 'date-selected', date: Date): void }>() - -function formatDay(date: Date): string { - const options: Intl.DateTimeFormatOptions = { weekday: 'long', day: 'numeric', month: 'numeric' } - return date.toLocaleDateString('en-AU', options) -} - -const initialDate = props.date ?? new Date() -const selectedDate = ref<string>(formatDay(initialDate)) -const showDatePicker = ref(false) - -watch( - () => props.date, - (newDate) => { - if (newDate) selectedDate.value = formatDay(newDate) - } -) - -const days = computed<Date[]>(() => { - const today = new Date() - const result: Date[] = [] - for (let i = 0; i < 15; i++) { - const d = new Date(today) - d.setDate(today.getDate() + i) - result.push(d) - } - return result -}) - -function selectDate(date: Date) { - selectedDate.value = formatDay(date) - showDatePicker.value = false - emit('date-selected', date) -} -</script> - -<style scoped> -.date-picker { - position: relative; -} - -.date-picker input { - width: 100%; - padding: 8px; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 16px; - outline: none; -} - -.date-picker-dropdown { - position: absolute; - top: 100%; - width: 100%; - margin: auto; - background-color: #fff; - border: 1px solid #ccc; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - z-index: 1000; -} - -.date-picker-dropdown ul { - list-style-type: none; - margin: 0; - padding: 0; -} - -.date-picker-dropdown li { - padding: 8px; - cursor: pointer; - border-bottom: 1px solid #ccc; -} - -.date-picker-dropdown li:hover { - background-color: #eee; -} - -.date-picker-dropdown li:last-child { - border-bottom: none; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div class="container"> - <div class="fields"> - <date-picker - :date="meal.suggestedDate ?? new Date()" - @date-selected="selectDate" - /> - <div class="persons-list"> - Cooked by - <person-list - :people="meal.chefs" - @remove-person="(p) => removePerson('chefs', p)" - @add-person="(p) => addPerson('chefs', p)" - /> - for - <person-list - :people="meal.consumers" - @remove-person="(p) => removePerson('consumers', p)" - @add-person="(p) => addPerson('consumers', p)" - />, with - <person-list - :people="meal.cleanup" - @remove-person="(p) => removePerson('cleanup', p)" - @add-person="(p) => addPerson('cleanup', p)" - /> - on cleanup. - </div> - </div> - <div class="recipes"> - <h2>Recipes</h2> - <ul v-if="meal.recipes.length"> - <li - v-for="mealRecipe in meal.recipes" - :key="mealRecipe.recipe?.id ?? mealRecipe.recipeId" - > - <div - v-if="mealRecipe.recipe" - class="saved-recipe" - > - <p class="recipe-card"> - <recipe-card :recipe="mealRecipe.recipe" /> - </p> - - <p class="servings"> - <input - v-model="mealRecipe.servings" - type="number" - min="1" - > - <small><em>servings</em></small> - </p> - - <input - type="checkbox" - class="show-ingredient-checkbox" - :checked="showIngredient(mealRecipe)" - > - <label - for="show-ingredients" - @click="showIngredient(mealRecipe, !showIngredient(mealRecipe))" - > - <img - class="icon" - :src="showIngredientsIcon" - > - </label> - <button - class="icon-button" - @click="removeRecipe(mealRecipe)" - > - <img - class="icon" - :src="trash" - > - </button> - </div> - - <div v-if="showIngredient(mealRecipe)"> - <ul> - <li - v-for="ingredient in scaleIngredients(mealRecipe)" - :key="ingredient.id" - class="saved-ingredient" - > - <CompactParsedIngredient :ingredient="ingredient" /> - </li> - </ul> - </div> - </li> - </ul> - <div v-else> - <p>Add some recipes using the search box</p> - </div> - <div class="fields"> - <recipe-search-box @select-recipe="selectRecipe" /> - </div> - </div> - <div class="ingredients"> - <h2>Sides & Additional Ingredients</h2> - <editable-ingredients-panel - :ingredients="meal.extraIngredients" - @on-add="addIngredient" - @on-delete="deleteIngredient" - @on-update-ingredient="updateIngredient" - @on-editing="onEditAdditionalIngredients" - /> - </div> - - <button @click="onSaveMeal"> - Save - </button> - <p v-if="meal.purchaseDate"> - <em>Purchased {{ ago(meal.purchaseDate) }}</em> - </p> - </div> -</template> - -<script setup lang="ts"> -import { reactive, onBeforeMount } from 'vue' -import { useRoute, useRouter } from 'vue-router' -import { getMeal, saveMeal, getRecipe } from '@/api/sdk' -import { toMealInput } from '@/domain/decoders' -import { currentUser } from '@/api/auth' -import { useAlert } from '@/composables/useAlert' -import { parseRouteId } from '@/router/helpers' -import type { Person, Ingredient, Meal, MealRecipe } from '@/domain/types' - -import { ago } from '@/dateformats' - -import RecipeSearchBox from '@/components/recipes/RecipeSearchBox.vue' -import RecipeCard from '@/components/recipes/RecipeCard.vue' -import DatePicker from './DatePicker.vue' -import EditableIngredientsPanel from '../ingredients/EditableIngredientsPanel.vue' -import PersonList from './PersonList.vue' -import CompactParsedIngredient from '../ingredients/CompactParsedIngredient.vue' -const showIngredientsIcon = new URL('@/assets/show-ingredients.svg', import.meta.url).toString() -const trash = new URL('@/assets/trash.svg', import.meta.url).toString() - -function addPersonIfNotExists(list: Person[], person: Person | null | undefined) { - if (!person) return - if (!list.find((p) => p.id === person.id)) { - list.push(person) - } -} - -const route = useRoute() -const router = useRouter() -const { show: showAlert } = useAlert() - -type PeopleKey = 'chefs' | 'consumers' | 'cleanup' - -const meal = reactive<Meal>({ - id: -1, - suggestedDate: new Date(), - consumedDate: null, - purchaseDate: null, - recipes: [], - extraIngredients: [], - chefs: [], - consumers: [], - cleanup: [], -}) - -onBeforeMount(async () => { - const id = parseRouteId(route.params.id) - if (id !== null) { - const loaded = await getMeal(id) - Object.assign(meal, loaded) - } else { - const self = await currentUser() - if (self) { - meal.chefs = [self] - meal.consumers = [self] - meal.cleanup = [self] - } - } -}) - -function selectDate(date: Date) { - meal.suggestedDate = date -} - -function removeRecipe(mealRecipe: MealRecipe) { - if ( - confirm( - `Are you sure you want to remove ${mealRecipe.servings} servings of ${mealRecipe.recipe?.name ?? 'this recipe'} from this meal?` - ) - ) { - meal.recipes = meal.recipes.filter((r) => r !== mealRecipe) - } -} - -function addIngredient() { - meal.extraIngredients = [{ id: -1, name: '', line: '', unit: 'Items', quantity: 0, preparation: '', productId: null, recipeId: null, mealId: null, product: null }, ...meal.extraIngredients] -} - -function deleteIngredient(ingredient: Ingredient) { - meal.extraIngredients = meal.extraIngredients.filter((i) => i !== ingredient) -} - -function updateIngredient(ingredient: Ingredient, newIngredient: Ingredient) { - meal.extraIngredients = meal.extraIngredients.map((i) => (i === ingredient ? newIngredient : i)) -} - -function removePerson(list: PeopleKey, person: Person) { - meal[list] = meal[list].filter((p) => p.id !== person.id) -} - -function addPerson(list: PeopleKey, person: Person) { - addPersonIfNotExists(meal[list], person) -} - -async function selectRecipe(recipe: { id: number | string }) { - // Refetch to get additional details - const r = await getRecipe(recipe.id) - - if (r.createdBy) { - addPersonIfNotExists(meal.chefs, r.createdBy) - addPersonIfNotExists(meal.consumers, r.createdBy) - - if (meal.cleanup.length === 0) { - addPersonIfNotExists(meal.cleanup, r.createdBy) - } - } - - meal.recipes.push({ recipe: r, recipeId: r.id, mealId: meal.id, servings: r.serves }) -} - -async function onEditAdditionalIngredients(editing: boolean) { - if (editing && meal.extraIngredients.length === 0) { - addIngredient() - } else { - meal.extraIngredients = meal.extraIngredients.filter((i) => !!i.line) - } -} - -const showMap = reactive<Record<string, boolean>>({}) -function showIngredient(mealRecipe: MealRecipe, value?: boolean): boolean { - const index = meal.recipes.indexOf(mealRecipe) - const key = `${mealRecipe.recipe?.id ?? 'unknown'}-${index}` - if (value === undefined) { - return !!showMap[key] - } - showMap[key] = value - return value -} - -function scaleIngredients(mealRecipe: MealRecipe) { - const ing = mealRecipe.recipe?.ingredients ?? [] - const serves = mealRecipe.recipe?.serves ?? 1 - return ing.map((i) => { - return { - ...i, - quantity: (i.quantity * mealRecipe.servings) / serves, - } - }) -} - -async function onSaveMeal() { - const saved = await saveMeal(toMealInput(meal)) - if (saved && saved.id >= 0) { - Object.assign(meal, saved) - router.push(`/meals/${saved.id}`) - showAlert({ heading: 'Meal saved', message: 'Meal saved successfully', type: 'success' }) - return - } - - showAlert({ - heading: 'Error saving meal', - message: 'An error occurred while saving the meal', - type: 'error', - }) -} -</script> - -<style scoped> -img.icon { - width: 2em; - height: 2em; -} - -.persons-list { - text-align: left; - padding: 1ex 2em; -} - -.persons-list p { - margin: 0; - padding-bottom: 1em; -} - -.person-list li { - display: inline-block; - padding-right: 1em; -} - -.container { - margin: 1em auto; -} - -ul { - list-style-type: none; - margin: 0; - padding: 0; -} - -li { - padding-bottom: 0.5vh; -} - -.saved-ingredient { - display: flex; - justify-content: space-between; - align-items: center; -} - -.saved-recipe { - display: flex; - justify-content: space-between; - align-items: center; -} - -.saved-ingredient p { - flex: 1; - margin: 0; - margin-right: 1em; -} - -.saved-recipe button:hover { - background: #eee; -} - -.saved-recipe .recipe-card { - margin: 0; -} - -.recipe-card { - flex: 1; -} - -.servings { - display: inline-block; - margin-right: 1em; -} - -.servings input { - width: 3em; - border: none; - border-bottom: 1px solid #000; - text-align: center; - font-size: large; - font-style: italic; -} - -.icon-button { - background: none; - border: none; - cursor: pointer; - border-radius: 1em; - padding: 0.5em; -} - -.icon-button:hover { - /* Invert the colors of the trash icon */ - filter: invert(1); -} - -.show-ingredient-checkbox { - display: none; -} - -.show-ingredient-checkbox+label { - cursor: pointer; - background-color: #fff; - padding: 0.5em; - border-radius: 1em; -} - -.show-ingredient-checkbox+label:hover { - background-color: #eee; -} - -.show-ingredient-checkbox:checked+label { - filter: invert(1); -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div class="meal-card"> - <h3>{{ mealTitle }}</h3> - <h4> - {{ dayOfWeek }} <small>{{ date }}</small> - </h4> - - <p> - Cooked by - <span - v-for="(chef, index) in meal.chefs" - :key="chef.id" - > - {{ chef.name }}{{ englishSeperator(index, meal.chefs) }} - </span> - <span v-if="!meal.chefs.length">somebody?</span> - </p> - <p> - For - <span - v-for="(consumer, index) in meal.consumers" - :key="consumer.id" - > - {{ consumer.name }}{{ englishSeperator(index, meal.consumers) }} - </span> - <span v-if="!meal.consumers.length">somebody?</span> - </p> - <p v-if="meal.purchaseDate"> - Purchased {{ ago(meal.purchaseDate) }} - </p> - </div> -</template> - -<script setup lang="ts"> -import { computed } from 'vue' -import { ago } from '@/dateformats' -import type { Meal } from '@/domain/types' - -const props = defineProps<{ meal: Meal }>() - -function englishSeperator(index: number, list: Array<unknown>) { - switch (index) { - case list.length - 1: - return '' - case list.length - 2: - return ' and ' - default: - return ', ' - } -} - -function englishList(list: string[]) { - switch (list.length) { - case 0: - return '' - case 1: - return list[0] - case 2: - return `${list[0]} and ${list[1]}` - default: - return `${list.slice(0, -1).join(', ')}, and ${list.slice(-1)}` - } -} - -const date = computed(() => - props.meal.suggestedDate - ? props.meal.suggestedDate.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' }) - : '' -) - -const dayOfWeek = computed(() => - props.meal.suggestedDate ? props.meal.suggestedDate.toLocaleDateString('en-au', { weekday: 'long' }) : '' -) - -const mealTitle = computed(() => { - const recipes = props.meal.recipes ?? [] - const extras = props.meal.extraIngredients ?? [] - const recipeNames = recipes - .map((mr) => mr.recipe?.name) - .filter((n): n is string => typeof n === 'string' && n.length > 0) - const recipesText = englishList(recipeNames) - const ingredientsText = englishList(extras.map((i) => i.name)) - - if (recipesText && ingredientsText) return `${recipesText} with ${ingredientsText}` - if (recipesText || ingredientsText) return recipesText || ingredientsText - return 'Nothing planned' -}) -</script> - -<style></style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div> - <ul - v-if="meals.length" - class="meals-list" - > - <li - v-for="meal in meals" - :key="meal.id" - > - <meal-card :meal="meal" /> - <button - class="toggle-actions" - @click="selectedMeal = meal == selectedMeal ? null : meal" - > - <img :src="meal == selectedMeal ? chevronDown : chevronUp"> - </button> - - <ul - v-if="selectedMeal == meal" - class="actions" - > - <li> - <router-link - class="nav-link" - :to="`/meals/${selectedMeal.id}`" - active-class="active" - > - Edit Meal - </router-link> - </li> - <li><a @click="markConsumed">Mark Consumed</a></li> - <li> - <a - class="button" - @click="deleteSelectedMeal" - >Remove</a> - </li> - </ul> - </li> - </ul> - <div v-if="!meals.length"> - <em>No meals planned</em> - </div> - <action-item - title="Plan Meal" - :image="planMeal" - @click="() => $router.push('/meals/add')" - /> - </div> -</template> - -<script setup> -import { ref, onBeforeMount } from 'vue' -import ActionItem from '@/components/ActionItem.vue' -import MealCard from '@/components/meals/MealCard.vue' -import { getUpcomingMeals, markMealConsumed, deleteMeal } from '@/api/sdk' -const chevronDown = new URL('@/assets/chevron-down.svg', import.meta.url).toString() -const chevronUp = new URL('@/assets/chevron-up.svg', import.meta.url).toString() -const planMeal = new URL('@/assets/plan-meal.svg', import.meta.url).toString() - -const from = new Date() -from.setTime(0) - -const to = new Date() -to.setDate(to.getDate() + 7) - -const meals = ref([]) -const selectedMeal = ref(null) - -onBeforeMount(async () => { - meals.value = await getUpcomingMeals(from, to) -}) - -async function deleteSelectedMeal() { - if (!selectedMeal.value) return - await deleteMeal(selectedMeal.value.id) - meals.value = meals.value.filter((m) => m.id !== selectedMeal.value.id) - selectedMeal.value = null -} - -async function markConsumed() { - if (!selectedMeal.value) return - await markMealConsumed(selectedMeal.value.id) - meals.value = meals.value.filter((m) => m.id !== selectedMeal.value.id) -} -</script> - -<style scoped> -li { - list-style-type: none; -} - -ul.meals-list { - padding: 0; -} - -.toggle-actions { - cursor: pointer; - background-color: #fff; - border: none; - border-bottom: solid 1px #ccc; - padding: 0 2em; - margin: 0; -} - -.toggle-actions img { - width: 2em; - height: 2em; -} - -.meals-list > li { - margin-bottom: 1em; - padding: 0; - border: 1px solid #ccc; - border-radius: 5px; - padding: 10px; -} - -ul.actions { - margin: 0; - padding: 0; -} - -.actions li { - display: block; - border: 1px solid #ccc; -} - -.actions li:hover { - background-color: #ccc; -} - -.actions li a { - display: block; - text-decoration: none; - color: #000; - width: 100%; - cursor: pointer; - padding-top: 2ex; - padding-bottom: 2ex; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <span class="person-list"> - <span - v-for="person in people" - :key="person.id" - > - <button - class="person-circle remove-person" - @click="removePerson(person)" - > - {{ person.name }} - </button> - </span> - <span> - <button - v-if="!isAddingPerson" - class="person-circle add-person" - @click="isAddingPerson = true" - > - + - </button> - <input - v-else - ref="searchNameInput" - v-model="searchName" - @keyup.enter="addPerson" - @keyup.esc="isAddingPerson = false" - @blur="isAddingPerson = false" - > - <ul - v-if="isAddingPerson && searchResults.length" - ref="persondroplist" - class="person-droplist" - > - <li - v-for="person in searchResults" - :key="person.id" - > - <button - class="person-circle add-person" - @mousedown="addPerson(person)" - > - {{ person.name }} - </button> - </li> - </ul> - </span> - </span> -</template> - -<script setup lang="ts"> -import { ref, watch } from 'vue' -import { searchPersons } from '@/api/sdk' -import type { Person } from '@/domain/types' -const props = withDefaults(defineProps<{ people?: Person[] }>(), { people: () => [] }) -const emit = defineEmits<{ - (e: 'add-person', person: Person): void - (e: 'remove-person', person: Person): void -}>() - -const isAddingPerson = ref(false) -const searchName = ref('') -const searchResults = ref<Person[]>([]) - -// Template refs for DOM elements -const searchNameInput = ref<HTMLInputElement | null>(null) -const persondroplist = ref<HTMLUListElement | null>(null) - -async function updateSearchResults() { - const q = searchName.value.trim() - if (!q) { - searchResults.value = [] - return - } - const page = await searchPersons(q) - const results: Person[] = page.items.map((p) => ({ id: p.id, name: p.name })) - const idSet = new Set(props.people.map((p) => p.id)) - searchResults.value = results.filter((p: Person) => !idSet.has(p.id)) -} - -function addPerson(person?: Person) { - if (!person && searchResults.value.length > 0) { - person = searchResults.value[0] - } - if (!person) { - searchName.value = '' - searchResults.value = [] - isAddingPerson.value = false - return - } - if (!props.people.find((p) => p.id === person.id)) { - emit('add-person', person) - } - searchName.value = '' - searchResults.value = [] - isAddingPerson.value = false -} - -function removePerson(person: Person) { - emit('remove-person', person) -} - -// Watchers -watch(searchName, async () => { - await updateSearchResults() -}) - -watch(searchNameInput, async (el) => { - if (el) { - el.focus() - await updateSearchResults() - } -}) - -watch([persondroplist, searchNameInput], ([drop, input]) => { - if (drop && input) { - const inputRect = input.getBoundingClientRect() - drop.style.left = `${inputRect.left}px` - drop.style.top = `${inputRect.bottom}px` - drop.style.width = `${inputRect.width}px` - } -}) -</script> - -<style scoped> -.person-list { - display: inline-block; - text-align: center; - min-height: 50px; - padding: 0; - margin: 0; -} - -/* Remove all the button styling */ -.person-circle { - background: none; - border: none; - padding: 0; - margin: 0; -} - -/* Show the initials of the person in a circle */ -.person-circle { - display: inline-block; - width: 50px; - height: 50px; - line-height: 50px; - text-align: center; - border-radius: 50%; - background: #eee; -} - -/* On hover, prompt the user to click to remove the person */ -/* change opacity of circle, and use css to add a large cross over the circle */ -.remove-person:hover { - cursor: pointer; - position: relative; - background-color: lightcoral; -} - -/* Add a cross to the circle */ -.remove-person:hover::before, -.remove-person:hover::after { - pointer-events: none; - content: 'X'; - color: white; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; -} - -.add-person { - background-color: lightgreen; -} - -.add-person:hover { - cursor: pointer; - font-weight: bolder; - color: white; - background-color: green; -} - -.person-droplist { - position: absolute; - background-color: white; - border: 1px solid #ccc; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - list-style-type: none; - padding: 0; - margin: 0; - max-height: 40vh; - overflow-y: scroll; - z-index: 1000; -} - -.person-droplist li { - padding: 8px; - cursor: pointer; - display: inline; - padding: 1ex 1em; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| DatePicker.vue | -
-
- |
- 0% | -0/111 | -0% | -0/1 | -0% | -0/1 | -0% | -0/111 | -
| EditMealPage.vue | -
-
- |
- 0% | -0/386 | -0% | -0/1 | -0% | -0/1 | -0% | -0/386 | -
| MealCard.vue | -
-
- |
- 0% | -0/90 | -0% | -0/1 | -0% | -0/1 | -0% | -0/90 | -
| MealPlanPage.vue | -
-
- |
- 0% | -0/143 | -0% | -0/1 | -0% | -0/1 | -0% | -0/143 | -
| PersonList.vue | -
-
- |
- 0% | -0/204 | -0% | -0/1 | -0% | -0/1 | -0% | -0/204 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div> - <div v-if="!id && !recipe"> - <input - v-model="link" - class="recipe-link" - type="text" - placeholder="Link to Recipe" - > <br> - <button @click="parseLink"> - Parse - </button> - <button @click="createFromScratch"> - Create from Scratch - </button> - </div> - - <div v-if="parse_failed"> - <p>Recipe not found</p> - </div> - - <div v-if="!parse_failed && recipe"> - <div - v-if="image_styling" - class="image-container" - :style="image_styling" - /> - <h1> - <input - v-model="recipe.name" - class="recipe-name" - type="text" - > - </h1> - <label for="recipe-serves">Number of serves: </label> - <input - v-model="recipe.serves" - type="number" - > - <h3 class="recipe-link"> - <a :href="recipe.link">View Recipe</a> - </h3> - <h2>Ingredients</h2> - <editable-ingredients-panel - :ingredients="recipe.ingredients" - :edit-only="true" - @on-add="addIngredient" - @on-delete="deleteIngredient" - @on-update-ingredient="updateIngredient" - /> - - <div> - <button - v-if="recipe.id" - class="delete-btn" - @click="deleteRecipe" - > - Delete - </button> - <button - class="submit-btn" - @click="saveRecipe" - > - {{ recipe.id ? 'Save' : 'Create' }} - </button> - </div> - </div> - </div> -</template> - -<script setup lang="ts"> -import { ref, computed, onMounted, watch } from 'vue' -import { useRouter, useRoute } from 'vue-router' -import { useAlert } from '@/composables/useAlert' -import { parseQueryString } from '@/router/helpers' -import { getRecipe, parseRecipe, saveRecipe as saveRecipeApi, deleteRecipe as deleteRecipeApi } from '@/api/sdk' -import EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue' -import type { Recipe as DomainRecipe, Ingredient, RecipeInput } from '@/domain/types' - -const props = defineProps({ - id: { type: String, required: false, default: undefined }, -}) - -const router = useRouter() -const route = useRoute() -const { show: showAlert } = useAlert() - -const link = ref<string>(parseQueryString(route.query.url)) -const parse_failed = ref(false) -const recipe = ref<DomainRecipe | null>(null) - -const image_styling = computed(() => { - const urls = recipe.value?.imageUrls ?? [] - if (urls.length && urls[0]) { - const image = urls[0]! - return { - background: `linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%), url('${image}') center/cover no-repeat`, - } - } - return null -}) - -function parseLink() { - router.push({ path: '/recipes/add', query: { url: link.value } }) - refreshRecipe() -} - -async function refreshRecipe() { - const id = props.id ? parseInt(props.id) : null - if (id !== null && id >= 0) { - const r = await getRecipe(id) - recipe.value = r - link.value = r.link ?? '' - return - } else if (link.value) { - const r = await parseRecipe(link.value) - recipe.value = r - parse_failed.value = !r - } else { - recipe.value = null - } -} - -async function updateIngredient(ingredient: Ingredient, newIngredient: Ingredient) { - if (!recipe.value) return - const list = recipe.value.ingredients ?? [] - recipe.value = { ...recipe.value, ingredients: list.map((i) => (i === ingredient ? newIngredient : i)) } -} - -function deleteIngredient(ingredient: Ingredient) { - if (!recipe.value) return - const list = recipe.value.ingredients ?? [] - recipe.value = { ...recipe.value, ingredients: list.filter((i) => i !== ingredient) } -} - -async function saveRecipe() { - const saved = recipe.value ? await saveRecipeApi(toRecipeInput(recipe.value)) : null - if (saved && saved.id >= 0) { - showAlert({ heading: 'Recipe saved', message: 'Your recipe has been saved', type: 'success' }) - router.push(`/recipes/${saved.id}`) - return - } - showAlert({ heading: 'Error saving recipe', message: 'There was an error saving your recipe', type: 'error' }) -} - -function createFromScratch() { - recipe.value = { - id: -1, - name: 'My new recipe', - createdById: -1, - link: '', - ingredients: [], - imageUrls: [], - serves: 1, - dateCreated: new Date(), - dateHidden: null, - } -} - -function addIngredient() { - if (!recipe.value) return - const list = recipe.value.ingredients ?? [] - const draft: Ingredient = { id: -1, name: '', line: '', unit: 'Items', quantity: 0, preparation: '', productId: null, recipeId: null, mealId: null, product: null } - recipe.value = { ...recipe.value, ingredients: [draft, ...list] } -} - -async function deleteRecipe() { - if (confirm('Are you sure you want to delete this recipe?')) { - if (!recipe.value) return - await deleteRecipeApi(recipe.value.id) - router.push('/recipes') - } -} - -onMounted(() => { - refreshRecipe() -}) - -// Keep recipe in sync if link query changes while on page -watch( - () => route.query.url, - (newUrl) => { - const parsed = parseQueryString(newUrl) - if (parsed) { - link.value = parsed - refreshRecipe() - } - } -) - -// expose functions for template binding names (automatic in <script setup>) -function toRecipeInput(r: DomainRecipe): RecipeInput { - return { - id: r.id, - name: r.name, - link: r.link, - serves: r.serves, - imageUrls: r.imageUrls ?? [], - ingredients: r.ingredients ?? [], - basedOnRecipe: r.basedOnRecipe ?? null, - // let backend set created/hidden dates - createdById: r.createdById, - createdBy: r.createdBy ?? null, - // dateHidden omitted - hiddenById: r.hiddenById ?? null, - hiddenBy: r.hiddenBy ?? null, - } -} -</script> - -<style scoped> -input { - border: 0; - border-bottom: 1px solid #ccc; - font-size: large; -} - -input.recipe-link { - width: 80%; -} - -.image-container { - max-height: 20vh; - min-height: 20vh; - display: flex; - flex-direction: column; -} - -input.recipe-name { - width: 100%; - font-weight: bold; - font-size: larger; -} - -.recipe-link { - color: #0000ee; - text-decoration: none; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div class="recipe-card"> - <p> - <img - v-if="recipe.imageUrls && recipe.imageUrls.length" - :src="recipe.imageUrls[0] || fallbackEgg" - > - <img - v-else - :src="fallbackEgg" - > - </p> - <p class="recipe-name"> - {{ recipe.name }} - </p> - </div> -</template> - -<script setup lang="ts"> -import type { RecipeOut } from '@/domain/types' -type RecipeCardItem = Pick<RecipeOut, 'id' | 'name' | 'imageUrls'> - -defineProps<{ recipe: RecipeCardItem }>() -const fallbackEgg = new URL('@/assets/egg.svg', import.meta.url).toString() -</script> - -<style scoped> -.recipe-card { - display: flex; - flex-direction: row; - justify-content: space-between; - text-align: left; - max-height: 10em; - margin: 0; -} - -.recipe-card p { - margin: auto 0; - margin-right: 1em; -} - -li img { - display: block; - width: 3em; - height: 3em; - object-fit: cover; -} - -.recipe-name { - flex: 1; - margin: auto; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div - class="recipe-search-box" - @focusout="onFocusOut" - > - <input - v-model="searchTerm" - type="text" - :placeholder="placeholderText" - @keyup.enter="search" - @keyup.esc="clear" - @focusin="search" - > - <ul - v-if="dropdownVisible" - class="dropdown" - > - <template v-if="recipes.length"> - <li - v-for="recipe in recipes" - :key="recipe.id" - class="recipe" - @mousedown="selectRecipe(recipe)" - > - <recipe-card :recipe="recipe" /> - </li> - <li - v-if="prevCursor || nextCursor" - class="pager" - > - <button - class="pager-btn" - :disabled="!prevCursor" - @mousedown.prevent="loadPrev" - > - Prev - </button> - <button - class="pager-btn" - :disabled="!nextCursor" - @mousedown.prevent="loadNext" - > - Next - </button> - </li> - </template> - <li - v-else - class="empty" - > - No recipes found - </li> - </ul> - </div> -</template> - -<script setup lang="ts"> -import { ref, watch, onBeforeUnmount, computed } from 'vue' -import { listRecipes } from '@/api/sdk' -import type { Recipe } from '@/domain/types' -import { useAlert } from '@/composables/useAlert' -import { usePagination } from '@/composables/usePagination' -import RecipeCard from './RecipeCard.vue' - -const props = withDefaults(defineProps<{ placeholder?: string }>(), { - placeholder: 'Add a recipe...', -}) -const placeholderText: string = props.placeholder ?? 'Add a recipe...' - -type RecipeItem = Pick<Recipe, 'id' | 'name' | 'imageUrls'> -const emit = defineEmits<{ - (e: 'select-recipe', recipe: RecipeItem): void -}>() - -const searchTerm = ref('') -const pageSize = 10 -const { items: recipes, next: nextCursor, prev: prevCursor, load, loadNext: loadNextPage, loadPrev: loadPrevPage, reset } = usePagination<RecipeItem>( - async (params) => { - const page = await listRecipes(params) - return { - items: (page.items ?? []).map(toRecipeItem), - next: page.next ?? null, - prev: page.prev ?? null, - total: page.total ?? null, - } - }, - { pageSize } -) -const dropdownVisible = computed(() => recipes.value.length > 0 || (searchTerm.value.length > 0)) - -const { show: showAlert, scheduleAutoDismiss } = useAlert() - -let debounceId: ReturnType<typeof setTimeout> | null = null - -watch( - searchTerm, - (newVal) => { - if (!newVal) { - recipes.value = [] - if (debounceId) clearTimeout(debounceId) - return - } - if (debounceId) clearTimeout(debounceId) - debounceId = setTimeout(() => { - if (newVal === searchTerm.value) { - search() - } - }, 200) - } -) - -async function search() { - try { - await load({ q: searchTerm.value }) - } catch { - // swallow errors and clear suggestions on failures, also notify user - reset() - showAlert({ type: 'error', heading: 'Recipe search failed', message: 'Please try again shortly.' }) - scheduleAutoDismiss() - } -} - -async function loadNext() { - if (!nextCursor.value) return - try { - await loadNextPage() - } catch { - showAlert({ type: 'error', heading: 'Unable to load more', message: 'Could not fetch the next page.' }) - scheduleAutoDismiss() - } -} - -async function loadPrev() { - if (!prevCursor.value) return - try { - await loadPrevPage() - } catch { - showAlert({ type: 'error', heading: 'Unable to load more', message: 'Could not fetch the previous page.' }) - scheduleAutoDismiss() - } -} - -function toRecipeItem(r: Recipe): RecipeItem { - return { id: r.id, name: r.name, imageUrls: r.imageUrls ?? [] } -} - -function selectRecipe(recipe: RecipeItem) { - emit('select-recipe', recipe) - searchTerm.value = '' - recipes.value = [] -} - -function clear() { - searchTerm.value = '' - reset() -} - -function onFocusOut() { - // keep results while focused; on blur, clear all - reset() -} - -onBeforeUnmount(() => { - if (debounceId) clearTimeout(debounceId) -}) -</script> - -<style scoped> -.recipe-search-box { - position: relative; -} - -.recipe-search-box input { - width: calc(100% - 2em); - padding: 8px; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 16px; - outline: none; -} - -.recipe-search-box .dropdown { - position: absolute; - top: 100%; - width: 100%; - margin: auto; - background-color: #fff; - border: 1px solid #ccc; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - z-index: 1000; - - list-style-type: none; - margin: 0; - padding: 0; - max-height: 40vh; - overflow-y: scroll; -} - -.recipe-search-box .dropdown li { - padding: 8px; - cursor: pointer; - border-bottom: 1px solid #ccc; -} - -.recipe-search-box .dropdown li:last-child { - border-bottom: none; -} - -.recipe-search-box .dropdown li:hover { - background-color: #eee; -} - -.recipe-search-box .dropdown .pager { - display: flex; - justify-content: space-between; - gap: 8px; -} - -.recipe-search-box .dropdown .pager-btn { - width: 48%; -} - -.recipe-search-box .dropdown .empty { - padding: 8px; - color: #666; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div> - <recipe-search-box - placeholder="Search for a recipe..." - @select-recipe="onSelectRecipe" - /> - <action-item - title="Add new Recipe" - :image="addRecipe" - @click="onAddRecipe" - /> - </div> -</template> -<script setup lang="ts"> -import { useRouter } from 'vue-router' -import ActionItem from '@/components/ActionItem.vue' -import RecipeSearchBox from './RecipeSearchBox.vue' -import type { Recipe } from '@/domain/types' - -const addRecipe = new URL('@/assets/add-recipe.svg', import.meta.url).toString() - -const router = useRouter() - -function onSelectRecipe(r: Pick<Recipe, 'id'>) { - router.push(`/recipes/${r.id}`) -} - -function onAddRecipe() { - router.push('/recipes/add') -} -</script> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| EditRecipePage.vue | -
-
- |
- 0% | -0/239 | -0% | -0/1 | -0% | -0/1 | -0% | -0/239 | -
| RecipeCard.vue | -
-
- |
- 0% | -0/53 | -0% | -0/1 | -0% | -0/1 | -0% | -0/53 | -
| RecipeSearchBox.vue | -
-
- |
- 0% | -0/227 | -0% | -0/1 | -0% | -0/1 | -0% | -0/227 | -
| RecipesPage.vue | -
-
- |
- 0% | -0/31 | -0% | -0/1 | -0% | -0/1 | -0% | -0/31 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <h3>Full shopping list</h3> - - <h4>Included Meals</h4> - <meal-selection-list - :checked="includedMeals" - :meals="availableMeals" - @meal-selected="mealSelected" - @meal-unselected="mealUnselected" - /> - - <ul class="full-shopping-list"> - <li - v-for="group in outstandingItemGroups" - :key="groupKey(group)" - class="selectable" - :class="{ selected: isSelected(group) }" - @click="toggleSelect(group)" - > - <shopping-list-item :shopping-list-item-group="group" /> - </li> - </ul> - - <div v-if="outstandingItemGroups.length === 0"> - <p>No items to purchase</p> - </div> - - <div class="purchased-slider"> - <span v-if="purchasedItemGroups.length === 0" /> - <button - v-else-if="showPurchased" - @click="showPurchased = false" - > - ⏶ Hide Purchased ⏶ - </button> - <button - v-else - @click="showPurchased = true" - > - ⏷ Show Purchased ⏷ - </button> - - <div v-if="showPurchased && purchasedItemGroups.length > 0"> - <h4>Purchased Meals</h4> - <meal-selection-list - :checked="includedMeals" - :meals="purchasedMeals" - @meal-selected="mealSelected" - @meal-unselected="mealUnselected" - /> - - <h4>Purchased Items</h4> - <ul class="full-shopping-list"> - <li - v-for="item in purchasedItemGroups" - :key="groupKey(item)" - > - <shopping-list-item :shopping-list-item-group="item" /> - </li> - </ul> - </div> - </div> - - <div - v-if="selected.length" - class="spacer" - > - - </div> - - <!-- Display 'Stocked', 'Purchased' and 'Cancel' buttons in a vertical stack fixed to the bottom of the screen when any elements are selected --> - <div - v-if="selected.length" - class="footer-buttons" - > - <p v-if="selected.length === 1"> - Mark '{{ selected[0] ? groupLabel(selected[0]) : '' }}' as - </p> - <p v-else> - Mark {{ selected.length }} items as - </p> - - <div class="button-group"> - <button @click="markFound"> - <img :src="houseCheck"><br> - Found - </button> - - <button @click="markPurchased"> - <img :src="shoppingCart"><br> - Purchased - </button> - - <button @click="selected = []"> - <img :src="closeIcon"><br> - Cancel - </button> - </div> - </div> -</template> - -<script setup lang="ts"> -import { ref, computed, onBeforeMount } from 'vue' -import { useRouter } from 'vue-router' -import { useAlert } from '@/composables/useAlert' -import { useShopping } from '@/composables/useShopping' -import { getUpcomingMeals } from '@/api/sdk' -import { type Group } from '@/composables/useShopping' -type UIMeal = import('@/domain/types').Meal -import MealSelectionList from './MealSelectionList.vue' -import ShoppingListItem from './ShoppingListItem.vue' - -const houseCheck = new URL('@/assets/house-check.svg', import.meta.url).toString() -const shoppingCart = new URL('@/assets/shopping-cart.svg', import.meta.url).toString() -const closeIcon = new URL('@/assets/close.svg', import.meta.url).toString() - -const router = useRouter() -const { show: showAlert } = useAlert() -const { getCurrentShoppingList, requestMeal, unrequestMeal, purchaseFromGroups, groupsFrom, mealsFrom } = useShopping() - -const from = new Date() -from.setTime(0) -const to = new Date() -to.setDate(to.getDate() + 7) - -type Meal = import('@/domain/types').Meal -const shoppingList = ref<import('@/domain/types').CurrentShoppingListDTO | null>(null) -const upcomingMeals = ref<Meal[]>([]) -const selected = ref<Group[]>([]) -const showPurchased = ref(false) - -const groupsMatch = (a: Group, b: Group) => { - if (a.type !== b.type) return false - if (a.type === 'name' && b.type === 'name') return a.name === b.name - if (a.type === 'product' && b.type === 'product') return a.product.id === b.product.id - return false -} - -const outstandingItemGroups = computed<Group[]>(() => groupsFrom(shoppingList.value?.outstandingItems)) -const purchasedItemGroups = computed<Group[]>(() => groupsFrom(shoppingList.value?.purchasedItems)) -const purchasedMeals = computed<UIMeal[]>(() => mealsFrom(shoppingList.value?.purchasedItems)) -const availableMeals = computed(() => { - const lookup: Record<string | number, Meal> = shoppingList.value?.mealsLookup ?? {} - const meals: Record<string | number, Meal> = { ...lookup } - upcomingMeals.value?.forEach((m) => { - if (!meals[m.id]) meals[m.id] = m - }) - return Object.values(meals) - .filter((m) => !m.purchaseDate) - .sort((a, b) => ((a.suggestedDate && a.suggestedDate.getTime()) || 0) - ((b.suggestedDate && b.suggestedDate.getTime()) || 0)) -}) -const includedMeals = computed(() => (shoppingList.value?.requestedMeals ?? []).map((i) => i.meal).filter((m): m is Meal => !!m)) - -async function loadData() { - upcomingMeals.value = await getUpcomingMeals(from, to) - shoppingList.value = await getCurrentShoppingList() -} - -async function mealSelected(meal: { id: number }) { - await requestMeal(meal.id) - await loadData() -} - -async function mealUnselected(meal: { id: number }) { - await unrequestMeal(meal.id) - await loadData() -} - -async function markFound() { - const result = await purchaseFromGroups(selected.value) - if (!result) { - showAlert({ type: 'error', message: 'No items selected.' }) - return - } - selected.value = [] - await loadData() -} - -async function markPurchased() { - const shopping = await purchaseFromGroups(selected.value) - if (!shopping || !shopping.id) { - showAlert({ type: 'error', message: 'Failed to purchase.' }) - return - } - selected.value = [] - router.push(`/shopping/${shopping.id}`) -} - -function toggleSelect(item: Group) { - const index = selected.value.findIndex((i) => groupsMatch(i, item)) - if (index === -1) selected.value.push(item) - else selected.value.splice(index, 1) -} - -function isSelected(item: Group) { - return selected.value.some((i) => groupsMatch(i, item)) -} - -function groupKey(group: Group) { - if (group.type === 'product') return `p-${group.product.id}` - if (group.type === 'name') return `n-${group.name}` - return Math.random().toString(36) -} - -function groupLabel(group: Group) { - if (group.type === 'product') return group.product.name ?? 'item' - if (group.type === 'name') return group.name - return 'item' -} - -onBeforeMount(loadData) -</script> - -<style scoped> -.full-shopping-list { - padding: 0; -} - -.full-shopping-list li { - list-style-type: none; - - outline: 1px solid #ccc; - border-radius: 0.5em; - margin-bottom: 1em; -} - -.full-shopping-list li.selectable { - cursor: pointer; - outline: 1px solid #ccc; -} - -.full-shopping-list li.selected { - background-color: #f0f0f0; - outline-width: 3px; -} - -.footer-buttons { - position: fixed; - bottom: 0; - left: 0; - right: 0; - padding: 1ex; - background-color: #f0f0f0; - border-top: 1px solid #ccc; -} - -.footer-buttons p { - margin: 0; - text-align: left; - font-style: italic; -} - -.button-group { - /* Display as vertical fixed to the bottom of the screen */ - display: flex; -} - -.button-group button { - flex: 1; - padding: 1em; - border: 1px solid #ccc; - border-radius: 0.5em; - background-color: #f0f0f0; - cursor: pointer; -} - -button img { - width: 2em; - height: 2em; -} - -.spacer { - height: 12em; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <ul> - <li - v-for="meal in meals" - :key="meal.id" - > - <!-- Have a checkbox and card for each meal, show the image and name --> - <!-- Emit meal-selected event on checked and meal-unselected on unchecked --> - <input - :id="String(meal.id)" - type="checkbox" - :checked="isChecked(meal)" - :disabled="!!disabled" - @change="mealCheckChanged" - > - <label - :for="String(meal.id)" - :style="getImageStyling(meal)" - > - {{ formatDate(meal.suggestedDate) }} - </label> - </li> - </ul> -</template> - -<script setup lang="ts"> -import type { Meal } from '@/domain/types' - -// MealSelectionList only needs minimal fields from Meal; recipes and extraIngredients are optional for image lookup -type MealDisplay = Pick<Meal, 'id' | 'suggestedDate'> & Partial<Pick<Meal, 'recipes' | 'extraIngredients'>> - -const props = defineProps<{ meals: MealDisplay[]; checked: MealDisplay[]; disabled?: boolean }>() -const emit = defineEmits<{ - (e: 'meal-selected', meal: MealDisplay): void - (e: 'meal-unselected', meal: MealDisplay): void -}>() - -const nth = (d: number) => { - if (d > 3 && d < 21) return 'th' - switch (d % 10) { - case 1: - return 'st' - case 2: - return 'nd' - case 3: - return 'rd' - default: - return 'th' - } -} - - -const formatDate = (date: Date | null) => { - if (!date) return '' - const day = date.getDate() - return `${date.toLocaleDateString('en-AU', { weekday: 'short' })} ${day}${nth(day)}` -} - -const getUrl = (meal: MealDisplay) => { - // First non empty value in meal.recipes[*].recipe image URLs - if (meal.recipes) { - for (const mr of meal.recipes) { - const imgs = mr.recipe?.imageUrls - if (imgs && imgs.length && imgs[0]) { - return imgs[0] - } - } - } - - // First meal.extraIngredients with a product with an image - if (meal.extraIngredients) { - for (const ingredient of meal.extraIngredients) { - const p = ingredient.product - if (p?.imgLarge) return p.imgLarge - if (p?.imgSmall) return p.imgSmall - } - } - return null -} - -function getImageStyling(meal: MealDisplay) { - const imageUrl = getUrl(meal) - if (!imageUrl) return null - const opacity = 0.7 - return { - background: `linear-gradient(to bottom, rgba(255, 255, 255, ${opacity}) 0%, rgba(255, 255, 255, ${opacity}) 100%), url('${imageUrl}') center/cover no-repeat`, - } -} - -function mealCheckChanged(event: Event) { - const target = event.target - if (!target || !(target instanceof HTMLInputElement)) return - const mealId = parseInt(target.id) - const meal = props.meals.find((m) => m.id === mealId) - if (!meal) return - if (target.checked) emit('meal-selected', meal) - else emit('meal-unselected', meal) -} - -function isChecked(meal: MealDisplay) { - return props.checked.some((m) => m.id === meal.id) -} -</script> - -<style scoped> -ul { - padding: 0; -} - -li { - display: inline-block; - list-style-type: none; - border: 1px solid #ccc; - border-radius: 0.5em; - margin-bottom: 1em; - padding: none; - overflow: hidden; - text-align: center; -} - -/* Hide the default checkbox formatting, and format the card instead */ -input[type='checkbox'] { - display: none; -} - -label { - display: inline-block; - padding: 0.1vh 0.3em; - /* Help the visibility of the text over the image */ - background-color: rgba(255, 255, 255, 0.9); - border: 3px solid transparent; - border-radius: 0.5em; - margin: 0; - font-weight: normal; - cursor: pointer; - color: #3d5447; -} - -input[type='checkbox']:checked + label { - border: 3px solid #3d5447; - text-shadow: #ccc 0 0 0.1em; -} - -input[type='checkbox']:disabled + label { - cursor: not-allowed; -} - -/* Show the image as the background image of the card */ -.meal-image { - width: 100%; - height: 100%; - object-fit: cover; -} - -/* Position the text in the center of the card */ -label { - display: flex; - justify-content: center; - align-items: center; - font-size: larger; - font-weight: bold; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <div> - <h1>My Shopping List</h1> - <router-link :to="`/shopping/current`"> - Full Shopping List - </router-link> - <editable-ingredients-panel - :ingredients="ingredients" - @on-add="addIngredient" - @on-delete="deleteIngredient" - @on-update-ingredient="updateIngredient" - @on-editing="onEditing" - /> - </div> - - <!-- - # Functions - * Add a random item to next shop - * Add meals to next shop - * Show cards for the next 7 meals - * Slider / drawer for more meals - * Check meal to add - * Update shopping list automatically as meals change - * Visual indicator for meals that are already in the list - * Visual indicator for purchased meals - * Aggregate items from meals and random items into a single list of products - * For each product, need to have visibility of - * Name - * Link - * Image - * Quantity - * Source meal / person - * Date added / for - * Need to be able to mark list as done - * Keeps history - track purchased meals - * Clears list - - * History view of purchased lists (seperate page ofc) - --> -</template> - -<script setup lang="ts"> -import { ref, onBeforeMount } from 'vue' -import { useRouter } from 'vue-router' -import { useAuth } from '@/composables/useAuth' -import { useShopping } from '@/composables/useShopping' -import type { Ingredient } from '@/domain/types' -import EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue' - -const router = useRouter() -const { loadUser } = useAuth() -const { getMyShoppingList, saveMyShoppingList } = useShopping() - -const ingredients = ref<Ingredient[]>([]) - -async function updateShoppingList(save = false) { - const newIngredients = save ? await saveMyShoppingList(ingredients.value) : await getMyShoppingList() - ingredients.value = newIngredients.map((i) => ({ ...i })) -} - -function addIngredient() { - ingredients.value = [ - { id: -1, name: '', line: '', quantity: 1, unit: 'Items', preparation: '', product: null }, - ...ingredients.value, - ] -} - -function deleteIngredient(ingredient: Ingredient) { - ingredients.value = ingredients.value.filter((i) => i !== ingredient) -} - -function updateIngredient(oldIngredient: Ingredient, newIngredient: Ingredient) { - ingredients.value = ingredients.value.map((source) => (source === oldIngredient ? newIngredient : source)) -} - -async function onEditing(isStartingEdit: boolean) { - await updateShoppingList(!isStartingEdit) - if (isStartingEdit && ingredients.value.length === 0) addIngredient() -} - -onBeforeMount(async () => { - const u = await loadUser() - if (!u) return router.push({ name: 'login' }) - await updateShoppingList() -}) -</script> - -<style scoped></style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <h3>Purchased {{ shoppingList?.createdDate ? ago(shoppingList.createdDate) : '' }}</h3> - - <div v-if="includedMeals.length > 0"> - <h4>Included Meals</h4> - <meal-selection-list - :checked="includedMeals" - :meals="includedMeals" - :disabled="true" - /> - </div> - - <ul class="full-shopping-list"> - <li - v-for="item in listByProduct" - :key="groupKey(item)" - > - <shopping-list-item-comp :shopping-list-item-group="item" /> - </li> - </ul> -</template> - -<script setup lang="ts"> -import { ref, computed, onBeforeMount } from 'vue' -import { useRoute } from 'vue-router' -import { ago } from '@/dateformats' -import { useShopping } from '@/composables/useShopping' -import { parseRouteId } from '@/router/helpers' -import type { Group } from '@/composables/useShopping' -import type { Meal } from '@/domain/types' -import MealSelectionList from './MealSelectionList.vue' -import ShoppingListItemComp from './ShoppingListItem.vue' - -const route = useRoute() -const { getShoppingList, groupsFrom, mealsFrom } = useShopping() -const shoppingList = ref<import('@/domain/types').ShoppingListWithRefs | null>(null) - -const includedMeals = computed<Meal[]>(() => mealsFrom(shoppingList.value?.items)) -const listByProduct = computed(() => groupsFrom(shoppingList.value?.items)) - -onBeforeMount(async () => { - const id = parseRouteId(route.params.id) - if (id !== null) { - shoppingList.value = await getShoppingList(id) - } -}) - -function groupKey(group: Group) { - if (group.type === 'product') return `p-${group.product.id}` - if (group.type === 'name') return `n-${group.name}` - return Math.random().toString(36) -} -</script> - -<style scoped> -.full-shopping-list li { - list-style-type: none; - - border: 1px solid #ccc; - border-radius: 0.5em; - margin-bottom: 1em; -} - -.full-shopping-list { - padding: 0; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | <template> - <!-- Show a card of the product with the total, taking up the available space and have an expanding section to view sources --> - <div class="shopping-list-item"> - <img - :src="imageSrc" - class="product-image" - > - <div class="product-details"> - <h3 class="header"> - <strong> - <a - v-if="shoppingListItemGroup.type === 'product' && shoppingListItemGroup.product?.link" - :href="shoppingListItemGroup.product?.link" - >{{ shoppingListItemGroup.product?.name }}</a> - <span v-else>{{ shoppingListItemGroup.type === 'name' ? shoppingListItemGroup.name : '' }}</span> </strong>, - <small> - <span - v-for="(total, index) in remainingRequiredTotals" - :key="index" - > - <span v-if="index">, </span> - <span>{{ formatQuantity(total.quantity) }} {{ total.unit }}</span> - </span> - <span - v-if="purchased.length > 0" - class="found-marker partial" - >✓ {{ getFriendlyDate(lastPurchased) }}</span> - </small> - </h3> - <p - v-if="required.length > 0" - class="sources" - > - <strong>Need: </strong> - <span - v-for="(source, index) in required" - :key="source.id" - > - <span v-if="index">, and </span> - <!-- Generic ingredient-only display when no recipe/meal context; person ref removed --> - <span v-if="!source.recipe && !source.meal && source.ingredient"> - {{ formatQuantity(source.ingredient.quantity) }} {{ source.ingredient.unit }} - </span> - <span v-else-if="source.recipe && source.ingredient"> - {{ formatQuantity(source.ingredient.quantity) }} {{ source.ingredient.unit }} in - <router-link :to="`/recipes/${source.recipe.id}/`">{{ - source.recipe.name - }}</router-link> - for - <router-link :to="`/meals/${source.meal?.id}/`">{{ - source.meal?.suggestedDate - ? source.meal.suggestedDate.toLocaleDateString('en-AU', { - weekday: 'long', - month: 'long', - day: 'numeric', - }) - : '' - }}</router-link> - </span> - <span v-else-if="source.meal && source.ingredient"> - {{ source.ingredient.line }} for - <router-link :to="`/meals/${source.meal?.id}/`">{{ - source.meal?.suggestedDate - ? source.meal.suggestedDate.toLocaleDateString('en-AU', { - weekday: 'long', - month: 'long', - day: 'numeric', - }) - : '' - }}</router-link> - </span> - </span> - </p> - <p v-if="purchased.length > 0"> - <strong>Already found or purchased: </strong> - <span - v-for="(source, index) in purchased" - :key="source.id" - > - <span v-if="index">, and </span> - <!-- Generic ingredient-only display when no recipe/meal context; person ref removed --> - <span v-if="!source.recipe && !source.meal && source.ingredient"> - {{ formatQuantity(source.ingredient.quantity) }} {{ source.ingredient.unit }} - </span> - <span v-else-if="source.recipe && source.ingredient"> - {{ formatQuantity(source.ingredient.quantity) }} {{ source.ingredient.unit }} in - <router-link :to="`/recipes/${source.recipe.id}/`">{{ - source.recipe.name - }}</router-link> - for - <router-link :to="`/meals/${source.meal?.id ?? ''}/`">{{ - source.meal?.suggestedDate - ? source.meal.suggestedDate.toLocaleDateString('en-AU', { - weekday: 'long', - month: 'long', - day: 'numeric', - }) - : '' - }}</router-link> - </span> - <span v-else-if="source.meal && source.ingredient"> - {{ source.ingredient.line }} for - <router-link :to="`/meals/${source.meal.id}/`">{{ - source.meal.suggestedDate - ? source.meal.suggestedDate.toLocaleDateString('en-AU', { - weekday: 'long', - month: 'long', - day: 'numeric', - }) - : '' - }}</router-link> - </span> - </span> - </p> - </div> - </div> -</template> - -<script setup lang="ts"> -import { computed } from 'vue' -import { ago } from '@/dateformats' -import { calculateTotals } from '@/units' -import type { Group } from '@/composables/useShopping' - -const props = defineProps<{ shoppingListItemGroup: Group }>() - -const fallbackImg = new URL('@/assets/missing-product.svg', import.meta.url).toString() -const imageSrc = computed(() => { - if (props.shoppingListItemGroup.type === 'product') { - return props.shoppingListItemGroup.product?.imgSmall ?? fallbackImg - } - return fallbackImg -}) - -const remainingRequiredTotals = computed(() => - calculateTotals( - props.shoppingListItemGroup.shoppingListItems - .filter((item) => !!item.ingredient) - .map((item) => ({ - // item.ingredient is defined due to filter above - quantity: item.ingredient!.quantity, - unit: String(item.ingredient!.unit || 'items'), - })) - ) -) - -const required = computed(() => props.shoppingListItemGroup.shoppingListItems.filter((item) => !item.listId)) - -const purchased = computed(() => props.shoppingListItemGroup.shoppingListItems.filter((item) => item.listId)) - -const lastPurchased = computed(() => { - const purchasedItems = props.shoppingListItemGroup.shoppingListItems.filter((item) => item.listId) - if (purchasedItems.length === 0) return null - return purchasedItems.reduce<Date | null>((latest, item) => { - const itemDate: Date | null = (item?.meal?.suggestedDate ?? item?.createdDate) || null - return !latest || (itemDate && itemDate > latest) ? itemDate : latest - }, null) -}) - -function getFriendlyDate(date: Date | null) { - if (!date) return '' - return ago(date) -} - -function formatQuantity(quantity: number) { - const log10 = Math.log10(quantity) - if (log10 < 0) return quantity.toPrecision(2) - if (log10 < 1) return quantity.toFixed(1) - return quantity.toFixed(0) -} -</script> - -<style scoped> -/* Show the product image to the left, then the product name and size to the right */ - -.shopping-list-item { - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - padding: 1em; -} - -.product-image { - max-width: 5em; - max-height: 4em; - margin-right: 1em; -} - -.product-details { - flex-grow: 1; - text-align: left; -} - -.header { - margin: 0; -} - -.found-marker { - margin: 1ex; - padding-top: 0.6ex; - padding-bottom: 0.5ex; - padding-left: 1em; - padding-right: 1em; - border-radius: 25px; - - text-align: center; - white-space: nowrap; - font-size: smaller; - color: white; - font-weight: bold; - z-index: 1000; -} - -.found-marker.found { - background-color: green; -} - -.found-marker.partial { - background-color: darkgoldenrod; -} -</style> - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| CurrentShoppingListPage.vue | -
-
- |
- 0% | -0/275 | -0% | -0/1 | -0% | -0/1 | -0% | -0/275 | -
| MealSelectionList.vue | -
-
- |
- 0% | -0/163 | -0% | -0/1 | -0% | -0/1 | -0% | -0/163 | -
| MyShoppingPage.vue | -
-
- |
- 0% | -0/88 | -0% | -0/1 | -0% | -0/1 | -0% | -0/88 | -
| PurchasedShoppingListPage.vue | -
-
- |
- 0% | -0/67 | -0% | -0/1 | -0% | -0/1 | -0% | -0/67 | -
| ShoppingListItem.vue | -
-
- |
- 0% | -0/222 | -0% | -0/1 | -0% | -0/1 | -0% | -0/222 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| useAlert.ts | -
-
- |
- 100% | -29/29 | -71.42% | -5/7 | -100% | -4/4 | -100% | -29/29 | -
| useAuth.ts | -
-
- |
- 0% | -0/23 | -0% | -0/1 | -0% | -0/1 | -0% | -0/23 | -
| usePagination.ts | -
-
- |
- 0% | -0/107 | -0% | -0/1 | -0% | -0/1 | -0% | -0/107 | -
| useShopping.ts | -
-
- |
- 0% | -0/85 | -0% | -0/1 | -0% | -0/1 | -0% | -0/85 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -2x -2x -2x -1x -2x -2x -2x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -2x -2x - | import { ref } from 'vue'
-
-type AlertType = 'success' | 'error' | 'info'
-export type AlertMessage = { heading?: string; message: string; type: AlertType }
-
-// Singleton reactive alert state for the app
-const current = ref<(AlertMessage & { _ts: number }) | null>(null)
-let timeoutId: ReturnType<typeof setTimeout> | null = null
-
-function show(message: AlertMessage) {
- current.value = { ...message, _ts: Date.now() }
-}
-
-function clear() {
- current.value = null
-}
-
-function scheduleAutoDismiss(ms = 5000) {
- if (timeoutId) clearTimeout(timeoutId)
- if (!current.value) return
- timeoutId = setTimeout(() => {
- clear()
- timeoutId = null
- }, ms)
-}
-
-export function useAlert() {
- return { current, show, clear, scheduleAutoDismiss }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 | - - - - - - - - - - - - - - - - - - - - - - - | import { ref } from 'vue' -import { currentUser as apiCurrentUser, login as apiLogin } from '@/api/auth' -import type { Person } from '@/domain/types' - -const user = ref<Person | null>(null) -let initialized = false - -export async function loadUser() { - if (!initialized) { - user.value = await apiCurrentUser() - initialized = true - } - return user.value -} - -export async function login(username: string) { - user.value = await apiLogin(username) - return user.value -} - -export function useAuth() { - return { user, loadUser, login } -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { ref, shallowRef, type Ref, type ShallowRef } from 'vue' -import type { Page } from '@/domain/pagination' - -export type PageParams = { cursor?: string | null; limit?: number } & Record<string, unknown> -export type PageFetcher<T> = (params: PageParams) => Promise<Page<T>> - -export function usePagination<T>( - fetchPage: PageFetcher<T>, - options?: { pageSize?: number } -): { - items: Ref<T[]> - next: Ref<string | null> - prev: Ref<string | null> - total: Ref<number | null> - loading: Ref<boolean> - error: Ref<unknown> - load: (baseParams?: PageParams) => Promise<void> - loadNext: () => Promise<void> - loadPrev: () => Promise<void> - reset: () => void -} { - function makeItemsRef<U>(): ShallowRef<U[]> { - return shallowRef<U[]>([]) - } - const items: Ref<T[]> = makeItemsRef<T>() - const next: Ref<string | null> = ref<string | null>(null) - const prev: Ref<string | null> = ref<string | null>(null) - const total: Ref<number | null> = ref<number | null>(null) - const loading: Ref<boolean> = ref<boolean>(false) - const error: Ref<unknown> = ref<unknown>(null) - - const pageSize = options?.pageSize - const lastBaseParams = ref<PageParams>({}) - - function assignFromPage(page: Page<T>) { - items.value = page.items ?? [] - next.value = page.next ?? null - prev.value = page.prev ?? null - total.value = page.total ?? null - } - - async function load(baseParams: PageParams = {}) { - loading.value = true - error.value = null - // keep base params without cursor; limit comes from options unless explicitly provided - const { limit: _l, ...rest } = baseParams - lastBaseParams.value = rest - try { - const params: PageParams = { ...rest } - if (typeof _l === 'number') params.limit = _l - else if (typeof pageSize === 'number') params.limit = pageSize - const page = await fetchPage(params) - assignFromPage(page) - } catch (e) { - error.value = e - items.value = [] - next.value = null - prev.value = null - total.value = null - } finally { - loading.value = false - } - } - - async function loadWithCursor(cursor: string | null) { - if (!cursor) return - loading.value = true - error.value = null - try { - const params: PageParams = { - ...lastBaseParams.value, - cursor, - } - if (typeof pageSize === 'number') params.limit = pageSize - const page = await fetchPage(params) - assignFromPage(page) - } catch (e) { - error.value = e - items.value = [] - next.value = null - prev.value = null - total.value = null - } finally { - loading.value = false - } - } - - async function loadNext() { - await loadWithCursor(next.value) - } - - async function loadPrev() { - await loadWithCursor(prev.value) - } - - function reset() { - items.value = [] - next.value = null - prev.value = null - total.value = null - loading.value = false - error.value = null - lastBaseParams.value = {} - } - - return { items, next, prev, total, loading, error, load, loadNext, loadPrev, reset } -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import * as sdk from '@/api/sdk' -import type { ShoppingListItemWithRefs, Product, Meal } from '@/domain/types' - -export type GroupByProduct = { type: 'product'; product: Product; shoppingListItems: ShoppingListItemWithRefs[] } -export type GroupByName = { type: 'name'; name: string; shoppingListItems: ShoppingListItemWithRefs[] } -export type Group = GroupByProduct | GroupByName - -export function groupsToItems(groups: Group[]): ShoppingListItemWithRefs[] { - return groups.map((g) => g.shoppingListItems).flat() -} - -export function uniqueMeals(shoppingListItems: ShoppingListItemWithRefs[]): Meal[] { - const mealsWithDuplicates = shoppingListItems.map((item) => item.meal).filter((m): m is Meal => !!m) - const mealsLookup: Record<string | number, Meal> = mealsWithDuplicates.reduce<Record<string | number, Meal>>( - (acc, meal) => { - acc[meal.id] ??= meal - return acc - }, - {} - ) - return Object.values(mealsLookup) -} - -export function itemsToGroups(shoppingListItems: ShoppingListItemWithRefs[]): Group[] { - const ingredients_by_product_id: Record<string | number, GroupByProduct> = {} - const ingredients_by_name: Record<string, GroupByName> = {} - for (const item of shoppingListItems) { - if (item.ingredient?.product) { - let group = ingredients_by_product_id[item.ingredient.product.id] - if (!group) { - group = ingredients_by_product_id[item.ingredient.product.id] = { - type: 'product', - product: item.ingredient.product, - shoppingListItems: [], - } - } - group.shoppingListItems.push(item) - } else { - const name = item.ingredient?.name ?? '' - let group = ingredients_by_name[name] - if (!group) { - group = ingredients_by_name[name] = { - type: 'name', - name, - shoppingListItems: [], - } - } - group.shoppingListItems.push(item) - } - } - return [...Object.values(ingredients_by_product_id), ...Object.values(ingredients_by_name)] -} - -export function useShopping() { - const groupsFrom = (items?: ShoppingListItemWithRefs[]): Group[] => itemsToGroups(items ?? []) - const mealsFrom = (items?: ShoppingListItemWithRefs[]): Meal[] => uniqueMeals(items ?? []) - return { - getCurrentShoppingList: sdk.getCurrentShoppingList, - getShoppingList: sdk.getShoppingList, - purchaseShoppingList: sdk.purchaseShoppingList, - requestMeal: sdk.requestMeal, - unrequestMeal: sdk.unrequestMeal, - getMyShoppingList: sdk.getMyShoppingList, - saveMyShoppingList: sdk.saveMyShoppingList, - // View-model helpers - groupsFrom, - mealsFrom, - async purchaseFromGroups(groups: Group[]) { - const items = groupsToItems(groups).map((i): sdk.PurchaseRequest => { - if (typeof i.id === 'number' && i.id >= 0) { - return { type: 'existing', id: i.id, personId: i.personId, ingredientId: i.ingredient?.id ?? null } - } - return { - type: 'refs', - personId: i.personId, - ingredientId: i.ingredient?.id ?? null, - recipeId: i.recipe?.id ?? null, - mealId: i.meal?.id ?? null, - } - }) - if (!items?.length) return null - return sdk.purchaseShoppingList(items) - }, - } -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 | - - - - - - - - - - - - - - - | function plural(num: number, unit: string): string { - const whole = Math.floor(num) - return whole + ' ' + unit + (whole === 1 ? '' : 's') -} - -export function ago(date: Date): string { - const now = new Date() - const diff = now.getTime() - date.getTime() - if (diff < 1000) return 'just now' - if (diff < 60 * 1000) return plural(diff / 1000, 'second') + ' ago' - if (diff < 60 * 60 * 1000) return plural(diff / (60 * 1000), 'minute') + ' ago' - if (diff < 24 * 60 * 60 * 1000) return plural(diff / (60 * 60 * 1000), 'hour') + ' ago' - if (diff < 7 * 24 * 60 * 60 * 1000) return plural(diff / (24 * 60 * 60 * 1000), 'day') + ' ago' - return date.toLocaleDateString() -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 | 1x -1x -1x -1x -44x -44x -44x -1x -1x -1x -16x -16x -16x -16x -7x -7x -7x -7x -7x -7x -7x -7x -7x -7x -1x -1x -4x -4x -4x -4x -4x -4x -4x -1x -1x -9x -9x -2x -7x -9x -9x -9x -9x -9x -9x -9x -9x -9x -9x -9x -9x -9x -1x - - - - - - - -1x -1x -3x -3x -3x -3x -1x -1x -1x -1x -1x -1x -3x -3x -3x -3x -3x -3x -3x -1x -1x -12x -12x -12x -12x -1x -1x -4x -4x -4x -4x -4x -4x -4x -4x -4x -1x -1x -1x - - - - - - - - - - - - - - - - - - | import type { RecipeOut, Recipe, MealOut, Meal, MealRecipe, Ingredient as DomainIngredient, ShoppingList, ShoppingListItem, ShoppingListItemWithRefs, MealInput } from './types'
-import type { components } from '@/api/types'
-
-export function toDate(value: string | Date | null | undefined): Date | null {
- if (value === null || value === undefined) return null
- return typeof value === 'string' ? new Date(value) : value
-}
-
-// Small helper to decode optional lookup maps without repeating loops everywhere
-export function decodeLookup<TIn, TOut>(
- raw: Record<string, TIn> | null | undefined,
- decode: (v: TIn) => TOut
-): Record<string, TOut> | undefined {
- if (!raw) return undefined
- const out: Record<string, TOut> = {}
- for (const key of Object.keys(raw)) {
- if (!Object.prototype.hasOwnProperty.call(raw, key)) continue
- const maybe = raw[key]
- if (maybe === undefined) continue
- const decoded = decode(maybe)
- out[String(key)] = decoded
- }
- return out
-}
-
-export function decodeRecipe(r: RecipeOut | null | undefined): Recipe {
- if (!r) throw new Error('Invalid recipe payload')
- return {
- ...r,
- dateCreated: toDate(r.dateCreated),
- dateHidden: toDate(r.dateHidden),
- }
-}
-
-export function decodeMeal(m: MealOut | null | undefined): Meal {
- if (!m) throw new Error('Invalid meal payload')
- const recipes = Array.isArray(m.recipes)
- ? m.recipes.map((mr) => decodeMealRecipe(mr))
- : []
-
- return {
- ...m,
- suggestedDate: toDate(m.suggestedDate),
- purchaseDate: toDate(m.purchaseDate),
- consumedDate: toDate(m.consumedDate),
- recipes,
- chefs: m.chefs ?? [],
- consumers: m.consumers ?? [],
- cleanup: m.cleanup ?? [],
- extraIngredients: m.extraIngredients ?? [],
- }
-}
-
-function decodeMealRecipe(mr: components['schemas']['MealRecipe-Output'] | null | undefined): MealRecipe {
- if (!mr) throw new Error('Invalid meal recipe payload')
- return {
- ...mr,
- recipe: mr.recipe ? decodeRecipe(mr.recipe) : null,
- }
-}
-
-export function decodeIngredient(i: components['schemas']['Ingredient'] | null | undefined): DomainIngredient {
- if (!i) throw new Error('Invalid ingredient payload')
- // API guarantees quantity is a number; pass through
- return { ...i }
-}
-
-export function decodeIngredients(list: components['schemas']['Ingredient'][] | null | undefined): DomainIngredient[] {
- if (!Array.isArray(list)) return []
- return list.map((i) => decodeIngredient(i))
-}
-
-function decodeShoppingListItem(i: components['schemas']['ShoppingListItem'] | null | undefined): ShoppingListItem {
- if (!i) throw new Error('Invalid shopping list item payload')
- return {
- ...i,
- createdDate: toDate(i.createdDate),
- }
-}
-
-export function decodeShoppingListItems(list: components['schemas']['ShoppingListItem'][] | null | undefined): ShoppingListItemWithRefs[] {
- if (!Array.isArray(list)) return []
- // Build a new array with item clones to allow optional refs to be attached later
- return list.map((raw) => ({ ...decodeShoppingListItem(raw) }))
-}
-
-export function decodeShoppingList(v: components['schemas']['ShoppingList'] | null | undefined): ShoppingList {
- if (!v) throw new Error('Invalid shopping list payload')
- const { items: rawItems, ...rest } = v
- const items = Array.isArray(rawItems) ? decodeShoppingListItems(rawItems) : undefined
- return {
- ...rest,
- createdDate: toDate(v.createdDate),
- ...(items ? { items } : {}),
- }
-}
-
-// Helper to convert domain Meal to MealInput, keeping Date→string conversion in boundary
-export function toMealInput(meal: Meal): MealInput {
- return {
- id: meal.id,
- suggestedDate: meal.suggestedDate ? meal.suggestedDate.toISOString() : new Date().toISOString(),
- consumedDate: meal.consumedDate ? meal.consumedDate.toISOString() : null,
- purchaseDate: meal.purchaseDate ? meal.purchaseDate.toISOString() : null,
- chefs: meal.chefs,
- cleanup: meal.cleanup,
- consumers: meal.consumers,
- recipes: meal.recipes.map((r) => ({
- mealId: r.mealId,
- recipeId: r.recipeId,
- servings: r.servings,
- recipe: null,
- })),
- extraIngredients: meal.extraIngredients,
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| decoders.ts | -
-
- |
- 79.31% | -92/116 | -76.31% | -29/38 | -81.81% | -9/11 | -79.31% | -92/116 | -
| pagination.ts | -
-
- |
- 100% | -13/13 | -50% | -2/4 | -100% | -1/1 | -100% | -13/13 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 | 1x -1x -1x -1x -1x -2x -2x -2x -2x -2x -2x -2x -2x - | export type Page<T> = { items: T[]; next?: string | null; prev?: string | null; total?: number | null }
-
-type PageLike<T> = { items?: T[]; nextCursor?: string | null; prevCursor?: string | null; total?: number | null }
-
-export function fromOpenApiPage<TIn, TOut>(page: PageLike<TIn> | null | undefined, mapItem: (i: TIn) => TOut): Page<TOut> {
- if (!page) return { items: [] }
- return {
- items: (page.items ?? []).map((i) => mapItem(i)),
- next: page.nextCursor ?? null,
- prev: page.prevCursor ?? null,
- total: page.total ?? null,
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| App.vue | -
-
- |
- 0% | -0/98 | -0% | -0/1 | -0% | -0/1 | -0% | -0/98 | -
| dateformats.ts | -
-
- |
- 0% | -0/15 | -0% | -0/1 | -0% | -0/1 | -0% | -0/15 | -
| main.ts | -
-
- |
- 0% | -0/11 | -0% | -0/1 | -0% | -0/1 | -0% | -0/11 | -
| units.ts | -
-
- |
- 89.92% | -125/139 | -66.66% | -12/18 | -100% | -4/4 | -89.92% | -125/139 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 | - - - - - - - - - - - | import { createApp } from 'vue' -import App from './App.vue' -import { createAppRouter } from '@/router' -import { currentUser } from '@/api/auth' - -// Create the router with an auth callback to check current user -const router = createAppRouter(() => currentUser()) - -const app = createApp(App) -app.use(router) -app.mount('#app') - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 | - - - - - - - - - - - - - - - - - - - - - - - - - - - | /** - * Route parameter and query parsing helpers - * Centralizes route param type handling to avoid runtime checks in components - */ - -import type { LocationQueryValue } from 'vue-router' - -/** - * Parse a route param (string | string[] | undefined) to a number ID - * Returns null if param is missing or invalid - */ -export function parseRouteId(param: string | string[] | undefined): number | null { - if (!param) return null - const str = Array.isArray(param) ? param[0] : param - if (!str) return null - const id = parseInt(str, 10) - return isNaN(id) || id < 0 ? null : id -} - -/** - * Parse a route query param to a string - * Returns empty string if param is missing, null, or is an array - */ -export function parseQueryString(param: LocationQueryValue | LocationQueryValue[] | undefined): string { - if (!param) return '' - return Array.isArray(param) ? '' : param -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| helpers.ts | -
-
- |
- 0% | -0/27 | -0% | -0/1 | -0% | -0/1 | -0% | -0/27 | -
| index.ts | -
-
- |
- 0% | -0/79 | -0% | -0/1 | -0% | -0/1 | -0% | -0/79 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { createRouter, createWebHashHistory, Router } from 'vue-router' -import type { RouteRecordRaw } from 'vue-router' - -// Lazy-loaded route components -const LoginPage = () => import('@/components/LoginPage.vue') -const RecipesPage = () => import('@/components/recipes/RecipesPage.vue') -const MealPlanPage = () => import('@/components/meals/MealPlanPage.vue') -const MyShoppingPage = () => import('@/components/shopping/MyShoppingPage.vue') -const PurchasedShoppingListPage = () => import('@/components/shopping/PurchasedShoppingListPage.vue') -const CurrentShoppingListPage = () => import('@/components/shopping/CurrentShoppingListPage.vue') -const EditMealPage = () => import('@/components/meals/EditMealPage.vue') -const EditRecipePage = () => import('@/components/recipes/EditRecipePage.vue') - -export function createAppRouter(getCurrentUser: () => Promise<unknown> | unknown): Router { - const routes: RouteRecordRaw[] = [ - { path: '/', redirect: { name: 'mealplan' } }, - { path: '/login', name: 'login', component: LoginPage }, - { path: '/mealplan', name: 'mealplan', component: MealPlanPage, meta: { requiresAuth: true } }, - { - path: '/shopping', - name: 'shopping', - component: MyShoppingPage, - meta: { requiresAuth: true }, - }, - { - path: '/shopping/current', - name: 'shopping-current', - component: CurrentShoppingListPage, - meta: { requiresAuth: true }, - }, - { - path: '/shopping/:id', - name: 'shopping-list', - component: PurchasedShoppingListPage, - props: true, - meta: { requiresAuth: true }, - }, - { path: '/recipes', name: 'recipes', component: RecipesPage, meta: { requiresAuth: true } }, - { - path: '/recipes/add', - name: 'recipe-add', - component: EditRecipePage, - meta: { requiresAuth: true }, - }, - { - path: '/recipes/:id', - name: 'recipe-edit', - component: EditRecipePage, - props: true, - meta: { requiresAuth: true }, - }, - { path: '/meals/add', name: 'meal-add', component: EditMealPage, meta: { requiresAuth: true } }, - { - path: '/meals/:id', - name: 'meal-edit', - component: EditMealPage, - props: true, - meta: { requiresAuth: true }, - }, - ] - - const router = createRouter({ - history: createWebHashHistory(), - routes, - }) - - router.beforeEach(async (to) => { - if (!to.meta.requiresAuth) return true - try { - const user = await getCurrentUser() - if (user) return true - } catch (_) { - /* ignore */ - } - return { name: 'login', query: { redirect: to.fullPath } } - }) - - return router -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -16x -16x -16x -1x -7x -7x -11x -11x -11x - - -1x -1x -9x -7x -7x -9x -7x -7x -7x -7x -7x - - - - - - - - - - - - -1x -1x -1x -1x -1x -1x -1x -4x -4x -4x -4x -4x -1x -1x - | const UNIT_KEYS_ARRAY: readonly ['kg', 'litres', 'items'] = ['kg', 'litres', 'items']
-type UnitKey = typeof UNIT_KEYS_ARRAY[number]
-
-const equivalentUnits: Record<UnitKey, Record<string, number>> = {
- kg: {
- kgs: 1,
- kilograms: 1,
- kilogram: 1,
-
- g: 1000,
- gram: 1000,
- grams: 1000,
-
- lb: 2.20462,
- lbs: 2.20462,
- pound: 2.20462,
- pounds: 2.20462,
- },
- litres: {
- l: 1,
- liter: 1,
- litre: 1,
-
- ml: 1000,
- milliliters: 1000,
- milliliter: 1000,
-
- 'fl oz': 33.814,
- 'fluid ounce': 33.814,
- 'fluid ounces': 33.814,
-
- cup: 4.22675,
- cups: 4.22675,
-
- tbsp: 67.628,
- tablespoon: 67.628,
- tablespoons: 67.628,
-
- tsp: 202.884,
- teaspoon: 202.884,
- teaspoons: 202.884,
-
- pt: 2.11338,
- pint: 2.11338,
- pints: 2.11338,
-
- qt: 1.05669,
- quart: 1.05669,
- quarts: 1.05669,
-
- gal: 0.264172,
- gallon: 0.264172,
- gallons: 0.264172,
-
- oz: 35.1951,
- ounce: 35.1951,
- },
- items: {
- item: 1,
- items: 1,
- pcs: 1,
- piece: 1,
- pieces: 1,
- florets: 8, // Broccoli
- head: 1, // Broccoli
- heads: 1, // Broccoli
- slice: 10, // Bread
- slices: 10, // Bread
- loaf: 1, // Bread
- loaves: 1, // Bread
- cloves: 8, // Garlic
- bulb: 1, // Garlic
- bulbs: 1, // Garlic
- stalk: 1, // Celery
- stalks: 1, // Celery
- bunch: 1, // Cilantro
- bunches: 1, // Cilantro
- sprig: 1, // Cilantro
- sprigs: 1, // Cilantro
- cans: 1, // Canned goods
- can: 1, // Canned goods
- pack: 1, // Packaged goods
- packs: 1, // Packaged goods
- package: 1, // Packaged goods
- packages: 1, // Packaged goods
- container: 1, // Packaged goods
- containers: 1, // Packaged goods
- },
-}
-
-const UNIT_KEYS_SET: ReadonlySet<string> = new Set(UNIT_KEYS_ARRAY)
-function isUnitKey(value: string): value is UnitKey {
- return UNIT_KEYS_SET.has(value)
-}
-
-function getBaseUnit(unit: string): UnitKey | null {
- for (const type of UNIT_KEYS_ARRAY) {
- const group = equivalentUnits[type]
- if (unit in group) return type
- }
- return null
-}
-
-export function getConversionFactor(unit: string): { unit: UnitKey | string; factor: number } | null {
- if (isUnitKey(unit)) return { unit, factor: 1 }
-
- const unitLower = String(unit).toLowerCase()
- if (isUnitKey(unitLower)) return { unit: unitLower, factor: 1 }
-
- const baseUnit = getBaseUnit(unit)
- if (baseUnit) {
- const factor = equivalentUnits[baseUnit]?.[unit]
- if (typeof factor === 'number') return { unit: baseUnit, factor }
- return null
- }
-
- const baseUnitLower = getBaseUnit(unitLower)
- if (baseUnitLower) {
- const factor = equivalentUnits[baseUnitLower]?.[unitLower]
- if (typeof factor === 'number') return { unit: baseUnitLower, factor }
- return null
- }
-
- return null
-}
-
-type Quantity = { quantity: number; unit: string }
-type Total = { unit: string; quantity: number }
-
-export function calculateTotals(quantityList: Quantity[]): Total[] {
- const totals: Record<string, number> = {}
- for (const quantity of quantityList) {
- const baseUnit = getConversionFactor(quantity.unit) ?? { unit: quantity.unit, factor: 1 }
- const factor = baseUnit.factor
- const unit = String(baseUnit.unit)
- totals[unit] = (totals[unit] ?? 0) + quantity.quantity / factor
- }
- return Object.keys(totals).map((unit) => ({ unit, quantity: totals[unit] ?? 0 }))
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 | - - - - - - | /* eslint-disable @typescript-eslint/no-var-requires */ -const { defineConfig } = require('@vue/cli-service') -/* eslint-enable @typescript-eslint/no-var-requires */ -module.exports = defineConfig({ - transpileDependencies: true, -}) - |