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

Add support frontend support for removing steps (WIP) 

Step numbers not working. No backend support yet.
This commit is contained in:
Christopher C. Wells 2021-01-21 07:06:43 -08:00 committed by Christopher Charbonneau Wells
parent f499e5ffb7
commit 0c0febed6c
2 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,29 +100,19 @@
<!-- Steps -->
<h3 class="pt-2 mb-2 font-extrabold">Steps</h3>
@php($step_number = 0)
<div x-data="{ steps: 0 }">
<div x-data="{ steps: 0, step_number: 0 }">
@if(old('steps'))
@foreach(old('steps') as $i => $step)
@foreach(old('steps') as $i => $step_default)
@if (empty($step)) @continue @endif
<div class="flex flex-row space-x-4 mb-4">
<div class="text-3xl text-gray-400 text-center">{{ $step_number++ }}</div>
<x-inputs.textarea class="block mt-1 w-full" name="steps[]" :value="$step" />
</div>
@include('recipes.partials.step-input')
@endforeach
@else
@foreach($recipe->steps as $step)
<div class="flex flex-row space-x-4 mb-4">
<div class="text-3xl text-gray-400 text-center">{{ $step_number++ }}</div>
<x-inputs.textarea class="block mt-1 w-full" name="steps[]" :value="$step->step" />
</div>
@include('recipes.partials.step-input', ['step_default' => $step->step])
@endforeach
@endif
<template x-for="i in steps + 1">
<div class="flex flex-row space-x-4 mb-4">
<div class="text-3xl text-gray-400 text-center" x-text="{{ $step_number }} + i"></div>
<x-inputs.textarea class="block mt-1 w-full" name="steps[]" />
</div>
@include('recipes.partials.step-input')
</template>
<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">

9
resources/views/recipes/partials/step-input.blade.php Normal file
View File

@ -0,0 +1,9 @@
<div class="flex flex-row space-x-4 mb-4">
<div class="text-3xl text-gray-400 text-center">#</div>
<x-inputs.textarea class="block mt-1 w-full" name="steps[]" :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>