RomanNum3ral
/
kcal
mirror of https://github.com/kcal-app/kcal.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add frontend ingredient remove elements (WIP) 

No backend support yet. Old values are not supported in the form.
This commit is contained in:
Christopher C. Wells 2021-01-20 21:57:03 -08:00 committed by Christopher Charbonneau Wells
parent b53a76939a
commit cec27ff0b0
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/views/components/inputs/icon-button.blade.php Normal file
View File

@ -0,0 +1,5 @@
@props(['color' => 'gray'])
<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center border border-transparent rounded-md font-semibold text-xs text-{$color}-500 tracking-widest hover:text-{$color}-700 active:text-{$color}-900 focus:outline-none focus:border-{$color}-900 focus:ring ring-{$color}-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
{{ $slot }}
</button>

27
resources/views/recipes/edit.blade.php
View File

@ -81,8 +81,14 @@
class="block"
name="ingredients_detail[]"
:value="old('ingredients_detail.' . $loop->index, $foodAmount->detail)" />
<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>
@endforeach
<!-- TODO: Handle old values!! -->
<template x-for="i in ingredients + 1">
<div class="flex flex-row space-x-4 mb-4">
<x-inputs.input type="text"
@ -96,11 +102,18 @@
<x-inputs.input type="text"
class="block"
name="ingredients_detail[]" />
<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>
</template>
<x-inputs.button type="button" class="ml-3" x-on:click="ingredients++;">
Add Ingredient
</x-inputs.button>
<x-inputs.icon-button type="button" color="green" x-on:click="ingredients++;">
<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="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
</x-inputs.icon-button>
</div>
<!-- Steps -->
@ -122,9 +135,11 @@
name="steps[]" />
</div>
</template>
<x-inputs.button type="button" class="ml-3" x-on:click="steps++;">
Add Step
</x-inputs.button>
<x-inputs.icon-button type="button" color="green" x-on:click="steps++;">
<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="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
</x-inputs.icon-button>
</div>
<div class="flex items-center justify-end mt-4">