mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
feat(backend): ✨ refactor/fix group management for admins (#838)
* fix(frontend): 🐛 update dialog implementation to simplify state management * test(backend): ✅ refactor test fixtures + admin group tests * chore(backend): 🔨 add launcher.json for python debugging (tests) * fix typing * feat(backend): ✨ refactor/fix group management for admins * feat(frontend): ✨ add/fix admin group management * add LDAP checker Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
parent
0db8a58963
commit
791aa8c610
52 changed files with 881 additions and 331 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import { AdminAboutAPI } from "./admin/admin-about";
|
||||
import { AdminTaskAPI } from "./admin/admin-tasks";
|
||||
import { AdminUsersApi } from "./admin/admin-users";
|
||||
import { AdminGroupsApi } from "./admin/admin-groups";
|
||||
import { ApiRequestInstance } from "~/types/api";
|
||||
|
||||
export class AdminAPI {
|
||||
|
|
@ -8,6 +9,7 @@ export class AdminAPI {
|
|||
public about: AdminAboutAPI;
|
||||
public serverTasks: AdminTaskAPI;
|
||||
public users: AdminUsersApi;
|
||||
public groups: AdminGroupsApi;
|
||||
|
||||
constructor(requests: ApiRequestInstance) {
|
||||
if (AdminAPI.instance instanceof AdminAPI) {
|
||||
|
|
@ -17,6 +19,7 @@ export class AdminAPI {
|
|||
this.about = new AdminAboutAPI(requests);
|
||||
this.serverTasks = new AdminTaskAPI(requests);
|
||||
this.users = new AdminUsersApi(requests);
|
||||
this.groups = new AdminGroupsApi(requests);
|
||||
|
||||
Object.freeze(this);
|
||||
AdminAPI.instance = this;
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ export interface CheckAppConfig {
|
|||
emailReady: boolean;
|
||||
baseUrlSet: boolean;
|
||||
isSiteSecure: boolean;
|
||||
ldapReady: boolean;
|
||||
}
|
||||
|
||||
export class AdminAboutAPI extends BaseAPI {
|
||||
|
|
|
|||
54
frontend/api/admin/admin-groups.ts
Normal file
54
frontend/api/admin/admin-groups.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { BaseCRUDAPI } from "../_base";
|
||||
import { UserRead } from "./admin-users";
|
||||
const prefix = "/api";
|
||||
|
||||
export interface Token {
|
||||
name: string;
|
||||
id: number;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export interface Preferences {
|
||||
privateGroup: boolean;
|
||||
firstDayOfWeek: number;
|
||||
recipePublic: boolean;
|
||||
recipeShowNutrition: boolean;
|
||||
recipeShowAssets: boolean;
|
||||
recipeLandscapeView: boolean;
|
||||
recipeDisableComments: boolean;
|
||||
recipeDisableAmount: boolean;
|
||||
groupId: number;
|
||||
id: number;
|
||||
}
|
||||
|
||||
export interface GroupCreate {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface GroupRead extends GroupCreate {
|
||||
id: number;
|
||||
categories: any[];
|
||||
webhooks: any[];
|
||||
users: UserRead[];
|
||||
preferences: Preferences;
|
||||
}
|
||||
|
||||
export interface AdminGroupUpdate {
|
||||
name: string;
|
||||
id: number;
|
||||
preferences: Preferences;
|
||||
}
|
||||
|
||||
const routes = {
|
||||
adminUsers: `${prefix}/admin/groups`,
|
||||
adminUsersId: (id: number) => `${prefix}/admin/groups/${id}`,
|
||||
};
|
||||
|
||||
export class AdminGroupsApi extends BaseCRUDAPI<GroupRead, GroupCreate> {
|
||||
baseRoute: string = routes.adminUsers;
|
||||
itemRoute = routes.adminUsersId;
|
||||
|
||||
async updateOne(id: number, payload: AdminGroupUpdate) {
|
||||
return await this.requests.put<GroupRead>(this.itemRoute(id), payload);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { BaseCRUDAPI } from "../_base";
|
|||
|
||||
const prefix = "/api";
|
||||
|
||||
interface UserCreate {
|
||||
export interface UserCreate {
|
||||
username: string;
|
||||
fullName: string;
|
||||
email: string;
|
||||
|
|
@ -21,7 +21,7 @@ export interface UserToken {
|
|||
createdAt: Date;
|
||||
}
|
||||
|
||||
interface UserRead extends UserToken {
|
||||
export interface UserRead extends UserToken {
|
||||
id: number;
|
||||
groupId: number;
|
||||
favoriteRecipes: any[];
|
||||
|
|
|
|||
99
frontend/components/Domain/Group/GroupPreferencesEditor.vue
Normal file
99
frontend/components/Domain/Group/GroupPreferencesEditor.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div v-if="preferences">
|
||||
<BaseCardSectionTitle title="General Preferences"></BaseCardSectionTitle>
|
||||
<v-checkbox v-model="preferences.privateGroup" class="mt-n4" label="Private Group"></v-checkbox>
|
||||
<v-select
|
||||
v-model="preferences.firstDayOfWeek"
|
||||
:prepend-icon="$globals.icons.calendarWeekBegin"
|
||||
:items="allDays"
|
||||
item-text="name"
|
||||
item-value="value"
|
||||
:label="$t('settings.first-day-of-week')"
|
||||
/>
|
||||
|
||||
<BaseCardSectionTitle class="mt-5" title="Group Recipe Preferences"></BaseCardSectionTitle>
|
||||
<template v-for="(_, key) in preferences">
|
||||
<v-checkbox
|
||||
v-if="labels[key]"
|
||||
:key="key"
|
||||
v-model="preferences[key]"
|
||||
class="mt-n4"
|
||||
:label="labels[key]"
|
||||
></v-checkbox>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, useContext } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const { i18n } = useContext();
|
||||
|
||||
const labels = {
|
||||
recipePublic: "Allow users outside of your group to see your recipes",
|
||||
recipeShowNutrition: "Show nutrition information",
|
||||
recipeShowAssets: "Show recipe assets",
|
||||
recipeLandscapeView: "Default to landscape view",
|
||||
recipeDisableComments: "Disable recipe comments from users in your group",
|
||||
recipeDisableAmount: "Disable organizing recipe ingredients by units and food",
|
||||
};
|
||||
|
||||
const allDays = [
|
||||
{
|
||||
name: i18n.t("general.sunday"),
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.monday"),
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.tuesday"),
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.wednesday"),
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.thursday"),
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.friday"),
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: i18n.t("general.saturday"),
|
||||
value: 6,
|
||||
},
|
||||
];
|
||||
|
||||
const preferences = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
context.emit("input", val);
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
allDays,
|
||||
labels,
|
||||
preferences,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
style="z-index: 2; position: sticky"
|
||||
>
|
||||
<BaseDialog
|
||||
ref="deleteRecipieConfirm"
|
||||
v-model="deleteDialog"
|
||||
:title="$t('recipe.delete-recipe')"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
|
|
@ -112,6 +112,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
deleteDialog: false,
|
||||
edit: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -160,7 +161,7 @@ export default {
|
|||
this.$emit(JSON_EVENT);
|
||||
break;
|
||||
case DELETE_EVENT:
|
||||
this.$refs.deleteRecipieConfirm.open();
|
||||
this.deleteDialog = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -34,9 +34,14 @@
|
|||
</v-card>
|
||||
<div class="d-flex ml-auto mt-2">
|
||||
<v-spacer></v-spacer>
|
||||
<BaseDialog :title="$t('asset.new-asset')" :icon="getIconDefinition(newAsset.icon).icon" @submit="addAsset">
|
||||
<template #activator="{ open }">
|
||||
<BaseButton v-if="edit" small create @click="open" />
|
||||
<BaseDialog
|
||||
v-model="newAssetDialog"
|
||||
:title="$t('asset.new-asset')"
|
||||
:icon="getIconDefinition(newAsset.icon).icon"
|
||||
@submit="addAsset"
|
||||
>
|
||||
<template #activator>
|
||||
<BaseButton v-if="edit" small create @click="newAssetDialog = true" />
|
||||
</template>
|
||||
<v-card-text class="pt-4">
|
||||
<v-text-field v-model="newAsset.name" dense :label="$t('general.name')"></v-text-field>
|
||||
|
|
@ -94,6 +99,7 @@ export default defineComponent({
|
|||
const api = useUserApi();
|
||||
|
||||
const state = reactive({
|
||||
newAssetDialog: false,
|
||||
fileObject: {} as File,
|
||||
newAsset: {
|
||||
name: "",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="text-center">
|
||||
<BaseDialog
|
||||
ref="domConfirmDelete"
|
||||
v-model="recipeDeleteDialog"
|
||||
:title="$t('recipe.delete-recipe')"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseDialog
|
||||
ref="domMealplanDialog"
|
||||
v-model="mealplannerDialog"
|
||||
title="Add Recipe to Mealplan"
|
||||
color="primary"
|
||||
:icon="$globals.icons.calendar"
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
|
||||
import { useClipboard, useShare } from "@vueuse/core";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
|
|
@ -152,6 +152,8 @@ export default defineComponent({
|
|||
const api = useUserApi();
|
||||
|
||||
const state = reactive({
|
||||
recipeDeleteDialog: false,
|
||||
mealplannerDialog: false,
|
||||
loading: false,
|
||||
menuItems: [] as ContextMenuItem[],
|
||||
newMealdate: "",
|
||||
|
|
@ -232,8 +234,6 @@ export default defineComponent({
|
|||
|
||||
const router = useRouter();
|
||||
|
||||
const domConfirmDelete = ref(null);
|
||||
|
||||
async function deleteRecipe() {
|
||||
await api.recipes.deleteOne(props.slug);
|
||||
context.emit("delete", props.slug);
|
||||
|
|
@ -264,7 +264,6 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
const domMealplanDialog = ref(null);
|
||||
async function addRecipeToPlan() {
|
||||
const { response } = await api.mealplans.createOne({
|
||||
date: state.newMealdate,
|
||||
|
|
@ -284,11 +283,15 @@ export default defineComponent({
|
|||
// Note: Print is handled as an event in the parent component
|
||||
const eventHandlers: { [key: string]: Function } = {
|
||||
// @ts-ignore - Doens't know about open()
|
||||
delete: () => domConfirmDelete?.value?.open(),
|
||||
delete: () => {
|
||||
state.recipeDeleteDialog = true;
|
||||
},
|
||||
edit: () => router.push(`/recipe/${props.slug}` + "?edit=true"),
|
||||
download: handleDownloadEvent,
|
||||
// @ts-ignore - Doens't know about open()
|
||||
mealplanner: () => domMealplanDialog?.value?.open(),
|
||||
mealplanner: () => {
|
||||
state.mealplannerDialog = true;
|
||||
},
|
||||
share: handleShareEvent,
|
||||
};
|
||||
|
||||
|
|
@ -310,8 +313,6 @@ export default defineComponent({
|
|||
contextMenuEventHandler,
|
||||
deleteRecipe,
|
||||
addRecipeToPlan,
|
||||
domConfirmDelete,
|
||||
domMealplanDialog,
|
||||
icon,
|
||||
planTypeOptions,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@
|
|||
</v-chip>
|
||||
</template>
|
||||
<template #append-outer="">
|
||||
<BaseDialog title="Create New Tool" @submit="actions.createOne()">
|
||||
<template #activator="{ open }">
|
||||
<v-btn icon @click="open">
|
||||
<BaseDialog v-model="createDialog" title="Create New Tool" @submit="actions.createOne()">
|
||||
<template #activator>
|
||||
<v-btn icon @click="createDialog = true">
|
||||
<v-icon> {{ $globals.icons.create }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
import { computed } from "vue-demi";
|
||||
import { Tool } from "~/api/class-interfaces/tools";
|
||||
import { useTools } from "~/composables/recipes";
|
||||
|
|
@ -65,6 +65,8 @@ export default defineComponent({
|
|||
setup(props, context) {
|
||||
const { tools, actions, workingToolData } = useTools();
|
||||
|
||||
const createDialog = ref(false);
|
||||
|
||||
const recipeTools = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
|
|
@ -75,10 +77,11 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
return {
|
||||
workingToolData,
|
||||
actions,
|
||||
tools,
|
||||
createDialog,
|
||||
recipeTools,
|
||||
tools,
|
||||
workingToolData,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
:type="inputField.type === fieldTypes.PASSWORD ? 'password' : 'text'"
|
||||
rounded
|
||||
class="rounded-lg"
|
||||
:autofocus="index === 0"
|
||||
dense
|
||||
:label="inputField.label"
|
||||
:name="inputField.varName"
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
|
||||
<template>
|
||||
<v-card color="background" flat class="pb-2">
|
||||
<v-card-title class="headline py-0">
|
||||
<v-card-title class="headline pl-0 py-0">
|
||||
<v-icon v-if="icon !== ''" left>
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
{{ title }}
|
||||
</v-card-title>
|
||||
<v-card-text v-if="$slots.default" class="pt-2">
|
||||
<v-card-text v-if="$slots.default" class="pt-2 pl-0">
|
||||
<p class="pb-0 mb-0">
|
||||
<slot />
|
||||
</p>
|
||||
</v-card-text>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-3"></v-divider>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -69,9 +69,14 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { computed } from "vue-demi";
|
||||
export default defineComponent({
|
||||
name: "BaseDialog",
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
|
|
@ -105,9 +110,22 @@ export default defineComponent({
|
|||
type: Boolean,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const dialog = computed<Boolean>({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
context.emit("input", val);
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
dialog,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
submitted: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -122,6 +140,8 @@ export default defineComponent({
|
|||
watch: {
|
||||
determineClose() {
|
||||
this.submitted = false;
|
||||
|
||||
// @ts-ignore
|
||||
this.dialog = false;
|
||||
},
|
||||
dialog(val) {
|
||||
|
|
@ -139,10 +159,19 @@ export default defineComponent({
|
|||
this.submitted = true;
|
||||
},
|
||||
open() {
|
||||
// @ts-ignore
|
||||
this.dialog = true;
|
||||
this.logDeprecatedProp("open");
|
||||
},
|
||||
close() {
|
||||
// @ts-ignore
|
||||
this.dialog = false;
|
||||
this.logDeprecatedProp("close");
|
||||
},
|
||||
logDeprecatedProp(val: string) {
|
||||
console.warn(
|
||||
`[BaseDialog] The method '${val}' is deprecated. Please use v-model="value" to manage state instead.`
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<!-- Delete Dialog -->
|
||||
<BaseDialog
|
||||
ref="domDeleteConfirmation"
|
||||
v-model="deleteDialog"
|
||||
:title="$t('settings.backup.delete-backup')"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<!-- Import Dialog -->
|
||||
<BaseDialog
|
||||
ref="domImportDialog"
|
||||
v-model="importDialog"
|
||||
:title="selected.name"
|
||||
:icon="$globals.icons.database"
|
||||
:submit-text="$t('general.import')"
|
||||
|
|
@ -38,6 +38,7 @@
|
|||
<BaseButton class="mr-2" @click="createBackup(null)" />
|
||||
<!-- Backup Creation Dialog -->
|
||||
<BaseDialog
|
||||
v-model="createDialog"
|
||||
:title="$t('settings.backup.create-heading')"
|
||||
:icon="$globals.icons.database"
|
||||
:submit-text="$t('general.create')"
|
||||
|
|
@ -82,7 +83,7 @@
|
|||
class="mx-1"
|
||||
delete
|
||||
@click.stop="
|
||||
domDeleteConfirmation.open();
|
||||
deleteDialog = true;
|
||||
deleteTarget = item.name;
|
||||
"
|
||||
/>
|
||||
|
|
@ -105,7 +106,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, useContext, ref } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
|
||||
import AdminBackupImportOptions from "@/components/Domain/Admin/AdminBackupImportOptions.vue";
|
||||
import { useBackups } from "~/composables/use-backups";
|
||||
|
||||
|
|
@ -118,9 +119,10 @@ export default defineComponent({
|
|||
const { selected, backups, backupOptions, deleteTarget, refreshBackups, importBackup, createBackup, deleteBackup } =
|
||||
useBackups();
|
||||
|
||||
const domDeleteConfirmation = ref(null);
|
||||
const domImportDialog = ref(null);
|
||||
const state = reactive({
|
||||
deleteDialog: false,
|
||||
createDialog: false,
|
||||
importDialog: false,
|
||||
search: "",
|
||||
headers: [
|
||||
{ text: i18n.t("general.name"), value: "name" },
|
||||
|
|
@ -135,8 +137,7 @@ export default defineComponent({
|
|||
return;
|
||||
}
|
||||
selected.value.name = data.name;
|
||||
// @ts-ignore - Calling Child Method
|
||||
domImportDialog.value.open();
|
||||
state.importDialog = true;
|
||||
}
|
||||
|
||||
const backupsFileNameDownload = (fileName: string) => `api/backups/${fileName}/download`;
|
||||
|
|
@ -150,8 +151,6 @@ export default defineComponent({
|
|||
deleteBackup,
|
||||
setSelected,
|
||||
deleteTarget,
|
||||
domDeleteConfirmation,
|
||||
domImportDialog,
|
||||
importBackup,
|
||||
refreshBackups,
|
||||
backupsFileNameDownload,
|
||||
|
|
|
|||
96
frontend/pages/admin/manage/groups/_id.vue
Normal file
96
frontend/pages/admin/manage/groups/_id.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<v-container v-if="group" class="narrow-container">
|
||||
<BasePageTitle>
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> Admin Group Management </template>
|
||||
Changes to this group will be reflected immediately.
|
||||
</BasePageTitle>
|
||||
<AppToolbar back> </AppToolbar>
|
||||
<v-card-text> Group Id: {{ group.id }} </v-card-text>
|
||||
<v-form v-if="!userError" ref="refGroupEditForm" @submit.prevent="handleSubmit">
|
||||
<v-card outlined>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="group.name" label="Group Name"> </v-text-field>
|
||||
<GroupPreferencesEditor v-if="group.preferences" v-model="group.preferences" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<div class="d-flex pa-2">
|
||||
<BaseButton type="submit" edit class="ml-auto"> {{ $t("general.update") }}</BaseButton>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-api";
|
||||
import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
|
||||
import { useAdminApi } from "~/composables/api";
|
||||
import { useGroups } from "~/composables/use-groups";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { useUserForm } from "~/composables/use-users";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
GroupPreferencesEditor,
|
||||
},
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const { userForm } = useUserForm();
|
||||
const { groups } = useGroups();
|
||||
const route = useRoute();
|
||||
|
||||
const groupId = route.value.params.id;
|
||||
|
||||
// ==============================================
|
||||
// New User Form
|
||||
|
||||
const refGroupEditForm = ref<VForm | null>(null);
|
||||
|
||||
const adminApi = useAdminApi();
|
||||
|
||||
const group = ref({});
|
||||
|
||||
const userError = ref(false);
|
||||
|
||||
onMounted(async () => {
|
||||
const { data, error } = await adminApi.groups.getOne(groupId);
|
||||
|
||||
if (error?.response?.status === 404) {
|
||||
alert.error("User Not Found");
|
||||
userError.value = true;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
// @ts-ignore
|
||||
group.value = data;
|
||||
}
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!refGroupEditForm.value?.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
const { response, data } = await adminApi.groups.updateOne(group.value.id, group.value);
|
||||
if (response?.status === 200 && data) {
|
||||
// @ts-ignore
|
||||
group.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
group,
|
||||
userError,
|
||||
userForm,
|
||||
refGroupEditForm,
|
||||
handleSubmit,
|
||||
groups,
|
||||
validators,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,23 +1,36 @@
|
|||
// TODO: Edit Group
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<BaseDialog
|
||||
v-model="createDialog"
|
||||
:title="$t('group.create-group')"
|
||||
:icon="$globals.icons.group"
|
||||
@submit="createGroup(createUserForm.data)"
|
||||
>
|
||||
<template #activator> </template>
|
||||
<v-card-text>
|
||||
<AutoForm v-model="createUserForm.data" :update-mode="updateMode" :items="createUserForm.items" />
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseDialog
|
||||
v-model="confirmDialog"
|
||||
:title="$t('general.confirm')"
|
||||
color="error"
|
||||
@confirm="deleteGroup(deleteTarget)"
|
||||
>
|
||||
<template #activator> </template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseCardSectionTitle title="Group Management"> </BaseCardSectionTitle>
|
||||
<section>
|
||||
<v-toolbar flat color="background" class="justify-between">
|
||||
<BaseDialog
|
||||
ref="refUserDialog"
|
||||
top
|
||||
:title="$t('group.create-group')"
|
||||
@submit="createGroup(createUserForm.data)"
|
||||
>
|
||||
<template #activator="{ open }">
|
||||
<BaseButton @click="open"> {{ $t("group.create-group") }} </BaseButton>
|
||||
</template>
|
||||
<v-card-text>
|
||||
<AutoForm v-model="createUserForm.data" :update-mode="updateMode" :items="createUserForm.items" />
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
|
||||
</v-toolbar>
|
||||
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="groups || []"
|
||||
|
|
@ -26,10 +39,8 @@
|
|||
hide-default-footer
|
||||
disable-pagination
|
||||
:search="search"
|
||||
@click:row="handleRowClick"
|
||||
>
|
||||
<template #item.mealplans="{ item }">
|
||||
{{ item.mealplans.length }}
|
||||
</template>
|
||||
<template #item.shoppingLists="{ item }">
|
||||
{{ item.shoppingLists.length }}
|
||||
</template>
|
||||
|
|
@ -37,28 +48,23 @@
|
|||
{{ item.users.length }}
|
||||
</template>
|
||||
<template #item.webhookEnable="{ item }">
|
||||
{{ item.webhookEnabled ? $t("general.yes") : $t("general.no") }}
|
||||
{{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="deleteGroup(item.id)">
|
||||
<template #activator="{ open }">
|
||||
<v-btn :disabled="item && item.users.length > 0" class="mr-1" small color="error" @click="open">
|
||||
<v-icon small left>
|
||||
{{ $globals.icons.delete }}
|
||||
</v-icon>
|
||||
{{ $t("general.delete") }}
|
||||
</v-btn>
|
||||
<v-btn small color="success" @click="updateUser(item)">
|
||||
<v-icon small left class="mr-2">
|
||||
{{ $globals.icons.edit }}
|
||||
</v-icon>
|
||||
{{ $t("general.edit") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<v-btn
|
||||
:disabled="item && item.users.length > 0"
|
||||
class="mr-1"
|
||||
icon
|
||||
color="error"
|
||||
@click.stop="
|
||||
confirmDialog = true;
|
||||
deleteTarget = item.id;
|
||||
"
|
||||
>
|
||||
<v-icon>
|
||||
{{ $globals.icons.delete }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider></v-divider>
|
||||
|
|
@ -67,7 +73,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
|
||||
import { Group } from "~/api/class-interfaces/groups";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
import { useGroups } from "~/composables/use-groups";
|
||||
|
||||
|
|
@ -78,6 +85,9 @@ export default defineComponent({
|
|||
const { groups, refreshAllGroups, deleteGroup, createGroup } = useGroups();
|
||||
|
||||
const state = reactive({
|
||||
createDialog: false,
|
||||
confirmDialog: false,
|
||||
deleteTarget: 0,
|
||||
search: "",
|
||||
headers: [
|
||||
{
|
||||
|
|
@ -89,9 +99,8 @@ export default defineComponent({
|
|||
{ text: i18n.t("general.name"), value: "name" },
|
||||
{ text: i18n.t("user.total-users"), value: "users" },
|
||||
{ text: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
|
||||
{ text: i18n.t("user.total-mealplans"), value: "mealplans" },
|
||||
{ text: i18n.t("shopping-list.shopping-lists"), value: "shoppingLists" },
|
||||
{ value: "actions" },
|
||||
{ text: i18n.t("general.delete"), value: "actions" },
|
||||
],
|
||||
updateMode: false,
|
||||
createUserForm: {
|
||||
|
|
@ -109,7 +118,18 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
|
||||
return { ...toRefs(state), groups, refreshAllGroups, deleteGroup, createGroup };
|
||||
function openDialog() {
|
||||
state.createDialog = true;
|
||||
state.createUserForm.data.name = "";
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function handleRowClick(item: Group) {
|
||||
router.push("/admin/manage/groups/" + item.id);
|
||||
}
|
||||
|
||||
return { ...toRefs(state), groups, refreshAllGroups, deleteGroup, createGroup, openDialog, handleRowClick };
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</v-card-text>
|
||||
</v-card>
|
||||
<div class="d-flex pa-2">
|
||||
<BaseButton type="submit" class="ml-auto"></BaseButton>
|
||||
<BaseButton type="submit" edit class="ml-auto"> {{ $t("general.update") }}</BaseButton>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-container>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
// TODO: Edit User
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<BaseDialog v-model="deleteDialog" :title="$t('general.confirm')" color="error" @confirm="deleteUser(deleteTarget)">
|
||||
<template #activator> </template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseCardSectionTitle title="User Management"> </BaseCardSectionTitle>
|
||||
<section>
|
||||
<v-toolbar color="background" flat class="justify-between">
|
||||
|
|
@ -25,18 +31,19 @@
|
|||
</v-icon>
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="deleteUser(item.id)">
|
||||
<template #activator="{ open }">
|
||||
<v-btn icon :disabled="item.id == 1" color="error" @click.stop="open">
|
||||
<v-icon>
|
||||
{{ $globals.icons.delete }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<v-btn
|
||||
icon
|
||||
:disabled="item.id == 1"
|
||||
color="error"
|
||||
@click.stop="
|
||||
deleteDialog = true;
|
||||
deleteTarget = item.id;
|
||||
"
|
||||
>
|
||||
<v-icon>
|
||||
{{ $globals.icons.delete }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider></v-divider>
|
||||
|
|
@ -61,6 +68,8 @@ export default defineComponent({
|
|||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
deleteDialog: false,
|
||||
deleteTarget: 0,
|
||||
search: "",
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -128,6 +128,7 @@ export default defineComponent({
|
|||
emailReady: false,
|
||||
baseUrlSet: false,
|
||||
isSiteSecure: false,
|
||||
ldapReady: false,
|
||||
});
|
||||
|
||||
const api = useUserApi();
|
||||
|
|
@ -140,10 +141,10 @@ export default defineComponent({
|
|||
appConfig.value = data;
|
||||
}
|
||||
|
||||
appConfig.value.isSiteSecure = isLocalhostorHttps();
|
||||
appConfig.value.isSiteSecure = isLocalHostOrHttps();
|
||||
});
|
||||
|
||||
function isLocalhostorHttps() {
|
||||
function isLocalHostOrHttps() {
|
||||
return window.location.hostname === "localhost" || window.location.protocol === "https:";
|
||||
}
|
||||
|
||||
|
|
@ -152,15 +153,21 @@ export default defineComponent({
|
|||
{
|
||||
status: appConfig.value.baseUrlSet,
|
||||
text: "Server Side Base URL",
|
||||
errorText: "Error - `BASE_URL` still default on API Server",
|
||||
errorText: "`BASE_URL` still default on API Server",
|
||||
successText: "Server Side URL does not match the default",
|
||||
},
|
||||
{
|
||||
status: appConfig.value.isSiteSecure,
|
||||
text: "Secure Site",
|
||||
errorText: "Error - Serve via localhost or secure with https.",
|
||||
errorText: "Serve via localhost or secure with https.",
|
||||
successText: "Site is accessed by localhost or https",
|
||||
},
|
||||
{
|
||||
status: appConfig.value.ldapReady,
|
||||
text: "LDAP Ready",
|
||||
errorText: "Not all LDAP Values are configured",
|
||||
successText: "Required LDAP variables are all set.",
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
<v-container fluid>
|
||||
<BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
|
||||
<v-toolbar flat color="background">
|
||||
<!-- New/Edit Food Dialog -->
|
||||
<BaseDialog
|
||||
ref="domFoodDialog"
|
||||
v-model="newFoodDialog"
|
||||
:title="dialog.title"
|
||||
:icon="$globals.icons.units"
|
||||
:submit-text="dialog.text"
|
||||
|
|
@ -18,12 +19,25 @@
|
|||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Delete Food Dialog -->
|
||||
<BaseDialog
|
||||
v-model="deleteFoodDialog"
|
||||
:title="$t('general.confirm')"
|
||||
color="error"
|
||||
@confirm="actions.deleteOne(deleteTarget)"
|
||||
>
|
||||
<template #activator> </template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseButton
|
||||
class="mr-1"
|
||||
@click="
|
||||
create = true;
|
||||
actions.resetWorking();
|
||||
domFoodDialog.open();
|
||||
newFoodDialog = true;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseButton secondary @click="filter = !filter"> Filter </BaseButton>
|
||||
|
|
@ -45,17 +59,17 @@
|
|||
@click="
|
||||
create = false;
|
||||
actions.setWorking(item);
|
||||
domFoodDialog.open();
|
||||
newFoodDialog = true;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseButton
|
||||
delete
|
||||
small
|
||||
@click="
|
||||
deleteFoodDialog = true;
|
||||
deleteTarget = item.id;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="actions.deleteOne(item.id)">
|
||||
<template #activator="{ open }">
|
||||
<BaseButton delete small @click="open"></BaseButton>
|
||||
</template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
|
@ -90,6 +104,9 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
const state = reactive({
|
||||
deleteFoodDialog: false,
|
||||
newFoodDialog: false,
|
||||
deleteTarget: 0,
|
||||
headers: [
|
||||
{ text: "Id", value: "id" },
|
||||
{ text: "Name", value: "name" },
|
||||
|
|
|
|||
|
|
@ -1,30 +1,42 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<!-- Create/Edit Unit Dialog -->
|
||||
<BaseDialog
|
||||
v-model="createUnitDialog"
|
||||
:title="dialog.title"
|
||||
:icon="$globals.icons.units"
|
||||
:submit-text="dialog.text"
|
||||
:keep-open="!validForm"
|
||||
@submit="create ? actions.createOne(domCreateUnitForm) : actions.updateOne()"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-form ref="domCreateUnitForm">
|
||||
<v-text-field v-model="workingUnitData.name" label="Name" :rules="[validators.required]"></v-text-field>
|
||||
<v-text-field v-model="workingUnitData.abbreviation" label="Abbreviation"></v-text-field>
|
||||
<v-text-field v-model="workingUnitData.description" label="Description"></v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Delete Unit Dialog -->
|
||||
<BaseDialog
|
||||
v-model="deleteUnitDialog"
|
||||
:title="$t('general.confirm')"
|
||||
color="error"
|
||||
@confirm="actions.deleteOne(item.id)"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
|
||||
<v-toolbar flat color="background">
|
||||
<BaseDialog
|
||||
ref="domUnitDialog"
|
||||
:title="dialog.title"
|
||||
:icon="$globals.icons.units"
|
||||
:submit-text="dialog.text"
|
||||
:keep-open="!validForm"
|
||||
@submit="create ? actions.createOne(domCreateUnitForm) : actions.updateOne()"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-form ref="domCreateUnitForm">
|
||||
<v-text-field v-model="workingUnitData.name" label="Name" :rules="[validators.required]"></v-text-field>
|
||||
<v-text-field v-model="workingUnitData.abbreviation" label="Abbreviation"></v-text-field>
|
||||
<v-text-field v-model="workingUnitData.description" label="Description"></v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseButton
|
||||
class="mr-1"
|
||||
@click="
|
||||
create = true;
|
||||
actions.resetWorking();
|
||||
domUnitDialog.open();
|
||||
createUnitDialog = true;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseButton secondary @click="filter = !filter"> Filter </BaseButton>
|
||||
|
|
@ -46,17 +58,17 @@
|
|||
@click="
|
||||
create = false;
|
||||
actions.setWorking(item);
|
||||
domUnitDialog.open();
|
||||
createUnitDialog = true;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseButton
|
||||
delete
|
||||
small
|
||||
@click="
|
||||
deleteUnitDialog = true;
|
||||
deleteUnitTarget = item.id;
|
||||
"
|
||||
></BaseButton>
|
||||
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="actions.deleteOne(item.id)">
|
||||
<template #activator="{ open }">
|
||||
<BaseButton delete small @click="open"></BaseButton>
|
||||
</template>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
|
@ -91,6 +103,9 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
const state = reactive({
|
||||
createUnitDialog: false,
|
||||
deleteUnitDialog: false,
|
||||
deleteUnitTarget: 0,
|
||||
headers: [
|
||||
{ text: "Id", value: "id" },
|
||||
{ text: "Name", value: "name" },
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<v-container>
|
||||
<!-- Create Meal Dialog -->
|
||||
<BaseDialog
|
||||
ref="domMealDialog"
|
||||
v-model="createMealDialog"
|
||||
:title="$t('meal-plan.create-a-new-meal-plan')"
|
||||
color="primary"
|
||||
:icon="$globals.icons.foods"
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, ref, toRefs, watch } from "@nuxtjs/composition-api";
|
||||
import { computed, defineComponent, reactive, toRefs, watch } from "@nuxtjs/composition-api";
|
||||
import { isSameDay, addDays, subDays, parseISO, format } from "date-fns";
|
||||
import { SortableEvent } from "sortablejs"; // eslint-disable-line
|
||||
import draggable from "vuedraggable";
|
||||
|
|
@ -222,6 +222,7 @@ export default defineComponent({
|
|||
|
||||
useRecipes(true, true);
|
||||
const state = reactive({
|
||||
createMealDialog: false,
|
||||
edit: false,
|
||||
hover: {},
|
||||
pickerMenu: null,
|
||||
|
|
@ -300,7 +301,6 @@ export default defineComponent({
|
|||
// =====================================================
|
||||
// New Meal Dialog
|
||||
|
||||
const domMealDialog = ref(null);
|
||||
const dialog = reactive({
|
||||
loading: false,
|
||||
error: false,
|
||||
|
|
@ -326,7 +326,7 @@ export default defineComponent({
|
|||
function openDialog(date: Date) {
|
||||
newMeal.date = format(date, "yyyy-MM-dd");
|
||||
// @ts-ignore
|
||||
domMealDialog.value.open();
|
||||
state.createMealDialog = true;
|
||||
}
|
||||
|
||||
function resetDialog() {
|
||||
|
|
@ -360,7 +360,6 @@ export default defineComponent({
|
|||
backOneWeek,
|
||||
days,
|
||||
dialog,
|
||||
domMealDialog,
|
||||
forwardOneWeek,
|
||||
loading,
|
||||
mealplans,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-members.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> Manage Memebers </template>
|
||||
<template #title> Manage Members </template>
|
||||
Manage the permissions of the members in your groups. <b> Manage </b> allows the user to access the
|
||||
data-management page <b> Invite </b> allows the user to generate invitation links for other users. Group owners
|
||||
cannot change their own permissions.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<!-- Dialog Object -->
|
||||
<!-- Base Dialog Object -->
|
||||
<BaseDialog
|
||||
ref="domDialog"
|
||||
v-model="dialog.state"
|
||||
width="650px"
|
||||
:icon="dialog.icon"
|
||||
:title="dialog.title"
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.export"> TODO: Export Stuff Here </v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-recipes.svg')"></v-img>
|
||||
|
|
@ -207,9 +209,8 @@ export default defineComponent({
|
|||
// ============================================================
|
||||
// Dialog Management
|
||||
|
||||
const domDialog = ref(null);
|
||||
|
||||
const dialog = reactive({
|
||||
state: false,
|
||||
title: "Tag Recipes",
|
||||
mode: MODES.tag,
|
||||
tag: "",
|
||||
|
|
@ -243,15 +244,13 @@ export default defineComponent({
|
|||
dialog.title = titles[mode];
|
||||
dialog.callback = callbacks[mode];
|
||||
dialog.icon = icons[mode];
|
||||
// @ts-ignore
|
||||
domDialog.value.open();
|
||||
dialog.state = true;
|
||||
}
|
||||
|
||||
return {
|
||||
toSetTags,
|
||||
toSetCategories,
|
||||
openDialog,
|
||||
domDialog,
|
||||
dialog,
|
||||
MODES,
|
||||
headers,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue