admin: Register common components as global

somnisomni · Dec 18, 2024 · 64f0b4d · 64f0b4d
1 parent e71a35b
commit 64f0b4d
Show file tree

Hide file tree

Showing 15 changed files with 27 additions and 44 deletions.
diff --git a/projects/Admin/src/components/common/FileInputButton.vue b/projects/Admin/src/components/common/FileInputButton.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Model, Prop, Ref, Vue } from "vue-facing-decorator";
+import { Component, Emit, Model, Prop, Ref, toNative, Vue } from "vue-facing-decorator";
 import { MAX_UPLOAD_FILE_BYTES } from "@myboothmanager/common";
 import { useAdminStore } from "@/plugins/stores/admin";
 
@@ -40,7 +40,7 @@ const ACCEPTS_MIMES: Record<FileInputAccepts, Array<string>> = {
 @Component({
   emits: ["change"],
 })
-export default class FileInputButton extends Vue {
+export class FileInputButton extends Vue {
   @Model({ type: File, default: null }) value!: File | null;
   @Prop({ type: String, default: "파일 선택" }) label!: string;
   @Prop({ type: Boolean, default: false }) disabled!: boolean;
@@ -118,4 +118,6 @@ export default class FileInputButton extends Vue {
     this.$forceUpdate();
   }
 }
+
+export default toNative(FileInputButton);
 </script>
diff --git a/projects/Admin/src/components/common/ImageWithUpload.vue b/projects/Admin/src/components/common/ImageWithUpload.vue
@@ -36,17 +36,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-facing-decorator";
+import { Component, Prop, toNative, Vue } from "vue-facing-decorator";
 import { getUploadFileUrl } from "@/lib/functions";
-import FileInputButton, { FileInputAccepts } from "./FileInputButton.vue";
+import { FileInputAccepts } from "./FileInputButton.vue";
 
 @Component({
   emits: ["updated", "error"],
-  components: {
-    FileInputButton,
-  },
 })
-export default class ImageWithUpload extends Vue {
+export class ImageWithUpload extends Vue {
   readonly FileInputAccepts = FileInputAccepts;
 
   @Prop({ type: String, required: true, default: null }) existingSrc!: string | null;
@@ -127,4 +124,6 @@ export default class ImageWithUpload extends Vue {
     return this.imageFilePickedObjectURL ?? getUploadFileUrl(this.existingSrc);
   }
 }
+
+export default toNative(ImageWithUpload);
 </script>
diff --git a/projects/Admin/src/components/dialogs/BoothManageDialog.vue b/projects/Admin/src/components/dialogs/BoothManageDialog.vue
@@ -111,7 +111,6 @@ const useProxyStore = defineStore("BoothManageDialog__proxy", () => {
 
 @Component({
   components: {
-    CommonForm,
     FormDataLossWarningDialog,
   },
   emits: ["updated", "error"],

diff --git a/projects/Admin/src/components/dialogs/BoothMemberManageDialog.vue b/projects/Admin/src/components/dialogs/BoothMemberManageDialog.vue
@@ -53,14 +53,11 @@ import { ErrorCodes, type IBoothMember, type IBoothMemberCreateRequest, type IBo
 import { useAdminStore } from "@/plugins/stores/admin";
 import { useAdminAPIStore } from "@/plugins/stores/api";
 import { CommonForm, FormFieldType, type FormFieldOptions } from "../common/CommonForm.vue";
-import ImageWithUpload from "../common/ImageWithUpload.vue";
 import FormDataLossWarningDialog from "./common/FormDataLossWarningDialog.vue";
 import ItemDeleteWarningDialog from "./common/ItemDeleteWarningDialog.vue";
 
 @Component({
   components: {
-    ImageWithUpload,
-    CommonForm,
     FormDataLossWarningDialog,
     ItemDeleteWarningDialog,
   },

diff --git a/projects/Admin/src/components/dialogs/FeedbackDialog.vue b/projects/Admin/src/components/dialogs/FeedbackDialog.vue
@@ -38,7 +38,6 @@ import FormDataLossWarningDialog from "./common/FormDataLossWarningDialog.vue";
 
 @Component({
   components: {
-    CommonForm,
     FormDataLossWarningDialog,
   },
 })

diff --git a/projects/Admin/src/components/dialogs/GoodsCategoryManageDialog.vue b/projects/Admin/src/components/dialogs/GoodsCategoryManageDialog.vue
@@ -50,7 +50,6 @@ import ItemDeleteWarningDialog from "./common/ItemDeleteWarningDialog.vue";
 
 @Component({
   components: {
-    CommonForm,
     FormDataLossWarningDialog,
     ItemDeleteWarningDialog,
   },

diff --git a/projects/Admin/src/components/dialogs/GoodsCombinationManageDialog.vue b/projects/Admin/src/components/dialogs/GoodsCombinationManageDialog.vue
@@ -80,15 +80,12 @@ import { reactive, readonly } from "vue";
 import { useAdminStore } from "@/plugins/stores/admin";
 import { useAdminAPIStore } from "@/plugins/stores/api";
 import { CommonForm, FormFieldType, type FormFieldOptions } from "../common/CommonForm.vue";
-import ImageWithUpload from "../common/ImageWithUpload.vue";
 import FormDataLossWarningDialog from "./common/FormDataLossWarningDialog.vue";
 import ItemDeleteWarningDialog from "./common/ItemDeleteWarningDialog.vue";
 import GoodsSelectionDialog from "./GoodsSelectionDialog.vue";
 
 @Component({
   components: {
-    ImageWithUpload,
-    CommonForm,
     GoodsSelectionDialog,
     FormDataLossWarningDialog,
     ItemDeleteWarningDialog,

diff --git a/projects/Admin/src/components/dialogs/GoodsManageDialog.vue b/projects/Admin/src/components/dialogs/GoodsManageDialog.vue
@@ -59,15 +59,12 @@ import { useAdminStore } from "@/plugins/stores/admin";
 import FormDataLossWarningDialog from "@/components/dialogs/common/FormDataLossWarningDialog.vue";
 import { useAdminAPIStore } from "@/plugins/stores/api";
 import { CommonForm } from "../common/CommonForm.vue";
-import ImageWithUpload from "../common/ImageWithUpload.vue";
 import { FormFieldType, type FormFieldOptions } from "../common/CommonForm.vue";
 import GoodsCategoryManageDialog from "./GoodsCategoryManageDialog.vue";
 import ItemDeleteWarningDialog from "./common/ItemDeleteWarningDialog.vue";
 
 @Component({
   components: {
-    ImageWithUpload,
-    CommonForm,
     GoodsCategoryManageDialog,
     FormDataLossWarningDialog,
     ItemDeleteWarningDialog,

diff --git a/projects/Admin/src/main.ts b/projects/Admin/src/main.ts
@@ -10,6 +10,7 @@ import { getUploadFileUrl } from "./lib/functions";
 import App from "./App.vue";
 import router from "./plugins/router";
 import vuetify from "./plugins/vuetify";
+import commonComponents from "@/plugins/common-components";
 
 /* *====* */
 
@@ -21,5 +22,6 @@ app.use(pinia);
 app.use(router);
 app.use(vuetify);
 app.use(CommonUI, { imageUrlResolver: getUploadFileUrl });
+app.use(commonComponents);
 
 app.mount("#app");
diff --git a/projects/Admin/src/pages/subpages/InfoPage.vue b/projects/Admin/src/pages/subpages/InfoPage.vue
@@ -29,13 +29,11 @@ import { Component, Vue } from "vue-facing-decorator";
 import BoothInfoPanel from "@/components/info/BoothInfoPanel.vue";
 import BoothMembersPanel from "@/components/info/BoothMembersPanel.vue";
 import BoothNoticePanel from "@/components/info/BoothNoticePanel.vue";
-import ImageWithUpload from "@/components/common/ImageWithUpload.vue";
 import { useAdminStore } from "@/plugins/stores/admin";
 import { useAdminAPIStore } from "@/plugins/stores/api";
 
 @Component({
   components: {
-    ImageWithUpload,
     BoothInfoPanel,
     BoothMembersPanel,
     BoothNoticePanel,

diff --git a/projects/Admin/src/pages/subpages/info/InfoBannerImagePage.vue b/projects/Admin/src/pages/subpages/info/InfoBannerImagePage.vue
@@ -15,15 +15,10 @@
 
 <script lang="ts">
 import { Component, toNative, Vue } from "vue-facing-decorator";
-import ImageWithUpload from "@/components/common/ImageWithUpload.vue";
 import { useAdminAPIStore } from "@/plugins/stores/api";
 import { useAdminStore } from "@/plugins/stores/admin";
 
-@Component({
-  components: {
-    ImageWithUpload,
-  },
-})
+@Component({})
 class InfoBannerImagePage extends Vue {
   get imagePath(): string | null {
     return useAdminStore().currentBooth.booth!.bannerImage?.path ?? null;

diff --git a/projects/Admin/src/pages/subpages/info/InfoInfoImagePage.vue b/projects/Admin/src/pages/subpages/info/InfoInfoImagePage.vue
@@ -15,15 +15,10 @@
 
 <script lang="ts">
 import { Component, toNative, Vue } from "vue-facing-decorator";
-import ImageWithUpload from "@/components/common/ImageWithUpload.vue";
 import { useAdminAPIStore } from "@/plugins/stores/api";
 import { useAdminStore } from "@/plugins/stores/admin";
 
-@Component({
-  components: {
-    ImageWithUpload,
-  },
-})
+@Component({})
 class InfoInfoImagePage extends Vue {
   get imagePath(): string | null {
     return useAdminStore().currentBooth.booth!.infoImage?.path ?? null;

diff --git a/projects/Admin/src/pages/superadmin/fragments/SACreateAccountFragment.vue b/projects/Admin/src/pages/superadmin/fragments/SACreateAccountFragment.vue
@@ -25,11 +25,7 @@ import { CommonForm, type FormFieldOptions, FormFieldType } from "@/components/c
 import { useAdminStore } from "@/plugins/stores/admin";
 import { SuperAdminAPI } from "../SuperAdminPage.lib";
 
-@Component({
-  components: {
-    CommonForm,
-  },
-})
+@Component({})
 export default class SACreateAccountFragment extends Vue {
   @Setup(() => useAdminStore().globalSnackbarContexts)
   declare readonly globalSnackbarContexts: SnackbarContextWrapper;

diff --git a/projects/Admin/src/pages/superadmin/fragments/SACreateFairFragment.vue b/projects/Admin/src/pages/superadmin/fragments/SACreateFairFragment.vue
@@ -25,11 +25,7 @@ import { CommonForm, FormFieldType, type FormFieldOptions } from "@/components/c
 import { useAdminStore } from "@/plugins/stores/admin";
 import { SuperAdminAPI } from "../SuperAdminPage.lib";
 
-@Component({
-  components: {
-    CommonForm,
-  },
-})
+@Component({})
 export default class SACreateFairFragment extends Vue {
   @Setup(() => useAdminStore().globalSnackbarContexts)
   declare readonly globalSnackbarContexts: SnackbarContextWrapper;

diff --git a/projects/Admin/src/plugins/common-components.ts b/projects/Admin/src/plugins/common-components.ts
@@ -0,0 +1,12 @@
+import CommonForm from "@/components/common/CommonForm.vue";
+import FileInputButton from "@/components/common/FileInputButton.vue";
+import ImageWithUpload from "@/components/common/ImageWithUpload.vue";
+import type { App } from "vue";
+
+export default {
+  install(app: App) {
+    app.component("CommonForm", CommonForm);
+    app.component("FileInputButton", FileInputButton);
+    app.component("ImageWithUpload", ImageWithUpload);
+  },
+};