Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-02 20:15:24 +02:00
Code Issues Releases Activity

Feat/recipe timeline event UI (#1831)

Browse source 
* added new icons

* added timeline badge and dialog to action menu

* more icons

* implemented timeline dialog using temporary API

* added route for fetching all timeline events

* formalized API call and added mobile-friendly view

* cleaned tags

* improved last made UI for mobile

* added event context menu with placeholder methods

* adjusted default made this date
set time to 1 minute before midnight
adjusted display to properly interpret UTC

* fixed local date display

* implemented update/delete routes

* fixed formating for long subjects

* added api error handling

* made everything localizable

* fixed weird formatting

* removed unnecessary async

* combined mobile/desktop views w/ conditional attrs
This commit is contained in:
Michael Genson 2022-12-11 15:16:55 -06:00 • committed by GitHub
parent f5d401a6a6
commit 4e8e2d7510
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 692 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/lib/api/user/recipes/recipe.ts
View file

@ -11,8 +11,10 @@ import {
UpdateImageResponse,
RecipeZipTokenResponse,
RecipeTimelineEventIn,
RecipeTimelineEventOut,
RecipeTimelineEventUpdate,
} from "~/lib/api/types/recipe";
import { ApiRequestInstance } from "~/lib/api/types/non-generated";
import { ApiRequestInstance, PaginationData } from "~/lib/api/types/non-generated";
export type Parser = "nlp" | "brute";
@ -47,7 +49,7 @@ const routes = {
recipesSlugCommentsId: (slug: string, id: number) => `${prefix}/recipes/${slug}/comments/${id}`,
recipesSlugTimelineEvent: (slug: string) => `${prefix}/recipes/${slug}/timeline/events`,
recipesSlugTimelineEventId: (slug: string, id: number) => `${prefix}/recipes/${slug}/timeline/events/${id}`,
recipesSlugTimelineEventId: (slug: string, id: string) => `${prefix}/recipes/${slug}/timeline/events/${id}`,
};
export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
@ -132,6 +134,20 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
}
async createTimelineEvent(recipeSlug: string, payload: RecipeTimelineEventIn) {
return await this.requests.post(routes.recipesSlugTimelineEvent(recipeSlug), payload);
return await this.requests.post<RecipeTimelineEventOut>(routes.recipesSlugTimelineEvent(recipeSlug), payload);
}
async updateTimelineEvent(recipeSlug: string, eventId: string, payload: RecipeTimelineEventUpdate) {
return await this.requests.put<RecipeTimelineEventOut, RecipeTimelineEventUpdate>(routes.recipesSlugTimelineEventId(recipeSlug, eventId), payload);
}
async deleteTimelineEvent(recipeSlug: string, eventId: string) {
return await this.requests.delete<RecipeTimelineEventOut>(routes.recipesSlugTimelineEventId(recipeSlug, eventId));
}
async getAllTimelineEvents(recipeSlug: string, page = 1, perPage = -1, params = {} as any) {
return await this.requests.get<PaginationData<RecipeTimelineEventOut>>(routes.recipesSlugTimelineEvent(recipeSlug), {
params: { page, perPage, ...params },
});
}
}

8
frontend/lib/icons/icons.ts
View file

@ -37,6 +37,7 @@ import {
mdiHeartOutline,
mdiDotsHorizontal,
mdiCheckboxBlankOutline,
mdiCommentTextMultiple,
mdiCommentTextMultipleOutline,
mdiDownload,
mdiFile,
@ -60,6 +61,7 @@ import {
mdiAlert,
mdiCheckboxMarkedCircle,
mdiInformation,
mdiInformationVariant,
mdiBellAlert,
mdiRefreshCircle,
mdiMenu,
@ -122,6 +124,8 @@ import {
mdiCursorMove,
mdiText,
mdiTextBoxOutline,
mdiTimelineText,
mdiMessageText,
mdiChefHat,
mdiContentDuplicate,
} from "@mdi/js";
@ -165,6 +169,7 @@ export const icons = {
codeBraces: mdiCodeJson,
codeJson: mdiCodeJson,
cog: mdiCog,
commentTextMultiple: mdiCommentTextMultiple,
commentTextMultipleOutline: mdiCommentTextMultipleOutline,
contentCopy: mdiContentCopy,
database: mdiDatabase,
@ -194,10 +199,12 @@ export const icons = {
home: mdiHome,
import: mdiImport,
information: mdiInformation,
informationVariant: mdiInformationVariant,
link: mdiLink,
lock: mdiLock,
logout: mdiLogout,
menu: mdiMenu,
messageText: mdiMessageText,
newBox: mdiNewBox,
notificationClearAll: mdiNotificationClearAll,
openInNew: mdiOpenInNew,
@ -220,6 +227,7 @@ export const icons = {
sortClockDescending: mdiSortClockDescending,
star: mdiStar,
testTube: mdiTestTube,
timelineText: mdiTimelineText,
tools: mdiTools,
potSteam: mdiPotSteam,
translate: mdiTranslate,