시스템관리 > 권한관리 > 사이트관리 화면과 API 추가

nuxt/components/common/PermitButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useAuthStore } from '~/stores/login';
+import { some } from 'lodash-es';
+
+const props = defineProps({
+  api: {
+    type: String,
+    required: true
+  }
+});
+
+const authStore = useAuthStore();
+const { permitApiList } = storeToRefs(authStore);
+
+const permit = computed(() => {
+  return some(permitApiList.value, (value) => {
+    return props.api === value.menuUrl;
+  });
+});
+</script>
+
+<template>
+  <template v-if="permit">
+    <slot />
+  </template>
+</template>
+
+<style scoped></style>

nuxt/components/data/Pagenation.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import 'tui-pagination/dist/tui-pagination.css';
+import Pagination from 'tui-pagination/dist/tui-pagination';
+import type { PaginationType } from '~/types/data/pagination';
+
+const instance = ref();
+const paginationRef = ref();
+const props = defineProps<PaginationType>();
+const emit = defineEmits(['change']);
+
+onMounted(() => {
+  instance.value = new Pagination(paginationRef.value, {
+    totalItems: props.totalItems,
+    itemPerPage: props.itemsPerPage,
+    visiblePages: props.visiblePages ?? 10,
+    centerAlign: props.centerAlign ?? false,
+    usageStatistics: false
+  });
+
+  instance.value.on('beforeMove', (data: any) => {
+    emit('change', data.page);
+  });
+});
+
+watch(
+  () => props,
+  (newValue) => {
+    instance.value.setItemsPerPage(newValue.itemsPerPage);
+    instance.value.setTotalItems(newValue.itemsPerPage);
+  },
+  {
+    deep: true
+  }
+);
+</script>
+
+<template>
+  <div ref="paginationRef" class="tui-pagination"></div>
+</template>
+
+<style scoped></style>

nuxt/components/data/editor.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Editor } from '@toast-ui/editor';
+import '@toast-ui/editor/dist/toastui-editor.css';
+
+const editorRef = ref();
+const instance = ref();
+const emit = defineEmits(['change']);
+const props = defineProps<{ initialValue: string }>();
+
+onMounted(() => {
+  instance.value = new Editor({
+    el: editorRef.value,
+    initialValue: props.initialValue ?? '',
+    initialEditType: 'wysiwyg',
+    hideModeSwitch: true,
+    usageStatistics: false,
+    events: {
+      keyup: () => {
+        if (instance.value) {
+          emit('change', instance.value.getHTML());
+        }
+      }
+    }
+  });
+});
+</script>
+
+<template>
+  <div ref="editorRef"></div>
+</template>
+
+<style scoped></style>

nuxt/components/data/grid.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import 'tui-grid/dist/tui-grid.css';
+import 'tui-date-picker/dist/tui-date-picker.min.css';
+import Grid, { type RowKey } from 'tui-grid';
+import { cloneDeep } from 'lodash-es';
+import type { DataGridType } from '~/types/data/grid';
+import type { GridEventName, OptRow } from 'tui-grid/types/options';
+import { TUI_GRID_THEME } from '~/constants/theme/grid';
+
+Grid.setLanguage('ko', {
+  display: {
+    noData: '조회된 데이터가 존재하지 않습니다.'
+  }
+});
+
+Grid.applyTheme('default', TUI_GRID_THEME);
+
+const gridRef = ref();
+const instance = ref<Grid>();
+
+const props = defineProps<DataGridType>();
+
+onMounted(() => {
+  const gridOptions = {
+    el: gridRef.value,
+    columns: props.columns ?? [],
+    data: cloneDeep(props.data) ?? [],
+    bodyHeight: props.bodyHeight,
+    columnOptions: props.columnOptions,
+    keyColumnName: props.keyColumnName,
+    width: props.width,
+    heightResizable: props.heightResizable,
+    minBodyHeight: props.minBodyHeight,
+    rowHeight: props.rowHeight ?? 40,
+    minRowHeight: props.minRowHeight,
+    scrollX: props.scrollX,
+    scrollY: props.scrollY,
+    editingEvent: props.editingEvent,
+    tabMode: props.tabMode,
+    rowHeaders: props.rowHeaders,
+    summary: props.summary,
+    useClientSort: props.useClientSort,
+    selectionUnit: props.selectionUnit,
+    showDummyRows: props.showDummyRows,
+    copyOptions: props.copyOptions,
+    pageOptions: props.pageOptions,
+    treeColumnOptions: props.treeColumnOptions,
+    header: props.header,
+    usageStatistics: false,
+    disabled: props.disabled,
+    draggable: props.draggable,
+    contextMenu: props.contextMenu
+  };
+
+  if (props.onGridMounted) {
+    gridOptions['onGridMounted'] = props.onGridMounted;
+  }
+  if (props.onGridUpdated) {
+    gridOptions['onGridUpdated'] = props.onGridUpdated;
+  }
+  if (props.onGridBeforeDestroy) {
+    gridOptions['onGridBeforeDestroy'] = props.onGridBeforeDestroy;
+  }
+
+  instance.value = new Grid(gridOptions);
+});
+
+const appendRow = (value: OptRow) => {
+  instance.value?.appendRow(value);
+};
+
+const appendRows = (value: OptRow[]) => {
+  instance.value?.appendRows(value);
+};
+
+const prependRow = (value: OptRow) => {
+  instance.value?.prependRow(value);
+};
+
+const getCheckedRows = () => {
+  return instance.value?.getCheckedRows();
+};
+
+const getData = () => {
+  return instance.value?.getData();
+};
+
+const validate = () => {
+  return instance.value?.validate();
+};
+
+const resetData = (data: OptRow[]) => {
+  instance.value?.resetData(data);
+};
+
+const removeRow = (data: RowKey) => {
+  instance.value?.removeRow(data);
+};
+
+const removeRows = (data: RowKey[]) => {
+  instance.value?.removeRows(data);
+};
+
+const on = (eventName: GridEventName, eventFunction: (event) => void) => {
+  instance.value?.on(eventName, eventFunction);
+};
+
+const off = (eventName: GridEventName) => {
+  instance.value?.off(eventName);
+};
+
+defineExpose({
+  appendRow,
+  appendRows,
+  prependRow,
+  getCheckedRows,
+  getData,
+  validate,
+  resetData,
+  on,
+  off,
+  removeRow,
+  removeRows
+});
+
+watch(
+  () => props.data,
+  (newValue) => {
+    resetData(newValue);
+  }
+);
+</script>
+
+<template>
+  <div ref="gridRef" />
+</template>