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

Set default amount and unit on journal entry

This commit is contained in:
Christopher C. Wells 2021-03-21 14:03:01 -07:00
parent dae2a8d725
commit 25d9a6442c
2 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,11 +22,7 @@
<div class="absolute border-2 border-gray-500 border-b-0 bg-white" <div class="absolute border-2 border-gray-500 border-b-0 bg-white"
x-spread="ingredient"> x-spread="ingredient">
<template x-for="result in results" :key="result.id"> <template x-for="result in results" :key="result.id">
<div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer" <div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer" x-bind:data-id="result.id">
x-bind:data-id="result.id"
x-bind:data-type="result.type"
x-bind:data-name="result.name"
x-bind:data-detail="result.detail">
<div class="pointer-events-none"> <div class="pointer-events-none">
<div> <div>
<span class="font-bold" x-text="result.name"></span><span class="text-gray-600" x-text="', ' + result.detail" x-show="result.detail"></span> <span class="font-bold" x-text="result.name"></span><span class="text-gray-600" x-text="', ' + result.detail" x-show="result.detail"></span>
@ -87,9 +83,14 @@
['@click']($event) { ['@click']($event) {
let selected = $event.target; let selected = $event.target;
if (selected.dataset.id) { if (selected.dataset.id) {
this.$refs.ingredients.value = selected.dataset.id; const ingredient = this.results.find(result => result.id === Number(selected.dataset.id));
this.$refs.ingredients_type.value = selected.dataset.type; this.$el.dispatchEvent(new CustomEvent('ingredient-picked', {
this.$refs.ingredients_name.value = selected.dataset.name + (selected.dataset.detail ? `, ${selected.dataset.detail}` : ''); detail: { ingredient: ingredient },
bubbles: true
}));
this.$refs.ingredients.value = ingredient.id;
this.$refs.ingredients_type.value = ingredient.type;
this.$refs.ingredients_name.value = ingredient.name + (ingredient.detail ? `, ${ingredient.detail}` : '');
this.searching = false; this.searching = false;
this.results = []; this.results = [];
} }

42
resources/views/journal-entries/partials/entry-item-input.blade.php
View File

@ -1,13 +1,11 @@
<div x-data class="flex items-center space-x-2"> <div x-data class="entry-item flex items-center space-x-2">
<div class="flex flex-col space-y-4 w-full"> <div class="flex flex-col space-y-4 w-full">
<!-- Ingredient -->
<div class="w-full"> <div class="w-full">
<!-- Ingredient --> <x-inputs.label for="ingredients[id][]" value="Food or Recipe" class="md:hidden"/>
<div class="w-full"> <x-ingredient-picker :default-id="$id ?? null"
<x-inputs.label for="ingredients[id][]" value="Food or Recipe" class="md:hidden"/> :default-type="$type ?? null"
<x-ingredient-picker :default-id="$id ?? null" :default-name="$name ?? null" />
:default-type="$type ?? null"
:default-name="$name ?? null" />
</div>
</div> </div>
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full"> <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full">
<!-- Date --> <!-- Date -->
@ -68,3 +66,31 @@
</x-inputs.icon-button> </x-inputs.icon-button>
</div> </div>
</div> </div>
@once
@push('scripts')
<script type="text/javascript">
/**
* Sets default serving amount and unit on ingredient select.
*/
window.addEventListener('ingredient-picked', (e) => {
const entryItem = e.target.closest('.entry-item');
const ingredient = e.detail.ingredient;
let servingSize, servingUnit;
if (ingredient.type === 'App\\Models\\Recipe') {
servingSize = 1;
servingUnit = 'serving';
} else if (ingredient.type === 'App\\Models\\Food') {
servingUnit = ingredient.serving_unit ?? 'serving'
if (servingUnit === 'serving') {
servingSize = 1;
} else {
servingSize = ingredient.serving_size_formatted
}
}
entryItem.querySelector(':scope input[name="ingredients[amount][]"]').value = servingSize;
entryItem.querySelector(':scope select[name="ingredients[unit][]"]').value = servingUnit;
});
</script>
@endpush
@endonce