v0.2.0 (#143)

* Changed uvicorn port to 80

* Changed port in docker-compose to match dockerfile

* Readded environment variables in docker-compose

* production image rework

* Use opengraph metadata to make basic recipe cards when full recipe metadata is not available

* fixed instrucitons on parse

* add last_recipe

* automated testing

* roadmap update

* Sqlite (#75)

* file structure

* auto-test

* take 2

* refactor ap scheduler and startup process

* fixed scraper error

* database abstraction

* database abstraction

* port recipes over to new schema

* meal migration

* start settings migration

* finale mongo port

* backup improvements

* migration imports to new DB structure

* unused import cleanup

* docs strings

* settings and theme import logic

* cleanup

* fixed tinydb error

* requirements

* fuzzy search

* remove scratch file

* sqlalchemy models

* improved search ui

* recipe models almost done

* sql modal population

* del scratch

* rewrite database model mixins

* mostly grabage

* recipe updates

* working sqllite

* remove old files and reorganize

* final cleanup

Co-authored-by: Hayden <hay-kot@pm.me>

* Backup card (#78)

* backup / import dialog

* upgrade to new tag method

* New import card

* rename settings.py to app_config.py

* migrate to poetry for development

* fix failing test

Co-authored-by: Hayden <hay-kot@pm.me>

* added mkdocs to docker-compose

* Translations (#72)

* Translations + danish

* changed back proxy target to use ENV

* Resolved more merge conflicts

* Removed test in translation

* Documentation of translations

* Updated translations

* removed old packages

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

* fail to start bug fixes

* feature: prep/cook/total time slots (#80)

Co-authored-by: Hayden <hay-kot@pm.me>

* missing bind attributes

* Bug fixes (#81)

* fix: url remains after succesful import

* docs: changelog + update todos

* arm image

* arm compose

* compose updates

* update poetry

* arm support

Co-authored-by: Hayden <hay-kot@pm.me>

* dockerfile hotfix

* dockerfile hotfix

* Version Release Final Touches (#84)

* Remove slim

* bug: opacity issues

* bug: startup failure with no database

* ci/cd on dev branch

* formatting

* v0.1.0 documentation

Co-authored-by: Hayden <hay-kot@pm.me>

* db init hotfix

* bug: fix crash in mongo

* fix mongo bug

* fixed version notifier

* finale changelog

* Dropping Mongo From Dev Branch (#89)

* Fix link to Docker Hub

Found an extra s. DESTROYED it.

* initial pass

* second pass cleanup

* backup card framework

* backup card functionality

* translation

* upload button vile creation

* Release v0.1.0 Candidate (#85)

* Changed uvicorn port to 80

* Changed port in docker-compose to match dockerfile

* Readded environment variables in docker-compose

* production image rework

* Use opengraph metadata to make basic recipe cards when full recipe metadata is not available

* fixed instrucitons on parse

* add last_recipe

* automated testing

* roadmap update

* Sqlite (#75)

* file structure

* auto-test

* take 2

* refactor ap scheduler and startup process

* fixed scraper error

* database abstraction

* database abstraction

* port recipes over to new schema

* meal migration

* start settings migration

* finale mongo port

* backup improvements

* migration imports to new DB structure

* unused import cleanup

* docs strings

* settings and theme import logic

* cleanup

* fixed tinydb error

* requirements

* fuzzy search

* remove scratch file

* sqlalchemy models

* improved search ui

* recipe models almost done

* sql modal population

* del scratch

* rewrite database model mixins

* mostly grabage

* recipe updates

* working sqllite

* remove old files and reorganize

* final cleanup

Co-authored-by: Hayden <hay-kot@pm.me>

* Backup card (#78)

* backup / import dialog

* upgrade to new tag method

* New import card

* rename settings.py to app_config.py

* migrate to poetry for development

* fix failing test

Co-authored-by: Hayden <hay-kot@pm.me>

* added mkdocs to docker-compose

* Translations (#72)

* Translations + danish

* changed back proxy target to use ENV

* Resolved more merge conflicts

* Removed test in translation

* Documentation of translations

* Updated translations

* removed old packages

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

* fail to start bug fixes

* feature: prep/cook/total time slots (#80)

Co-authored-by: Hayden <hay-kot@pm.me>

* missing bind attributes

* Bug fixes (#81)

* fix: url remains after succesful import

* docs: changelog + update todos

* arm image

* arm compose

* compose updates

* update poetry

* arm support

Co-authored-by: Hayden <hay-kot@pm.me>

* dockerfile hotfix

* dockerfile hotfix

* Version Release Final Touches (#84)

* Remove slim

* bug: opacity issues

* bug: startup failure with no database

* ci/cd on dev branch

* formatting

* v0.1.0 documentation

Co-authored-by: Hayden <hay-kot@pm.me>

* db init hotfix

* bug: fix crash in mongo

* fix mongo bug

* fixed version notifier

* finale changelog

Co-authored-by: kentora <=>
Co-authored-by: Hayden <hay-kot@pm.me>
Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com>
Co-authored-by: kentora <kentora@kentora.dk>

* build container

* webscraper hotfix

* dev bug: change data location to prevent reloads

* api docs

* api docs bug

* workflow update

Co-authored-by: David Young <davidy@funkypenguin.co.nz>
Co-authored-by: Hayden <hay-kot@pm.me>
Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com>
Co-authored-by: kentora <kentora@kentora.dk>

* Add French Translation (#93)

* New tests (#94)

* dev-bug: fixed vscode freezes

* test: refactor database init to support tests

Co-authored-by: Hayden <hay-kot@pm.me>

* Mealplan CRUD Tests (#95)

* dev-bug: fixed vscode freezes

* test: refactor database init to support tests

* mealplan CRUD testing

Co-authored-by: Hayden <hay-kot@pm.me>

* Fix typos (#96)

* Settings, Themes and Migration Route Tests (#100)

* dev-bug: fixed vscode freezes

* test: refactor database init to support tests

* mealplan CRUD testing

* restructure test folder

* git attributes

* tests: migration, settings, theme routes testing

Co-authored-by: Hayden <hay-kot@pm.me>

* Refactor + New Docker File (#105)

* dev-bug: fixed vscode freezes

* test: refactor database init to support tests

* mealplan CRUD testing

* restructure test folder

* git attributes

* tests: migration, settings, theme routes testing

* docker-file shrink

* rebuild

* refactor: moving directories around

* adding funding

Co-authored-by: Hayden <hay-kot@pm.me>

* Meal planner improvements (#107)

* dev-bug: fixed vscode freezes

* test: refactor database init to support tests

* mealplan CRUD testing

* restructure test folder

* git attributes

* tests: migration, settings, theme routes testing

* docker-file shrink

* rebuild

* refactor: moving directories around

* adding funding

* mealplan redesign

Co-authored-by: Hayden <hay-kot@pm.me>

* Upload component (#108)

* unified upload button + download backups

* javascript toolings

* fix vuetur config

* fixed type check error

* refactor: clean up bag javascript

Co-authored-by: Hayden <hay-kot@pm.me>

* Upload component (#113)

* unified upload button + download backups

* javascript toolings

* fix vuetur config

* fixed type check error

* refactor: clean up bag javascript

* UI updates + name validation

* docs: changelog + sp

* fixed route links

* changelog

Co-authored-by: Hayden <hay-kot@pm.me>

* fixed menu links

* fixed poetry install on docker.dev build

* Migration redesign (#119)

* migration redesign init

* new color picker

* changelog

* added UI language selection

* fix layout issue on recipe editor

* remove git as dependency

* added UI editor for original URL

* CI/CD Tests

* test: fixed migration routes

Co-authored-by: Hayden <hay-kot@pm.me>

* Fix link to dev-notes.md (#110)

* translation: add swedish (#128)

* language: da is Danish

* translations: add swedish

* scraper: unescape html in instructions (#129)

Some urls erroneously deliver escaped html their instructions,
sometimes they are even escaped on multiple levels like here:

https://www.ica.se/recept/kladdig-kladdkaka-722982/

```
>>> normalize_instruction("S&amp;auml;tt ugnen p&amp;aring; 200&amp;deg;C.")
'Sätt ugnen på 200°C.'
```

* v0.2.0 Updates (#130)

* migration redesign init

* new color picker

* changelog

* added UI language selection

* fix layout issue on recipe editor

* remove git as dependency

* added UI editor for original URL

* CI/CD Tests

* test: fixed migration routes

* test todos

* bug/added docker volume

* chowdow test data

* partial image recipe image testing

* added card section card

* settings form

* homepage cetegory ui

* frontend category placeholder

* fixed broken scheduler

* remove old files

* removed temp test

Co-authored-by: Hayden <hay-kot@pm.me>

* Fix missing translations key (#133)

* translation: add simplified & traditional chinese

* Fix missing translations

* fix chinese translations

* v0.2.0 Release Candidate (#141)

* Fix link to Docker Hub

Found an extra s. DESTROYED it.

* Release v0.1.0 Candidate (#85)

* Changed uvicorn port to 80

* Changed port in docker-compose to match dockerfile

* Readded environment variables in docker-compose

* production image rework

* Use opengraph metadata to make basic recipe cards when full recipe metadata is not available

* fixed instrucitons on parse

* add last_recipe

* automated testing

* roadmap update

* Sqlite (#75)

* file structure

* auto-test

* take 2

* refactor ap scheduler and startup process

* fixed scraper error

* database abstraction

* database abstraction

* port recipes over to new schema

* meal migration

* start settings migration

* finale mongo port

* backup improvements

* migration imports to new DB structure

* unused import cleanup

* docs strings

* settings and theme import logic

* cleanup

* fixed tinydb error

* requirements

* fuzzy search

* remove scratch file

* sqlalchemy models

* improved search ui

* recipe models almost done

* sql modal population

* del scratch

* rewrite database model mixins

* mostly grabage

* recipe updates

* working sqllite

* remove old files and reorganize

* final cleanup

Co-authored-by: Hayden <hay-kot@pm.me>

* Backup card (#78)

* backup / import dialog

* upgrade to new tag method

* New import card

* rename settings.py to app_config.py

* migrate to poetry for development

* fix failing test

Co-authored-by: Hayden <hay-kot@pm.me>

* added mkdocs to docker-compose

* Translations (#72)

* Translations + danish

* changed back proxy target to use ENV

* Resolved more merge conflicts

* Removed test in translation

* Documentation of translations

* Updated translations

* removed old packages

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

* fail to start bug fixes

* feature: prep/cook/total time slots (#80)

Co-authored-by: Hayden <hay-kot@pm.me>

* missing bind attributes

* Bug fixes (#81)

* fix: url remains after succesful import

* docs: changelog + update todos

* arm image

* arm compose

* compose updates

* update poetry

* arm support

Co-authored-by: Hayden <hay-kot@pm.me>

* dockerfile hotfix

* dockerfile hotfix

* Version Release Final Touches (#84)

* Remove slim

* bug: opacity issues

* bug: startup failure with no database

* ci/cd on dev branch

* formatting

* v0.1.0 documentation

Co-authored-by: Hayden <hay-kot@pm.me>

* db init hotfix

* bug: fix crash in mongo

* fix mongo bug

* fixed version notifier

* finale changelog

Co-authored-by: kentora <=>
Co-authored-by: Hayden <hay-kot@pm.me>
Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com>
Co-authored-by: kentora <kentora@kentora.dk>

* build container

* webscraper hotfix

* notes hot fix

* bug: mongo updates fail #99

* Fix error message (#101)

* gh funding

* Create Issue Templates (#125)

* Create bug_report.md

* Create config.yml

Included a link to feature requests.

* Update config.yml

Fixed link I had for testing to the actual link

* Update bug_report.md

fix capitalization

* Update .github/ISSUE_TEMPLATE/bug_report.md

Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com>

Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com>

* merge kentors changes

* refactor/recipe routers

* category/tag database relationship and endpoints

* frontend category management

* update branch todos

* bug/normalize recipe steps html

* remove console.log +  refactor categories

* fix categories database errors

* refactor/ router endpoint

* refactor/ remove old code

* drag and drop ingredients

* general cleanup

* route refactoring

* changelog

* api refactoring + random cleanup

* fixed backwards sort

* Update mkdocs.yml (#137)

Fix warning from Deploy Docs github action

* fixed navigate on enter in search

* refactor/create global css

* added category scroll

* cleanup todos

* debug routes

* docs/new gifs & general updates

* cleanup

* fix list test

Co-authored-by: David Young <davidy@funkypenguin.co.nz>
Co-authored-by: Hayden <hay-kot@pm.me>
Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com>
Co-authored-by: kentora <kentora@kentora.dk>
Co-authored-by: Alexei Pesic <pesic.alexei@gmail.com>
Co-authored-by: Andrew <dpieski@gmail.com>
Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com>

* fix build

* fix duplicate editor

* fixed docker mount problem

* python 3.9

* added tasks for non-docker development

* remove old scripts

* dev updates

* fixed no image upload option

* get version from backend

* final docs pass

* .gitignore

Co-authored-by: kentora <=>
Co-authored-by: Hayden <hay-kot@pm.me>
Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com>
Co-authored-by: kentora <kentora@kentora.dk>
Co-authored-by: David Young <davidy@funkypenguin.co.nz>
Co-authored-by: Bastien <43323819+Batgame@users.noreply.github.com>
Co-authored-by: sephrat <34862846+sephrat@users.noreply.github.com>
Co-authored-by: Nick CJ <17556895+nickcj931@users.noreply.github.com>
Co-authored-by: dekvall <dkvldev@gmail.com>
Co-authored-by: wengtad <wengtad93@gmail.com>
Co-authored-by: Alexei Pesic <pesic.alexei@gmail.com>
Co-authored-by: Andrew <dpieski@gmail.com>
Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com>

.gitattributes

@@ -1 +1,2 @@
 *.css linguist-detectable=false
+*.html linguist-detectable=false

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [hay-kot]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug Report
+about: Create a bug report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+<!-- A clear and concise description of what the bug is. -->
+
+**Steps To Reproduce**
+Please be specific!
+1. Go to '...'
+2. Click on '....'
+3. etc.
+
+**Sample Code**
+<!-- If applicable, please include Sample code to reproduce the issue. -->
+
+**Expected behavior**
+<!-- A clear and concise description of what you expected to happen. -->
+
+**Actual Behavior**
+<!-- A clear and concise description of what actually happens. -->
+
+**Screenshots**
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+**Device Information (please complete the following information):**
+ - OS: [e.g., WSL2 on Win10, Mac]
+ - Deployment: [e.g., Docker-version, docker-compose, Python application]
+ - Browser: [e.g., chrome, safari]
+ - Version: [e.g., 0.2.0-dev]
+
+**Additional context**
+<!-- Add any other context about the problem here. If applicable, please include why you think the bug is occurring and/or troubleshooting you have already performed. -->

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,4 @@
+contact_links:
+  - name: Feature Requests
+    url: https://github.com/hay-kot/mealie/issues/122
+    about: Please add any Feature Requests here.

.github/workflows/dockerbuild.prod.yml

@@ -0,0 +1,49 @@
+name: Docker Build Dev
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      #
+      # Checkout
+      #
+      - name: checkout code
+        uses: actions/checkout@v2
+      #
+      # Setup QEMU
+      #
+      - name: Set up QEMU
+        id: qemu
+        uses: docker/setup-qemu-action@v1
+        with:
+          image: tonistiigi/binfmt:latest
+          platforms: all
+      #
+      # Setup Buildx
+      #
+      - name: install buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v1
+        with:
+          install: true
+      #
+      # Login to Docker Hub
+      #
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      #
+      # Build
+      #
+      - name: build the image
+        run: |
+          docker build --push \
+            --tag hkotel/mealie:latest \
+            --platform linux/amd64,linux/arm/v7,linux/arm64 .

.github/workflows/pytest.yml

@@ -4,7 +4,6 @@ on:
     branches:
       - master
       - dev
-      - cd/cd
   pull_request:
     branches:
       - master
@@ -31,15 +30,15 @@ jobs:
         with:
           virtualenvs-create: true
           virtualenvs-in-project: true
-      #----------------------------------------------
+      # #----------------------------------------------
-      #       load cached venv if cache exists
+      # #       load cached venv if cache exists
-      #----------------------------------------------
+      # #----------------------------------------------
-      - name: Load cached venv
+      # - name: Load cached venv
-        id: cached-poetry-dependencies
+      #   id: cached-poetry-dependencies
-        uses: actions/cache@v2
+      #   uses: actions/cache@v2
-        with:
+      #   with:
-          path: .venv
+      #     path: .venv
-          key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}
+      #     key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}
       #----------------------------------------------
       # install dependencies if cache does not exist
       #----------------------------------------------

.gitignore

@@ -10,19 +10,18 @@ mealie/temp/api.html
 .temp/
 
 
-mealie/data/backups/*
+app_data/backups/*
-mealie/data/debug/*
+app_data/debug/*
-mealie/data/img/*
+app_data/img/*
-mealie/data/migration/*
+app_data/migration/*
-!mealie/dist/*
 
 #Exception to keep folders
 !mealie/dist/.gitkeep
-!mealie/data/backups/.gitkeep
+!app_data/backups/.gitkeep
-!mealie/data/backups/dev_sample_data*
+!app_data/backups/dev_sample_data*
-!mealie/data/debug/.gitkeep
+!app_data/debug/.gitkeep
-!mealie/data/migration/.gitkeep
+!app_data/migration/.gitkeep
-!mealie/data/img/.gitkeep
+!app_data/img/.gitkeep
 
 .DS_Store
 node_modules
@@ -153,3 +152,4 @@ ENV/
 node_modules/
 mealie/data/debug/last_recipe.json
 *.sqlite
+app_data/db/test.db

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "python.formatting.provider": "black",
-  "python.pythonPath": ".venv/bin/python3.8",
+  "python.pythonPath": ".venv/bin/python3.9",
   "python.linting.pylintEnabled": true,
   "python.linting.enabled": true,
   "python.autoComplete.extraPaths": ["mealie", "mealie/mealie"],
@@ -9,11 +9,13 @@
   "python.testing.unittestEnabled": false,
   "python.testing.nosetestsEnabled": false,
   "python.testing.pytestEnabled": true,
+  "python.testing.autoTestDiscoverOnSaveEnabled": false,
   "cSpell.enableFiletypes": ["!javascript", "!python"],
   "python.testing.pytestArgs": ["mealie"],
   "i18n-ally.localesPaths": "frontend/src/locales",
-  "i18n-ally.enabledFrameworks": [
+  "i18n-ally.enabledFrameworks": ["vue"],
-    "vue"
+  "i18n-ally.keystyle": "nested",
-  ],
+  "cSpell.words": [
-  "i18n-ally.keystyle": "nested"
+    "performant"
+  ]
 }

.vscode/tasks.json

@@ -13,15 +13,42 @@
       "group": "test"
     },
     {
-        "label": "Production: Build and Start Docker Compose",
+      "label": "Production: Build and Start Docker Compose",
-        "command": "./dev/scripts/docker-compose.sh",
+      "command": "./dev/scripts/docker-compose.sh",
-        "type": "shell",
+      "type": "shell",
-        "args": [],
+      "args": [],
-        "problemMatcher": ["$tsc"],
+      "problemMatcher": ["$tsc"],
-        "presentation": {
+      "presentation": {
-          "reveal": "always"
+        "reveal": "always"
-        },
+      },
-        "group": "test"
+      "group": "test"
+    },
+    {
+      "label": "Dev: Start local Backend",
+      "command": "../${config:python.pythonPath}",
+      "args": ["app.py"],
+      "options": {
+        "cwd": "${workspaceFolder}/mealie/"
+      },
+      "type": "shell",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "always",
+        "group": "groupA"
       }
+    },
+    {
+      "label": "Dev: Start local Frontend",
+      "command": "npm run serve",
+      "type": "shell",
+      "options": {
+        "cwd": "${workspaceFolder}/frontend/"
+      },
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "always",
+        "group": "groupA"
+      }
+    }
   ]
 }

Dockerfile

@@ -5,28 +5,34 @@ RUN npm install
 COPY ./frontend/ .
 RUN npm run build
 
-# FROM tiangolo/uvicorn-gunicorn-fastapi:python3.8-slim
+FROM python:3.9-alpine
-FROM mrnr91/uvicorn-gunicorn-fastapi:python3.8
-
 
+RUN apk add --no-cache  libxml2-dev libxslt-dev libxml2 
+ENV ENV prod
+EXPOSE 80
 WORKDIR /app
 
-RUN apt-get update -y && \
-    apt-get install -y python-pip python-dev git curl python3-dev libxml2-dev libxslt1-dev zlib1g-dev --no-install-recommends && \
-    rm -rf /var/lib/apt/lists/* && \
-    curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | POETRY_HOME=/opt/poetry python && \
-    cd /usr/local/bin && \
-    ln -s /opt/poetry/bin/poetry && \
-    poetry config virtualenvs.create false
-
 COPY ./pyproject.toml /app/
 
+RUN apk add --update --no-cache --virtual .build-deps \
+    curl \
+    g++ \
+    python3-dev \
+    musl-dev \
+    gcc \
+    build-base && \
+    curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | POETRY_HOME=/opt/poetry python && \
+    cd /usr/local/bin && \
+    ln -s /opt/poetry/bin/poetry && \
+    poetry config virtualenvs.create false && \
+    cd /app/ && poetry install --no-root --no-dev && \
+    apk --purge del .build-deps
+
+
 COPY ./mealie /app
-RUN poetry install --no-root --no-dev
 COPY --from=build-stage /app/dist /app/dist
 RUN rm -rf /app/test /app/.temp
 
-ENV ENV prod
-ENV APP_MODULE "app:app"
 
-VOLUME [ "/app/data" ]
+VOLUME [ "/app/data/" ]
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "80"]

Dockerfile.arm

@@ -1,33 +0,0 @@
-FROM node:lts-alpine as build-stage
-WORKDIR /app
-COPY ./frontend/package*.json ./
-RUN npm install
-COPY ./frontend/ .
-RUN npm run build
-
-FROM mrnr91/uvicorn-gunicorn-fastapi:python3.8
-
-
-COPY ./requirements.txt /app/requirements.txt
-
-WORKDIR /app
-
-RUN apt-get update -y && \
-    apt-get install -y python-pip python-dev git curl --no-install-recommends 
-
-RUN curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | POETRY_HOME=/opt/poetry python && \
-    cd /usr/local/bin && \
-    ln -s /opt/poetry/bin/poetry && \
-    poetry config virtualenvs.create false
-
-COPY ./pyproject.toml ./app/poetry.lock* /app/
-
-COPY ./mealie /app
-RUN poetry install --no-root --no-dev
-COPY --from=build-stage /app/dist /app/dist
-RUN rm -rf /app/test /app/.temp
-
-ENV ENV prod
-ENV APP_MODULE "app:app"
-
-VOLUME [ "/app/data" ]

Dockerfile.dev

@@ -8,8 +8,7 @@ RUN curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-
     ln -s /opt/poetry/bin/poetry && \
     poetry config virtualenvs.create false
 
-RUN mkdir /app/
+COPY ./pyproject.toml ./poetry.lock* /app/
-COPY ./pyproject.toml ./app/poetry.lock* /app/
 
 WORKDIR /app
 
@@ -17,7 +16,6 @@ RUN poetry install --no-root
 
 COPY ./mealie /app
 
-
 ENTRYPOINT [ "python" ]
 
 CMD [ "app.py" ]

README.md

@@ -33,7 +33,7 @@
     Request Feature
     </a>    
     ·
-    <a href="https://hub.docker.com/repository/docker/hkotel/mealie"> Docker Hub
+    <a href="https://hub.docker.com/r/hkotel/mealie"> Docker Hub
     </a>
 </p>
 
@@ -72,7 +72,6 @@ Mealie also provides a secure API for interactions from 3rd party applications.
 * [Vue.js](https://vuejs.org/)
 * [Vuetify](https://vuetifyjs.com/en/)
 * [FastAPI](https://fastapi.tiangolo.com/)
-* [MongoDB](https://www.mongodb.com/)
 * [Docker](https://www.docker.com/)
 
 

dev/dev-notes.md

@@ -16,15 +16,12 @@ Don't forget to [join the Discord](https://discord.gg/R6QDyJgbD2)!
 
 # Todo's
 
-Documentation
+Test
-- [ ] V0.1.0 Release Notes
+- [ ] Image Upload Test
-- [ ] Nextcloud Migration How To
+- [ ] Rename and Upload Image Test
-- [ ] New Docker Setup with Sqlite
+- [x] Chowdown Migration End Point Test
-- [ ] Update Env Variables
-- [ ] New Roadmap / Milestones
 
 Frontend
-- [x] Prep / Cook / Total Time Indicator + Editor
 - [ ] No Meal Today Page instead of Null 
 - [ ] Recipe Print Page 
 - [ ] Recipe Editor Data Validation Client Side
@@ -32,12 +29,7 @@ Frontend
 - [ ] Advanced Search Page, draft started
   - [ ] Filter by Category
   - [ ] Filter by Tags
-- [ ] Search Bar redesign
+- [ ] Search Bar Results Redesign
-  - [x] Initial
-  - [ ] Results redesign
-- [ ] Replace Backups card with something like Home Assistant
-- [x] Replace import card with something like Home Assistant
-  - [x] Select which imports to do
 
 Backend
 - [ ] Database Import
@@ -46,11 +38,10 @@ Backend
   - [ ] Meal Plans
   - [x] Settings
   - [x] Themes
-- [x] Remove Print / Debug Code
+- [ ] Remove Print / Debug Code
 - [ ] Support how to sections and how to steps
 - [ ] Recipe request by category/tags
 
-
 SQL
 - [ ] Setup Database Migrations
 

dev/scripts/start-dev-svr.ps1

@@ -1,17 +0,0 @@
-$CWD = Get-Location
-
-$pyFolder = Join-Path -Path $CWD -ChildPath "mealie"
-$pyVenv = Join-Path -Path $CWD -ChildPath "/venv/Scripts/python.exe"
-$pyScript = Join-Path -Path $CWD -ChildPath "/mealie/app.py"
-
-$pythonCommand = "powershell.exe -NoExit -Command  $pyVenv $pyScript"
-
-$vuePath = Join-Path -Path $CWD -ChildPath "/frontend"
-$npmCommand = "powershell.exe -NoExit -Command npm run serve"
-
-wt -d $pyFolder "powershell.exe" $pythonCommand `; split-pane -d $vuePath "powershell.exe" $npmCommand
-
-Start-Process chrome "http://127.0.0.1:8000/docs"
-Start-Process chrome "http://127.0.0.1:8080
-"
-

docker-compose.arm.yml

@@ -1,16 +0,0 @@
-# Use root/example as user/password credentials
-# Frontend/Backend Served via the same Uvicorn Server
-version: "3.1"
-services:
-  mealie:
-    build:
-      context: ./
-      dockerfile: Dockerfile.arm
-    container_name: mealie
-    restart: always
-    ports:
-      - 9090:80
-    environment:
-      db_type: sql
-    volumes:
-      - ./mealie/data/:/app/data

docker-compose.dev.yml

@@ -26,39 +26,17 @@ services:
     ports:
       - 9921:9000
     environment:
+      db_type: sqlite
       TZ: America/Anchorage # Specify Correct Timezone for Date/Time to line up correctly.
-      db_username: root
-      db_password: example
-      db_host: mongo
-      db_port: 27017
     volumes:
+      - ./app_data:/app_data
       - ./mealie:/app
 
   mealie-docs:
     image: squidfunk/mkdocs-material
     restart: always
     ports:
-      - 9924:8000
+      - 9923:8000
     volumes:
       - ./docs:/docs
 
-  # Database
-  mongo:
-    image: mongo
-    restart: always
-    ports:
-      - 9923:27017
-    environment:
-      TZ: America/Anchorage # Specify Correct Timezone for Date/Time to line up correctly.
-      MONGO_INITDB_ROOT_USERNAME: root
-      MONGO_INITDB_ROOT_PASSWORD: example
-
-  # Database UI
-  mongo-express:
-    image: mongo-express
-    restart: always
-    ports:
-      - 9922:8081
-    environment:
-      ME_CONFIG_MONGODB_ADMINUSERNAME: root
-      ME_CONFIG_MONGODB_ADMINPASSWORD: example

docker-compose.yml

@@ -9,24 +9,4 @@ services:
     ports:
       - 9090:80
     environment:
-      db_type: sql
+      db_type: sqlite
-      db_username: root
-      db_password: example
-      db_host: mongo
-      db_port: 27017
-    # volumes:
-    #   - ./mealie/data/:/app/data
-  # mongo:
-  #   image: mongo
-  #   restart: always
-  #   environment:
-  #     MONGO_INITDB_ROOT_USERNAME: root
-  #     MONGO_INITDB_ROOT_PASSWORD: example
-  # mongo-express: # Optional Mongo GUI
-  #   image: mongo-express
-  #   restart: always
-  #   ports:
-  #     - 9091:8081
-  #   environment:
-  #     ME_CONFIG_MONGODB_ADMINUSERNAME: root
-  #     ME_CONFIG_MONGODB_ADMINPASSWORD: example

docs/docs/changelog.md

@@ -1,10 +1,68 @@
 # Release Notes
 
+## v0.2.0 - Now with Test!
+This is, what I think, is a big release! Tons of new features and some great quality of life improvements with some additional features. You may find that I made promises to include some fixes/features in v0.2.0. The short of is I greatly underestimated the work needed to refactor the database to a usable state and integrate categories in a way that is useful for users. This shouldn't be taken as a sign that I'm dropping those feature requests or ignoring them. I felt it was better to push a release in the current state rather than drag on development to try and fulfil all of the promises I made. 
+
+!!! warning "Upgrade Process"
+    Database Breaks! I have not yet implemented a database migration service. As such, upgrades cannot be done by simply pulling the image. You must first export your recipes, update your deployment, and then import your recipes. This pattern is likely to be how upgrades take place prior to v1.0. After v1.0 migrations will be done automatically.
+
+### Bug Fixes
+  - Remove ability to save recipe with no name
+  - Fixed data validation error on missing parameters
+  - Fixed failed database initialization at startup - Closes #98
+  - Fixed misaligned text on various cards
+  - Fixed bug that blocked opening links in new tabs - Closes #122
+  - Fixed router link bugs - Closes #122
+  - Fixed navigation on keyboard selection - Closes #139
+
+### Features and Improvements
+  - 🐳 Dockerfile now 1/5 of the size!
+  - 🌎 UI Language Selection + Additional Supported Language
+  - **Home Page**
+    - By default your homepage will display only the recently added recipes. You can configured sections to show on the home-screen based of categories on the settings page. 
+    - A new sidebar is now shown on the main page that lists all the categories in the database. Clicking on them navigates into a page that shows only recipes. 
+    - Basic Sort functionality has been added. More options are on the way! 
+  - **Meal Planner**
+    - Improved Search (Fuzzy Search)
+    - New Scheduled card support 
+  - **Recipe Editor**
+    - Ingredients are now sortable via drag-and-drop
+    - Known categories now show up in the dropdown - Closes 83
+    - Initial code for data validation to prevent errors
+  - **Migrations**
+    - Card based redesign
+    - Upload from the UI
+    - Unified Chowdown / Nextcloud import process. (Removed Git as a dependency)
+  - **API**
+    - Category and Tag endpoints added
+    - Major Endpoint refactor
+    - Improved API documentation
+    - Link to your Local API is now on your `/settings/site`. You can use it to explore your API. 
+
+  - **Style**
+    - Continued work on button/style unification
+    - Adding icons to buttons
+    - New Color Theme Picker UI
+
+### Development
+  - Fixed Vetur config file. Autocomplete in VSCode works!
+  - File/Folder restructuring 
+  - Added Prettier config
+  - Fixed incorrect layout code
+  - FastAPI Route tests for major operations - WIP (shallow testing)
+
+### Breaking Changes 
+
+!!! error "Breaking Changes"
+    - API endpoints have been refactored to adhear to a more consistent standard. This is a WIP and more changes are likely to occur. 
+    - Officially Dropped MongoDB Support
+    - Database Breaks! We have not yet implemented a database migration service. As such, upgrades cannot be done by simply pulling the image. You must first export your recipes, update your deployment, and then import your recipes. This pattern is likely to be how upgrades take place prior to v1.0. After v1.0 migrations will be done automatically. 
+
 ## v0.1.0 - Initial Beta
 ### Bug Fixes
-  - Fixed Can't delete recipe after changing name - Closes Issue #67
+  - Fixed Can't delete recipe after changing name - Closes Closes #67
-  - Fixed No image when added by URL, and can;t add an image - Closes Issue #66
+  - Fixed No image when added by URL, and can't add an image - Closes Closes #66
-  - Fixed Images saved with no way to delete when add recipe via URL fails - Closes Issue #43
+  - Fixed Images saved with no way to delete when add recipe via URL fails - Closes Closes #43
 
 ### Features
   - Additional Language Support
@@ -23,7 +81,7 @@
   - Major code refactoring to support new database layer
   - Global variable refactor
 
-### Break Changes
+### Breaking Changes
 
 - Internal docker port is now 80 instead of 9000. You MUST remap the internal port to connect to the UI. 
 
@@ -38,8 +96,8 @@ A quality update with major props to [zackbcom](https://github.com/zackbcom) for
   - Fixed empty backup failure without markdown template
   - Fixed opacity issues with marked steps - [mtoohey31](https://github.com/mtoohey31)
   - Fixed hot-reloading development environment - [grssmnn](https://github.com/grssmnn)
-  - Fixed recipe not saving without image - Issue #7 + Issue #54
+  - Fixed recipe not saving without image - Closes #7 + Closes #54
-  - Fixed parsing error on image property null - Issue #43
+  - Fixed parsing error on image property null - Closes #43
 
 ### General Improvements
   - Added Confirmation component to deleting recipes - [zackbcom](https://github.com/zackbcom)
@@ -52,7 +110,7 @@ A quality update with major props to [zackbcom](https://github.com/zackbcom) for
       - Users can now add custom json key/value pairs to all recipes via the editor for access in 3rd part applications. For example users can add a "message" field in the extras that can be accessed on API calls to play a message over google home. 
   - Improved image rendering (nearly x2 speed)
   - Improved documentation + API Documentation
-  - Improved recipe parsing - Issue #51
+  - Improved recipe parsing - Closes #51
   - User feedback on backup importing
 
 ## v0.0.1 - Pre-release Patch
@@ -63,8 +121,8 @@ A quality update with major props to [zackbcom](https://github.com/zackbcom) for
 
 ### Recipes
   - Added user feedback on bad URL
-  - Better backend data validation for updating recipes, avoid small syntax errors corrupting database entry. [Issue #8](https://github.com/hay-kot/mealie/issues/8)
+  - Better backend data validation for updating recipes, avoid small syntax errors corrupting database entry. [Closes #8](https://github.com/hay-kot/mealie/issues/8)
-  - Fixed spacing issue while editing new recipes in JSON
+  - Fixed spacing Closes while editing new recipes in JSON
 
 ## v0.0.0 - Initial Pre-release
 The initial pre-release. It should be semi-functional but does not include a lot of user feedback You may notice errors that have no user feedback and have no idea what went wrong. 

docs/docs/contributors/developers-guide/code-contributions.md

@@ -12,7 +12,7 @@ We use github to host code, to track issues and feature requests, as well as acc
 Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests: 
 
 1. Fork the repo and create your branch from `dev`.
-2. Read the page in in [dev/dev-notes.md](https://github.com/hay-kot/mealie/blob/0.1.0/dev/dev-notes.md) to get an idea on where the project is at.
+2. Read the page in in [dev/dev-notes.md](https://github.com/hay-kot/mealie/blob/master/dev/dev-notes.md) to get an idea on where the project is at.
 3. If you're interested on working on major changes please get in touch on discord and coordinate with other developers. No sense in doubling up on work if someones already on it. 
 4. If you've changed APIs, update the documentation.
 5. Issue that pull request!

docs/docs/contributors/developers-guide/starting-dev-server.md

@@ -14,7 +14,16 @@ There are VSCode tasks created in the .vscode folder. You can use these to quick
 
 
 ## Without Docker
-?? TODO
+Prerequisites
+
+- Python 3.8+
+- Poetry
+- Nodejs
+- npm
+
+change directories into the mealie directory and run poetry install. cd into the frontend directory and run npm install. After installing dependencies, you can use vscode tasks to run the front and backend server. Use the command pallette to access the tasks. 
+
+Alternatively you can run `npm run serve` in the frontend directory and `python app.py` in the mealie directory to get everything up and running for development. 
 
 ## Trouble Shooting
 

docs/docs/getting-started/backups-and-exports.md

@@ -1,5 +1,4 @@
-# Backup and Export
+# Backup and Imports
-![](../img/admin-backup.png)
 
 All recipe data can be imported and exported as necessary from the UI. Under the admin page you'll find the section for using Backups and Exports. 
 
@@ -7,6 +6,8 @@ To create an export simple add the tag and the markdown template and click Backu
 
 To import a backup it must be in your backups folder. If it is in the backup folder it will automatically show up as an source to restore from. Selected the desired backup and import the backup file. 
 
+![](../gifs/backup-demo-v1.gif)
+
 ## Custom Templating
 On export you can select a template to use to render files using the jinja2 syntax. This can be done to export recipes in other formats besides regular .json.Look at this example for rendering a markdown recipe using the jinja2 syntax. 
 

docs/docs/getting-started/install.md

@@ -1,5 +1,5 @@
 # Installation
-To deploy docker on your local network it is highly recommended to use docker to deploy the image straight from dockerhub. Using the docker-compose below you should be able to get a stack up and running easily by changing a few default values and deploying. Currently MongoDB and SQLite are supported. MongoDB support will be dropped in v0.2.0 so it is recommended to go with SQLite for new deployments. Postrgres support is planned for the next release, however for most loads you may find SQLite performant enough.  
+To deploy docker on your local network it is highly recommended to use docker to deploy the image straight from dockerhub. Using the docker-compose below you should be able to get a stack up and running easily by changing a few default values and deploying. Currently only SQLite is supported. Postrgres support is planned, however for most loads you may find SQLite performant enough.  
 
 
 [Get Docker](https://docs.docker.com/get-docker/)
@@ -39,63 +39,15 @@ services:
 
 ```
 
-
-## Docker Compose with Mongo - DEPRECIATED
-
-```yaml
-# docker-compose.yml
-version: "3.1"
-services:
-  mealie:
-    container_name: mealie
-    image: hkotel/mealie:latest
-    restart: always
-    ports:
-      - 9000:80
-    environment:
-      db_username: root     # Your Mongo DB Username - Please Change
-      db_password: example  # Your Mongo DB Password - Please Change
-      db_host: mongo
-      db_port: 27017    # The Default port for Mongo DB
-      TZ: America/Anchorage
-    volumes:
-      - ./mealie/data/:/app/data/
-      
-  mongo:
-    image: mongo
-    restart: always
-    volumes:
-      - ./mongo:/data/db  
-    environment:
-      MONGO_INITDB_ROOT_USERNAME: root  # Change!
-      MONGO_INITDB_ROOT_PASSWORD: example   # Change!
-
-  mongo-express: # Optional Mongo GUI
-    image: mongo-express
-    restart: always
-    ports:
-      - 9091:8081
-    environment:
-      ME_CONFIG_MONGODB_ADMINUSERNAME: root
-      ME_CONFIG_MONGODB_ADMINPASSWORD: example
-
-```
-
-
 ## Env Variables
 
-| Variables      | default | description                                                                                                                                             |
+| Variables   | default | description                                                                                                                                             |
-| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| db_type        | sqlite  | The database type to be used. Current Options 'sqlite' and 'mongo'                                                                                      |
+| db_type     | sqlite  | The database type to be used. Current Options 'sqlite'                                                                                                  |
-| mealie_db_name | mealie  | The name of the database to be created in Mongodb                                                                                                       |
+| mealie_port | 9000    | The port exposed by mealie. **do not change this if you're running in docker** If you'd like to use another port, map 9000 to another port of the host. |
-| mealie_port    | 9000    | The port exposed by mealie. **do not change this if you're running in docker** If you'd like to use another port, map 9000 to another port of the host. |
+| api_docs    | True    | Turns on/off access to the API documentation locally.                                                                                                   |
-| db_username    | root    | The Mongodb username you specified in your mongo container                                                                                              |
+| TZ          | UTC     | You should set your time zone accordingly so the date/time features work correctly                                                                      |
-| db_password    | example | The Mongodb password you specified in your mongo container                                                                                              |
-| db_host        | mongo   | The host address of MongoDB if you're in docker and using the same network you can use mongo as the host name                                           |
-| db_port        | 27017   | the port to access MongoDB 27017 is the default for mongo                                                                                               |
-| api_docs       | True    | Turns on/off access to the API documentation locally.                                                                                                   |
-| TZ             |         | You should set your time zone accordingly so the date/time features work correctly                                                                      |
 
 
 ## Deployed as a Python Application
-Alternatively, this project is built on Python and Mongodb. If you are dead set on deploying on a linux machine you can run this in an python environment with a dedicated MongoDatabase. Provided that you know thats how you want to host the application, I'll assume you know how to do that. I may or may not get around to writing this guide. I'm open to pull requests if anyone has a good guide on it. 
+Alternatively, this project is built on Python and SQLite. If you are dead set on deploying on a linux machine you can run this in an python virtual env. Provided that you know thats how you want to host the application, I'll assume you know how to do that. I may or may not get around to writing this guide. I'm open to pull requests if anyone has a good guide on it. 

docs/docs/getting-started/meal-planner.md

@@ -1,11 +1,11 @@
 # Meal Planner
 
 ## Working with Meal Plans
-In Mealie you can create a mealplan based off the calendar inputs on the meal planner page. There is no limit to how long or how short a meal plan is. You may also create duplicate meal plans for the same date range. After selecting your date range, click on the card for each day and seach through recipes to find your choice. After selecting a recipe for all meals save the plan. You can also randomly generate meal plans.
+In Mealie you can create a mealplan based off the calendar inputs on the meal planner page. There is no limit to how long or how short a meal plan is. You may also create duplicate meal plans for the same date range. After selecting your date range, click on the card for each day and search through recipes to find your choice. After selecting a recipe for all meals save the plan. You can also randomly generate meal plans.
 
-To edit the meal in a meal plan simply select the edit button on the card in the timeline. Similiarly, to delete a mealplan click the delete button on the card in the timeline. Currently there is no support to change the date range in a meal plan.
+To edit the meal in a meal plan simply select the edit button on the card in the timeline. Similarly, to delete a mealplan click the delete button on the card in the timeline. Currently there is no support to change the date range in a meal plan.
 
 !!! warning
     In coming a future release recipes for meals will be restricted to specific categories. 
 
-![](../gifs/meal-plan-demo.gif)
+![](../gifs/meal-plan-demo-v2.gif)

docs/docs/getting-started/migration-imports.md

@@ -1,13 +1,13 @@
 # Migration
 
-### Chowdown
+## Chowdown
+To migrate recipes from a Chowdown 
+  1. Download the code repository as a .zip file
+  2. Upload the .zip file in the Chowdown section in Mealie
+  3. Select import on the newly available migration. 
 
-In the Admin page on the in the Migration section you can provide a URL for a repo hosting a [Chowdown](https://github.com/clarklab/chowdown) repository and Mealie will pull the images and recipes from the instance and automatically import them into the database. Due to the nature of the yaml format you may have mixed results but you should get an error report of the recipes that had errors and will need to be manually added. Note that you can only import the repo as a whole. You cannot import individual recipes. 
+## Nextcloud Recipes
-
+Nextcloud recipes can be imported from a zip file the contains the data stored in Nextcloud. The zip file can be uploaded from the frontend or placed in the data/migrations/nextcloud directory. See the example folder structure below to ensure your recipes are able to be imported. 
-We'd like to support additional migration paths. [See open issues.](https://github.com/hay-kot/mealie/issues)
-
-### Nextcloud Recipes
-Nextcloud recipes can be imported from either a zip file the contains the data stored in Nextcloud. The zip file can be uploaded from the frontend or placed in the data/migrations/Nextcloud directory. See the example folder structure below to ensure your recipes are able to be imported. 
 
 ```
 nextcloud_recipes.zip
@@ -21,6 +21,3 @@ nextcloud_recipes.zip
   └── recipe_3
       └── recipe.json
 ```
-
-**Currently Proposed Are:**
-- Open Eats

docs/docs/getting-started/recipes.md

@@ -10,7 +10,7 @@ Adding a recipe can be as easy as copying the recipe URL into mealie and letting
 ## Recipe Editor
 Recipes can be edited and created via the UI. This is done with both a form based approach where you have a UI to work with as well as with a in browser JSON Editor. The JSON editor allows you to easily copy and paste data from other sources. 
 
-You can also add a custom recipe with the UI editor built into the web view. After logging in as a user you'll have access to the editor to make changes to all the content in the recipe. 
+You can also add a custom recipe with the UI editor built into the web view.
 
 ![](../gifs/editor-demo.gif)
 

docs/docs/getting-started/site-settings.md

@@ -2,18 +2,22 @@
 !!! danger
     As this is still a **BETA** It is recommended that you backup your data often and store in more than one place. Ad-hear to backup best practices with the [3-2-1 Backup Rule](https://en.wikipedia.org/wiki/Backup)
 
+## General Settings
+In your site settings page you can select several options to change the layout of your homepage. You can choose to display the recent recipes, how many cards to show for each section, and which category sections to display. You can additionally select which language to use by default. Note the currently homepage settings are saved in your browser. In the future a database entry will be made for site settings so the homepage is consistent across users.
+
+![](../gifs/homepage-settings-v1.gif)
 
 ## Theme Settings
 Color themes can be created and set from the UI in the settings page. You can select an existing color theme or create a new one. On creation of a new color theme, the default colors will be used, then you can select and save as you'd like. By default the "default" theme will be loaded for all new users visiting the site. All created color themes are available to all users of the site. Theme Colors will be set for both light and dark modes.
 
-![](../gifs/theme-demo.gif)
+![](../gifs/theme-demo-v2.gif)
 
 !!! note
-    Theme data is stored in localstorage in the browser. Calling "Save colors and apply theme will refresh the localstorage with the selected theme as well save the theme to the database. 
+    Theme data is stored in localstorage in the browser. Calling "Save colors and apply theme will refresh the local storage with the selected theme as well save the theme to the database. 
-
-
 
 
+## Backups 
+Site backups can easily be taken and download from the UI. To import, simply select the backup you'd like to restore and check which items you'd like to import. 
 
 ## Meal Planner Webhooks
 Meal planner webhooks are post requests sent from Mealie to an external endpoint. The body of the message is the Recipe JSON of the scheduled meal. If no meal is schedule, no request is sent. The webhook functionality can be enabled or disabled as well as scheduled. Note that you must "Save Webhooks" prior to any changes taking affect server side. 

docs/docs/index.md

@@ -25,9 +25,9 @@
 
 ![Product Name Screen Shot][product-screenshot]
 
-**Mealie** is a self hosted recipe manager and meal planner with a RestAPI backend and a reactive frontend application built in Vue for a pleasant user experience for the whole family. Easily add recipes into your database by providing the url and mealie will automatically import the relevant data or add a family recipe with the UI editor.  
+**Mealie** is a self hosted recipe manager and meal planner with a RestAPI backend and a reactive frontend application built in Vue for a pleasant user experience for the whole family. Easily add recipes into your database by providing the url and Mealie will automatically import the relevant data or add a family recipe with the UI editor. Mealie also provides an API for interactions from 3rd party applications. 
 
-Mealie also provides an API for interactions from 3rd party applications. **Why does my recipe manager need an API?** An API allows integration into applications like [Home Assistant](https://www.home-assistant.io/) that can act as notification engines to provide custom notifications based of Meal Plan data to remind you to defrost the chicken, marinade the steak, or start the CrockPot. Additionally, you can access any available API from the backend server. To explore the API spin up your server and navigate to http://yourserver.com/docs for interactive API documentation. 
+**Why does my recipe manager need an API?** An API allows integration into applications like [Home Assistant](https://www.home-assistant.io/) that can act as notification engines to provide custom notifications based of Meal Plan data to remind you to defrost the chicken, marinade the steak, or start the CrockPot. Additionally, you can access any available API from the backend server. To explore the API spin up your server and navigate to http://yourserver.com/docs for interactive API documentation. 
 
 [Remember to join the Discord](https://discord.gg/R6QDyJgbD2)! 
 
@@ -35,29 +35,37 @@ Mealie also provides an API for interactions from 3rd party applications. **Why
     In some of the demo gifs the styling may be different than the finale application. demos were done during development prior to finale styling.
 
 !!! warning
-    Note that this is a **ALPHA** release and that means things may break and or change down the line. I'll do my best to make sure that any API changes are thoughtful and necessary in order not to break things. Additionally, I'll do my best to provide a migration path if the database schema ever changes. That said, one of the nice things about MongoDB is that it's flexible!
+    Note that this is a **BETA** release and that means things may break and or change down the line. I'll do my best to make sure that any API changes are thoughtful and necessary in order not to break things. Additionally, I'll do my best to provide a migration path if the database schema ever changes. Do not use programs like watchtower to auto update your container. You **WILL** run into issues if you do this,
 
 
 
 ### Main Features
 #### Recipes
   - Automatic web scrapping for common recipe platforms
-  - Interactive API Documentation thanks to [FastAPI](https://fastapi.tiangolo.com/) and [Swagger](https://petstore.swagger.io/)
+  - UI recipe editor
-  - UI Recipe Editor
+  - JSON recipe editor
-  - JSON Recipe Editor in browser
+  - Additional recipe data
-  - Custom tags and categories
+    - custom notes
-  - Rate recipes
+    - ratings
-  - Add notes to recipes
+    - categories and tags
-  - Migration From Other Platforms
+    - total, cook, and prep time indicators
+  - View recipes by category
+  - Basic fuzzy search
+  - Migration from other platforms
     - Chowdown
-    - Open Eats - **Coming Soon**
+    - Nextcloud Cookbook
 #### Meal Planner
-  - Random Meal plan generation based off categories
+  - Random meal plan generation
-  - Expose notes in the API to allow external applications to access relevant information for meal plans
+
+#### API
+  - The entire application is built on a restful API and can be accessed by the user
+  - Scheduled Webhooks
+  - Interactive API Documentation thanks to [FastAPI](https://fastapi.tiangolo.com/) and [Swagger](https://petstore.swagger.io/)
+  - Custom "API Extras" in recipes for custom key/value pairs to extendable API uses
   
 #### Database Import / Export
-  - Easily Import / Export your recipes from the UI
+  - Easily import / export your recipes from the UI
-  - Export recipes in markdown format for universal access
+  - Export recipes in any format for universal access using Jinja2
     - Use the default or a custom jinja2 template
 
 ### Built With
@@ -65,7 +73,6 @@ Mealie also provides an API for interactions from 3rd party applications. **Why
 * [Vue.js](https://vuejs.org/)
 * [Vuetify](https://vuetifyjs.com/en/)
 * [FastAPI](https://fastapi.tiangolo.com/)
-* [MongoDB](https://www.mongodb.com/)
 * [Docker](https://www.docker.com/)
 
 

docs/docs/roadmap.md

@@ -1,52 +1,4 @@
 # Development Road Map
 
-!!! Current Release
-    v0.1.0 BETA - This is technically a pre-release, as such take care to backup data and be aware that breaking changes in future releases are a real possibility.
 
-
+See the [Github META issue for tracking the Road Map](https://github.com/hay-kot/mealie/issues/122)
-Feature placement is not set in stone. This is much more of a guideline than anything else.
-
-## v x.x.x - No planned target, but eventually...
-
-### Frontend
-- [ ] Login / Logout Navigation
-    * [ ] Initial Page
-    * [ ] Logic / Function Calls
-    * [ ] Password Reset
-### Backend
-- [ ] Image Minification
-- [ ] User Setup
-    * [ ] Authentication
-    * [ ] Default Admin/Superuser Account
-    * [ ] Password Reset
-    * [ ] User Accounts
-    * [ ] Edit / Delete
-
-## v0.2.0 - Targets
-
-
-!!! error "MAJOR BREAKING CHANGE"
-        MongoDB will no longer be supported as of v0.2.0. Review the database migration page for details on migration to SQL (It's very easy)
-
-## New Features
-### Frontend
-- [ ] Advanced search
-    - [ ] Category Filter
-    - [ ] Tag Filter
-    - [x] Fuzzy Search
-- [ ] Backup card redesign
-- [ ] Additional Backup / Import Features
-    - [ ] Import Recipes Force/Rebase options
-    - [ ] Upload .zip file
-- [ ] Improved Color Picker
-- [ ] Meal Plan redesign
-### Backend
-- [ ] PostgreSQL Support
-- [ ] Setup SQL Migrations
-
-## Breaking Changes
-- Internal port 9000 changed to port 80 for better Traefik support
-- MongoDB support dropped
-## Code Chores
-- [ ] Remove MongoDB Interface Code
-- [ ] Dockerfile Trim

docs/mkdocs.yml

@@ -38,7 +38,7 @@ nav:
       - API Documentation: "api/docs/index.html"
   - Contributors Guide:
       - Non-Code: "contributors/non-coders.md"
-      - Translating: "contributors/translating"
+      - Translating: "contributors/translating.md"
       - Developers Guide:
           - Code Contributions: "contributors/developers-guide/code-contributions.md"
           - Dev Getting Started: "contributors/developers-guide/starting-dev-server.md"

frontend/.env.development

@@ -1 +1 @@
-VUE_APP_API_BASE_URL=http://10.10.10.12:9921
+VUE_APP_API_BASE_URL=http://localhost:9000

frontend/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-    "cSpell.enableFiletypes": [
-        "!javascript"
-    ]
-}

frontend/package-lock.json

@@ -1966,6 +1966,16 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1992,6 +2002,53 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -2008,6 +2065,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -2024,6 +2091,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.1.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -10175,6 +10254,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -11521,87 +11605,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.1.2",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
-      "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
@@ -11641,6 +11644,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "vuetify": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.4.2.tgz",

frontend/package.json

@@ -17,6 +17,7 @@
     "vue": "^2.6.11",
     "vue-i18n": "^8.22.4",
     "vue-router": "^3.4.9",
+    "vuedraggable": "^2.24.3",
     "vuetify": "^2.4.2",
     "vuex": "^3.6.0",
     "vuex-persistedstate": "^4.0.0-beta.3"
@@ -54,5 +55,11 @@
     "> 1%",
     "last 2 versions",
     "not dead"
-  ]
+  ],
+  "prettier": {
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": false
+  }
 }

frontend/public/index.html

@@ -8,6 +8,7 @@
     <title> Mealie </title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+    <link rel="stylesheet" href="./styles/global.css">
   </head>
   <body>
     <noscript>

frontend/public/styles/global.css

@@ -0,0 +1,11 @@
+*::-webkit-scrollbar {
+  width: 0.25rem;
+}
+
+*::-webkit-scrollbar-track {
+  background: lightgray;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: grey;
+}

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-app-bar dense app color="primary" dark class="d-print-none">
+    <v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
       <v-btn @click="$router.push('/')" icon>
         <v-icon size="40"> mdi-silverware-variant </v-icon>
       </v-btn>
@@ -17,7 +17,7 @@
           @selected="navigateFromSearch"
         />
       </v-expand-x-transition>
-      <v-btn icon @click="toggleSearch">
+      <v-btn icon @click="search = !search">
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
 
@@ -58,6 +58,8 @@ export default {
   mounted() {
     this.$store.dispatch("initTheme");
     this.$store.dispatch("requestRecentRecipes");
+    this.$store.dispatch("requestHomePageSettings");
+    this.$store.dispatch("initLang");
     this.darkModeSystemCheck();
     this.darkModeAddEventListener();
   },
@@ -84,14 +86,6 @@ export default {
         this.darkModeSystemCheck();
       });
     },
-
-    toggleSearch() {
-      if (this.search === true) {
-        this.search = false;
-      } else {
-        this.search = true;
-      }
-    },
     navigateFromSearch(slug) {
       this.$router.push(`/recipe/${slug}`);
     },
@@ -100,16 +94,5 @@ export default {
 </script>
 
 <style>
-/* Scroll Bar PageSettings */
-body::-webkit-scrollbar {
-  width: 0.25rem;
-}
 
-body::-webkit-scrollbar-track {
-  background: grey;
-}
-
-body::-webkit-scrollbar-thumb {
-  background: black;
-}
 </style>

frontend/src/api.js

@@ -4,6 +4,9 @@ import mealplan from "./api/mealplan";
 import settings from "./api/settings";
 import themes from "./api/themes";
 import migration from "./api/migration";
+import myUtils from "./api/upload";
+import category from "./api/category";
+import meta from "./api/meta";
 
 // import api from "../api";
 
@@ -14,4 +17,7 @@ export default {
   settings: settings,
   themes: themes,
   migrations: migration,
+  utils: myUtils,
+  categories: category,
+  meta: meta,
 };

frontend/src/api/api-utils.js

@@ -16,8 +16,8 @@ function processResponse(response) {
 }
 
 const apiReq = {
-  post: async function(url, data) {
+  post: async function (url, data) {
-    let response = await axios.post(url, data).catch(function(error) {
+    let response = await axios.post(url, data).catch(function (error) {
       if (error.response) {
         processResponse(error.response);
         return error.response;
@@ -27,8 +27,8 @@ const apiReq = {
     return response;
   },
 
-  get: async function(url, data) {
+  put: async function (url, data) {
-    let response = await axios.get(url, data).catch(function(error) {
+    let response = await axios.put(url, data).catch(function (error) {
       if (error.response) {
         processResponse(error.response);
         return response;
@@ -38,8 +38,19 @@ const apiReq = {
     return response;
   },
 
-  delete: async function(url, data) {
+  get: async function (url, data) {
-    let response = await axios.delete(url, data).catch(function(error) {
+    let response = await axios.get(url, data).catch(function (error) {
+      if (error.response) {
+        processResponse(error.response);
+        return response;
+      } else return;
+    });
+    // processResponse(response);
+    return response;
+  },
+
+  delete: async function (url, data) {
+    let response = await axios.delete(url, data).catch(function (error) {
       if (error.response) {
         processResponse(error.response);
         return response;

frontend/src/api/backup.js

@@ -6,10 +6,11 @@ const backupBase = baseURL + "backups/";
 
 const backupURLs = {
   // Backup
-  available: `${backupBase}available/`,
+  available: `${backupBase}available`,
-  createBackup: `${backupBase}export/database/`,
+  createBackup: `${backupBase}export/database`,
-  importBackup: (fileName) => `${backupBase}${fileName}/import/`,
+  importBackup: (fileName) => `${backupBase}${fileName}/import`,
-  deleteBackup: (fileName) => `${backupBase}${fileName}/delete/`,
+  deleteBackup: (fileName) => `${backupBase}${fileName}/delete`,
+  downloadBackup: (fileName) => `${backupBase}${fileName}/download`,
 };
 
 export default {
@@ -28,15 +29,12 @@ export default {
     await apiReq.delete(backupURLs.deleteBackup(fileName));
   },
 
-  async create(tag, template) {
+  async create(data) {
-    if (typeof template == String) {
+    let response = apiReq.post(backupURLs.createBackup, data);
-      template = [template];
-    }
-    console.log(tag, template);
-    let response = apiReq.post(backupURLs.createBackup, {
-      tag: tag,
-      template: template,
-    });
     return response;
   },
+  async download(fileName) {
+    let response = await apiReq.get(backupURLs.downloadBackup(fileName));
+    return response.data;
+  },
 };

frontend/src/api/category.js

@@ -0,0 +1,25 @@
+import { baseURL } from "./api-utils";
+import { apiReq } from "./api-utils";
+
+const prefix = baseURL + "categories";
+
+const categoryURLs = {
+  get_all: `${prefix}`,
+  get_category: (category) => `${prefix}/${category}`,
+  delete_category: (category) => `${prefix}/${category}`,
+};
+
+export default {
+  async get_all() {
+    let response = await apiReq.get(categoryURLs.get_all);
+    return response.data;
+  },
+  async get_recipes_in_category(category) {
+    let response = await apiReq.get(categoryURLs.get_category(category));
+    return response.data;
+  },
+  async delete(category) {
+    let response = await apiReq.delete(categoryURLs.delete_category(category));
+    return response.data;
+  },
+};

frontend/src/api/mealplan.js

@@ -1,16 +1,16 @@
 import { baseURL } from "./api-utils";
 import { apiReq } from "./api-utils";
 
-const mealplanBase = baseURL + "meal-plan/";
+const prefix = baseURL + "meal-plans/";
 
 const mealPlanURLs = {
   // Meals
-  create: `${mealplanBase}create/`,
+  all: `${prefix}all`,
-  today: `${mealplanBase}today/`,
+  create: `${prefix}create`,
-  thisWeek: `${mealplanBase}this-week/`,
+  thisWeek: `${prefix}this-week`,
-  all: `${mealplanBase}all/`,
+  update: (planID) => `${prefix}${planID}`,
-  delete: (planID) => `${mealplanBase}${planID}/delete/`,
+  delete: (planID) => `${prefix}${planID}`,
-  update: (planID) => `${mealplanBase}${planID}/update/`,
+  today: `${prefix}today`,
 };
 
 export default {
@@ -40,7 +40,7 @@ export default {
   },
 
   async update(id, body) {
-    let response = await apiReq.post(mealPlanURLs.update(id), body);
+    let response = await apiReq.put(mealPlanURLs.update(id), body);
     return response;
   },
 };

frontend/src/api/meta.js

@@ -0,0 +1,15 @@
+import { baseURL } from "./api-utils";
+import { apiReq } from "./api-utils";
+
+const prefix = baseURL + "debug";
+
+const debugURLs = {
+  version: `${prefix}/version`,
+};
+
+export default {
+  async get_version() {
+    let response = await apiReq.get(debugURLs.version);
+    return response.data;
+  },
+};

frontend/src/api/migration.js

@@ -2,42 +2,27 @@ import { baseURL } from "./api-utils";
 import { apiReq } from "./api-utils";
 import { store } from "../store/store";
 
-const migrationBase = baseURL + "migration/";
+const migrationBase = baseURL + "migrations";
 
 const migrationURLs = {
-  upload: migrationBase + "upload/",
+  // New
-  delete: (file) => `${migrationBase}${file}/delete/`,
+  all: migrationBase,
-  chowdownURL: migrationBase + "chowdown/repo/",
+  delete: (folder, file) => `${migrationBase}/${folder}/${file}/delete`,
-  nextcloudAvaiable: migrationBase + "nextcloud/available/",
+  import: (folder, file) => `${migrationBase}/${folder}/${file}/import`,
-  nextcloudImport: (selection) =>
-    `${migrationBase}nextcloud/${selection}/import/`,
 };
 
 export default {
-  async migrateChowdown(repoURL) {
+  async getMigrations() {
-    let postBody = { url: repoURL };
+    let response = await apiReq.get(migrationURLs.all);
-    let response = await apiReq.post(migrationURLs.chowdownURL, postBody);
+    return response.data;
+  },
+  async delete(folder, file) {
+    let response = await apiReq.delete(migrationURLs.delete(folder, file));
+    return response.data;
+  },
+  async import(folder, file) {
+    let response = await apiReq.post(migrationURLs.import(folder, file));
     store.dispatch("requestRecentRecipes");
     return response.data;
   },
-  async getNextcloudImports() {
-    let response = await apiReq.get(migrationURLs.nextcloudAvaiable);
-    return response.data;
-  },
-  async importNextcloud(selected) {
-    let response = await apiReq.post(migrationURLs.nextcloudImport(selected));
-    return response.data;
-  },
-  async uploadFile(form_data) {
-    let response = await apiReq.post(migrationURLs.upload, form_data, {
-      headers: {
-        "Content-Type": "multipart/form-data",
-      },
-    });
-    return response.data;
-  },
-  async delete(file_folder_name) {
-    let response = await apiReq.delete(migrationURLs.delete(file_folder_name));
-    return response.data;
-  },
 };

frontend/src/api/recipe.js

@@ -4,18 +4,17 @@ import { store } from "../store/store";
 import { router } from "../main";
 import qs from "qs";
 
-const recipeBase = baseURL + "recipe/";
+const prefix = baseURL + "recipes/";
 
 const recipeURLs = {
-  // Recipes
+  allRecipes: baseURL + "recipes",
-  allRecipes: baseURL + "all-recipes/",
+  create: prefix + "create",
-  recipe: (slug) => recipeBase + slug + "/",
+  createByURL: prefix + "create-url",
-  recipeImage: (slug) => recipeBase + "image/" + slug + "/",
+  recipe: (slug) => prefix + slug,
-  createByURL: recipeBase + "create-url/",
+  update: (slug) => prefix + slug,
-  create: recipeBase + "create/",
+  delete: (slug) => prefix + slug,
-  updateImage: (slug) => `${recipeBase}${slug}/update/image/`,
+  recipeImage: (slug) => `${prefix}${slug}/image`,
-  update: (slug) => `${recipeBase}${slug}/update/`,
+  updateImage: (slug) => `${prefix}${slug}/image`,
-  delete: (slug) => `${recipeBase}${slug}/delete/`,
 };
 
 export default {
@@ -43,7 +42,7 @@ export default {
     fd.append("image", fileObject);
     fd.append("extension", fileObject.name.split(".").pop());
 
-    let response = apiReq.post(recipeURLs.updateImage(recipeSlug), fd);
+    let response = apiReq.put(recipeURLs.updateImage(recipeSlug), fd);
 
     return response;
   },
@@ -51,7 +50,7 @@ export default {
   async update(data) {
     const recipeSlug = data.slug;
 
-    let response = await apiReq.post(recipeURLs.update(recipeSlug), data);
+    let response = await apiReq.put(recipeURLs.update(recipeSlug), data);
     store.dispatch("requestRecentRecipes");
     return response.data;
   },

frontend/src/api/settings.js

@@ -1,12 +1,12 @@
 import { baseURL } from "./api-utils";
 import { apiReq } from "./api-utils";
 
-const settingsBase = baseURL + "site-settings/";
+const settingsBase = baseURL + "site-settings";
 
 const settingsURLs = {
   siteSettings: `${settingsBase}`,
-  updateSiteSettings: `${settingsBase}update/`,
+  updateSiteSettings: `${settingsBase}`,
-  testWebhooks: `${settingsBase}webhooks/test/`,
+  testWebhooks: `${settingsBase}/webhooks/test`,
 };
 
 export default {
@@ -21,7 +21,7 @@ export default {
   },
 
   async update(body) {
-    let response = await apiReq.post(settingsURLs.updateSiteSettings, body);
+    let response = await apiReq.put(settingsURLs.updateSiteSettings, body);
     return response.data;
   },
 };

frontend/src/api/themes.js

@@ -1,14 +1,14 @@
 import { baseURL } from "./api-utils";
 import { apiReq } from "./api-utils";
 
-const themesBase = baseURL + "site-settings/";
+const prefix = baseURL + "themes/";
 
 const settingsURLs = {
-  allThemes: `${themesBase}themes/`,
+  allThemes: `${baseURL}themes`,
-  specificTheme: (themeName) => `${themesBase}themes/${themeName}/`,
+  specificTheme: (themeName) => `${prefix}themes/${themeName}`,
-  createTheme: `${themesBase}themes/create/`,
+  createTheme: `${prefix}themes/create`,
-  updateTheme: (themeName) => `${themesBase}themes/${themeName}/update/`,
+  updateTheme: (themeName) => `${prefix}themes/${themeName}`,
-  deleteTheme: (themeName) => `${themesBase}themes/${themeName}/delete/`,
+  deleteTheme: (themeName) => `${prefix}themes/${themeName}`,
 };
 
 export default {
@@ -32,7 +32,7 @@ export default {
       name: themeName,
       colors: colors,
     };
-    let response = await apiReq.post(settingsURLs.updateTheme(themeName), body);
+    let response = await apiReq.put(settingsURLs.updateTheme(themeName), body);
     return response.data;
   },
 

frontend/src/api/upload.js

@@ -0,0 +1,13 @@
+import { apiReq } from "./api-utils";
+
+export default {
+  // import api from "../api";
+  async uploadFile(url, fileObject) {
+    let response = await apiReq.post(url, fileObject, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+    return response.data;
+  },
+};

frontend/src/components/MealPlan/MealPlanCard.vue

@@ -1,10 +1,6 @@
 <template>
   <v-row>
-    <MealSelect
+    <SearchDialog ref="mealselect" @select="setSlug" />
-      :forceDialog="dialog"
-      @close="dialog = false"
-      @select="setSlug($event)"
-    />
     <v-col
       cols="12"
       sm="12"
@@ -19,10 +15,10 @@
           <v-img
             height="200"
             :src="getImage(meal.slug)"
-            @click="selectRecipe(index)"
+            @click="openSearch(index)"
           ></v-img>
           <v-card-title class="my-n3 mb-n6">{{ meal.dateText }}</v-card-title>
-          <v-card-subtitle> {{ meal.slug }}</v-card-subtitle>
+          <v-card-subtitle> {{ meal.name }}</v-card-subtitle>
         </v-card>
       </v-hover>
     </v-col>
@@ -31,10 +27,10 @@
 
 <script>
 import utils from "../../utils";
-import MealSelect from "./MealSelect";
+import SearchDialog from "../UI/SearchDialog";
 export default {
   components: {
-    MealSelect,
+    SearchDialog,
   },
   props: {
     value: Array,
@@ -44,7 +40,6 @@ export default {
       recipeData: [],
       cardData: [],
       activeIndex: 0,
-      dialog: false,
     };
   },
   methods: {
@@ -53,20 +48,14 @@ export default {
         return utils.getImageURL(slug);
       }
     },
-    setSlug(slug) {
+    setSlug(name, slug) {
       let index = this.activeIndex;
       this.value[index]["slug"] = slug;
+      this.value[index]["name"] = name;
     },
-    selectRecipe(index) {
+    openSearch(index) {
       this.activeIndex = index;
-      this.dialog = true;
+      this.$refs.mealselect.open();
-    },
-    getProperty(index, property) {
-      try {
-        return this.recipeData[index][property];
-      } catch {
-        return null;
-      }
     },
   },
 };

frontend/src/components/MealPlan/MealPlanEditor.vue

@@ -1,13 +1,17 @@
 <template>
   <v-card>
-    <v-card-title class="headline"> {{$t('meal-plan.edit-meal-plan')}} </v-card-title>
+    <v-card-title class="headline">
+      {{ $t("meal-plan.edit-meal-plan") }}
+    </v-card-title>
     <v-divider></v-divider>
 
     <v-card-text>
       <MealPlanCard v-model="mealPlan.meals" />
       <v-row align="center" justify="end">
         <v-card-actions>
-          <v-btn color="success" text @click="update"> {{$t('general.update')}} </v-btn>
+          <v-btn color="success" text @click="update">
+            {{ $t("general.update") }}
+          </v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-row>

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-card-title class="headline">
-      {{$t('meal-plan.create-a-new-meal-plan')}}
+      {{ $t("meal-plan.create-a-new-meal-plan") }}
     </v-card-title>
     <v-divider></v-divider>
     <v-card-text>
@@ -71,9 +71,11 @@
     <v-row align="center" justify="end">
       <v-card-actions>
         <v-btn color="success" @click="random" v-if="meals[1]" text>
-          {{$t('general.random')}}
+          {{ $t("general.random") }}
+        </v-btn>
+        <v-btn color="success" @click="save" text>
+          {{ $t("general.save") }}
         </v-btn>
-        <v-btn color="success" @click="save" text> {{$t('general.save')}} </v-btn>
 
         <v-spacer></v-spacer>
         <v-btn icon @click="show = !show"> </v-btn>
@@ -149,11 +151,13 @@ export default {
   methods: {
     get_random(list) {
       const object = list[Math.floor(Math.random() * list.length)];
-      return object.slug;
+      return object;
     },
     random() {
       this.meals.forEach((element, index) => {
-        this.meals[index]["slug"] = this.get_random(this.items);
+        let recipe = this.get_random(this.items);
+        this.meals[index]["slug"] = recipe.slug;
+        this.meals[index]["name"] = recipe.name;
       });
     },
     processTime(index) {

frontend/src/components/MealPlan/MealSelect.vue

@@ -1,100 +0,0 @@
-<template>
-  <v-row justify="center">
-    <v-dialog v-model="dialog" persistent max-width="800">
-      <v-card>
-        <v-card-title class="headline"> {{$t('meal-plan.choose-a-recipe')}} </v-card-title>
-        <v-card-text>
-          <v-autocomplete
-            :items="availableRecipes"
-            v-model="selected"
-            clearable
-            return
-            dense
-            hide-details
-            hide-selected
-            item-text="slug"
-            :label="$t('search.search-for-a-recipe')"
-            single-line
-          >
-            <template v-slot:no-data>
-              <v-list-item>
-                <v-list-item-title :v-html="$t('search.search-for-your-favorite-recipe')">
-                </v-list-item-title>
-              </v-list-item>
-            </template>
-            <template v-slot:item="{ item }">
-              <v-row align="center" @click="dialog = false">
-                <v-col sm="2">
-                  <v-img
-                    max-height="100"
-                    max-width="100"
-                    :src="getImage(item.image)"
-                  ></v-img>
-                </v-col>
-                <v-col sm="10">
-                  <h3>
-                    {{ item.name }}
-                  </h3>
-                </v-col>
-              </v-row>
-            </template>
-          </v-autocomplete>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="secondary" text @click="dialog = false"> {{$t('general.close')}} </v-btn>
-          <v-btn color="secondary" text @click="dialog = false"> {{$t('general.select')}} </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-row>
-</template>
-
-<script>
-import utils from "../../utils";
-export default {
-  props: {
-    forceDialog: Boolean,
-  },
-
-  data() {
-    return {
-      dialog: false,
-      selected: "",
-    };
-  },
-
-  watch: {
-    forceDialog() {
-      this.dialog = this.forceDialog;
-    },
-    selected() {
-      if (this.selected) {
-        this.$emit("select", this.selected);
-      }
-    },
-    dialog() {
-      if (this.dialog === false) {
-        this.$emit("close");
-      } else {
-        this.selected = "";
-      }
-    },
-  },
-
-  computed: {
-    availableRecipes() {
-      return this.$store.getters.getRecentRecipes;
-    },
-  },
-
-  methods: {
-    getImage(slug) {
-      return utils.getImageURL(slug);
-    },
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/Recipe/RecipeEditor/ExtrasEditor.vue

@@ -2,11 +2,11 @@
   <div class="text-center">
     <v-dialog v-model="dialog" width="700">
       <template v-slot:activator="{ on, attrs }">
-        <v-btn color="accent" dark v-bind="attrs" v-on="on"> API Extras </v-btn>
+        <v-btn color="accent" dark v-bind="attrs" v-on="on"> {{ $t("recipe.api-extras") }} </v-btn>
       </template>
 
       <v-card>
-        <v-card-title> API Extras </v-card-title>
+        <v-card-title> {{ $t("recipe.api-extras") }} </v-card-title>
 
         <v-card-text :key="formKey">
           <v-row
@@ -28,14 +28,14 @@
             </v-col>
             <v-col cols="12" md="3" sm="6">
               <v-text-field
-                label="Object Key"
+                :label="$t('recipe.object-key')"
                 :value="key"
                 @input="updateKey(index)"
               >
               </v-text-field>
             </v-col>
             <v-col cols="12" md="8" sm="6">
-              <v-text-field label="Object Value" v-model="extras[key]">
+              <v-text-field :label="$t('recipe.object-value')" v-model="extras[key]">
               </v-text-field>
             </v-col>
           </v-row>
@@ -46,17 +46,17 @@
         <v-card-actions>
           <v-form ref="addKey">
             <v-text-field
-              label="New Key Name"
+              :label="$t('recipe.new-key-name')"
               v-model="newKeyName"
               class="pr-4"
               :rules="[rules.required, rules.whiteSpace]"
             ></v-text-field>
           </v-form>
-          <v-btn color="info" text @click="append"> Add Key</v-btn>
+          <v-btn color="info" text @click="append"> {{ $t("recipe.add-key") }} </v-btn>
 
           <v-spacer></v-spacer>
 
-          <v-btn color="success" text @click="save"> Save </v-btn>
+          <v-btn color="success" text @click="save"> {{ $t("general.save") }} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -74,9 +74,9 @@ export default {
       dialog: false,
       formKey: 1,
       rules: {
-        required: (v) => !!v || "Key Name Required",
+        required: (v) => !!v || this.$i18n.t("recipe.key-name-required"),
         whiteSpace: (v) =>
-          !v || v.split(" ").length <= 1 || "No White Space Allowed",
+          !v || v.split(" ").length <= 1 || this.$i18n.t("recipe.no-white-space-allowed"),
       },
     };
   },

frontend/src/components/Recipe/RecipeEditor/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-form ref="form">
     <v-card-text>
       <v-row dense>
         <v-col cols="3"></v-col>
@@ -12,35 +12,47 @@
           ></v-file-input>
         </v-col>
         <v-col cols="3"></v-col>
-        <v-row>
-          <v-col>
-            <v-text-field
-              label="Total Time"
-              v-model="value.totalTime"
-            ></v-text-field>
-          </v-col>
-          <v-col
-            ><v-text-field
-              label="Prep Time"
-              v-model="value.prepTime"
-            ></v-text-field
-          ></v-col>
-          <v-col
-            ><v-text-field
-              label="Cook Time / Perform Time"
-              v-model="value.performTime"
-            ></v-text-field
-          ></v-col>
-        </v-row>
       </v-row>
-      <v-text-field class="my-3" :label="$t('recipe.recipe-name')" v-model="value.name">
+      <v-row dense>
+        <v-col>
+          <v-text-field
+            :label="$t('recipe.total-time')"
+            v-model="value.totalTime"
+          ></v-text-field>
+        </v-col>
+        <v-col
+          ><v-text-field
+            :label="$t('recipe.prep-time')"
+            v-model="value.prepTime"
+          ></v-text-field
+        ></v-col>
+        <v-col
+          ><v-text-field
+            :label="$t('recipe.perform-time')"
+            v-model="value.performTime"
+          ></v-text-field
+        ></v-col>
+      </v-row>
+      <v-text-field
+        class="my-3"
+        :label="$t('recipe.recipe-name')"
+        v-model="value.name"
+        :rules="[rules.required]"
+      >
       </v-text-field>
-      <v-textarea height="100" :label="$t('recipe.description')" v-model="value.description">
+      <v-textarea
+        height="100"
+        :label="$t('recipe.description')"
+        v-model="value.description"
+      >
       </v-textarea>
       <div class="my-2"></div>
       <v-row dense disabled>
         <v-col sm="5">
-          <v-text-field :label="$t('recipe.servings')" v-model="value.recipeYield">
+          <v-text-field
+            :label="$t('recipe.servings')"
+            v-model="value.recipeYield"
+          >
           </v-text-field>
         </v-col>
         <v-col></v-col>
@@ -54,34 +66,50 @@
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
-          <h2 class="mb-4">{{$t('recipe.ingredients')}}</h2>
+          <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
-          <div
+          <draggable
-            v-for="(ingredient, index) in value.recipeIngredient"
+            v-model="value.recipeIngredient"
-            :key="generateKey('ingredient', index)"
+            @start="drag = true"
+            @end="drag = false"
           >
-            <v-row align="center">
+            <transition-group
-              <v-btn
+              type="transition"
-                fab
+              :name="!drag ? 'flip-list' : null"
-                x-small
+            >
-                color="white"
+              <div
-                class="mr-2"
+                v-for="(ingredient, index) in value.recipeIngredient"
-                elevation="0"
+                :key="generateKey('ingredient', index)"
-                @click="removeIngredient(index)"
               >
-                <v-icon color="error">mdi-delete</v-icon>
+                <v-row align="center">
-              </v-btn>
+                  <v-text-field
-              <v-text-field
+                    class="mr-2"
-                :label="$t('recipe.ingredient')"
+                    :label="$t('recipe.ingredient')"
-                v-model="value.recipeIngredient[index]"
+                    v-model="value.recipeIngredient[index]"
-              ></v-text-field>
+                    append-outer-icon="mdi-menu"
-            </v-row>
+                    mdi-move-resize
-          </div>
+                    solo
+                    dense
+                  >
+                    <v-icon
+                      class="mr-n1"
+                      slot="prepend"
+                      color="error"
+                      @click="removeIngredient(index)"
+                    >
+                      mdi-delete
+                    </v-icon>
+                  </v-text-field>
+                </v-row>
+              </div>
+            </transition-group>
+          </draggable>
+
           <v-btn color="secondary" fab dark small @click="addIngredient">
             <v-icon>mdi-plus</v-icon>
           </v-btn>
           <BulkAdd @bulk-data="appendIngredients" />
 
-          <h2 class="mt-6">{{$t('recipe.categories')}}</h2>
+          <h2 class="mt-6">{{ $t("recipe.categories") }}</h2>
           <v-combobox
             dense
             multiple
@@ -89,6 +117,11 @@
             item-color="secondary"
             deletable-chips
             v-model="value.categories"
+            hide-selected
+            :items="categories"
+            text="name"
+            :search-input.sync="categoriesSearchInput"
+            @change="categoriesSearchInput = ''"
           >
             <template v-slot:selection="data">
               <v-chip
@@ -103,8 +136,18 @@
             </template>
           </v-combobox>
 
-          <h2 class="mt-4">{{$t('recipe.tags')}}</h2>
+          <h2 class="mt-4">{{ $t("recipe.tags") }}</h2>
-          <v-combobox dense multiple chips deletable-chips v-model="value.tags">
+          <v-combobox
+            dense
+            multiple
+            chips
+            deletable-chips
+            v-model="value.tags"
+            hide-selected
+            :items="tags"
+            :search-input.sync="tagsSearchInput"
+            @change="tagssSearchInput = ''"
+          >
             <template v-slot:selection="data">
               <v-chip
                 :input-value="data.selected"
@@ -118,7 +161,7 @@
             </template>
           </v-combobox>
 
-          <h2 class="my-4">{{$t('recipe.notes')}}</h2>
+          <h2 class="my-4">{{ $t("recipe.notes") }}</h2>
           <v-card
             class="mt-1"
             v-for="(note, index) in value.notes"
@@ -137,12 +180,15 @@
                   <v-icon color="error">mdi-delete</v-icon>
                 </v-btn>
                 <v-text-field
-                  label="Title"
+                  :label="$t('recipe.title')"
                   v-model="value.notes[index]['title']"
                 ></v-text-field>
               </v-row>
 
-              <v-textarea :label="$t('recipe.note')" v-model="value.notes[index]['text']">
+              <v-textarea
+                :label="$t('recipe.note')"
+                v-model="value.notes[index]['text']"
+              >
               </v-textarea>
             </v-card-text>
           </v-card>
@@ -155,7 +201,7 @@
         <v-divider class="my-divider" :vertical="true"></v-divider>
 
         <v-col cols="12" sm="12" md="8" lg="8">
-          <h2 class="mb-4">{{$t('recipe.instructions')}}</h2>
+          <h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
           <div v-for="(step, index) in value.recipeInstructions" :key="index">
             <v-hover v-slot="{ hover }">
               <v-card
@@ -173,7 +219,9 @@
                     @click="removeStep(index)"
                   >
                     <v-icon color="error">mdi-delete</v-icon> </v-btn
-                  >{{ $t('recipe.step-index', {step: index + 1}) }}</v-card-title
+                  >{{
+                    $t("recipe.step-index", { step: index + 1 })
+                  }}</v-card-title
                 >
                 <v-card-text>
                   <v-textarea
@@ -189,13 +237,19 @@
             <v-icon>mdi-plus</v-icon>
           </v-btn>
           <BulkAdd @bulk-data="appendSteps" />
+          <v-text-field
+            v-model="value.orgURL"
+            class="mt-10"
+            :label="$t('recipe.original-url')"
+          ></v-text-field>
         </v-col>
       </v-row>
     </v-card-text>
-  </div>
+  </v-form>
 </template>
 
 <script>
+import draggable from "vuedraggable";
 import api from "../../../api";
 import utils from "../../../utils";
 import BulkAdd from "./BulkAdd";
@@ -204,16 +258,36 @@ export default {
   components: {
     BulkAdd,
     ExtrasEditor,
+    draggable,
   },
   props: {
     value: Object,
   },
   data() {
     return {
+      drag: false,
       fileObject: null,
+      rules: {
+        required: v => !!v || this.$i18n.t("recipe.key-name-required"),
+        whiteSpace: v =>
+          !v ||
+          v.split(" ").length <= 1 ||
+          this.$i18n.t("recipe.no-white-space-allowed"),
+      },
+      categoriesSearchInput: "",
+      tagsSearchInput: "",
+      categories: [],
+      tags: [],
     };
   },
+  mounted() {
+    this.getCategories();
+  },
   methods: {
+    async getCategories() {
+      let response = await api.categories.get_all();
+      this.categories = response.map(cat => cat.name);
+    },
     uploadImage() {
       this.$emit("upload", this.fileObject);
     },
@@ -259,7 +333,7 @@ export default {
 
     appendSteps(steps) {
       let processSteps = [];
-      steps.forEach((element) => {
+      steps.forEach(element => {
         processSteps.push({ text: element });
       });
 
@@ -289,6 +363,13 @@ export default {
     saveExtras(extras) {
       this.value.extras = extras;
     },
+    validateRecipe() {
+      if (this.$refs.form.validate()) {
+        return true;
+      } else {
+        return false;
+      }
+    },
   },
 };
 </script>

frontend/src/components/Recipe/RecipeTimeCard.vue

@@ -20,7 +20,7 @@
           v-if="totalTime"
         ></v-divider>
         <v-col v-if="totalTime">
-          <div><strong> Total Time </strong></div>
+          <div><strong> {{ $t("recipe.total-time") }} </strong></div>
           <div>{{ totalTime }}</div>
         </v-col>
         <v-divider
@@ -30,7 +30,7 @@
           v-if="prepTime"
         ></v-divider>
         <v-col v-if="prepTime">
-          <div><strong> Prep Time </strong></div>
+          <div><strong> {{ $t("recipe.prep-time") }} </strong></div>
           <div>{{ prepTime }}</div>
         </v-col>
         <v-divider
@@ -40,7 +40,7 @@
           v-if="performTime"
         ></v-divider>
         <v-col v-if="performTime">
-          <div><strong> Cook Time </strong></div>
+          <div><strong> {{ $t("recipe.perform-time") }} </strong></div>
           <div>{{ performTime }}</div>
         </v-col>
       </v-row>

frontend/src/components/Recipe/RecipeViewer.vue

@@ -121,7 +121,7 @@
           target="_blank"
           class="rounded-sm mr-4"
         >
-          {{$t('recipe.original-recipe')}}
+          {{$t('recipe.original-url')}}
         </v-btn>
       </v-row>
     </v-card-text>

frontend/src/components/Settings/Backup/AvailableBackupCard.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <ImportDialog
+      :name="selectedName"
+      :date="selectedDate"
+      ref="import_dialog"
+      @import="importBackup"
+      @delete="deleteBackup"
+    />
+    <v-row>
+      <v-col
+        :sm="6"
+        :md="6"
+        :lg="4"
+        :xl="4"
+        v-for="backup in backups"
+        :key="backup.name"
+      >
+        <v-card hover outlined @click="openDialog(backup)">
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="12" sm="2">
+                <v-icon large color="primary"> mdi-backup-restore </v-icon>
+              </v-col>
+              <v-col cols="12" sm="10">
+                <div>
+                  <strong>{{ backup.name }}</strong>
+                </div>
+                <div>{{ readableTime(backup.date) }}</div>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import ImportDialog from "./ImportDialog";
+import api from "../../../api";
+import utils from "../../../utils";
+export default {
+  props: {
+    backups: Array,
+  },
+  components: {
+    ImportDialog,
+  },
+  data() {
+    return {
+      selectedName: "",
+      selectedDate: "",
+      loading: false,
+    };
+  },
+  methods: {
+    openDialog(backup) {
+      this.selectedDate = this.readableTime(backup.date);
+      this.selectedName = backup.name;
+      this.$refs.import_dialog.open();
+    },
+    readableTime(timestamp) {
+      let date = new Date(timestamp);
+      return utils.getDateAsText(date);
+    },
+    async importBackup(data) {
+      this.$emit("loading");
+      let response = await api.backups.import(data.name, data);
+
+      let failed = response.data.failed;
+      let succesful = response.data.successful;
+
+      this.$emit("finished", succesful, failed);
+    },
+    deleteBackup(data) {
+      this.$emit("loading");
+
+      api.backups.delete(data.name);
+      this.selectedBackup = null;
+      this.backupLoading = false;
+
+      this.$emit("finished");
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Backup/ImportDialog.vue

@@ -65,15 +65,15 @@
         <v-divider></v-divider>
 
         <v-card-actions>
-          <v-btn disabled color="success" text @click="raiseEvent('download')">
+          <v-btn color="accent" text :href="`/api/backups/${name}/download`">
-            {{$t('general.download')}}
+            {{ $t("general.download") }}
           </v-btn>
           <v-spacer></v-spacer>
           <v-btn color="error" text @click="raiseEvent('delete')">
-            {{$t('general.delete')}}
+            {{ $t("general.delete") }}
           </v-btn>
-          <v-btn color="success" text @click="raiseEvent('import')">
+          <v-btn color="success" outlined @click="raiseEvent('import')">
-            {{$t('general.import')}}
+            {{ $t("general.import") }}
           </v-btn>
         </v-card-actions>
       </v-card>

frontend/src/components/Settings/Backup/NewBackupCard.vue

@@ -0,0 +1,123 @@
+<template>
+  <v-card :loading="loading">
+    <v-card-title> {{ $t("settings.backup.create-heading") }} </v-card-title>
+    <v-card-text class="mt-n3">
+      <v-text-field
+        dense
+        :label="$t('settings.backup.backup-tag')"
+        v-model="tag"
+      ></v-text-field>
+    </v-card-text>
+    <v-card-actions class="mt-n9">
+      <v-switch v-model="fullBackup" :label="switchLabel"></v-switch>
+      <v-spacer></v-spacer>
+      <v-btn color="success" text @click="createBackup()">
+        {{ $t("general.create") }}
+      </v-btn>
+    </v-card-actions>
+
+    <v-card-text v-if="!fullBackup" class="mt-n6">
+      <v-row>
+        <v-col sm="4">
+          <p>{{ $t("general.options") }}:</p>
+          <v-checkbox
+            v-for="option in options"
+            :key="option.text"
+            class="mb-n4 mt-n3"
+            dense
+            :label="option.text"
+            v-model="option.value"
+          ></v-checkbox>
+        </v-col>
+        <v-col>
+          <p>{{ $t("general.templates") }}:</p>
+          <v-checkbox
+            v-for="template in availableTemplates"
+            :key="template"
+            class="mb-n4 mt-n3"
+            dense
+            :label="template"
+            @click="appendTemplate(template)"
+          ></v-checkbox>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import api from "../../../api";
+export default {
+  data() {
+    return {
+      tag: null,
+      fullBackup: true,
+      loading: false,
+      options: {
+        recipes: {
+          value: true,
+          text: this.$t("general.recipes"),
+        },
+        settings: {
+          value: true,
+          text: this.$t("general.settings"),
+        },
+        themes: {
+          value: true,
+          text: this.$t("general.themes"),
+        },
+      },
+      availableTemplates: [],
+      selectedTemplates: [],
+    };
+  },
+  mounted() {
+    this.getAvailableBackups();
+  },
+  computed: {
+    switchLabel() {
+      if (this.fullBackup) {
+        return this.$t("settings.backup.full-backup");
+      } else return this.$t("settings.backup.partial-backup");
+    },
+  },
+  methods: {
+    async getAvailableBackups() {
+      let response = await api.backups.requestAvailable();
+      response.templates.forEach((element) => {
+        this.availableTemplates.push(element);
+      });
+    },
+    async createBackup() {
+      this.loading = true;
+
+      let data = {
+        tag: this.tag,
+        options: {
+          recipes: this.options.recipes.value,
+          settings: this.options.settings.value,
+          themes: this.options.themes.value,
+        },
+        templates: this.selectedTemplates,
+      };
+
+
+      await api.backups.create(data);
+      this.loading = false;
+
+      this.$emit("created");
+    },
+    appendTemplate(templateName) {
+      if (this.selectedTemplates.includes(templateName)) {
+        let index = this.selectedTemplates.indexOf(templateName);
+        if (index !== -1) {
+          this.selectedTemplates.splice(index, 1);
+        }
+      } else this.selectedTemplates.push(templateName);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Backup/index.vue

@@ -1,42 +1,44 @@
 <template>
   <v-card :loading="backupLoading" class="mt-3">
     <v-card-title class="headline">
-      {{$t('settings.backup-and-exports')}}
+      {{ $t("settings.backup-and-exports") }}
     </v-card-title>
     <v-divider></v-divider>
 
     <v-card-text>
-      <p>
+      <v-row>
-        {{$t('settings.backup-info')}}
+        <v-col cols="12" md="6" ss="12">
-      </p>
+          <NewBackupCard @created="processFinished" />
-
-      <v-row dense align="center">
-        <v-col dense cols="12" sm="12" md="4">
-          <v-text-field v-model="backupTag" :label="$t('settings.backup-tag')"></v-text-field>
         </v-col>
-        <v-col cols="12" sm="12" md="3">
+        <v-col cols="12" md="6" sm="12">
-          <v-combobox
+          <p>
-            auto-select-first
+            {{ $t("settings.backup-info") }}
-            :label="$t('settings.markdown-template')"
+          </p>
-            :items="availableTemplates"
-            v-model="selectedTemplate"
-          ></v-combobox>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="2">
-          <v-btn block text color="accent" @click="createBackup" width="165">
-            {{$t('settings.backup-recipes')}}
-          </v-btn>
         </v-col>
       </v-row>
-      <BackupCard
+      <v-divider class="my-3"></v-divider>
+      <v-card-title class="mt-n6">
+        {{ $t("settings.available-backups") }}
+        <span>
+          <UploadBtn
+            class="mt-1"
+            url="/api/backups/upload"
+            @uploaded="getAvailableBackups"
+          />
+        </span>
+        <v-spacer></v-spacer>
+      </v-card-title>
+      <AvailableBackupCard
         @loading="backupLoading = true"
         @finished="processFinished"
         :backups="availableBackups"
       />
       <SuccessFailureAlert
-        success-header="Successfully Imported"
+        ref="report"
+        :title="$t('settings.backup.backup-restore-report')"
+        :success-header="$t('settings.backup.successfully-imported')"
         :success="successfulImports"
-        failed-header="Failed Imports"
+        :failed-header="$t('settings.backup.failed-imports')"
         :failed="failedImports"
       />
     </v-card-text>
@@ -46,23 +48,23 @@
 <script>
 import api from "../../../api";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
-import BackupCard from "./BackupCard";
+import UploadBtn from "../../UI/UploadBtn";
+import AvailableBackupCard from "./AvailableBackupCard";
+import NewBackupCard from "./NewBackupCard";
 
 export default {
   components: {
     SuccessFailureAlert,
-    BackupCard,
+    UploadBtn,
+    AvailableBackupCard,
+    NewBackupCard,
   },
   data() {
     return {
       failedImports: [],
       successfulImports: [],
       backupLoading: false,
-      backupTag: null,
-      selectedBackup: null,
-      selectedTemplate: null,
       availableBackups: [],
-      availableTemplates: [],
     };
   },
   mounted() {
@@ -85,22 +87,12 @@ export default {
         this.backupLoading = false;
       }
     },
-    async createBackup() {
-      this.backupLoading = true;
-
-      let response = await api.backups.create(this.backupTag, this.templates);
-
-      if (response.status == 201) {
-        this.selectedBackup = null;
-        this.getAvailableBackups();
-        this.backupLoading = false;
-      }
-    },
     processFinished(successful = null, failed = null) {
       this.getAvailableBackups();
       this.backupLoading = false;
       this.successfulImports = successful;
       this.failedImports = failed;
+      this.$refs.report.open();
     },
   },
 };

frontend/src/components/Settings/General/HomePageSettings.vue

@@ -0,0 +1,177 @@
+<template>
+  <v-card flat>
+    <v-card-text>
+      <h2 class="mt-1 mb-1">Home Page</h2>
+      <v-row align="center" justify="center" dense class="mb-n7 pb-n5">
+        <v-col sm="2">
+          <v-switch v-model="showRecent" label="Show Recent"></v-switch>
+        </v-col>
+        <v-col>
+          <v-slider
+            class="pt-4"
+            label="Card Per Section"
+            v-model="showLimit"
+            max="30"
+            dense
+            color="primary"
+            min="3"
+            thumb-label
+          >
+          </v-slider>
+        </v-col>
+        <v-spacer></v-spacer>
+      </v-row>
+    </v-card-text>
+    <v-card-text>
+      <v-row>
+        <v-col>
+          <v-card outlined min-height="250">
+            <v-card-text class="pt-2 pb-1">
+              <h3>Homepage Categories</h3>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-list
+              min-height="200"
+              dense
+              max-height="200"
+              style="overflow:auto"
+            >
+              <v-list-item-group>
+                <draggable
+                  v-model="homeCategories"
+                  group="categories"
+                  :style="{
+                    minHeight: `150px`,
+                  }"
+                >
+                  <v-list-item
+                    v-for="(item, index) in homeCategories"
+                    :key="`${item.name}-${index}`"
+                  >
+                    <v-list-item-icon>
+                      <v-icon>mdi-menu</v-icon>
+                    </v-list-item-icon>
+
+                    <v-list-item-content>
+                      <v-list-item-title v-text="item.name"></v-list-item-title>
+                    </v-list-item-content>
+                    <v-list-item-icon @click="deleteActiveCategory(index)">
+                      <v-icon>mdi-delete</v-icon>
+                    </v-list-item-icon>
+                  </v-list-item>
+                </draggable>
+              </v-list-item-group>
+            </v-list>
+          </v-card>
+        </v-col>
+        <v-col>
+          <v-card outlined min-height="250px">
+            <v-card-text class="pt-2 pb-1">
+              <h3>
+                All Categories
+                <span>
+                  <v-btn absolute right x-small color="success" icon>
+                    <v-icon>mdi-plus</v-icon></v-btn
+                  >
+                </span>
+              </h3>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-list
+              min-height="200"
+              dense
+              max-height="200"
+              style="overflow:auto"
+            >
+              <v-list-item-group>
+                <draggable
+                  v-model="categories"
+                  group="categories"
+                  :style="{
+                    minHeight: `150px`,
+                  }"
+                >
+                  <v-list-item
+                    v-for="(item, index) in categories"
+                    :key="`${item.name}-${index}`"
+                  >
+                    <v-list-item-icon>
+                      <v-icon>mdi-menu</v-icon>
+                    </v-list-item-icon>
+
+                    <v-list-item-content>
+                      <v-list-item-title v-text="item.name"></v-list-item-title>
+                    </v-list-item-content>
+                    <v-list-item-icon
+                      @click="deleteCategoryfromDatabase(item.slug)"
+                    >
+                      <v-icon>mdi-delete</v-icon>
+                    </v-list-item-icon>
+                  </v-list-item>
+                </draggable>
+              </v-list-item-group>
+            </v-list>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="success" @click="saveSettings" class="mr-2">
+        <v-icon left> mdi-content-save </v-icon>
+        {{ $t("general.save") }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import api from "../../../api";
+import draggable from "vuedraggable";
+
+export default {
+  components: {
+    draggable,
+  },
+  data() {
+    return {
+      homeCategories: null,
+      showLimit: null,
+      showRecent: true,
+    };
+  },
+  mounted() {
+    this.getOptions();
+  },
+  computed: {
+    categories() {
+      return this.$store.getters.getCategories;
+    },
+  },
+  methods: {
+    deleteCategoryfromDatabase(category) {
+      api.categories.delete(category);
+      this.$store.dispatch("requestHomePageSettings");
+    },
+    getOptions() {
+      this.showLimit = this.$store.getters.getShowLimit;
+      this.showRecent = this.$store.getters.getShowRecent;
+      this.homeCategories = this.$store.getters.getHomeCategories;
+    },
+    deleteActiveCategory(index) {
+      this.homeCategories.splice(index, 1);
+    },
+    saveSettings() {
+      this.homeCategories.forEach((element, index) => {
+        element.position = index + 1;
+      });
+      this.$store.commit("setShowRecent", this.showRecent);
+      this.$store.commit("setShowLimit", this.showLimit);
+      this.$store.commit("setHomeCategories", this.homeCategories);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/General/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-card>
+    <v-card-title>
+      {{ $t("settings.general-settings") }}
+      <v-spacer></v-spacer>
+      <span>
+        <v-btn class="pt-1" text href="/docs">
+          {{ $t("settings.local-api") }}
+          <v-icon right>mdi-open-in-new</v-icon>
+        </v-btn>
+      </span>
+    </v-card-title>
+    <v-divider></v-divider>
+    <HomePageSettings />
+    <v-divider></v-divider>
+    <v-card-text>
+      <h2 class="mt-1 mb-4">{{ $t("settings.language") }}</h2>
+      <v-row>
+        <v-col cols="3">
+          <v-select
+            dense
+            v-model="selectedLang"
+            :items="langOptions"
+            item-text="name"
+            item-value="value"
+            :label="$t('settings.language')"
+          >
+          </v-select>
+        </v-col>
+      </v-row>
+    </v-card-text>
+    <v-divider></v-divider>
+  </v-card>
+</template>
+
+<script>
+import HomePageSettings from "./HomePageSettings";
+
+export default {
+  components: {
+    HomePageSettings,
+  },
+  data() {
+    return {
+      langOptions: [],
+      selectedLang: "en",
+    };
+  },
+  mounted() {
+    this.getOptions();
+  },
+  watch: {
+    selectedLang() {
+      this.$store.commit("setLang", this.selectedLang);
+    },
+  },
+  methods: {
+    getOptions() {
+      this.langOptions = this.$store.getters.getAllLangs;
+      this.selectedLang = this.$store.getters.getActiveLang;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Migration/ChowdownCard.vue

@@ -1,72 +0,0 @@
-<template>
-  <v-card-text>
-    <p>
-      {{$t('migration.currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration')}}
-    </p>
-    <v-form ref="form">
-      <v-row dense align="center">
-        <v-col cols="12" md="5" sm="5">
-          <v-text-field
-            v-model="repo"
-            :label="$t('migration.chowdown-repo-url')"
-            :rules="[rules.required]"
-          >
-          </v-text-field>
-        </v-col>
-        <v-col cols="12" md="4" sm="5">
-          <v-btn text color="info" @click="importRepo"> {{$t('migration.migrate')}} </v-btn>
-        </v-col>
-      </v-row>
-    </v-form>
-    <v-alert v-if="failedRecipes[1]" outlined dense type="error">
-      <h4>{{$t('migration.failed-recipes')}}</h4>
-      <v-list dense>
-        <v-list-item v-for="fail in this.failedRecipes" :key="fail">
-          {{ fail }}
-        </v-list-item>
-      </v-list>
-    </v-alert>
-    <v-alert v-if="failedImages[1]" outlined dense type="error">
-      <h4>{{$t('migration.failed-images')}}</h4>
-      <v-list dense>
-        <v-list-item v-for="fail in this.failedImages" :key="fail">
-          {{ fail }}
-        </v-list-item>
-      </v-list>
-    </v-alert>
-  </v-card-text>
-</template>
-
-<script>
-import api from "../../../api";
-// import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
-// import TimePicker from "./Webhooks/TimePicker";
-export default {
-  data() {
-    return {
-      processRan: false,
-      failedImages: [],
-      failedRecipes: [],
-      repo: "",
-      rules: {
-        required: (v) => !!v || "Selection Required",
-      },
-    };
-  },
-  methods: {
-    async importRepo() {
-      if (this.$refs.form.validate()) {
-        this.$emit("loading");
-        let response = await api.migrations.migrateChowdown(this.repo);
-        this.failedImages = response.failedImages;
-        this.failedRecipes = response.failedRecipes;
-        this.$emit("finished");
-        this.processRan = true;
-      }
-    },
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/Settings/Migration/MigrationCard.vue

@@ -0,0 +1,96 @@
+<template>
+  <v-card class="my-2" :loading="loading">
+    <v-card-title>
+      {{ title }}
+      <v-spacer></v-spacer>
+      <span>
+        <UploadBtn
+          class="mt-1"
+          :url="`/api/migrations/${folder}/upload`"
+          @uploaded="$emit('refresh')"
+        />
+      </span>
+    </v-card-title>
+    <v-card-text> {{ description }}</v-card-text>
+    <div v-if="available[0]">
+      <v-card
+        outlined
+        v-for="migration in available"
+        :key="migration.name"
+        class="ma-2"
+      >
+        <v-card-text>
+          <v-row align="center">
+            <v-col cols="12" sm="2">
+              <v-icon large color="primary"> mdi-import </v-icon>
+            </v-col>
+            <v-col cols="12" sm="10">
+              <div>
+                <strong>{{ migration.name }}</strong>
+              </div>
+              <div>{{ readableTime(migration.date) }}</div>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions class="mt-n6">
+          <v-spacer></v-spacer>
+          <v-btn color="error" text @click="deleteMigration(migration.name)">
+            {{ $t("general.delete") }}
+          </v-btn>
+          <v-btn color="accent" text @click="importMigration(migration.name)">
+            {{ $t("general.import") }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </div>
+    <div v-else>
+      <v-card class="text-center ma-2">
+        <v-card-text>
+          {{ $t("migration.no-migration-data-available") }}
+        </v-card-text>
+      </v-card>
+    </div>
+    <br />
+  </v-card>
+</template>
+
+<script>
+import UploadBtn from "../../UI/UploadBtn";
+import utils from "../../../utils";
+import api from "../../../api";
+export default {
+  props: {
+    folder: String,
+    title: String,
+    description: String,
+    available: Array,
+  },
+  components: {
+    UploadBtn,
+  },
+  data() {
+    return {
+      loading: false,
+    };
+  },
+  methods: {
+    deleteMigration(file_name) {
+      api.migrations.delete(this.folder, file_name);
+      this.$emit("refresh");
+    },
+    async importMigration(file_name) {
+      this.loading == true;
+      let response = await api.migrations.import(this.folder, file_name);
+      this.$emit("imported", response.successful, response.failed);
+      this.loading == false;
+    },
+    readableTime(timestamp) {
+      let date = new Date(timestamp);
+      return utils.getDateAsText(date);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Migration/NextcloudCard.vue

@@ -1,101 +0,0 @@
-<template>
-  <v-card-text>
-    <p>
-      {{$t('migration.you-can-import-recipes-from-either-a-zip-file-or-a-directory-located-in-the-app-data-migraiton-folder-please-review-the-documentation-to-ensure-your-directory-structure-matches-what-is-expected')}}
-    </p>
-    <v-form ref="form">
-      <v-row align="center">
-        <v-col cols="12" md="5" sm="12">
-          <v-select
-            :items="availableImports"
-            v-model="selectedImport"
-            :label="$t('migration.nextcloud-data')"
-            :rules="[rules.required]"
-          ></v-select>
-        </v-col>
-        <v-col cols="12" md="2" sm="12">
-          <v-btn text color="info" @click="importRecipes"> {{$t('migration.migrate')}} </v-btn>
-        </v-col>
-        <v-col cols="12" md="1" sm="12">
-          <v-btn text color="error" @click="deleteImportValidation">
-            {{$t('general.delete')}}
-          </v-btn>
-          <Confirmation
-            :title="$t('general.delete-data')"
-            :message="$t('migration.delete-confirmation')"
-            color="error"
-            icon="mdi-alert-circle"
-            ref="deleteThemeConfirm"
-            v-on:confirm="deleteImport()"
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col cols="12" md="5" sm="12">
-          <UploadMigrationButton @uploaded="getAvaiableImports" />
-        </v-col>
-      </v-row>
-    </v-form>
-    <SuccessFailureAlert
-      :success-header="$t('migration.successfully-imported-from-nextcloud')"
-      :success="successfulImports"
-      failed-header="$t('migration.failed-imports')"
-      :failed="failedImports"
-    />
-  </v-card-text>
-</template>
-
-<script>
-import api from "../../../api";
-import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
-import UploadMigrationButton from "./UploadMigrationButton";
-import Confirmation from "../../UI/Confirmation";
-export default {
-  components: {
-    SuccessFailureAlert,
-    UploadMigrationButton,
-    Confirmation,
-  },
-  data() {
-    return {
-      successfulImports: [],
-      failedImports: [],
-      availableImports: [],
-      selectedImport: null,
-      rules: {
-        required: (v) => !!v || "Selection Required",
-      },
-    };
-  },
-  async mounted() {
-    this.getAvaiableImports();
-  },
-  methods: {
-    async getAvaiableImports() {
-      this.availableImports = await api.migrations.getNextcloudImports();
-    },
-    async importRecipes() {
-      if (this.$refs.form.validate()) {
-        this.$emit("loading");
-        let data = await api.migrations.importNextcloud(this.selectedImport);
-
-        this.successfulImports = data.successful;
-        this.failedImports = data.failed;
-        this.$emit("finished");
-      }
-    },
-    deleteImportValidation() {
-      if (this.$refs.form.validate()) {
-        this.$refs.deleteThemeConfirm.open();
-      }
-    },
-    async deleteImport() {
-      await api.migrations.delete(this.selectedImport);
-      this.getAvaiableImports();
-    },
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/Settings/Migration/UploadMigrationButton.vue

@@ -1,49 +0,0 @@
-<template>
-  <v-form ref="file">
-    <v-file-input
-      :loading="loading"
-      :label="$t('migration.upload-an-archive')"
-      v-model="file"
-      accept=".zip"
-      @change="upload"
-      :prepend-icon="icon"
-      class="file-icon"
-    >
-    </v-file-input>
-  </v-form>
-</template>
-
-<script>
-import api from "../../../api";
-export default {
-  data() {
-    return {
-      file: null,
-      loading: false,
-      icon: "mdi-paperclip",
-    };
-  },
-  methods: {
-    async upload() {
-      if (this.file != null) {
-        this.loading = true;
-        let formData = new FormData();
-        formData.append("archive", this.file);
-
-        await api.migrations.uploadFile(formData);
-
-        this.loading = false;
-        this.$emit("uploaded");
-        this.file = null;
-        this.icon = "mdi-check";
-      }
-    },
-  },
-};
-</script>
-
-<style>
-.file-icon {
-  transition-duration: 5s;
-}
-</style>

frontend/src/components/Settings/Migration/index.vue

@@ -1,44 +1,96 @@
 <template>
-  <v-card :loading="loading">
+  <div>
-    <v-card-title class="headline"> {{$t('migration.recipe-migration')}} </v-card-title>
+    <SuccessFailureAlert
-    <v-divider></v-divider>
+      :title="$t('migration.migration-report')"
+      ref="report"
+      :failedHeader="$t('migration.failed-imports')"
+      :failed="failed"
+      :successHeader="$t('migration.successful-imports')"
+      :success="success"
+    />
+    <v-card :loading="loading">
+      <v-card-title class="headline">
+        {{ $t("migration.recipe-migration") }}
+      </v-card-title>
+      <v-divider></v-divider>
+    </v-card>
 
-    <v-tabs v-model="tab">
+    <v-row dense>
-      <v-tab>Chowdown</v-tab>
+      <v-col
-      <v-tab>Nextcloud Recipes</v-tab>
+        :sm="12"
-
+        :md="6"
-      <v-tab-item>
+        :lg="4"
-        <ChowdownCard @loading="loading = true" @finished="finished" />
+        :xl="3"
-      </v-tab-item>
+        v-for="migration in migrations"
-      <v-tab-item>
+        :key="migration.title"
-        <NextcloudCard @loading="loading = true" @finished="finished" />
+      >
-      </v-tab-item>
+        <MigrationCard
-    </v-tabs>
+          :title="migration.title"
-  </v-card>
+          :folder="migration.urlVariable"
+          :description="migration.description"
+          :available="migration.availableImports"
+          @refresh="getAvailableMigrations"
+          @imported="showReport"
+        />
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 
 <script>
-import ChowdownCard from "./ChowdownCard";
+import MigrationCard from "./MigrationCard";
-import NextcloudCard from "./NextcloudCard";
+import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
-// import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+import api from "../../../api";
-// import TimePicker from "./Webhooks/TimePicker";
 export default {
   components: {
-    ChowdownCard,
+    MigrationCard,
-    NextcloudCard,
+    SuccessFailureAlert,
   },
   data() {
     return {
-      tab: null,
       loading: false,
+      success: [],
+      failed: [],
+      migrations: {
+        nextcloud: {
+          title: this.$t("migration.nextcloud.title"),
+          description: this.$t("migration.nextcloud.description"),
+          urlVariable: "nextcloud",
+          availableImports: [],
+        },
+        chowdown: {
+          title: this.$t("migration.chowdown.title"),
+          description: this.$t("migration.chowdown.description"),
+          urlVariable: "chowdown",
+          availableImports: [],
+        },
+      },
     };
   },
+  mounted() {
+    this.getAvailableMigrations();
+  },
   methods: {
     finished() {
       this.loading = false;
       this.$store.dispatch("requestRecentRecipes");
     },
+    async getAvailableMigrations() {
+      let response = await api.migrations.getMigrations();
+      response.forEach((element) => {
+        if (element.type === "nextcloud") {
+          this.migrations.nextcloud.availableImports = element.files;
+        } else if (element.type === "chowdown") {
+          this.migrations.chowdown.availableImports = element.files;
+        }
+      });
+    },
+    showReport(successful, failed) {
+      this.success = successful;
+      this.failed = failed;
+      this.$refs.report.open();
+    },
   },
 };
 </script>

frontend/src/components/Settings/Theme/ColorPickerDialog.vue

@@ -1,36 +1,28 @@
 <template>
   <div>
-    <v-btn block :color="value" @click="dialog = true">
+    <div class="text-center">
-      {{ buttonText }}
+      <h3>{{ buttonText }}</h3>
-    </v-btn>
+    </div>
-    <v-dialog v-model="dialog" width="400">
+    <v-text-field v-model="color" hide-details class="ma-0 pa-0" solo>
-      <v-card>
+      <template v-slot:append>
-        <v-card-title> {{ buttonText }} {{$t('settings.color')}} </v-card-title>
+        <v-menu
-        <v-card-text>
+          v-model="menu"
-          <v-text-field v-model="color"> </v-text-field>
+          top
-          <v-row>
+          nudge-bottom="105"
-            <v-col></v-col>
+          nudge-left="16"
-            <v-col>
+          :close-on-content-click="false"
-              <v-color-picker
+        >
-                dot-size="28"
+          <template v-slot:activator="{ on }">
-                hide-inputs
+            <div :style="swatchStyle" v-on="on" swatches-max-height="300" />
-                hide-mode-switch
+          </template>
-                mode="hexa"
+          <v-card>
-                :show-swatches="swatches"
+            <v-card-text class="pa-0">
-                swatches-max-height="300"
+              <v-color-picker v-model="color" flat show-swatches />
-                v-model="color"
+            </v-card-text>
-                @change="updateColor"
+          </v-card>
-              ></v-color-picker>
+        </v-menu>
-            </v-col>
+      </template>
-            <v-col></v-col>
+    </v-text-field>
-          </v-row>
-        </v-card-text>
-        <v-card-actions>
-          <v-btn text @click="toggleSwatches"> {{$t('settings.swatches')}} </v-btn>
-          <v-btn text @click="dialog = false"> {{$t('general.select')}} </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
   </div>
 </template>
 
@@ -44,21 +36,30 @@ export default {
     return {
       dialog: false,
       swatches: false,
-      color: "#FF00FF",
+      color: "#1976D2",
+      mask: "!#XXXXXXXX",
+      menu: false,
     };
   },
-
+  computed: {
+    swatchStyle() {
+      const { value, menu } = this;
+      return {
+        backgroundColor: value,
+        cursor: "pointer",
+        height: "30px",
+        width: "30px",
+        borderRadius: menu ? "50%" : "4px",
+        transition: "border-radius 200ms ease-in-out",
+      };
+    },
+  },
   watch: {
     color() {
       this.updateColor();
     },
   },
   methods: {
-    toggleSwatches() {
-      if (this.swatches) {
-        this.swatches = false;
-      } else this.swatches = true;
-    },
     updateColor() {
       this.$emit("input", this.color);
     },

frontend/src/components/Settings/Theme/NewThemeDialog.vue

@@ -6,7 +6,7 @@
         <v-card-title> {{$t('settings.add-a-new-theme')}} </v-card-title>
         <v-card-text>
           <v-text-field
-            label="Theme Name"
+            :label="$t('settings.theme.theme-name')"
             v-model="themeName"
             :rules="[rules.required]"
           ></v-text-field>
@@ -34,7 +34,7 @@ export default {
       dialog: false,
       themeName: "",
       rules: {
-        required: (val) => !!val || "Required.",
+        required: (val) => !!val || this.$t("settings.theme.theme-name-is-required"),
       },
     };
   },

frontend/src/components/Settings/Theme/index.vue

@@ -21,7 +21,9 @@
             mandatory
             @change="setStoresDarkMode"
           >
-            <v-btn value="system"> Default to system </v-btn>
+            <v-btn value="system">
+              {{ $t("settings.theme.default-to-system") }}
+            </v-btn>
 
             <v-btn value="light"> {{ $t("settings.theme.light") }} </v-btn>
 
@@ -43,7 +45,7 @@
 
       <v-form ref="form" lazy-validation>
         <v-row dense align="center">
-          <v-col cols="12" md="4" sm="3">
+          <v-col md="4" sm="3">
             <v-select
               :label="$t('settings.theme.saved-color-theme')"
               :items="availableThemes"
@@ -56,13 +58,13 @@
             >
             </v-select>
           </v-col>
-          <v-col cols="12" sm="1">
+          <v-col>
-            <NewThemeDialog @new-theme="appendTheme" />
+            <v-btn-toggle group class="mt-n5">
-          </v-col>
+              <NewThemeDialog @new-theme="appendTheme" class="mt-1" />
-          <v-col cols="12" sm="1">
+              <v-btn text color="error" @click="deleteSelectedThemeValidation">
-            <v-btn text color="error" @click="deleteSelectedThemeValidation">
+                {{ $t("general.delete") }}
-              Delete
+              </v-btn>
-            </v-btn>
+            </v-btn-toggle>
             <Confirmation
               :title="$t('settings.theme.delete-theme')"
               :message="
@@ -74,6 +76,7 @@
               v-on:confirm="deleteSelectedTheme()"
             />
           </v-col>
+          <v-spacer></v-spacer>
         </v-row>
       </v-form>
       <v-row dense align-content="center" v-if="selectedTheme.colors">
@@ -123,15 +126,11 @@
     </v-card-text>
 
     <v-card-actions>
-      <v-row>
+      <v-spacer></v-spacer>
-        <v-col> </v-col>
+      <v-btn color="success" @click="saveThemes" class="mr-2">
-        <v-col></v-col>
+        <v-icon left> mdi-content-save </v-icon>
-        <v-col align="end">
+        {{ $t("general.save") }}
-          <v-btn text color="success" @click="saveThemes">
+      </v-btn>
-            {{ $t("settings.theme.save-colors-and-apply-theme") }}
-          </v-btn>
-        </v-col>
-      </v-row>
     </v-card-actions>
   </v-card>
 </template>

frontend/src/components/Settings/Webhook/index.vue

@@ -1,25 +1,30 @@
 <template>
   <v-card>
     <v-card-title class="headline">
-      {{$t('settings.webhooks.meal-planner-webhooks')}}
+      {{ $t("settings.webhooks.meal-planner-webhooks") }}
     </v-card-title>
     <v-card-text>
-      <p v-html="$t('settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at', {time: time})"></p>
+      <p>
+        {{
+          $t(
+            "settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at"
+          )
+        }}
+        <strong>{{ time }}</strong>
+      </p>
 
       <v-row dense align="center">
         <v-col cols="12" md="2" sm="5">
-          <v-switch
+          <v-switch v-model="enabled" :label="$t('general.enabled')"></v-switch>
-            v-model="enabled"
-            inset
-            :label="$t('general.enabled')"
-            class="my-n3"
-          ></v-switch>
         </v-col>
         <v-col cols="12" md="3" sm="5">
           <TimePickerDialog @save-time="saveTime" />
         </v-col>
         <v-col cols="12" md="4" sm="5">
-          <v-btn text color="info" @click="testWebhooks"> {{$t('settings.webhooks.test-webhooks')}} </v-btn>
+          <v-btn text color="info" @click="testWebhooks">
+            <v-icon left> mdi-webhook </v-icon>
+            {{ $t("settings.webhooks.test-webhooks") }}
+          </v-btn>
         </v-col>
       </v-row>
 
@@ -38,19 +43,14 @@
       </v-row>
     </v-card-text>
     <v-card-actions>
-      <v-row>
+      <v-btn icon color="success" @click="addWebhook">
-        <v-col>
+        <v-icon>mdi-plus</v-icon>
-          <v-btn icon color="success" @click="addWebhook">
+      </v-btn>
-            <v-icon>mdi-plus</v-icon>
+      <v-spacer></v-spacer>
-          </v-btn>
+      <v-btn color="success" @click="saveWebhooks" class="mr-2 mb-1">
-        </v-col>
+        <v-icon left> mdi-content-save </v-icon>
-        <v-col> </v-col>
+        {{ $t("general.save") }}
-        <v-col align="end">
+      </v-btn>
-          <v-btn text color="success" @click="saveWebhooks">
-            {{$t('settings.webhooks.save-webhooks')}}
-          </v-btn>
-        </v-col>
-      </v-row>
     </v-card-actions>
   </v-card>
 </template>

frontend/src/components/UI/ButtonRow.vue

@@ -14,8 +14,8 @@
           <v-icon>mdi-delete</v-icon>
         </v-btn>
         <Confirmation
-          title="Delete Recpie"
+          :title="$t('recipe.delete-recipe')"
-          message="Are you sure you want to delete this recipie?"
+          :message="$t('recipe.delete-confirmation')"
           color="error"
           icon="mdi-alert-circle"
           ref="deleteRecipieConfirm"
@@ -43,12 +43,12 @@ export default {
   props: {
     open: {
       type: Boolean,
-      default: true
+      default: true,
-    }
+    },
   },
 
   components: {
-    Confirmation
+    Confirmation,
   },
 
   methods: {
@@ -66,8 +66,8 @@ export default {
     },
     json() {
       this.$emit("json");
-    }
+    },
-  }
+  },
 };
 </script>
 

frontend/src/components/UI/CardSection.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="mt-n5">
+    <v-card flat class="transparent" height="60px">
+      <v-card-text>
+        <v-row>
+          <v-col>
+            <v-btn-toggle group>
+              <v-btn text :to="`/recipes/${title.toLowerCase()}`">
+                {{ title.toUpperCase() }}
+              </v-btn>
+            </v-btn-toggle>
+          </v-col>
+          <v-spacer></v-spacer>
+          <v-col align="end">
+            <v-menu offset-y v-if="sortable">
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn-toggle group>
+                  <v-btn text v-bind="attrs" v-on="on"> Sort </v-btn>
+                </v-btn-toggle>
+              </template>
+              <v-list>
+                <v-list-item @click="$emit('sort-recent')">
+                  <v-list-item-title> Recent </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="$emit('sort')">
+                  <v-list-item-title> A-Z </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+    <v-row>
+      <v-col
+        :sm="6"
+        :md="6"
+        :lg="4"
+        :xl="3"
+        v-for="recipe in recipes.slice(0, cardLimit)"
+        :key="recipe.name"
+      >
+        <RecipeCard
+          :name="recipe.name"
+          :description="recipe.description"
+          :slug="recipe.slug"
+          :rating="recipe.rating"
+          :image="recipe.image"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import RecipeCard from "./RecipeCard";
+export default {
+  components: {
+    RecipeCard,
+  },
+  props: {
+    sortable: {
+      default: false,
+    },
+    title: String,
+    recipes: Array,
+    cardLimit: {
+      default: 6,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style>
+.transparent {
+  opacity: 1;
+}
+</style>

frontend/src/components/UI/CategorySidebar.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-navigation-drawer width="175px" clipped app permanent expand-on-hover>
+    <v-list nav dense>
+      <v-list-item v-for="nav in links" :key="nav.title" link :to="nav.to">
+        <v-list-item-icon>
+          <v-icon>{{ nav.icon }}</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>{{ nav.title | titleCase }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      links: [],
+      baseLinks: [
+        {
+          icon: "mdi-home",
+          to: "/",
+          title: "Home",
+        },
+        {
+          icon: "mdi-view-module",
+          to: "/recipes/all",
+          title: "All Recipes",
+        },
+      ],
+    };
+  },
+  computed: {
+    allCategories() {
+      return this.$store.getters.getCategories;
+    },
+  },
+  watch: {
+    allCategories() {
+      this.buildSidebar();
+    },
+  },
+  mounted() {
+    this.buildSidebar();
+  },
+
+  methods: {
+    async buildSidebar() {
+      this.links = [];
+      this.links.push(...this.baseLinks);
+      this.allCategories.forEach(async (element) => {
+        this.links.push({
+          title: element.name,
+          to: `/recipes/${element.slug}`,
+          icon: "mdi-tag",
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/UI/Confirmation.vue

@@ -21,8 +21,8 @@
 
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="grey" text @click="cancel"> Cancel </v-btn>
+        <v-btn color="grey" text @click="cancel"> {{ $t("general.cancel") }} </v-btn>
-        <v-btn :color="color" text @click="confirm"> Confirm </v-btn>
+        <v-btn :color="color" text @click="confirm"> {{ $t("general.confirm") }} </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>

frontend/src/components/UI/Menu.vue

@@ -15,11 +15,11 @@
       </template>
 
       <v-list>
-        <v-list-item v-for="(item, i) in items" :key="i" link>
+        <v-list-item v-for="(item, i) in items" :key="i" link :to="item.nav">
-          <v-list-item-icon @click="navRouter(item.nav)">
+          <v-list-item-icon>
             <v-icon>{{ item.icon }}</v-icon>
           </v-list-item-icon>
-          <v-list-item-content @click="navRouter(item.nav)">
+          <v-list-item-content>
             <v-list-item-title>
               {{ item.title }}
             </v-list-item-title>
@@ -32,7 +32,7 @@
 
 <script>
 export default {
-  data: function () {
+  data: function() {
     return {
       items: [
         {

frontend/src/components/UI/RecentRecipes.vue

@@ -1,40 +0,0 @@
-<template>
-  <v-row>
-    <v-col
-      :sm="6"
-      :md="6"
-      :lg="4"
-      :xl="3"
-      v-for="recipe in recipes"
-      :key="recipe.name"
-    >
-      <RecipeCard
-        :name="recipe.name"
-        :description="recipe.description"
-        :slug="recipe.slug"
-        :rating="recipe.rating"
-        :image="recipe.image"
-      />
-    </v-col>
-  </v-row>
-</template>
-
-<script>
-import RecipeCard from "./RecipeCard";
-
-export default {
-  components: {
-    RecipeCard,
-  },
-  data: () => ({}),
-  mounted() {},
-  computed: {
-    recipes() {
-      return this.$store.getters.getRecentRecipes;
-    },
-  },
-};
-</script>
-
-<style scoped>
-</style>

frontend/src/components/UI/RecipeCard.vue

@@ -3,7 +3,8 @@
     <v-card
       :class="{ 'on-hover': hover }"
       :elevation="hover ? 12 : 2"
-      @click="moreInfo(slug)"
+      :to="route ? `/recipe/${slug}` : ''"
+      @click="$emit('click')"
     >
       <v-img height="200" :src="getImage(image)"></v-img>
       <v-card-title class="my-n3 mb-n6">{{ name | truncate(30) }}</v-card-title>
@@ -25,9 +26,9 @@
           <v-col align="end">
             <v-tooltip top color="secondary" max-width="400" open-delay="50">
               <template v-slot:activator="{ on, attrs }">
-                <v-btn color="secondary" v-on="on" v-bind="attrs" text
+                <v-btn color="secondary" v-on="on" v-bind="attrs" text>{{
-                  >{{$t('recipe.description')}}</v-btn
+                  $t("recipe.description")
-                >
+                }}</v-btn>
               </template>
               <span>{{ description }}</span>
             </v-tooltip>
@@ -47,11 +48,11 @@ export default {
     description: String,
     rating: Number,
     image: String,
+    route: {
+      default: true,
+    },
   },
   methods: {
-    moreInfo(recipeSlug) {
-      this.$router.push(`/recipe/${recipeSlug}`);
-    },
     getImage(image) {
       return utils.getImageURL(image);
     },

frontend/src/components/UI/Search.vue

@@ -1,63 +0,0 @@
-<template>
-  <v-autocomplete
-    :items="items"
-    :loading="isLoading"
-    v-model="selected"
-    clearable
-    return
-    dense
-    hide-details
-    hide-selected
-    item-text="slug"
-    :label="$t('search.search-for-a-recipe')"
-    single-line
-    @keyup.enter.native="moreInfo(selected)"
-  >
-    <template v-slot:no-data>
-      <v-list-item>
-        <v-list-item-title :v-html="$t('search.search-for-your-favorite-recipe')">
-        </v-list-item-title>
-      </v-list-item>
-    </template>
-    <template v-slot:item="{ item }">
-      <v-list-item-avatar
-        color="primary"
-        class="headline font-weight-light white--text"
-      >
-        <v-img :src="getImage(item.image)"></v-img>
-      </v-list-item-avatar>
-      <v-list-item-content @click="moreInfo(item.slug)">
-        <v-list-item-title v-text="item.name"></v-list-item-title>
-      </v-list-item-content>
-    </template>
-  </v-autocomplete>
-</template>
-
-<script>
-import utils from "../../utils";
-
-export default {
-  data: () => ({
-    selected: null,
-    isLoading: false,
-  }),
-
-  computed: {
-    items() {
-      return this.$store.getters.getRecentRecipes;
-    },
-  },
-
-  methods: {
-    moreInfo(recipeSlug) {
-      this.$router.push(`/recipe/${recipeSlug}`);
-    },
-    getImage(image) {
-      return utils.getImageURL(image);
-    },
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/UI/SearchBar.vue

@@ -2,11 +2,12 @@
   <div>
     <v-autocomplete
       :items="autoResults"
+      v-model="searchSlug"
       item-value="item.slug"
       item-text="item.name"
       dense
       light
-      label="Search Mealie"
+      :label="$t('search.search-mealie')"
       :search-input.sync="search"
       hide-no-data
       cache-items
@@ -52,7 +53,8 @@ export default {
   },
   data() {
     return {
-      search: "",
+      searchSlug: "",
+      search: " ",
       result: [],
       autoResults: [],
       isDark: false,
@@ -82,13 +84,15 @@ export default {
     search() {
       if (this.search.trim() === "") this.result = this.list;
       else this.result = this.fuse.search(this.search.trim());
-      console.log("test");
 
       this.$emit("results", this.result);
       if (this.showResults === true) {
         this.autoResults = this.result;
       }
     },
+    searchSlug() {
+      this.selected(this.searchSlug);
+    },
   },
   methods: {
     getImage(image) {

frontend/src/components/UI/SearchDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" min-height="700" max-width="1000">
+      <v-card min-height="725" height="100%">
+        <v-card-text>
+          <v-card-title></v-card-title>
+          <v-row justify="center">
+            <v-col cols="1"> </v-col>
+            <v-col>
+              <SearchBar @results="updateResults" :show-results="false" />
+            </v-col>
+            <v-col cols="2">
+              <v-btn icon>
+                <v-icon large> mdi-filter </v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+
+          <v-row v-if="searchResults">
+            <v-col
+              :sm="6"
+              :md="6"
+              :lg="4"
+              :xl="3"
+              v-for="item in searchResults.slice(0, 10)"
+              :key="item.item.name"
+            >
+              <RecipeCard
+                :route="false"
+                :name="item.item.name"
+                :description="item.item.description"
+                :slug="item.item.slug"
+                :rating="item.item.rating"
+                :image="item.item.image"
+                @click="emitSelect(item.item.name, item.item.slug)"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import SearchBar from "../UI/SearchBar";
+import RecipeCard from "../UI/RecipeCard";
+export default {
+  components: {
+    SearchBar,
+    RecipeCard,
+  },
+  data() {
+    return {
+      searchResults: null,
+      dialog: false,
+    };
+  },
+  methods: {
+    updateResults(results) {
+      this.searchResults = results;
+    },
+    emitSelect(name, slug) {
+      this.$emit("select", name, slug);
+      this.dialog = false;
+    },
+    open() {
+      this.dialog = true;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/UI/SuccessFailureAlert.vue

@@ -1,32 +1,50 @@
 <template>
-  <div>
+  <v-dialog v-model="dialog" max-width="900px">
-    <v-alert v-if="success[0]" outlined dense type="success">
+    <v-card>
-      <h4>{{ successHeader }}</h4>
+      <v-card-title> {{ title }} </v-card-title>
-      <v-list dense>
+      <v-card-text class="mt-3">
-        <v-list-item v-for="success in this.success" :key="success">
+        <v-row>
-          {{ success }}
+          <v-col>
-        </v-list-item>
+            <v-alert outlined dense type="success">
-      </v-list>
+              <h4>{{ successHeader }}</h4>
-    </v-alert>
+              <p v-for="success in this.success" :key="success" class="my-1">
-    <v-alert v-if="failed[0]" outlined dense type="error">
+                - {{ success }}
-      <h4>{{ failedHeader }}</h4>
+              </p>
-      <v-list dense>
+            </v-alert>
-        <v-list-item v-for="fail in this.failed" :key="fail">
+          </v-col>
-          {{ fail }}
+          <v-col>
-        </v-list-item>
+            <v-alert v-if="failed[0]" outlined dense type="error">
-      </v-list>
+              <h4>{{ failedHeader }}</h4>
-    </v-alert>
+              <p v-for="fail in this.failed" :key="fail" class="my-1">
-  </div>
+                - {{ fail }}
+              </p>
+            </v-alert>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
 export default {
   props: {
+    title: String,
     successHeader: String,
     success: Array,
     failedHeader: String,
     failed: Array,
   },
+  data() {
+    return {
+      dialog: false,
+    };
+  },
+  methods: {
+    open() {
+      this.dialog = true;
+    },
+  },
 };
 </script>
 

frontend/src/components/UI/UploadBtn.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-form ref="file">
+    <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
+    <v-btn :loading="isSelecting" @click="onButtonClick" color="accent" text>
+      <v-icon left> mdi-cloud-upload </v-icon>
+      {{ $t("general.upload") }}
+    </v-btn>
+  </v-form>
+</template>
+
+<script>
+import api from "../../api";
+export default {
+  props: {
+    url: String,
+  },
+  data: () => ({
+    file: null,
+    isSelecting: false,
+  }),
+
+  methods: {
+    async upload() {
+      if (this.file != null) {
+        this.isSelecting = true;
+        let formData = new FormData();
+        formData.append("archive", this.file);
+
+        await api.utils.uploadFile(this.url, formData);
+
+        this.isSelecting = false;
+        this.$emit("uploaded");
+      }
+    },
+    onButtonClick() {
+      this.isSelecting = true;
+      window.addEventListener(
+        "focus",
+        () => {
+          this.isSelecting = false;
+        },
+        { once: true }
+      );
+
+      this.$refs.uploader.click();
+    },
+    onFileChanged(e) {
+      this.file = e.target.files[0];
+      this.upload();
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/i18n.js

@@ -1,23 +1,27 @@
-import Vue from 'vue'
+import Vue from "vue";
-import VueI18n from 'vue-i18n'
+import VueI18n from "vue-i18n";
 
-Vue.use(VueI18n)
+Vue.use(VueI18n);
 
-function loadLocaleMessages () {
+function loadLocaleMessages() {
-  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const locales = require.context(
-  const messages = {}
+    "./locales",
+    true,
+    /[A-Za-z0-9-_,\s]+\.json$/i
+  );
+  const messages = {};
   locales.keys().forEach(key => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
     if (matched && matched.length > 1) {
-      const locale = matched[1]
+      const locale = matched[1];
-      messages[locale] = locales(key)
+      messages[locale] = locales(key);
     }
-  })
+  });
-  return messages
+  return messages;
 }
 
 export default new VueI18n({
-  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  locale: "en",
-  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
-  messages: loadLocaleMessages()
+  messages: loadLocaleMessages(),
-})
+});

frontend/src/locales/da.json

@@ -27,7 +27,6 @@
     "save": "Gem",
     "select": "Vælg",
     "update": "Opdater",
-    "delete-data": "Slet data",
     "download": "Hent",
     "import": "Importere"
   },
@@ -42,7 +41,6 @@
     "dinner-this-week": "Madplan denne uge",
     "dinner-today": "Madplan i dag",
     "planner": "Planlægger",
-    "choose-a-recipe": "Vælg en opskrift",
     "create-a-new-meal-plan": "Opret en ny måltidsplan",
     "edit-meal-plan": "Rediger måltidsplan",
     "end-date": "Slutdato",
@@ -57,7 +55,7 @@
     "instructions": "Instruktioner",
     "note": "Bemærk",
     "notes": "Bemærkninger",
-    "original-recipe": "Oprindelig opskrift",
+    "original-url": "Oprindelig opskrift",
     "recipe-name": "Opskriftens navn",
     "servings": "Portioner",
     "step-index": "Trin: {step}",
@@ -65,36 +63,20 @@
     "view-recipe": "Se opskrift"
   },
   "search": {
-    "search-for-a-recipe": "Søg efter en opskrift",
+    "search-mealie": "Search Mealie"
-    "search-for-your-favorite-recipe": "Søg efter din foretrukne <strong>opskrift</strong>"
   },
   "migration": {
-    "chowdown-repo-url": "Chowdown Repo URL",
-    "currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration": "I øjeblikket er Chowdown via offentlig Repo URL den eneste understøttede migreringstype",
-    "failed-images": "Mislykkede billeder",
-    "failed-recipes": "Mislykkede opskrifter",
-    "migrate": "Migrere",
     "recipe-migration": "Migrering af opskrifter",
-    "delete-confirmation": "Er du sikker på, at du vil slette disse migrationsdata?",
+    "failed-imports": "Mislykket import"
-    "failed-imports": "Mislykket import",
-    "nextcloud-data": "Nextcloud data",
-    "successfully-imported-from-nextcloud": "Importeret fra Nextcloud",
-    "upload-an-archive": "Upload et arkiv",
-    "you-can-import-recipes-from-either-a-zip-file-or-a-directory-located-in-the-app-data-migraiton-folder-please-review-the-documentation-to-ensure-your-directory-structure-matches-what-is-expected": "Du kan importere opskrifter fra enten en zip-fil eller et bibliotek i /app/data/migraiton/ folderen. \nGennemse dokumentationen for at sikre, at din bibliotekstruktur svarer til det, der forventes"
   },
   "settings": {
     "add-a-new-theme": "Tilføj et nyt tema",
     "backup-and-exports": "Backup og eksport",
     "backup-info": "Sikkerhedskopier eksporteres i standard JSON-format sammen med alle de billeder, der er gemt på filsystemet. \nI din sikkerhedskopimappe finder du en .zip-fil, der indeholder alle opskrifterne JSON og billeder fra databasen. \nDerudover, hvis du valgte en markdown-fil, gemmes disse også i .zip-filen. \nFor at importere en sikkerhedskopi skal den være placeret i din sikkerhedskopimappe. \nAutomatiske sikkerhedskopier udføres hver dag kl. 3:00.",
-    "backup-recipes": "Sikkerhedskopier opksrifter",
-    "backup-tag": "Sikkerhedskopier tags",
-    "color": "Farve",
     "contribute": "Bidrag",
     "explore-the-docs": "Udforsk dokumentation",
-    "markdown-template": "Markdown skabelon",
     "new-version-available": "En ny version af Mealie er tilgængelig. <a {aContents}> Besøg repoen </a>",
     "set-new-time": "Indstil ny tid",
-    "swatches": "Prøver",
     "current": "Version:",
     "latest": "Seneste:",
     "theme": {
@@ -114,13 +96,11 @@
       "dark": "Mørkt",
       "delete-theme": "Slet tema",
       "light": "Lyst",
-      "save-colors-and-apply-theme": "Gem farver og anvend tema",
       "saved-color-theme": "Gemt farvetema",
       "theme": "Tema"
     },
     "webhooks": {
       "meal-planner-webhooks": "Måltidsplanlægning Webhooks",
-      "save-webhooks": "Gem Webhooks",
       "test-webhooks": "Test Webhooks",
       "the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at": "Webadresserne, der er anført nedenfor, modtager webhooks, der indeholder opskriftsdataene for måltidsplanen på den planlagte dag. \nWebhooks udføres i øjeblikket på <strong> {time} </strong>",
       "webhook-url": "Webhook adresse"