mirror of https://github.com/kcal-app/kcal.git
Add re-ordering support to recipe ingredients and steps
This commit is contained in:
Christopher C. Wells
parent
414629b469
commit
8ce5b82825
|
|
@ -23,7 +23,7 @@ trait HasIngredients
|
|||
* Get all of the ingredients.
|
||||
*/
|
||||
public function ingredientAmounts(): MorphMany {
|
||||
return $this->morphMany(IngredientAmount::class, 'parent');
|
||||
return $this->morphMany(IngredientAmount::class, 'parent')->orderBy('weight');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1079,6 +1079,11 @@
|
|||
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
|
||||
"dev": true
|
||||
},
|
||||
"@shopify/draggable": {
|
||||
"version": "1.0.0-beta.8",
|
||||
"resolved": "https://registry.npmjs.org/@shopify/draggable/-/draggable-1.0.0-beta.8.tgz",
|
||||
"integrity": "sha512-9IeBPQM93Ad4qFKUopwuTClzoST/1OId4MaSd/8FB5ScCL2tl25UaOGNR8E2hjiL7xK4LN5+I1Ews6amS7YAiA=="
|
||||
},
|
||||
"@tailwindcss/forms": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
"vue-template-compiler": "^2.6.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@shopify/draggable": "^1.0.0-beta.8",
|
||||
"alpine-magic-helpers": "^0.5.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"/js/app.js": "/js/app.js",
|
||||
"/css/app.css": "/css/app.css"
|
||||
"/css/app.css": "/css/app.css",
|
||||
"/js/recipes/edit.js": "/js/recipes/edit.js"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
window.Draggable = require('@shopify/draggable');
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
<!-- Ingredients -->
|
||||
<h3 class="mt-6 mb-2 font-extrabold text-lg">Ingredients</h3>
|
||||
<div x-data="{ ingredients: 1 }" class="space-y-4">
|
||||
<div x-data="{ ingredients: 1 }" class="ingredients space-y-4">
|
||||
@foreach($ingredients as $ingredient)
|
||||
@include('recipes.partials.ingredient-input', $ingredient)
|
||||
@endforeach
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
|
||||
<!-- Steps -->
|
||||
<h3 class="mt-6 mb-2 font-extrabold text-lg">Steps</h3>
|
||||
<div x-data="{ steps: 0 }">
|
||||
<div x-data="{ steps: 0 }" class="steps">
|
||||
@foreach($steps as $step)
|
||||
@include('recipes.partials.step-input', $step)
|
||||
@endforeach
|
||||
|
|
@ -112,4 +112,29 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@once
|
||||
@push('scripts')
|
||||
<script src="{{ asset('js/recipes/edit.js') }}"></script>
|
||||
<script type="text/javascript">
|
||||
new Draggable.Sortable(document.querySelector('.ingredients'), {
|
||||
draggable: '.ingredient',
|
||||
handle: '.draggable-handle',
|
||||
mirror: {
|
||||
appendTo: '.ingredients',
|
||||
constrainDimensions: true,
|
||||
},
|
||||
})
|
||||
|
||||
new Draggable.Sortable(document.querySelector('.steps'), {
|
||||
draggable: '.step',
|
||||
handle: '.draggable-handle',
|
||||
mirror: {
|
||||
appendTo: '.steps',
|
||||
constrainDimensions: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
@endonce
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
<div>
|
||||
<div class="ingredient">
|
||||
<x-inputs.input type="hidden" name="ingredients[original_key][]" :value="$original_key ?? null" />
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full">
|
||||
<div class="draggable-handle self-center text-gray-500 bg-gray-100 w-full md:w-auto p-2 cursor-move">
|
||||
<svg class="h-6 w-6 mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<x-ingredient-picker :default-id="$ingredient_id ?? null"
|
||||
:default-type="$ingredient_type ?? null"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
<div class="flex flex-row space-x-4 mb-4">
|
||||
<div class="step">
|
||||
<x-inputs.input type="hidden" name="steps[original_key][]" :value="$original_key ?? null" />
|
||||
<div class="text-3xl text-gray-400 text-center">#</div>
|
||||
<x-inputs.textarea class="block mt-1 w-full" name="steps[step][]" :value="$step_default ?? null" />
|
||||
<x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.remove();">
|
||||
<svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</x-inputs.icon-button>
|
||||
<div class="flex flex-row mb-4 space-x-4">
|
||||
<div class="draggable-handle self-center text-gray-500 bg-gray-100 p-2 cursor-move">
|
||||
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<x-inputs.textarea class="block mt-1 w-full" name="steps[step][]" :value="$step_default ?? null" />
|
||||
<x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.remove();">
|
||||
<svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</x-inputs.icon-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,11 @@ const mix = require('laravel-mix');
|
|||
|
|
||||
*/
|
||||
|
||||
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
|
||||
require('postcss-import'),
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
]);
|
||||
mix
|
||||
.js('resources/js/app.js', 'public/js')
|
||||
.js('resources/js/recipes/edit.js', 'public/js/recipes')
|
||||
.postCss('resources/css/app.css', 'public/css', [
|
||||
require('postcss-import'),
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
]);
|
||||
|
|
|
|||
Loading…
Reference in New Issue