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

feat: Migrate to Nuxt 3 framework (#5184)

Browse source 
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 2025-06-20 00:09:12 +07:00 • committed by GitHub
parent 89ab7fac25
commit c24d532608
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
403 changed files with 23959 additions and 19557 deletions
Download patch file Download diff file Expand all files Collapse all files

75
frontend/pages/group/data/categories.vue
View file

@ -5,6 +5,7 @@
v-model="state.createDialog"
:title="$t('data-pages.categories.new-category')"
:icon="$globals.icons.categories"
can-submit
@submit="createCategory"
>
<v-card-text>
@ -14,10 +15,9 @@
autofocus
:label="$t('general.name')"
:rules="[validators.required]"
></v-text-field>
/>
</v-form>
</v-card-text>
</BaseDialog>
<!-- Edit Dialog -->
@ -25,12 +25,16 @@
v-model="state.editDialog"
:icon="$globals.icons.categories"
:title="$t('data-pages.categories.edit-category')"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
can-submit
@submit="editSaveCategory"
>
<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-text-field
v-model="editTarget.name"
:label="$t('general.name')"
/>
</div>
</v-card-text>
</BaseDialog>
@ -38,14 +42,20 @@
<!-- Delete Dialog -->
<BaseDialog
v-model="state.deleteDialog"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@confirm="deleteCategory"
>
<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>
@ -53,20 +63,25 @@
<BaseDialog
v-model="state.bulkDeleteDialog"
width="650px"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@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>
@ -75,33 +90,41 @@
</BaseDialog>
<!-- Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.categories" section :title="$tc('data-pages.categories.category-data')"> </BaseCardSectionTitle>
<BaseCardSectionTitle
:icon="$globals.icons.categories"
section
:title="$t('data-pages.categories.category-data')"
/>
<CrudTable
v-model:headers="tableHeaders"
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="categories || []"
: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>
</CrudTable>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
import { validators } from "~/composables/use-validators";
import { useCategoryStore, useCategoryData } from "~/composables/store";
import { RecipeCategory } from "~/lib/api/types/recipe";
import type { RecipeCategory } from "~/lib/api/types/recipe";
export default defineComponent({
export default defineNuxtComponent({
setup() {
const { i18n } = useContext();
const i18n = useI18n();
const tableConfig = {
hideColumns: true,
canExport: true,
@ -116,6 +139,7 @@ export default defineComponent({
text: i18n.t("general.name"),
value: "name",
show: true,
sortable: true,
},
];
@ -128,18 +152,18 @@ export default defineComponent({
const categoryData = useCategoryData();
const categoryStore = useCategoryStore();
// ============================================================
// Create Category
async function createCategory() {
// @ts-ignore - only property really required is the name (RecipeOrganizerPage)
await categoryStore.actions.createOne({ name: categoryData.data.name });
await categoryStore.actions.createOne({
name: categoryData.data.name,
slug: "",
});
categoryData.reset();
state.createDialog = false;
}
// ============================================================
// Edit Category
@ -158,7 +182,6 @@ export default defineComponent({
state.editDialog = false;
}
// ============================================================
// Delete Category

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

@ -1,13 +1,31 @@
<template>
<div>
<!-- Merge Dialog -->
<BaseDialog v-model="mergeDialog" :icon="$globals.icons.foods" :title="$tc('data-pages.foods.combine-food')" @confirm="mergeFoods">
<BaseDialog
v-model="mergeDialog"
:icon="$globals.icons.foods"
:title="$t('data-pages.foods.combine-food')"
can-confirm
@confirm="mergeFoods"
>
<v-card-text>
<div>
{{ $t("data-pages.foods.merge-dialog-text") }}
</div>
<v-autocomplete v-model="fromFood" return-object :items="foods" item-text="name" :label="$t('data-pages.foods.source-food')" />
<v-autocomplete v-model="toFood" return-object :items="foods" item-text="name" :label="$t('data-pages.foods.target-food')" />
<v-autocomplete
v-model="fromFood"
return-object
:items="foods"
item-title="name"
:label="$t('data-pages.foods.source-food')"
/>
<v-autocomplete
v-model="toFood"
return-object
:items="foods"
item-title="name"
:label="$t('data-pages.foods.target-food')"
/>
<template v-if="canMerge && fromFood && toFood">
<div class="text-center">
@ -17,11 +35,12 @@
</v-card-text>
</BaseDialog>
<!-- Seed Dialog-->
<!-- Seed Dialog -->
<BaseDialog
v-model="seedDialog"
:icon="$globals.icons.foods"
:title="$tc('data-pages.seed-data')"
:title="$t('data-pages.seed-data')"
can-confirm
@confirm="seedDatabase"
>
<v-card-text>
@ -31,24 +50,26 @@
<v-autocomplete
v-model="locale"
:items="locales"
item-text="name"
item-title="name"
:label="$t('data-pages.select-language')"
class="my-3"
hide-details
outlined
variant="outlined"
offset
>
<template #item="{ item }">
<v-list-item-content>
<v-list-item-title> {{ item.name }} </v-list-item-title>
<v-list-item-subtitle>
{{ item.progress }}% {{ $tc("language-dialog.translated") }}
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-title> {{ item.raw.name }} </v-list-item-title>
<v-list-item-subtitle>
{{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
</v-list-item-subtitle>
</template>
</v-autocomplete>
<v-alert v-if="foods && foods.length > 0" type="error" class="mb-0 text-body-2">
<v-alert
v-if="foods && foods.length > 0"
type="error"
class="mb-0 text-body-2"
>
{{ $t("data-pages.foods.seed-dialog-warning") }}
</v-alert>
</v-card-text>
@ -58,9 +79,10 @@
<BaseDialog
v-model="createDialog"
:icon="$globals.icons.foods"
:title="$tc('data-pages.foods.create-food')"
:title="$t('data-pages.foods.create-food')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
can-submit
@submit="createFood"
>
<v-card-text>
@ -71,22 +93,24 @@
:label="$t('general.name')"
:hint="$t('data-pages.foods.example-food-singular')"
:rules="[validators.required]"
></v-text-field>
/>
<v-text-field
v-model="createTarget.pluralName"
:label="$t('general.plural-name')"
:hint="$t('data-pages.foods.example-food-plural')"
></v-text-field>
<v-text-field v-model="createTarget.description" :label="$t('recipe.description')"></v-text-field>
/>
<v-text-field
v-model="createTarget.description"
:label="$t('recipe.description')"
/>
<v-autocomplete
v-model="createTarget.labelId"
clearable
:items="allLabels"
item-value="id"
item-text="name"
item-title="name"
:label="$t('data-pages.foods.food-label')"
>
</v-autocomplete>
/>
<v-checkbox
v-model="createTarget.onHand"
hide-details
@ -95,8 +119,9 @@
<p class="text-caption mt-1">
{{ $t("data-pages.foods.on-hand-checkbox-label") }}
</p>
</v-form> </v-card-text
></BaseDialog>
</v-form>
</v-card-text>
</BaseDialog>
<!-- Alias Sub-Dialog -->
<RecipeDataAliasManagerDialog
@ -111,9 +136,10 @@
<BaseDialog
v-model="editDialog"
:icon="$globals.icons.foods"
:title="$tc('data-pages.foods.edit-food')"
:title="$t('data-pages.foods.edit-food')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
can-submit
@submit="editSaveFood"
>
<v-card-text v-if="editTarget">
@ -123,25 +149,24 @@
:label="$t('general.name')"
:hint="$t('data-pages.foods.example-food-singular')"
:rules="[validators.required]"
></v-text-field>
/>
<v-text-field
v-model="editTarget.pluralName"
:label="$t('general.plural-name')"
:hint="$t('data-pages.foods.example-food-plural')"
></v-text-field>
/>
<v-text-field
v-model="editTarget.description"
:label="$t('recipe.description')"
></v-text-field>
/>
<v-autocomplete
v-model="editTarget.labelId"
clearable
:items="allLabels"
item-value="id"
item-text="name"
item-title="name"
:label="$t('data-pages.foods.food-label')"
>
</v-autocomplete>
/>
<v-checkbox
v-model="editTarget.onHand"
hide-details
@ -153,21 +178,32 @@
</v-form>
</v-card-text>
<template #custom-card-action>
<BaseButton edit @click="aliasManagerEventHandler">{{ $t('data-pages.manage-aliases') }}</BaseButton>
<BaseButton
edit
@click="aliasManagerEventHandler"
>
{{ $t('data-pages.manage-aliases') }}
</BaseButton>
</template>
</BaseDialog>
<!-- Delete Dialog -->
<BaseDialog
v-model="deleteDialog"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@confirm="deleteFood"
>
<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>
@ -175,20 +211,25 @@
<BaseDialog
v-model="bulkDeleteDialog"
width="650px"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@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>
@ -199,14 +240,15 @@
<!-- Bulk Assign Labels Dialog -->
<BaseDialog
v-model="bulkAssignLabelDialog"
:title="$tc('data-pages.labels.assign-label')"
:title="$t('data-pages.labels.assign-label')"
:icon="$globals.icons.tags"
can-confirm
@confirm="assignSelected"
>
<v-card-text>
<v-card class="mb-4">
<v-card-title>{{ $tc("general.caution") }}</v-card-title>
<v-card-text>{{ $tc("data-pages.foods.label-overwrite-warning") }}</v-card-text>
<v-card-title>{{ $t("general.caution") }}</v-card-title>
<v-card-text>{{ $t("data-pages.foods.label-overwrite-warning") }}</v-card-text>
</v-card>
<v-autocomplete
@ -214,16 +256,18 @@
clearable
:items="allLabels"
item-value="id"
item-text="name"
:label="$tc('data-pages.foods.food-label')"
item-title="name"
:label="$t('data-pages.foods.food-label')"
/>
<v-card outlined>
<v-virtual-scroll height="400" item-height="25" :items="bulkAssignTarget">
<v-card variant="outlined">
<v-virtual-scroll
height="400"
item-height="25"
:items="bulkAssignTarget"
>
<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>
@ -232,14 +276,18 @@
</BaseDialog>
<!-- Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.foods" section :title="$tc('data-pages.foods.food-data')"> </BaseCardSectionTitle>
<BaseCardSectionTitle
:icon="$globals.icons.foods"
section
:title="$t('data-pages.foods.food-data')"
/>
<CrudTable
v-model:headers="tableHeaders"
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="foods || []"
:bulk-actions="[
{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'},
{icon: $globals.icons.tags, text: $tc('data-pages.labels.assign-label'), event: 'assign-selected'}
{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' },
{ icon: $globals.icons.tags, text: $t('data-pages.labels.assign-label'), event: 'assign-selected' },
]"
initial-sort="createdAt"
initial-sort-desc
@ -250,28 +298,38 @@
@assign-selected="bulkAssignEventHandler"
>
<template #button-row>
<BaseButton create @click="createDialog = true" />
<BaseButton
create
@click="createDialog = true"
/>
<BaseButton @click="mergeDialog = true">
<template #icon> {{ $globals.icons.externalLink }} </template>
<template #icon>
{{ $globals.icons.externalLink }}
</template>
{{ $t('data-pages.combine') }}
</BaseButton>
</template>
<template #item.label="{ item }">
<MultiPurposeLabel v-if="item.label" :label="item.label">
<template #[`item.label`]="{ item }">
<MultiPurposeLabel
v-if="item.label"
:label="item.label"
>
{{ item.label.name }}
</MultiPurposeLabel>
</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>
</template>
<template #item.createdAt="{ item }">
<template #[`item.createdAt`]="{ item }">
{{ formatDate(item.createdAt) }}
</template>
<template #button-bottom>
<BaseButton @click="seedDialog = true">
<template #icon> {{ $globals.icons.database }} </template>
<template #icon>
{{ $globals.icons.database }}
</template>
{{ $t('data-pages.seed') }}
</BaseButton>
</template>
@ -280,17 +338,16 @@
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, computed, useContext } from "@nuxtjs/composition-api";
import type { LocaleObject } from "@nuxtjs/i18n";
import RecipeDataAliasManagerDialog from "~/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue";
import { validators } from "~/composables/use-validators";
import { useUserApi } from "~/composables/api";
import { CreateIngredientFood, IngredientFood, IngredientFoodAlias } from "~/lib/api/types/recipe";
import type { CreateIngredientFood, IngredientFood, IngredientFoodAlias } from "~/lib/api/types/recipe";
import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
import { useLocales } from "~/composables/use-locales";
import { useFoodStore, useLabelStore } from "~/composables/store";
import { VForm } from "~/types/vuetify";
import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
import type { MultiPurposeLabelOut } from "~/lib/api/types/labels";
import type { VForm } from "~/types/auto-forms";
interface CreateIngredientFoodWithOnHand extends CreateIngredientFood {
onHand: boolean;
@ -301,40 +358,44 @@ interface IngredientFoodWithOnHand extends IngredientFood {
onHand: boolean;
}
export default defineComponent({
export default defineNuxtComponent({
components: { MultiPurposeLabel, RecipeDataAliasManagerDialog },
setup() {
const userApi = useUserApi();
const { $auth, i18n } = useContext();
const i18n = useI18n();
const $auth = useMealieAuth();
const tableConfig = {
hideColumns: true,
canExport: true,
};
const tableHeaders = [
{
text: i18n.tc("general.id"),
text: i18n.t("general.id"),
value: "id",
show: false,
},
{
text: i18n.tc("general.name"),
text: i18n.t("general.name"),
value: "name",
show: true,
sortable: true,
},
{
text: i18n.tc("general.plural-name"),
text: i18n.t("general.plural-name"),
value: "pluralName",
show: true,
sortable: true,
},
{
text: i18n.tc("recipe.description"),
text: i18n.t("recipe.description"),
value: "description",
show: true,
},
{
text: i18n.tc("shopping-list.label"),
text: i18n.t("shopping-list.label"),
value: "label",
show: true,
sortable: true,
sort: (label1: MultiPurposeLabelOut | null, label2: MultiPurposeLabelOut | null) => {
const label1Name = label1?.name || "";
const label2Name = label2?.name || "";
@ -342,26 +403,29 @@ export default defineComponent({
},
},
{
text: i18n.tc("tool.on-hand"),
text: i18n.t("tool.on-hand"),
value: "onHand",
show: true,
sortable: true,
},
{
text: i18n.tc("general.date-added"),
text: i18n.t("general.date-added"),
value: "createdAt",
show: false,
}
sortable: true,
},
];
function formatDate(date: string) {
try {
return i18n.d(Date.parse(date), "medium");
} catch {
}
catch {
return "";
}
}
const userHousehold = computed(() => $auth.user?.householdSlug || "");
const userHousehold = computed(() => $auth.user.value?.householdSlug || "");
const foodStore = useFoodStore();
const foods = computed(() => foodStore.store.value.map((food) => {
const onHand = food.householdsWithIngredientFood?.includes(userHousehold.value) || false;
@ -423,12 +487,14 @@ export default defineComponent({
if (editTarget.value.onHand && !editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
if (!editTarget.value.householdsWithIngredientFood) {
editTarget.value.householdsWithIngredientFood = [userHousehold.value];
} else {
}
else {
editTarget.value.householdsWithIngredientFood.push(userHousehold.value);
}
} else if (!editTarget.value.onHand && editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
}
else if (!editTarget.value.onHand && editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
editTarget.value.householdsWithIngredientFood = editTarget.value.householdsWithIngredientFood.filter(
(household) => household !== userHousehold.value
household => household !== userHousehold.value,
);
}
@ -525,8 +591,8 @@ export default defineComponent({
locale.value = currentLocale.value;
});
const locales = LOCALES.filter((locale) =>
(i18n.locales as LocaleObject[]).map((i18nLocale) => i18nLocale.code).includes(locale.value)
const locales = LOCALES.filter(locale =>
(i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value as any),
);
async function seedDatabase() {

12
frontend/pages/group/data/index.vue
View file

@ -1,17 +1,9 @@
<template>
<div></div>
<div />
</template>
<script lang="ts">
import { defineComponent, onMounted, useRouter } from "@nuxtjs/composition-api";
export default defineComponent({
props: {
value: {
type: Boolean,
default: false,
},
},
export default defineNuxtComponent({
setup() {
const router = useRouter();
onMounted(() => {

119
frontend/pages/group/data/labels.vue
View file

@ -1,13 +1,22 @@
<template>
<div>
<!-- Create New Dialog -->
<BaseDialog v-model="state.createDialog" :title="$t('data-pages.labels.new-label')" :icon="$globals.icons.tags" @submit="createLabel">
<BaseDialog
v-model="state.createDialog"
:title="$t('data-pages.labels.new-label')"
:icon="$globals.icons.tags"
can-submit
@submit="createLabel"
>
<v-card-text>
<MultiPurposeLabel :label="createLabelData" />
<div class="mt-4">
<v-text-field v-model="createLabelData.name" :label="$t('general.name')"> </v-text-field>
<InputColor v-model="createLabelData.color" />
<v-text-field
v-model="createLabelData.name"
:label="$t('general.name')"
/>
<InputColor v-model="createLabelData.color!" />
</div>
</v-card-text>
</BaseDialog>
@ -18,14 +27,18 @@
:icon="$globals.icons.tags"
:title="$t('data-pages.labels.edit-label')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
can-submit
@submit="editSaveLabel"
>
<v-card-text v-if="editLabel">
<MultiPurposeLabel :label="editLabel" />
<div class="mt-4">
<v-text-field v-model="editLabel.name" :label="$t('general.name')"> </v-text-field>
<InputColor v-model="editLabel.color" />
<v-text-field
v-model="editLabel.name"
:label="$t('general.name')"
/>
<InputColor v-model="editLabel.color!" />
</div>
</v-card-text>
</BaseDialog>
@ -33,15 +46,20 @@
<!-- Delete Dialog -->
<BaseDialog
v-model="state.deleteDialog"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@confirm="deleteLabel"
>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
<v-row>
<MultiPurposeLabel v-if="deleteTarget" class="mt-4 ml-4 mb-1" :label="deleteTarget" />
<MultiPurposeLabel
v-if="deleteTarget"
class="mt-4 ml-4 mb-1"
:label="deleteTarget"
/>
</v-row>
</v-card-text>
</BaseDialog>
@ -50,20 +68,25 @@
<BaseDialog
v-model="state.bulkDeleteDialog"
width="650px"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@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>
@ -71,11 +94,12 @@
</v-card-text>
</BaseDialog>
<!-- Seed Dialog-->
<!-- Seed Dialog -->
<BaseDialog
v-model="seedDialog"
:icon="$globals.icons.foods"
:title="$tc('data-pages.seed-data')"
:title="$t('data-pages.seed-data')"
can-confirm
@confirm="seedDatabase"
>
<v-card-text>
@ -85,52 +109,68 @@
<v-autocomplete
v-model="locale"
:items="locales"
item-text="name"
item-title="name"
:label="$t('data-pages.select-language')"
class="my-3"
hide-details
outlined
variant="outlined"
offset
>
<template #item="{ item }">
<v-list-item-content>
<v-list-item-title> {{ item.name }} </v-list-item-title>
<v-list-item-subtitle>
{{ item.progress }}% {{ $tc("language-dialog.translated") }}
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-title> {{ item.raw.name }} </v-list-item-title>
<v-list-item-subtitle>
{{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
</v-list-item-subtitle>
</template>
</v-autocomplete>
<v-alert v-if="labels && labels.length > 0" type="error" class="mb-0 text-body-2">
<v-alert
v-if="labels && labels.length > 0"
type="error"
class="mb-0 text-body-2"
>
{{ $t("data-pages.foods.seed-dialog-warning") }}
</v-alert>
</v-card-text>
</BaseDialog>
<!-- Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.tags" section :title="$tc('data-pages.labels.labels')"> </BaseCardSectionTitle>
<BaseCardSectionTitle
:icon="$globals.icons.tags"
section
:title="$t('data-pages.labels.labels')"
/>
<CrudTable
v-model:headers="tableHeaders"
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="labels || []"
: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.name="{ item }">
<MultiPurposeLabel v-if="item" :label="item">
<template #[`item.name`]="{ item }">
<MultiPurposeLabel
v-if="item"
:label="item"
>
{{ item.name }}
</MultiPurposeLabel>
</template>
<template #button-bottom>
<BaseButton @click="seedDialog = true">
<template #icon> {{ $globals.icons.database }} </template>
<template #icon>
{{ $globals.icons.database }}
</template>
{{ $t('data-pages.seed') }}
</BaseButton>
</template>
@ -139,20 +179,20 @@
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, useContext } from "@nuxtjs/composition-api";
import type { LocaleObject } from "@nuxtjs/i18n";
import { validators } from "~/composables/use-validators";
import { useUserApi } from "~/composables/api";
import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
import { MultiPurposeLabelSummary } from "~/lib/api/types/labels";
import type { MultiPurposeLabelSummary } from "~/lib/api/types/labels";
import { useLocales } from "~/composables/use-locales";
import { useLabelData, useLabelStore } from "~/composables/store";
export default defineComponent({
export default defineNuxtComponent({
components: { MultiPurposeLabel },
setup() {
const userApi = useUserApi();
const { i18n } = useContext();
const i18n = useI18n();
const tableConfig = {
hideColumns: true,
canExport: true,
@ -167,6 +207,7 @@ export default defineComponent({
text: i18n.t("general.name"),
value: "name",
show: true,
sortable: true,
},
];
@ -256,8 +297,8 @@ export default defineComponent({
locale.value = currentLocale.value;
});
const locales = LOCALES.filter((locale) =>
(i18n.locales as LocaleObject[]).map((i18nLocale) => i18nLocale.code).includes(locale.value)
const locales = LOCALES.filter(locale =>
(i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value),
);
async function seedDatabase() {

78
frontend/pages/group/data/recipe-actions.vue
View file

@ -5,6 +5,7 @@
v-model="state.createDialog"
:title="$t('data-pages.recipe-actions.new-recipe-action')"
:icon="$globals.icons.primary"
can-submit
@submit="createAction"
>
<v-card-text>
@ -35,15 +36,22 @@
v-model="state.editDialog"
:icon="$globals.icons.primary"
:title="$t('data-pages.recipe-actions.edit-recipe-action')"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
can-submit
@submit="editSaveAction"
>
<v-card-text v-if="editTarget">
<div class="mt-4">
<v-text-field v-model="editTarget.title" :label="$t('general.title')"/>
<v-text-field
v-model="editTarget.title"
:label="$t('general.title')"
/>
</div>
<div class="mt-4">
<v-text-field v-model="editTarget.url" :label="$t('general.url')"/>
<v-text-field
v-model="editTarget.url"
:label="$t('general.url')"
/>
</div>
<div class="mt-4">
<v-select
@ -58,14 +66,20 @@
<!-- Delete Dialog -->
<BaseDialog
v-model="state.deleteDialog"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@confirm="deleteAction"
>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
<p v-if="deleteTarget" class="mt-4 ml-4">{{ deleteTarget.title }}</p>
<p
v-if="deleteTarget"
class="mt-4 ml-4"
>
{{ deleteTarget.title }}
</p>
</v-card-text>
</BaseDialog>
@ -73,20 +87,25 @@
<BaseDialog
v-model="state.bulkDeleteDialog"
width="650px"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@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.title }}</v-list-item-title>
</v-list-item>
</template>
</v-virtual-scroll>
@ -95,33 +114,42 @@
</BaseDialog>
<!-- Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.primary" section :title="$tc('data-pages.recipe-actions.recipe-actions-data')"> </BaseCardSectionTitle>
<BaseCardSectionTitle
:icon="$globals.icons.primary"
section
:title="$t('data-pages.recipe-actions.recipe-actions-data')"
/>
<CrudTable
v-model:headers="tableHeaders"
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="actions || []"
: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="title"
@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>
</CrudTable>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
import { validators } from "~/composables/use-validators";
import { useGroupRecipeActions, useGroupRecipeActionData } from "~/composables/use-group-recipe-actions";
import { GroupRecipeActionOut } from "~/lib/api/types/household";
import type { GroupRecipeActionOut } from "~/lib/api/types/household";
export default defineComponent({
export default defineNuxtComponent({
setup() {
const { i18n } = useContext();
const i18n = useI18n();
const tableConfig = {
hideColumns: true,
canExport: true,
@ -136,6 +164,7 @@ export default defineComponent({
text: i18n.t("general.title"),
value: "title",
show: true,
sortable: true,
},
{
text: i18n.t("general.url"),
@ -146,6 +175,7 @@ export default defineComponent({
text: i18n.t("data-pages.recipe-actions.action-type"),
value: "actionType",
show: true,
sortable: true,
},
];
@ -158,24 +188,21 @@ export default defineComponent({
const actionData = useGroupRecipeActionData();
const actionStore = useGroupRecipeActions(null, null);
const actionTypeOptions = ["link", "post"]
const actionTypeOptions = ["link", "post"];
// ============================================================
// Create Action
async function createAction() {
// @ts-ignore groupId isn't required
await actionStore.actions.createOne({
actionType: actionData.data.actionType,
title: actionData.data.title,
url: actionData.data.url,
});
} as GroupRecipeActionOut);
actionData.reset();
state.createDialog = false;
}
// ============================================================
// Edit Action
@ -194,7 +221,6 @@ export default defineComponent({
state.editDialog = false;
}
// ============================================================
// Delete Action

190
frontend/pages/group/data/recipes.vue
View file

@ -6,6 +6,7 @@
:title="$t('data-pages.recipes.purge-exports')"
color="error"
:icon="$globals.icons.alertCircle"
can-confirm
@confirm="purgeExports()"
>
<v-card-text> {{ $t('data-pages.recipes.are-you-sure-you-want-to-delete-all-export-data') }} </v-card-text>
@ -19,65 +20,91 @@
:icon="dialog.icon"
:title="dialog.title"
:submit-text="$t('general.submit')"
can-submit
@submit="dialog.callback"
>
<v-card-text v-if="dialog.mode == MODES.tag">
<RecipeOrganizerSelector v-model="toSetTags" selector-type="tags" />
<RecipeOrganizerSelector
v-model="toSetTags"
selector-type="tags"
/>
</v-card-text>
<v-card-text v-else-if="dialog.mode == MODES.category">
<RecipeOrganizerSelector v-model="toSetCategories" selector-type="categories" />
<RecipeOrganizerSelector
v-model="toSetCategories"
selector-type="categories"
/>
</v-card-text>
<v-card-text v-else-if="dialog.mode == MODES.delete">
<p class="h4">{{ $t('data-pages.recipes.confirm-delete-recipes') }}</p>
<v-card outlined>
<v-virtual-scroll height="400" item-height="25" :items="selected">
<p class="h4">
{{ $t('data-pages.recipes.confirm-delete-recipes') }}
</p>
<v-card variant="outlined">
<v-virtual-scroll
height="400"
item-height="25"
:items="selected"
>
<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>
</v-card>
</v-card-text>
<v-card-text v-else-if="dialog.mode == MODES.export">
<p class="h4">{{ $t('data-pages.recipes.the-following-recipes-selected-length-will-be-exported', [selected.length]) }}</p>
<v-card outlined>
<v-virtual-scroll height="400" item-height="25" :items="selected">
<p class="h4">
{{ $t('data-pages.recipes.the-following-recipes-selected-length-will-be-exported',
[selected.length]) }}
</p>
<v-card variant="outlined">
<v-virtual-scroll
height="400"
item-height="25"
:items="selected"
>
<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>
</v-card>
</v-card-text>
<v-card-text v-else-if="dialog.mode == MODES.updateSettings" class="px-12">
<v-card-text
v-else-if="dialog.mode == MODES.updateSettings"
class="px-12"
>
<p>{{ $t('data-pages.recipes.settings-chosen-explanation') }}</p>
<div class="mx-auto">
<RecipeSettingsSwitches v-model="recipeSettings" />
</div>
<p class="text-center mb-0">
<i>{{ $tc('data-pages.recipes.selected-length-recipe-s-settings-will-be-updated', selected.length) }}</i>
<i>{{ $t('data-pages.recipes.selected-length-recipe-s-settings-will-be-updated', selected.length) }}</i>
</p>
</v-card-text>
<v-card-text v-else-if="dialog.mode == MODES.changeOwner">
<v-select
v-model="selectedOwner"
:items="allUsers"
item-text="fullName"
item-title="fullName"
item-value="id"
:label="$tc('general.owner')"
:label="$t('general.owner')"
hide-details
>
<template #prepend>
<UserAvatar :user-id="selectedOwner" :tooltip="false" />
<UserAvatar
:user-id="selectedOwner"
:tooltip="false"
/>
</template>
</v-select>
<v-card-text v-if="selectedOwnerHousehold" class="d-flex" style="align-items: flex-end;">
<v-card-text
v-if="selectedOwnerHousehold"
class="d-flex"
style="align-items: flex-end;"
>
<v-icon>{{ $globals.icons.household }}</v-icon>
<span class="pl-1">{{ selectedOwnerHousehold.name }}</span>
</v-card-text>
@ -85,14 +112,28 @@
</BaseDialog>
<section>
<!-- Recipe Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.primary" :title="$tc('data-pages.recipes.recipe-data')">
<BaseCardSectionTitle
:icon="$globals.icons.primary"
:title="$t('data-pages.recipes.recipe-data')"
>
{{ $t('data-pages.recipes.recipe-data-description') }}
</BaseCardSectionTitle>
<v-card-actions class="mt-n5 mb-1">
<v-menu offset-y bottom nudge-bottom="6" :close-on-content-click="false">
<template #activator="{ on, attrs }">
<v-btn color="accent" class="mr-2" dark v-bind="attrs" v-on="on">
<v-icon left>
<v-menu
offset-y
bottom
nudge-bottom="6"
:close-on-content-click="false"
>
<template #activator="{ props }">
<v-btn
color="accent"
class="mr-2"
variant="elevated"
dark
v-bind="props"
>
<v-icon start>
{{ $globals.icons.cog }}
</v-icon>
{{ $t('data-pages.columns') }}
@ -102,18 +143,18 @@
<v-card-title class="py-2">
<div>{{ $t('data-pages.recipes.recipe-columns') }}</div>
</v-card-title>
<v-divider class="mx-2"></v-divider>
<v-divider class="mx-2" />
<v-card-text class="mt-n5">
<v-checkbox
v-for="(_, key) in headers"
:key="key"
v-model="headers[key]"
dense
density="compact"
flat
inset
:label="headerLabels[key]"
hide-details
></v-checkbox>
/>
</v-card-text>
</v-card>
</v-menu>
@ -121,6 +162,7 @@
:disabled="selected.length < 1"
mode="event"
color="info"
variant="elevated"
:items="actions"
@export-selected="openDialog(MODES.export)"
@tag-selected="openDialog(MODES.tag)"
@ -128,13 +170,23 @@
@delete-selected="openDialog(MODES.delete)"
@update-settings="openDialog(MODES.updateSettings)"
@change-owner="openDialog(MODES.changeOwner)"
>
</BaseOverflowButton>
/>
<p v-if="selected.length > 0" class="text-caption my-auto ml-5">{{ $tc('general.selected-count', selected.length) }}</p>
<p
v-if="selected.length > 0"
class="text-caption my-auto ml-5"
>
{{ $t('general.selected-count', selected.length)
}}
</p>
</v-card-actions>
<v-card>
<RecipeDataTable v-model="selected" :loading="loading" :recipes="allRecipes" :show-headers="headers" />
<RecipeDataTable
v-model="selected"
:loading="loading"
:recipes="allRecipes"
:show-headers="headers"
/>
<v-card-actions class="justify-end">
<BaseButton
color="info"
@ -154,11 +206,18 @@
<section class="mt-10">
<!-- Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.database" section :title="$tc('data-pages.recipes.data-exports')">
<BaseCardSectionTitle
:icon="$globals.icons.database"
section
:title="$t('data-pages.recipes.data-exports')"
>
{{ $t('data-pages.recipes.data-exports-description') }}
</BaseCardSectionTitle>
<v-card-actions class="mt-n5 mb-1">
<BaseButton delete @click="purgeExportsDialog = true"> </BaseButton>
<BaseButton
delete
@click="purgeExportsDialog = true"
/>
</v-card-actions>
<v-card>
<GroupExportData :exports="groupExports" />
@ -168,15 +227,14 @@
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, useContext, onMounted } from "@nuxtjs/composition-api";
import RecipeDataTable from "~/components/Domain/Recipe/RecipeDataTable.vue";
import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
import { useUserApi } from "~/composables/api";
import { useRecipes, allRecipes } from "~/composables/recipes";
import { Recipe, RecipeSettings } from "~/lib/api/types/recipe";
import type { Recipe, RecipeSettings } from "~/lib/api/types/recipe";
import GroupExportData from "~/components/Domain/Group/GroupExportData.vue";
import { GroupDataExport } from "~/lib/api/types/group";
import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
import type { GroupDataExport } from "~/lib/api/types/group";
import type { MenuItem } from "~/components/global/BaseOverflowButton.vue";
import RecipeSettingsSwitches from "~/components/Domain/Recipe/RecipeSettingsSwitches.vue";
import { useUserStore } from "~/composables/store/use-user-store";
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
@ -191,12 +249,19 @@ enum MODES {
changeOwner = "changeOwner",
}
export default defineComponent({
export default defineNuxtComponent({
components: { RecipeDataTable, RecipeOrganizerSelector, GroupExportData, RecipeSettingsSwitches, UserAvatar },
scrollToTop: true,
setup() {
const { $auth, $globals, i18n } = useContext();
const { getAllRecipes, refreshRecipes } = useRecipes(true, true, false, `householdId=${$auth.user?.householdId || ""}`);
const i18n = useI18n();
const $auth = useMealieAuth();
const { $globals } = useNuxtApp();
useSeoMeta({
title: i18n.t("data-pages.recipes.recipe-data"),
});
const { getAllRecipes, refreshRecipes } = useRecipes(true, true, false, `householdId=${$auth.user.value?.householdId || ""}`);
const selected = ref<Recipe[]>([]);
function resetAll() {
@ -233,32 +298,32 @@ export default defineComponent({
const actions: MenuItem[] = [
{
icon: $globals.icons.database,
text: i18n.tc("export.export"),
text: i18n.t("export.export"),
event: "export-selected",
},
{
icon: $globals.icons.tags,
text: i18n.tc("data-pages.recipes.tag"),
text: i18n.t("data-pages.recipes.tag"),
event: "tag-selected",
},
{
icon: $globals.icons.categories,
text: i18n.tc("data-pages.recipes.categorize"),
text: i18n.t("data-pages.recipes.categorize"),
event: "categorize-selected",
},
{
icon: $globals.icons.cog,
text: i18n.tc("data-pages.recipes.update-settings"),
text: i18n.t("data-pages.recipes.update-settings"),
event: "update-settings",
},
{
icon: $globals.icons.user,
text: i18n.tc("general.change-owner"),
text: i18n.t("general.change-owner"),
event: "change-owner",
},
{
icon: $globals.icons.delete,
text: i18n.tc("general.delete"),
text: i18n.t("general.delete"),
event: "delete-selected",
},
];
@ -366,7 +431,7 @@ export default defineComponent({
}
async function changeOwner() {
if(!selected.value.length || !selectedOwner.value) {
if (!selected.value.length || !selectedOwner.value) {
return;
}
@ -398,12 +463,12 @@ export default defineComponent({
function openDialog(mode: MODES) {
const titles: Record<MODES, string> = {
[MODES.tag]: i18n.tc("data-pages.recipes.tag-recipes"),
[MODES.category]: i18n.tc("data-pages.recipes.categorize-recipes"),
[MODES.export]: i18n.tc("data-pages.recipes.export-recipes"),
[MODES.delete]: i18n.tc("data-pages.recipes.delete-recipes"),
[MODES.updateSettings]: i18n.tc("data-pages.recipes.update-settings"),
[MODES.changeOwner]: i18n.tc("general.change-owner"),
[MODES.tag]: i18n.t("data-pages.recipes.tag-recipes"),
[MODES.category]: i18n.t("data-pages.recipes.categorize-recipes"),
[MODES.export]: i18n.t("data-pages.recipes.export-recipes"),
[MODES.delete]: i18n.t("data-pages.recipes.delete-recipes"),
[MODES.updateSettings]: i18n.t("data-pages.recipes.update-settings"),
[MODES.changeOwner]: i18n.t("general.change-owner"),
};
const callbacks: Record<MODES, () => Promise<void>> = {
@ -435,16 +500,16 @@ export default defineComponent({
const { store: households } = useHouseholdStore();
const selectedOwner = ref("");
const selectedOwnerHousehold = computed(() => {
if(!selectedOwner.value) {
if (!selectedOwner.value) {
return null;
}
const owner = allUsers.value.find((u) => u.id === selectedOwner.value);
const owner = allUsers.value.find(u => u.id === selectedOwner.value);
if (!owner) {
return null;
};
return households.value.find((h) => h.id === owner.householdId);
return households.value.find(h => h.id === owner.householdId);
});
return {
@ -474,10 +539,11 @@ export default defineComponent({
selectedOwnerHousehold,
};
},
head() {
return {
title: this.$tc("data-pages.recipes.recipe-data"),
};
},
});
</script>
<style>
.v-btn--disabled {
opacity: 0.5 !important;
}
</style>

75
frontend/pages/group/data/tags.vue
View file

@ -5,6 +5,7 @@
v-model="state.createDialog"
:title="$t('data-pages.tags.new-tag')"
:icon="$globals.icons.tags"
can-submit
@submit="createTag"
>
<v-card-text>
@ -14,10 +15,9 @@
autofocus
:label="$t('general.name')"
:rules="[validators.required]"
></v-text-field>
/>
</v-form>
</v-card-text>
</BaseDialog>
<!-- Edit Dialog -->
@ -25,12 +25,15 @@
v-model="state.editDialog"
:icon="$globals.icons.tags"
:title="$t('data-pages.tags.edit-tag')"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
@submit="editSaveTag"
>
<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-text-field
v-model="editTarget.name"
:label="$t('general.name')"
/>
</div>
</v-card-text>
</BaseDialog>
@ -38,14 +41,19 @@
<!-- Delete Dialog -->
<BaseDialog
v-model="state.deleteDialog"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
@confirm="deleteTag"
>
<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>
@ -53,20 +61,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>
@ -75,33 +87,42 @@
</BaseDialog>
<!-- Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.tags" section :title="$tc('data-pages.tags.tag-data')"> </BaseCardSectionTitle>
<BaseCardSectionTitle
:icon="$globals.icons.tags"
section
:title="$t('data-pages.tags.tag-data')"
/>
<CrudTable
v-model:headers="tableHeaders"
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="tags || []"
: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>
</CrudTable>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
import { validators } from "~/composables/use-validators";
import { useTagStore, useTagData } from "~/composables/store";
import { RecipeTag } from "~/lib/api/types/admin";
import type { RecipeTag } from "~/lib/api/types/admin";
export default defineComponent({
export default defineNuxtComponent({
setup() {
const { i18n } = useContext();
const i18n = useI18n();
const tableConfig = {
hideColumns: true,
canExport: true,
@ -116,6 +137,7 @@ export default defineComponent({
text: i18n.t("general.name"),
value: "name",
show: true,
sortable: true,
},
];
@ -129,18 +151,18 @@ export default defineComponent({
const tagData = useTagData();
const tagStore = useTagStore();
// ============================================================
// Create Tag
async function createTag() {
// @ts-ignore - only property really required is the name (RecipeOrganizerPage)
await tagStore.actions.createOne({ name: tagData.data.name });
await tagStore.actions.createOne({
name: tagData.data.name,
slug: "",
});
tagData.reset();
state.createDialog = false;
}
// ============================================================
// Edit Tag
@ -159,7 +181,6 @@ export default defineComponent({
state.editDialog = false;
}
// ============================================================
// Delete Tag
@ -174,7 +195,7 @@ export default defineComponent({
if (!deleteTarget.value || deleteTarget.value.id === undefined) {
return;
}
await tagStore.actions.deleteOne(deleteTarget.value.id);
await tagStore.actions.deleteOne(deleteTarget.value.id!);
state.deleteDialog = false;
}

100
frontend/pages/group/data/tools.vue
View file

@ -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

227
frontend/pages/group/data/units.vue
View file

@ -1,25 +1,53 @@
<template>
<div>
<!-- Merge Dialog -->
<BaseDialog v-model="mergeDialog" :icon="$globals.icons.units" :title="$t('data-pages.units.combine-unit')" @confirm="mergeUnits">
<BaseDialog
v-model="mergeDialog"
:icon="$globals.icons.units"
:title="$t('data-pages.units.combine-unit')"
can-confirm
@confirm="mergeUnits"
>
<v-card-text>
<i18n path="data-pages.units.combine-unit-description">
<template #source-unit-will-be-deleted>
<strong> {{ $t('data-pages.recipes.source-unit-will-be-deleted') }} </strong>
</template>
</i18n>
<i18n-t keypath="data-pages.units.combine-unit-description">
<template #source-unit-will-be-deleted>
<strong> {{ $t('data-pages.recipes.source-unit-will-be-deleted') }} </strong>
</template>
</i18n-t>
<v-autocomplete v-model="fromUnit" return-object :items="store" item-text="id" :label="$t('data-pages.units.source-unit')">
<template #selection="{ item }"> {{ item.name }}</template>
<template #item="{ item }"> {{ item.name }} </template>
<v-autocomplete
v-model="fromUnit"
return-object
:items="store"
item-title="id"
:label="$t('data-pages.units.source-unit')"
>
<template #chip="{ item }">
{{ item.raw.name }}
</template>
<template #item="{ item }">
{{ item.raw.name }}
</template>
</v-autocomplete>
<v-autocomplete v-model="toUnit" return-object :items="store" item-text="id" :label="$t('data-pages.units.target-unit')">
<template #selection="{ item }"> {{ item.name }}</template>
<template #item="{ item }"> {{ item.name }} </template>
<v-autocomplete
v-model="toUnit"
return-object
:items="store"
item-title="id"
:label="$t('data-pages.units.target-unit')"
>
<template #chip="{ item }">
{{ item.raw.name }}
</template>
<template #item="{ item }">
{{ item.raw.name }}
</template>
</v-autocomplete>
<template v-if="canMerge && fromUnit && toUnit">
<div class="text-center">{{ $t('data-pages.units.merging-unit-into-unit', [fromUnit.name, toUnit.name]) }}</div>
<div class="text-center">
{{ $t('data-pages.units.merging-unit-into-unit', [fromUnit.name, toUnit.name]) }}
</div>
</template>
</v-card-text>
</BaseDialog>
@ -30,7 +58,8 @@
:icon="$globals.icons.units"
:title="$t('data-pages.units.create-unit')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
can-submit
@submit="createUnit"
>
<v-card-text>
@ -41,25 +70,36 @@
:label="$t('general.name')"
:hint="$t('data-pages.units.example-unit-singular')"
:rules="[validators.required]"
></v-text-field>
/>
<v-text-field
v-model="createTarget.pluralName"
:label="$t('general.plural-name')"
:hint="$t('data-pages.units.example-unit-plural')"
></v-text-field>
/>
<v-text-field
v-model="createTarget.abbreviation"
:label="$t('data-pages.units.abbreviation')"
:hint="$t('data-pages.units.example-unit-abbreviation-singular')"
></v-text-field>
/>
<v-text-field
v-model="createTarget.pluralAbbreviation"
:label="$t('data-pages.units.plural-abbreviation')"
:hint="$t('data-pages.units.example-unit-abbreviation-plural')"
></v-text-field>
<v-text-field v-model="createTarget.description" :label="$t('data-pages.units.description')"></v-text-field>
<v-checkbox v-model="createTarget.fraction" hide-details :label="$t('data-pages.units.display-as-fraction')"></v-checkbox>
<v-checkbox v-model="createTarget.useAbbreviation" hide-details :label="$t('data-pages.units.use-abbreviation')"></v-checkbox>
/>
<v-text-field
v-model="createTarget.description"
:label="$t('data-pages.units.description')"
/>
<v-checkbox
v-model="createTarget.fraction"
hide-details
:label="$t('data-pages.units.display-as-fraction')"
/>
<v-checkbox
v-model="createTarget.useAbbreviation"
hide-details
:label="$t('data-pages.units.use-abbreviation')"
/>
</v-form>
</v-card-text>
</BaseDialog>
@ -69,6 +109,7 @@
v-if="editTarget"
:value="aliasManagerDialog"
:data="editTarget"
can-submit
@submit="updateUnitAlias"
@cancel="aliasManagerDialog = false"
/>
@ -79,7 +120,8 @@
:icon="$globals.icons.units"
:title="$t('data-pages.units.edit-unit')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
can-submit
@submit="editSaveUnit"
>
<v-card-text v-if="editTarget">
@ -89,43 +131,65 @@
:label="$t('general.name')"
:hint="$t('data-pages.units.example-unit-singular')"
:rules="[validators.required]"
></v-text-field>
/>
<v-text-field
v-model="editTarget.pluralName"
:label="$t('general.plural-name')"
:hint="$t('data-pages.units.example-unit-plural')"
></v-text-field>
/>
<v-text-field
v-model="editTarget.abbreviation"
:label="$t('data-pages.units.abbreviation')"
:hint="$t('data-pages.units.example-unit-abbreviation-singular')"
></v-text-field>
/>
<v-text-field
v-model="editTarget.pluralAbbreviation"
:label="$t('data-pages.units.plural-abbreviation')"
:hint="$t('data-pages.units.example-unit-abbreviation-plural')"
></v-text-field>
<v-text-field v-model="editTarget.description" :label="$t('data-pages.units.description')"></v-text-field>
<v-checkbox v-model="editTarget.fraction" hide-details :label="$t('data-pages.units.display-as-fraction')"></v-checkbox>
<v-checkbox v-model="editTarget.useAbbreviation" hide-details :label="$t('data-pages.units.use-abbreviation')"></v-checkbox>
/>
<v-text-field
v-model="editTarget.description"
:label="$t('data-pages.units.description')"
/>
<v-checkbox
v-model="editTarget.fraction"
hide-details
:label="$t('data-pages.units.display-as-fraction')"
/>
<v-checkbox
v-model="editTarget.useAbbreviation"
hide-details
:label="$t('data-pages.units.use-abbreviation')"
/>
</v-form>
</v-card-text>
<template #custom-card-action>
<BaseButton edit @click="aliasManagerEventHandler">{{ $t('data-pages.manage-aliases') }}</BaseButton>
<BaseButton
edit
@click="aliasManagerEventHandler"
>
{{ $t('data-pages.manage-aliases') }}
</BaseButton>
</template>
</BaseDialog>
<!-- Delete Dialog -->
<BaseDialog
v-model="deleteDialog"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@confirm="deleteUnit"
>
<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>
@ -133,20 +197,25 @@
<BaseDialog
v-model="bulkDeleteDialog"
width="650px"
:title="$tc('general.confirm')"
:title="$t('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
can-confirm
@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>
@ -154,11 +223,12 @@
</v-card-text>
</BaseDialog>
<!-- Seed Dialog-->
<!-- Seed Dialog -->
<BaseDialog
v-model="seedDialog"
:icon="$globals.icons.foods"
:title="$tc('data-pages.seed-data')"
:title="$t('data-pages.seed-data')"
can-confirm
@confirm="seedDatabase"
>
<v-card-text>
@ -168,36 +238,42 @@
<v-autocomplete
v-model="locale"
:items="locales"
item-text="name"
item-title="name"
:label="$t('data-pages.select-language')"
class="my-3"
hide-details
outlined
variant="outlined"
offset
>
<template #item="{ item }">
<v-list-item-content>
<v-list-item-title> {{ item.name }} </v-list-item-title>
<v-list-item-subtitle>
{{ item.progress }}% {{ $tc("language-dialog.translated") }}
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-title> {{ item.raw.name }} </v-list-item-title>
<v-list-item-subtitle>
{{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
</v-list-item-subtitle>
</template>
</v-autocomplete>
<v-alert v-if="store && store.length > 0" type="error" class="mb-0 text-body-2">
<v-alert
v-if="store && store.length > 0"
type="error"
class="mb-0 text-body-2"
>
{{ $t("data-pages.foods.seed-dialog-warning") }}
</v-alert>
</v-card-text>
</BaseDialog>
<!-- Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.units" section :title="$tc('data-pages.units.unit-data')"> </BaseCardSectionTitle>
<BaseCardSectionTitle
:icon="$globals.icons.units"
section
:title="$t('data-pages.units.unit-data')"
/>
<CrudTable
v-model:headers="tableHeaders"
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="store"
: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="createdAt"
initial-sort-desc
@delete-one="deleteEventHandler"
@ -206,29 +282,36 @@
@delete-selected="bulkDeleteEventHandler"
>
<template #button-row>
<BaseButton create @click="createDialog = true" />
<BaseButton
create
@click="createDialog = true"
/>
<BaseButton @click="mergeDialog = true">
<template #icon> {{ $globals.icons.externalLink }} </template>
<template #icon>
{{ $globals.icons.externalLink }}
</template>
{{ $t('data-pages.combine') }}
</BaseButton>
</template>
<template #item.useAbbreviation="{ item }">
<template #[`item.useAbbreviation`]="{ item }">
<v-icon :color="item.useAbbreviation ? 'success' : undefined">
{{ item.useAbbreviation ? $globals.icons.check : $globals.icons.close }}
</v-icon>
</template>
<template #item.fraction="{ item }">
<template #[`item.fraction`]="{ item }">
<v-icon :color="item.fraction ? 'success' : undefined">
{{ item.fraction ? $globals.icons.check : $globals.icons.close }}
</v-icon>
</template>
<template #item.createdAt="{ item }">
<template #[`item.createdAt`]="{ item }">
{{ formatDate(item.createdAt) }}
</template>
<template #button-bottom>
<BaseButton @click="seedDialog = true">
<template #icon> {{ $globals.icons.database }} </template>
<template #icon>
{{ $globals.icons.database }}
</template>
{{ $t('data-pages.seed') }}
</BaseButton>
</template>
@ -237,21 +320,21 @@
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, useContext } from "@nuxtjs/composition-api";
import type { LocaleObject } from "@nuxtjs/i18n";
import RecipeDataAliasManagerDialog from "~/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue";
import { validators } from "~/composables/use-validators";
import { useUserApi } from "~/composables/api";
import { CreateIngredientUnit, IngredientUnit, IngredientUnitAlias } from "~/lib/api/types/recipe";
import type { CreateIngredientUnit, IngredientUnit, IngredientUnitAlias } from "~/lib/api/types/recipe";
import { useLocales } from "~/composables/use-locales";
import { useUnitStore } from "~/composables/store";
import { VForm } from "~/types/vuetify";
import type { VForm } from "~/types/auto-forms";
export default defineComponent({
export default defineNuxtComponent({
components: { RecipeDataAliasManagerDialog },
setup() {
const userApi = useUserApi();
const { i18n } = useContext();
const i18n = useI18n();
const tableConfig = {
hideColumns: true,
canExport: true,
@ -266,26 +349,31 @@ export default defineComponent({
text: i18n.t("general.name"),
value: "name",
show: true,
sortable: true,
},
{
text: i18n.t("general.plural-name"),
value: "pluralName",
show: true,
sortable: true,
},
{
text: i18n.t("data-pages.units.abbreviation"),
value: "abbreviation",
show: true,
sortable: true,
},
{
text: i18n.t("data-pages.units.plural-abbreviation"),
value: "pluralAbbreviation",
show: true,
sortable: true,
},
{
text: i18n.t("data-pages.units.use-abbv"),
value: "useAbbreviation",
show: true,
sortable: true,
},
{
text: i18n.t("data-pages.units.description"),
@ -296,18 +384,21 @@ export default defineComponent({
text: i18n.t("data-pages.units.fraction"),
value: "fraction",
show: true,
sortable: true,
},
{
text: i18n.tc("general.date-added"),
text: i18n.t("general.date-added"),
value: "createdAt",
show: false,
sortable: true,
},
];
function formatDate(date: string) {
try {
return i18n.d(Date.parse(date), "medium");
} catch {
}
catch {
return "";
}
}
@ -450,8 +541,8 @@ export default defineComponent({
locale.value = currentLocale.value;
});
const locales = LOCALES.filter((locale) =>
(i18n.locales as LocaleObject[]).map((i18nLocale) => i18nLocale.code).includes(locale.value)
const locales = LOCALES.filter(locale =>
(i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value),
);
async function seedDatabase() {