parsley/app/javascript/components/LogShow.vue

61 lines
1.5 KiB
Vue

<template>
<div>
<h1 class="title">[Log Entry] {{log.recipe.name}}</h1>
<div class="columns">
<div class="column is-half-tablet">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Date</label>
</div>
<div class="field-body">
<div class="field">
<app-date-time use-input :show-time="false" :date-time="log.date"></app-date-time>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Rating</label>
</div>
<div class="field-body">
<div class="field">
<app-rating readonly :model-value="log.rating"></app-rating>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Notes</label>
</div>
<div class="field-body">
<div class="field">
<textarea readonly class="textarea" :value="log.notes"></textarea>
</div>
</div>
</div>
</div>
</div>
<recipe-show :recipe="log.recipe"></recipe-show>
</div>
</template>
<script setup>
import RecipeShow from "./RecipeShow";
const props = defineProps({
log: {
required: true,
type: Object
}
});
</script>
<style lang="scss" scoped>
</style>