Merge pull request 'TIST-22: added submit recipe page and create ingredient modal' (#36) from TIST-22 into develop

Reviewed-on: #36
Reviewed-by: steve_dekart <stevedekart2020@gmail.com>

apps/Recipes/Controllers/SingleSubmitController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Lycoreco\Apps\Recipes\Controllers;
+
+use Lycoreco\Includes\BaseController;
+use Lycoreco\Apps\Recipes\Models\CategoryModel;
+
+class SingleSubmitController extends BaseController
+{
+    protected $template_name = APPS_PATH . '/Recipes/Templates/single-submit.php';
+
+    public function get_context_data()
+    {
+        $context = parent::get_context_data();
+        
+        $context['category_options'] = CategoryModel::get_cat_values();
+
+
+        return $context;
+    }
+}

apps/Recipes/Templates/single-submit.php

@@ -0,0 +1,90 @@
+<?php
+the_header(
+    'Submit a Recipe',
+    'Share your culinary creations with the world! Fill out the form below to submit your recipe for review and publication.',
+    'submit-recipe-body',
+    [
+
+        ['keywords', 'recipe, submit, share, cooking, culinary'],
+    ]
+);
+?>
+
+<div class="container">
+    <div class="submit-recipe">
+        <h1 class="title">Submit a Recipe</h1>
+    </div>
+    <form action="" class="single-submit-form" method="post" enctype="multipart/form-data">
+        <label for="title-input">Title</label><span>*</span>
+        <div class="input">
+            <input type="text" id="title-input" name="title" placeholder="Enter the recipe title" required>
+        </div>
+        <label for="description-input">Description</label><span>*</span>
+        <div class="input">
+            <textarea id="description-input" name="description" placeholder="Describe your recipe in detail"
+                required></textarea>
+        </div>
+
+        <label for="ingredients-input">Ingredients</label><span>*</span>
+        <button type="button" id="add-ingredient-btn" class="btn btn-primary hover-anim add-ingredient-btn">Add new
+            ingredient</button>
+        <div id="overlay" class="hidden"></div>
+        <div class="ing-modal hidden" id="ingredient-modal">
+            <div id="new-ingredient">
+                <label for="ing-name-input">Ingredient Name</label><span>*</span>
+                <div class="input">
+                    <input type="text" id="ing-name-input" name="title" placeholder="Enter the ingredient name"
+                        required>
+                </div>
+                <label for="unit-input">Unit of measure</label><span>*</span>
+                <div class="input">
+                    <input type="text" id="ing-unit-input" name="title" placeholder="Enter the unit of measure"
+                        required>
+                </div>
+                <button type="button" id="new-ingredient-submit" class="btn btn-primary hover-anim">Add new ingredient</button>
+            </div>
+        </div>
+
+        <div class="input">
+            select 2 goes here
+        </div>
+
+        <label for="image-input">Image</label><span>*</span>
+        <div class="input-file">
+            <input type="file" id="image-input" name="image" accept="image/*" required>
+        </div>
+
+        <label for="time-input">Estimated Time (minutes)</label><span>*</span>
+        <div class="input">
+            <input type="text" id="time-input" name="est-time" placeholder="Enter the recipe estimated time" required>
+        </div>
+
+        <label for="price-input">Estimated Price ($)</label><span>*</span>
+        <div class="input">
+            <input type="text" id="price-input" name="est-price" placeholder="Enter the recipe estimated price"
+                required>
+        </div>
+        <label for="category-select">Category</label><span>*</span>
+        <div class="input-select">
+
+            <select id="category-select" name="category" required>
+                <option value="">Select a category</option>
+                <?php foreach ($context['category_options'] as $category): ?>
+                    <option value="<?php echo $category[0]; ?>">
+                        <?php echo $category[1]; ?>
+                    </option>
+                <?php endforeach; ?>
+
+            </select>
+
+
+        </div>
+        <button type="submit" class="btn btn-primary hover-anim">Submit Recipe</button>
+
+    </form>
+</div>
+
+
+<?php the_footer(array(
+    ASSETS_PATH . '/js/single-submit.js',
+)); ?>

apps/Recipes/urls.php

@@ -9,4 +9,5 @@ $recipes_urls = [
     new Path('/catalog', new Controllers\CatalogController(), 'catalog'),
     new Path('/daily-meals', new Controllers\DailyMealsController, 'daily-meals'),
     new Path('/favorites', new Controllers\FavoritesController(), 'favorites'),
+    new Path('/submit', new Controllers\SingleSubmitController(), 'single-submit'),
 ];

assets/css/style.css

@@ -1217,7 +1217,42 @@ label {
     font-family: var(--common-font);
 }
 
+.submit-recipe {
+    margin-top: 46px;
+}
 
+.submit-recipe .title{
+    text-align: start;
+}
+
+.input-file{
+    margin-bottom: 20px;
+}
+
+.add-ingredient-btn{
+    margin-bottom: 25px;
+}
+
+.single-submit-form span{
+    color: #015847;
+    font-weight: bold;
+}
+
+.ing-modal{
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    z-index: 9999;
+}
 
 @media (max-width: 768px) {
 

assets/js/single-submit.js

@@ -0,0 +1,55 @@
+const addIngredientBtn = document.getElementById('add-ingredient-btn');
+const overlay = document.getElementById('overlay');
+const ingModal = document.getElementById('ingredient-modal');
+
+addIngredientBtn.addEventListener('click', () => {
+    ingModal.classList.remove('hidden');
+    overlay.classList.remove('hidden');
+});
+
+
+document.addEventListener('click', (e) => {
+    if (!ingModal.contains(e.target) && !addIngredientBtn.contains(e.target)) {
+        ingModal.classList.add('hidden');
+        overlay.classList.add('hidden');
+    }
+});
+
+const ingredientSubmitBtn = document.getElementById('new-ingredient-submit');
+const ingredientName = document.getElementById('ing-name-input');
+const ingredientUnit = document.getElementById('ing-unit-input');
+
+ingredientSubmitBtn.addEventListener('click', async (e) => {
+
+    const name = ingredientName.value.trim();
+    const unit = ingredientUnit.value.trim();
+
+    if (!name || !unit) {
+        showToastify('Please fill in all fields.', 'error');
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append('action', 'create_ingredient');
+    formData.append('name', name);
+    formData.append('unit', unit);
+
+    const response = await fetch('/ajax', {
+        method: 'POST',
+        body: formData
+    });
+
+    const json = await response.json();
+
+    if (!response.ok) {
+        const message = json.error;
+        showToastify(message, 'error');
+        return;
+    }
+
+    showToastify(json.success, 'success');
+    ingredientName.value = '';
+    ingredientUnit.value = '';
+    ingModal.classList.add('hidden');
+    overlay.classList.add('hidden');
+});

components/templates/layout/header.php

@@ -60,7 +60,7 @@
                                 class="nav-link">FAVORITES</a></li>
                         <li class="nav-item"><a href="<?php the_permalink("recipes:daily-meals") ?>"
                                 class="nav-link">MEAL A DAY</a></li>
-                        <li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li>
+                        <li class="nav-item"><a href="<?php the_permalink("recipes:single-submit") ?>" class="nav-link">SUBMIT RECIPE</a></li>
                     </ul>
                 </nav>