mirror of
				https://github.com/mealie-recipes/mealie.git
				synced 2025-11-03 18:53:17 -05:00 
			
		
		
		
	* Activate more linting rules from eslint and typescript * Properly add VForm as type information * Fix usage of native types * Fix more linting issues * Rename vuetify types file, add VTooltip * Fix some more typing problems * Use composition API for more components * Convert RecipeRating * Convert RecipeNutrition * Convert more components to composition API * Fix globals plugin for type checking * Add missing icon types * Fix vuetify types in Nuxt context * Use composition API for RecipeActionMenu * Convert error.vue to composition API * Convert RecipeContextMenu to composition API * Use more composition API and type checking in recipe/create * Convert AppButtonUpload to composition API * Fix some type checking in RecipeContextMenu * Remove unused components BaseAutoForm and BaseColorPicker * Convert RecipeCategoryTagDialog to composition API * Convert RecipeCardSection to composition API * Convert RecipeCategoryTagSelector to composition API * Properly import vuetify type definitions * Convert BaseButton to composition API * Convert AutoForm to composition API * Remove unused requests API file * Remove static routes from recipe API * Fix more type errors * Convert AppHeader to composition API, fixing some search bar focus problems * Convert RecipeDialogSearch to composition API * Update API types from pydantic models, handle undefined values * Improve more typing problems * Add types to other plugins * Properly type the CRUD API access * Fix typing of static image routes * Fix more typing stuff * Fix some more typing problems * Turn off more rules
		
			
				
	
	
		
			97 lines
		
	
	
		
			2.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			97 lines
		
	
	
		
			2.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
  <v-container class="narrow-container">
 | 
						|
    <BasePageTitle class="mb-2">
 | 
						|
      <template #header>
 | 
						|
        <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
 | 
						|
      </template>
 | 
						|
      <template #title> Admin User Creation </template>
 | 
						|
    </BasePageTitle>
 | 
						|
    <AppToolbar back> </AppToolbar>
 | 
						|
    <v-form ref="refNewUserForm" @submit.prevent="handleSubmit">
 | 
						|
      <v-card outlined>
 | 
						|
        <v-card-text>
 | 
						|
          <v-select
 | 
						|
            v-if="groups"
 | 
						|
            v-model="newUserData.group"
 | 
						|
            :items="groups"
 | 
						|
            rounded
 | 
						|
            class="rounded-lg"
 | 
						|
            item-text="name"
 | 
						|
            item-value="name"
 | 
						|
            :return-object="false"
 | 
						|
            filled
 | 
						|
            label="User Group"
 | 
						|
            :rules="[validators.required]"
 | 
						|
          ></v-select>
 | 
						|
          <AutoForm v-model="newUserData" :items="userForm" />
 | 
						|
        </v-card-text>
 | 
						|
      </v-card>
 | 
						|
      <div class="d-flex pa-2">
 | 
						|
        <BaseButton type="submit" class="ml-auto"></BaseButton>
 | 
						|
      </div>
 | 
						|
    </v-form>
 | 
						|
  </v-container>
 | 
						|
</template>
 | 
						|
 | 
						|
<script lang="ts">
 | 
						|
import { defineComponent, useRouter, reactive, ref, toRefs } from "@nuxtjs/composition-api";
 | 
						|
import { useAdminApi } from "~/composables/api";
 | 
						|
import { useGroups } from "~/composables/use-groups";
 | 
						|
import { useUserForm } from "~/composables/use-users";
 | 
						|
import { validators } from "~/composables/use-validators";
 | 
						|
import { VForm } from "~/types/vuetify";
 | 
						|
 | 
						|
export default defineComponent({
 | 
						|
  layout: "admin",
 | 
						|
  setup() {
 | 
						|
    const { userForm } = useUserForm();
 | 
						|
    const { groups } = useGroups();
 | 
						|
    const router = useRouter();
 | 
						|
 | 
						|
    // ==============================================
 | 
						|
    // New User Form
 | 
						|
 | 
						|
    const refNewUserForm = ref<VForm | null>(null);
 | 
						|
 | 
						|
    const adminApi = useAdminApi();
 | 
						|
 | 
						|
    const state = reactive({
 | 
						|
      newUserData: {
 | 
						|
        username: "",
 | 
						|
        fullName: "",
 | 
						|
        email: "",
 | 
						|
        admin: false,
 | 
						|
        group: "",
 | 
						|
        advanced: false,
 | 
						|
        canInvite: false,
 | 
						|
        canManage: false,
 | 
						|
        canOrganize: false,
 | 
						|
        password: "",
 | 
						|
      },
 | 
						|
    });
 | 
						|
 | 
						|
    async function handleSubmit() {
 | 
						|
      if (!refNewUserForm.value?.validate()) return;
 | 
						|
 | 
						|
      const { response } = await adminApi.users.createOne(state.newUserData);
 | 
						|
 | 
						|
      if (response?.status === 201) {
 | 
						|
        router.push("/admin/manage/users");
 | 
						|
      }
 | 
						|
    }
 | 
						|
 | 
						|
    return {
 | 
						|
      ...toRefs(state),
 | 
						|
      userForm,
 | 
						|
      refNewUserForm,
 | 
						|
      handleSubmit,
 | 
						|
      groups,
 | 
						|
      validators,
 | 
						|
    };
 | 
						|
  },
 | 
						|
});
 | 
						|
</script>
 | 
						|
 | 
						|
<style lang="scss" scoped>
 | 
						|
</style>
 |