Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-02 20:15:24 +02:00
Code Issues Releases Activity

feat: merge food into another (#1143)

Browse source 
* setup food repository

* add merge route and payloads

* remove type checking

* generate types

* implement merge dialog

* food repo tests

* split install from workflow

* bum dependencies

* revert changes

* update copy

* refactor URLs to avoid incorrect template being used

* stick advanced items under developer mode

* use utility component for advanced feature
This commit is contained in:
Hayden 2022-04-09 19:08:48 -08:00 • committed by GitHub
parent 10784b6e24
commit b93dae109e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 319 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

47
frontend/pages/group/data/foods.vue
View file

@ -1,5 +1,20 @@
<template>
<div>
<!-- Merge Dialog -->
<BaseDialog v-model="mergeDialog" :icon="$globals.icons.foods" title="Combine Food" @confirm="mergeFoods">
<v-card-text>
Combining the selected foods will merge the Source Food and Target Food into a single food. The
<strong> Source Food will be deleted </strong> and all of the references to the Source Food will be updated to
point to the Target Food.
<v-autocomplete v-model="fromFood" return-object :items="foods" item-text="name" label="Source Food" />
<v-autocomplete v-model="toFood" return-object :items="foods" item-text="name" label="Target Food" />
<template v-if="canMerge && fromFood && toFood">
<div class="text-center">Merging {{ fromFood.name }} into {{ toFood.name }}</div>
</template>
</v-card-text>
</BaseDialog>
<!-- Edit Dialog -->
<BaseDialog
v-model="editDialog"
@ -48,7 +63,7 @@
@edit-one="editEventHandler"
>
<template #button-row>
<BaseButton :disabled="true">
<BaseButton @click="mergeDialog = true">
<template #icon> {{ $globals.icons.foods }} </template>
Combine
</BaseButton>
@ -64,6 +79,7 @@
<script lang="ts">
import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
import { computed } from "vue-demi";
import { validators } from "~/composables/use-validators";
import { useUserApi } from "~/composables/api";
import { IngredientFood } from "~/types/api-types/recipe";
@ -144,6 +160,29 @@ export default defineComponent({
deleteDialog.value = false;
}
// ============================================================
// Merge Foods
const mergeDialog = ref(false);
const fromFood = ref<IngredientFood | null>(null);
const toFood = ref<IngredientFood | null>(null);
const canMerge = computed(() => {
return fromFood.value && toFood.value && fromFood.value.id !== toFood.value.id;
});
async function mergeFoods() {
if (!canMerge.value || !fromFood.value || !toFood.value) {
return;
}
const { data } = await userApi.foods.merge(fromFood.value.id, toFood.value.id);
if (data) {
refreshFoods();
}
}
// ============================================================
// Labels
@ -170,6 +209,12 @@ export default defineComponent({
deleteEventHandler,
deleteDialog,
deleteFood,
// Merge
canMerge,
mergeFoods,
mergeDialog,
fromFood,
toFood,
};
},
});

306
frontend/pages/group/data/migrations.vue
View file

@ -1,306 +0,0 @@
<template>
<v-container>
<BasePageTitle divider>
<template #header>
<v-img
max-height="200"
max-width="200"
class="mb-2"
:src="require('~/static/svgs/manage-data-migrations.svg')"
></v-img>
</template>
<template #title> Recipe Data Migrations</template>
Recipes can be migrated from another supported application to Mealie. This is a great way to get started with
Mealie.
</BasePageTitle>
<v-container>
<BaseCardSectionTitle title="New Migration"> </BaseCardSectionTitle>
<v-card outlined :loading="loading">
<v-card-title> Choose Migration Type </v-card-title>
<v-card-text v-if="content" class="pb-0">
<div class="mb-2">
<BaseOverflowButton v-model="migrationType" mode="model" :items="items" />
</div>
{{ content.text }}
<v-treeview v-if="content.tree" dense :items="content.tree">
<template #prepend="{ item }">
<v-icon> {{ item.icon }}</v-icon>
</template>
</v-treeview>
</v-card-text>
<v-card-title class="mt-0"> Upload File </v-card-title>
<v-card-text>
<AppButtonUpload
accept=".zip"
class="mb-2"
:post="false"
file-name="file"
:text-btn="false"
@uploaded="setFileObject"
/>
{{ fileObject.name || "No file selected" }}
</v-card-text>
<v-card-text>
<v-checkbox v-model="addMigrationTag">
<template #label>
Tag all recipes with <b class="mx-1"> {{ migrationType }} </b> tag
</template>
</v-checkbox>
</v-card-text>
<v-card-actions class="justify-end">
<BaseButton :disabled="!fileObject.name" submit @click="startMigration">
{{ $t("general.submit") }}</BaseButton
>
</v-card-actions>
</v-card>
</v-container>
<v-container>
<BaseCardSectionTitle title="Previous Migrations"> </BaseCardSectionTitle>
<ReportTable :items="reports" @delete="deleteReport" />
</v-container>
</v-container>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, useContext, computed, onMounted } from "@nuxtjs/composition-api";
import { SupportedMigration } from "~/api/class-interfaces/group-migrations";
import { ReportSummary } from "~/api/class-interfaces/group-reports";
import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
import { useUserApi } from "~/composables/api";
const MIGRATIONS = {
nextcloud: "nextcloud",
chowdown: "chowdown",
paprika: "paprika",
mealie: "mealie_alpha",
};
export default defineComponent({
setup() {
const { $globals } = useContext();
const api = useUserApi();
const state = reactive({
addMigrationTag: false,
loading: false,
treeState: true,
migrationType: MIGRATIONS.nextcloud as SupportedMigration,
fileObject: {} as File,
reports: [] as ReportSummary[],
});
const items: MenuItem[] = [
{
text: "Nextcloud",
value: MIGRATIONS.nextcloud,
},
{
text: "Chowdown",
value: MIGRATIONS.chowdown,
},
{
text: "Paprika",
value: MIGRATIONS.paprika,
},
{
text: "Mealie",
value: MIGRATIONS.mealie,
},
];
const _content = {
[MIGRATIONS.nextcloud]: {
text: "Nextcloud recipes can be imported from a zip file that contains the data stored in Nextcloud. See the example folder structure below to ensure your recipes are able to be imported.",
tree: [
{
id: 1,
icon: $globals.icons.zip,
name: "nextcloud.zip",
children: [
{
id: 2,
name: "Recipe 1",
icon: $globals.icons.folderOutline,
children: [
{ id: 3, name: "recipe.json", icon: $globals.icons.codeJson },
{ id: 4, name: "full.jpg", icon: $globals.icons.fileImage },
{ id: 5, name: "thumb.jpg", icon: $globals.icons.fileImage },
],
},
{
id: 6,
name: "Recipe 2",
icon: $globals.icons.folderOutline,
children: [
{ id: 7, name: "recipe.json", icon: $globals.icons.codeJson },
{ id: 8, name: "full.jpg", icon: $globals.icons.fileImage },
{ id: 9, name: "thumb.jpg", icon: $globals.icons.fileImage },
],
},
],
},
],
},
[MIGRATIONS.chowdown]: {
text: "Mealie natively supports the chowdown repository format. Download the code repository as a .zip file and upload it below",
tree: [
{
id: 1,
icon: $globals.icons.zip,
name: "nextcloud.zip",
children: [
{
id: 2,
name: "Recipe 1",
icon: $globals.icons.folderOutline,
children: [
{ id: 3, name: "recipe.json", icon: $globals.icons.codeJson },
{ id: 4, name: "full.jpg", icon: $globals.icons.fileImage },
{ id: 5, name: "thumb.jpg", icon: $globals.icons.fileImage },
],
},
{
id: 6,
name: "Recipe 2",
icon: $globals.icons.folderOutline,
children: [
{ id: 7, name: "recipe.json", icon: $globals.icons.codeJson },
{ id: 8, name: "full.jpg", icon: $globals.icons.fileImage },
{ id: 9, name: "thumb.jpg", icon: $globals.icons.fileImage },
],
},
],
},
],
},
[MIGRATIONS.paprika]: {
text: "Mealie can import recipes from the Paprika application. Export your recipes from paprika, rename the export extension to .zip and upload it below.",
tree: false,
},
[MIGRATIONS.mealie]: {
text: "Mealie can import recipes from the Mealie application from a pre v1.0 release. Export your recipes from your old instance, and upload the zip file below. Note that only recipes can be imported from the export.",
tree: [
{
id: 1,
icon: $globals.icons.zip,
name: "mealie.zip",
children: [
{
id: 2,
name: "recipes",
icon: $globals.icons.folderOutline,
children: [
{
id: 3,
name: "recipe-name",
icon: $globals.icons.folderOutline,
children: [
{ id: 4, name: "recipe-name.json", icon: $globals.icons.codeJson },
{
id: 5,
name: "images",
icon: $globals.icons.folderOutline,
children: [
{ id: 6, name: "original.webp", icon: $globals.icons.codeJson },
{ id: 7, name: "full.jpg", icon: $globals.icons.fileImage },
{ id: 8, name: "thumb.jpg", icon: $globals.icons.fileImage },
],
},
],
},
{
id: 9,
name: "recipe-name-1",
icon: $globals.icons.folderOutline,
children: [
{ id: 10, name: "recipe-name-1.json", icon: $globals.icons.codeJson },
{
id: 11,
name: "images",
icon: $globals.icons.folderOutline,
children: [
{ id: 12, name: "original.webp", icon: $globals.icons.codeJson },
{ id: 13, name: "full.jpg", icon: $globals.icons.fileImage },
{ id: 14, name: "thumb.jpg", icon: $globals.icons.fileImage },
],
},
],
},
],
},
],
},
],
},
};
function setFileObject(fileObject: File) {
state.fileObject = fileObject;
}
async function startMigration() {
state.loading = true;
const payload = {
addMigrationTag: state.addMigrationTag,
migrationType: state.migrationType,
archive: state.fileObject,
};
const { data } = await api.groupMigration.startMigration(payload);
state.loading = false;
if (data) {
state.reports.unshift(data);
}
}
async function getMigrationReports() {
const { data } = await api.groupReports.getAll("migration");
if (data) {
state.reports = data;
}
}
async function deleteReport(id: string) {
await api.groupReports.deleteOne(id);
getMigrationReports();
}
onMounted(() => {
getMigrationReports();
});
const content = computed(() => {
const data = _content[state.migrationType];
if (data) {
return data;
} else {
return {
text: "",
tree: false,
};
}
});
return {
...toRefs(state),
items,
content,
setFileObject,
deleteReport,
startMigration,
getMigrationReports,
};
},
});
</script>
<style lang="scss" scoped>
</style>

76
frontend/pages/group/data/reports/_id.vue
View file

@ -1,76 +0,0 @@
<template>
<v-container>
<BasePageTitle divider>
<template #header>
<v-img max-height="200" max-width="200" class="mb-2" :src="require('~/static/svgs/data-reports.svg')"></v-img>
</template>
<template #title> Recipe Data Migrations</template>
Recipes can be migrated from another supported application to Mealie. This is a great way to get started with
Mealie.
</BasePageTitle>
<v-container v-if="report">
<BaseCardSectionTitle :title="report.name"> </BaseCardSectionTitle>
<v-card-text> Report Id: {{ id }} </v-card-text>
<v-data-table :headers="itemHeaders" :items="report.entries" :items-per-page="50" show-expand>
<template #item.success="{ item }">
<v-icon :color="item.success ? 'success' : 'error'">
{{ item.success ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
</v-icon>
</template>
<template #item.timestamp="{ item }">
{{ $d(Date.parse(item.timestamp), "short") }}
</template>
<template #expanded-item="{ headers, item }">
<td class="pa-6" :colspan="headers.length">{{ item.exception }}</td>
</template>
</v-data-table>
</v-container>
</v-container>
</template>
<script lang="ts">
import { defineComponent, useRoute, reactive, toRefs, onMounted } from "@nuxtjs/composition-api";
import { useUserApi } from "~/composables/api";
export default defineComponent({
setup() {
const route = useRoute();
const id = route.value.params.id;
const api = useUserApi();
const state = reactive({
report: {},
});
async function getReport() {
const { data } = await api.groupReports.getOne(id);
if (data) {
state.report = data;
}
}
onMounted(async () => {
await getReport();
});
const itemHeaders = [
{ text: "Success", value: "success" },
{ text: "Message", value: "message" },
{ text: "Timestamp", value: "timestamp" },
];
return {
...toRefs(state),
id,
itemHeaders,
};
},
});
</script>
<style lang="scss" scoped>
</style>