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

Adopt template-based input add/remove system for recipes

This commit is contained in:
Christopher C. Wells 2021-02-21 08:59:32 -08:00
parent 2f91c320ef
commit 6c01027ad9
3 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/views/components/ingredient-picker.blade.php
View File

@ -91,6 +91,7 @@
this.$refs.ingredients_type.value = selected.dataset.type;
this.$refs.ingredients_name.value = selected.dataset.name + (selected.dataset.detail ? `, ${selected.dataset.detail}` : '');
this.searching = false;
this.results = [];
}
}
}

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

@ -72,15 +72,17 @@
<!-- Ingredients -->
<h3 class="mt-6 mb-2 font-extrabold text-lg">Ingredients</h3>
<div x-data="{ ingredients: 1 }" class="ingredients space-y-4">
@foreach($ingredients as $ingredient)
<div x-data class="ingredients space-y-4">
@forelse($ingredients as $ingredient)
@include('recipes.partials.ingredient-input', $ingredient)
@endforeach
<template x-if="ingredients > 0" x-for="i in ingredients">
@empty
@include('recipes.partials.ingredient-input')
</template>
<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">
@endforelse
<div class="entry-template hidden">
@include('recipes.partials.ingredient-input')
</div>
<x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
<svg class="h-10 w-10 pointer-events-none" 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>
@ -88,22 +90,24 @@
<!-- Steps -->
<h3 class="mt-6 mb-2 font-extrabold text-lg">Steps</h3>
<div x-data="{ steps: 0 }" class="steps">
@foreach($steps as $step)
<div x-data class="steps">
@forelse($steps as $step)
@include('recipes.partials.step-input', $step)
@endforeach
<template x-for="i in steps + 1">
@empty
@include('recipes.partials.step-input')
</template>
<x-inputs.icon-button type="button" color="green" x-on:click="steps++;">
@endforelse
<div class="entry-template hidden">
@include('recipes.partials.step-input')
</div>
<x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
<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">
<x-inputs.button class="ml-3">
<div x-data class="flex items-center justify-end mt-4">
<x-inputs.button x-on:click="removeTemplates();" class="ml-3">
{{ ($recipe->exists ? 'Save' : 'Add') }}
</x-inputs.button>
</div>
@ -135,6 +139,28 @@
},
})
</script>
<script type="text/javascript">
/**
* Adds a set of entry form fields from the template.
*
* @param {object} $el Entry lines parent element.
*/
let addEntryNode = ($el) => {
// Create clone of template entry.
let template = $el.querySelector(':scope .entry-template');
let newEntry = template.cloneNode(true).firstElementChild;
// Insert new entry before add button.
$el.insertBefore(newEntry, template);
}
/**
* Removes any hidden templates before form submit.
*/
let removeTemplates = () => {
document.querySelector(':scope .entry-template').remove();
}
</script>
@endpush
@endonce
</x-app-layout>

3
resources/views/recipes/partials/ingredient-input.blade.php
View File

@ -33,12 +33,11 @@
<div class="flex-none">
<x-inputs.icon-button type="button"
color="red"
x-on:click="$event.target.parentNode.parentNode.parentNode.remove(); (ingredients > 1 ? ingredients-- : null);">
x-on:click="$event.target.parentNode.parentNode.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>
<hr class="my-4 md:hidden" x-show="ingredients > 0"/>
</div>