mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-24 15:49:42 +02:00
feat: Migrate to Nuxt 3 framework (#5184)
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com> Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh
GitHub
parent
89ab7fac25
commit
c24d532608
403 changed files with 23959 additions and 19557 deletions
|
|
@ -5,6 +5,7 @@
|
|||
v-model="state.createDialog"
|
||||
:title="$t('data-pages.tools.new-tool')"
|
||||
:icon="$globals.icons.potSteam"
|
||||
can-submit
|
||||
@submit="createTool"
|
||||
>
|
||||
<v-card-text>
|
||||
|
|
@ -14,9 +15,11 @@
|
|||
autofocus
|
||||
:label="$t('general.name')"
|
||||
:rules="[validators.required]"
|
||||
></v-text-field>
|
||||
<v-checkbox v-model="createTarget.onHand" :label="$t('tool.on-hand')">
|
||||
</v-checkbox>
|
||||
/>
|
||||
<v-checkbox
|
||||
v-model="createTarget.onHand"
|
||||
:label="$t('tool.on-hand')"
|
||||
/>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
|
@ -26,13 +29,19 @@
|
|||
v-model="state.editDialog"
|
||||
:icon="$globals.icons.potSteam"
|
||||
:title="$t('data-pages.tools.edit-tool')"
|
||||
:submit-text="$tc('general.save')"
|
||||
:submit-text="$t('general.save')"
|
||||
@submit="editSaveTool"
|
||||
>
|
||||
<v-card-text v-if="editTarget">
|
||||
<div class="mt-4">
|
||||
<v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
|
||||
<v-checkbox v-model="editTarget.onHand" :label="$t('tool.on-hand')"> </v-checkbox>
|
||||
<v-text-field
|
||||
v-model="editTarget.name"
|
||||
:label="$t('general.name')"
|
||||
/>
|
||||
<v-checkbox
|
||||
v-model="editTarget.onHand"
|
||||
:label="$t('tool.on-hand')"
|
||||
/>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
|
@ -40,14 +49,19 @@
|
|||
<!-- Delete Dialog -->
|
||||
<BaseDialog
|
||||
v-model="state.deleteDialog"
|
||||
:title="$tc('general.confirm')"
|
||||
:title="$t('general.confirm')"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
color="error"
|
||||
@confirm="deleteTool"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
<p v-if="deleteTarget" class="mt-4 ml-4">{{ deleteTarget.name }}</p>
|
||||
<p
|
||||
v-if="deleteTarget"
|
||||
class="mt-4 ml-4"
|
||||
>
|
||||
{{ deleteTarget.name }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
|
|
@ -55,20 +69,24 @@
|
|||
<BaseDialog
|
||||
v-model="state.bulkDeleteDialog"
|
||||
width="650px"
|
||||
:title="$tc('general.confirm')"
|
||||
:title="$t('general.confirm')"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
color="error"
|
||||
@confirm="deleteSelected"
|
||||
>
|
||||
<v-card-text>
|
||||
<p class="h4">{{ $t('general.confirm-delete-generic-items') }}</p>
|
||||
<v-card outlined>
|
||||
<v-virtual-scroll height="400" item-height="25" :items="bulkDeleteTarget">
|
||||
<p class="h4">
|
||||
{{ $t('general.confirm-delete-generic-items') }}
|
||||
</p>
|
||||
<v-card variant="outlined">
|
||||
<v-virtual-scroll
|
||||
height="400"
|
||||
item-height="25"
|
||||
:items="bulkDeleteTarget"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<v-list-item class="pb-2">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
|
|
@ -77,21 +95,30 @@
|
|||
</BaseDialog>
|
||||
|
||||
<!-- Data Table -->
|
||||
<BaseCardSectionTitle :icon="$globals.icons.potSteam" section :title="$tc('data-pages.tools.tool-data')"> </BaseCardSectionTitle>
|
||||
<BaseCardSectionTitle
|
||||
:icon="$globals.icons.potSteam"
|
||||
section
|
||||
:title="$t('data-pages.tools.tool-data')"
|
||||
/>
|
||||
<CrudTable
|
||||
v-model:headers="tableHeaders"
|
||||
:table-config="tableConfig"
|
||||
:headers.sync="tableHeaders"
|
||||
:data="tools || []"
|
||||
:bulk-actions="[{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'}]"
|
||||
:bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
|
||||
initial-sort="name"
|
||||
@delete-one="deleteEventHandler"
|
||||
@edit-one="editEventHandler"
|
||||
@delete-selected="bulkDeleteEventHandler"
|
||||
>
|
||||
<template #button-row>
|
||||
<BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
|
||||
<BaseButton
|
||||
create
|
||||
@click="state.createDialog = true"
|
||||
>
|
||||
{{ $t("general.create") }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
<template #item.onHand="{ item }">
|
||||
<template #[`item.onHand`]="{ item }">
|
||||
<v-icon :color="item.onHand ? 'success' : undefined">
|
||||
{{ item.onHand ? $globals.icons.check : $globals.icons.close }}
|
||||
</v-icon>
|
||||
|
|
@ -101,18 +128,18 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useToolStore, useToolData } from "~/composables/store";
|
||||
import { RecipeTool } from "~/lib/api/types/recipe";
|
||||
import type { RecipeTool } from "~/lib/api/types/recipe";
|
||||
|
||||
interface RecipeToolWithOnHand extends RecipeTool {
|
||||
onHand: boolean;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
setup() {
|
||||
const { $auth, i18n } = useContext();
|
||||
const i18n = useI18n();
|
||||
const $auth = useMealieAuth();
|
||||
const tableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
|
|
@ -127,11 +154,13 @@ export default defineComponent({
|
|||
text: i18n.t("general.name"),
|
||||
value: "name",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("tool.on-hand"),
|
||||
value: "onHand",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -142,7 +171,7 @@ export default defineComponent({
|
|||
bulkDeleteDialog: false,
|
||||
});
|
||||
|
||||
const userHousehold = computed(() => $auth.user?.householdSlug || "");
|
||||
const userHousehold = computed(() => $auth.user.value?.householdSlug || "");
|
||||
const toolData = useToolData();
|
||||
const toolStore = useToolStore();
|
||||
const tools = computed(() => toolStore.store.value.map((tools) => {
|
||||
|
|
@ -150,24 +179,26 @@ export default defineComponent({
|
|||
return { ...tools, onHand } as RecipeToolWithOnHand;
|
||||
}));
|
||||
|
||||
|
||||
// ============================================================
|
||||
// Create Tool
|
||||
|
||||
async function createTool() {
|
||||
if (toolData.data.onHand) {
|
||||
toolData.data.householdsWithTool = [userHousehold.value];
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
toolData.data.householdsWithTool = [];
|
||||
}
|
||||
|
||||
// @ts-ignore - only property really required is the name and onHand (RecipeOrganizerPage)
|
||||
await toolStore.actions.createOne({ name: toolData.data.name, householdsWithTool: toolData.data.householdsWithTool });
|
||||
await toolStore.actions.createOne({
|
||||
name: toolData.data.name, householdsWithTool: toolData.data.householdsWithTool,
|
||||
id: "",
|
||||
slug: "",
|
||||
});
|
||||
toolData.reset();
|
||||
state.createDialog = false;
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// Edit Tool
|
||||
|
||||
|
|
@ -185,12 +216,14 @@ export default defineComponent({
|
|||
if (editTarget.value.onHand && !editTarget.value.householdsWithTool?.includes(userHousehold.value)) {
|
||||
if (!editTarget.value.householdsWithTool) {
|
||||
editTarget.value.householdsWithTool = [userHousehold.value];
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
editTarget.value.householdsWithTool.push(userHousehold.value);
|
||||
}
|
||||
} else if (!editTarget.value.onHand && editTarget.value.householdsWithTool?.includes(userHousehold.value)) {
|
||||
}
|
||||
else if (!editTarget.value.onHand && editTarget.value.householdsWithTool?.includes(userHousehold.value)) {
|
||||
editTarget.value.householdsWithTool = editTarget.value.householdsWithTool.filter(
|
||||
(household) => household !== userHousehold.value
|
||||
household => household !== userHousehold.value,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -198,7 +231,6 @@ export default defineComponent({
|
|||
state.editDialog = false;
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// Delete Tool
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue