mealie/frontend/pages/group/data/units.vue
2022-05-06 12:17:30 -08:00

293 lines
8.2 KiB
Vue

<template>
<div>
<!-- Merge Dialog -->
<BaseDialog v-model="mergeDialog" :icon="$globals.icons.units" title="Combine Unit" @confirm="mergeUnits">
<v-card-text>
Combining the selected units will merge the Source Unit and Target Unit into a single unit. The
<strong> Source Unit will be deleted </strong> and all of the references to the Source Unit will be updated to
point to the Target Unit.
<v-autocomplete v-model="fromUnit" return-object :items="units" item-text="name" label="Source Unit" />
<v-autocomplete v-model="toUnit" return-object :items="units" item-text="name" label="Target Unit" />
<template v-if="canMerge && fromUnit && toUnit">
<div class="text-center">Merging {{ fromUnit.name }} into {{ toUnit.name }}</div>
</template>
</v-card-text>
</BaseDialog>
<!-- Edit Dialog -->
<BaseDialog
v-model="editDialog"
:icon="$globals.icons.units"
title="Edit Unit"
:submit-text="$tc('general.save')"
@submit="editSaveUnit"
>
<v-card-text v-if="editTarget">
<v-form ref="domCreateUnitForm">
<v-text-field v-model="editTarget.name" label="Name" :rules="[validators.required]"></v-text-field>
<v-text-field v-model="editTarget.abbreviation" label="Abbreviation"></v-text-field>
<v-text-field v-model="editTarget.description" label="Description"></v-text-field>
<v-checkbox v-model="editTarget.fraction" hide-details label="Display as Fraction"></v-checkbox>
</v-form>
</v-card-text>
</BaseDialog>
<!-- Delete Dialog -->
<BaseDialog
v-model="deleteDialog"
:title="$tc('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
@confirm="deleteUnit"
>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<!-- Seed Dialog-->
<BaseDialog
v-model="seedDialog"
:icon="$globals.icons.foods"
:title="$tc('data-pages.seed-data')"
@confirm="seedDatabase"
>
<v-card-text>
<div class="pb-2">
{{ $t("data-pages.units.seed-dialog-text") }}
</div>
<v-autocomplete
v-model="locale"
:items="locales"
item-text="name"
label="Select Language"
class="my-3"
hide-details
outlined
offset
>
<template #item="{ item }">
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
<v-list-item-subtitle>
{{ item.progress }}% {{ $tc("language-dialog.translated") }}
</v-list-item-subtitle>
</v-list-item-content>
</template>
</v-autocomplete>
<v-alert v-if="units.length > 0" type="error" class="mb-0 text-body-2">
{{ $t("data-pages.foods.seed-dialog-warning") }}
</v-alert>
</v-card-text>
</BaseDialog>
<!-- Recipe Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.units" section title="Unit Data"> </BaseCardSectionTitle>
<CrudTable
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="units"
:bulk-actions="[]"
@delete-one="deleteEventHandler"
@edit-one="editEventHandler"
>
<template #button-row>
<BaseButton @click="mergeDialog = true">
<template #icon> {{ $globals.icons.units }} </template>
Combine
</BaseButton>
</template>
<template #item.fraction="{ item }">
<v-icon :color="item.fraction ? 'success' : undefined">
{{ item.fraction ? $globals.icons.check : $globals.icons.close }}
</v-icon>
</template>
<template #button-bottom>
<BaseButton @click="seedDialog = true">
<template #icon> {{ $globals.icons.database }} </template>
Seed
</BaseButton>
</template>
</CrudTable>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
import type { LocaleObject } from "@nuxtjs/i18n";
import { validators } from "~/composables/use-validators";
import { useUserApi } from "~/composables/api";
import { IngredientUnit } from "~/types/api-types/recipe";
import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
import { useLocales } from "~/composables/use-locales";
export default defineComponent({
setup() {
const userApi = useUserApi();
const tableConfig = {
hideColumns: true,
canExport: true,
};
const tableHeaders = [
{
text: "Id",
value: "id",
show: false,
},
{
text: "Name",
value: "name",
show: true,
},
{
text: "Abbreviation",
value: "abbreviation",
show: true,
},
{
text: "Description",
value: "description",
show: true,
},
{
text: "Fraction",
value: "fraction",
show: true,
},
];
const units = ref<IngredientUnit[]>([]);
async function refreshUnits() {
const { data } = await userApi.units.getAll();
units.value = data ?? [];
}
onMounted(() => {
refreshUnits();
});
const editDialog = ref(false);
const editTarget = ref<IngredientUnit | null>(null);
function editEventHandler(item: IngredientUnit) {
editTarget.value = item;
editDialog.value = true;
}
async function editSaveUnit() {
if (!editTarget.value) {
return;
}
const { data } = await userApi.units.updateOne(editTarget.value.id, editTarget.value);
if (data) {
refreshUnits();
}
editDialog.value = false;
}
const deleteDialog = ref(false);
const deleteTarget = ref<IngredientUnit | null>(null);
function deleteEventHandler(item: IngredientUnit) {
deleteTarget.value = item;
deleteDialog.value = true;
}
async function deleteUnit() {
if (!deleteTarget.value) {
return;
}
const { data } = await userApi.units.deleteOne(deleteTarget.value.id);
if (data) {
refreshUnits();
}
deleteDialog.value = false;
}
// ============================================================
// Merge Units
const mergeDialog = ref(false);
const fromUnit = ref<IngredientUnit | null>(null);
const toUnit = ref<IngredientUnit | null>(null);
const canMerge = computed(() => {
return fromUnit.value && toUnit.value && fromUnit.value.id !== toUnit.value.id;
});
async function mergeUnits() {
if (!canMerge.value || !fromUnit.value || !toUnit.value) {
return;
}
const { data } = await userApi.units.merge(fromUnit.value.id, toUnit.value.id);
if (data) {
refreshUnits();
}
}
// ============================================================
// Labels
const allLabels = ref([] as MultiPurposeLabelSummary[]);
async function refreshLabels() {
const { data } = await userApi.multiPurposeLabels.getAll();
allLabels.value = data ?? [];
}
refreshLabels();
// ============================================================
// Seed
const seedDialog = ref(false);
const locale = ref("");
const { locales: LOCALES, locale: currentLocale, i18n } = useLocales();
onMounted(() => {
locale.value = currentLocale.value;
});
const locales = LOCALES.filter((locale) =>
(i18n.locales as LocaleObject[]).map((i18nLocale) => i18nLocale.code).includes(locale.value)
);
async function seedDatabase() {
const { data } = await userApi.seeders.units({ locale: locale.value });
if (data) {
refreshUnits();
}
}
return {
tableConfig,
tableHeaders,
units,
allLabels,
validators,
// Edit
editDialog,
editEventHandler,
editSaveUnit,
editTarget,
// Delete
deleteEventHandler,
deleteDialog,
deleteUnit,
// Merge
canMerge,
mergeUnits,
mergeDialog,
fromUnit,
toUnit,
// Seed
seedDatabase,
locales,
locale,
seedDialog,
};
},
});
</script>