8eefa05393
* add annotations to docs * alchemy data dumper * initial tests * sourcery refactor * db backups/restore * potential postgres fix * potential postgres fix * this is terrible * potential pg fix * cleanup * remove unused import * fix comparison * generate frontend types * update timestamp and add directory filter * rewrite to new admin-api * update backup routers * add file_token response helper * update imports * remove test_backup
97 lines
2.7 KiB
Vue
97 lines
2.7 KiB
Vue
<template>
|
|
<div v-if="value && value.length > 0">
|
|
<div class="d-flex justify-start">
|
|
<h2 class="mb-2 mt-1">{{ $t("recipe.ingredients") }}</h2>
|
|
<AppButtonCopy btn-class="ml-auto" :copy-text="ingredientCopyText" />
|
|
</div>
|
|
<div>
|
|
<div v-for="(ingredient, index) in value" :key="'ingredient' + index">
|
|
<h3 v-if="showTitleEditor[index]" class="mt-2">{{ ingredient.title }}</h3>
|
|
<v-divider v-if="showTitleEditor[index]"></v-divider>
|
|
<v-list-item dense @click="toggleChecked(index)">
|
|
<v-checkbox hide-details :value="checked[index]" color="secondary" />
|
|
<v-list-item-content>
|
|
<VueMarkdown
|
|
class="ma-0 pa-0 text-subtitle-1 dense-markdown"
|
|
:source="parseIngredientText(ingredient, disableAmount, scale)"
|
|
/>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
|
|
// @ts-ignore vue-markdown has no types
|
|
import VueMarkdown from "@adapttive/vue-markdown";
|
|
import { parseIngredientText } from "~/composables/recipes";
|
|
import { RecipeIngredient } from "~/types/api-types/recipe";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
VueMarkdown,
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Array as () => RecipeIngredient[],
|
|
default: () => [],
|
|
},
|
|
disableAmount: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
scale: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
},
|
|
setup(props) {
|
|
function validateTitle(title?: string) {
|
|
return !(title === undefined || title === "" || title === null);
|
|
}
|
|
|
|
const state = reactive({
|
|
checked: props.value.map(() => false),
|
|
showTitleEditor: computed(() => props.value.map((x) => validateTitle(x.title))),
|
|
});
|
|
|
|
const ingredientCopyText = computed(() => {
|
|
return props.value
|
|
.map((ingredient) => {
|
|
return `- [ ] ${parseIngredientText(ingredient, props.disableAmount, props.scale)}`;
|
|
})
|
|
.join("\n");
|
|
});
|
|
|
|
function toggleChecked(index: number) {
|
|
// TODO Find a better way to do this - $set is not available, and
|
|
// direct array modifications are not propagated for some reason
|
|
state.checked.splice(index, 1, !state.checked[index]);
|
|
}
|
|
|
|
return {
|
|
...toRefs(state),
|
|
parseIngredientText,
|
|
ingredientCopyText,
|
|
toggleChecked,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.dense-markdown p {
|
|
margin: auto !important;
|
|
}
|
|
|
|
.v-input--selection-controls {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: auto !important;
|
|
}
|
|
|
|
.v-input--selection-controls__input {
|
|
margin-bottom: auto !important;
|
|
}
|
|
</style>
|