autoflow-web-console/src/components/templates/trainingscriptgroup/ListComponent.vue

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import tz from "dayjs/plugin/timezone";
import { useRouter } from "vue-router";

import { commonStore } from "@/stores/commonStore";
import { DataGroupService } from "@/components/service/management/DataGroupService";

import ViewComponent from "@/components/templates/workflow/ViewComponent.vue";
import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
import TrainingGroupBaseDoalog from "@/components/atoms/organisms/TrainingGroupBaseDoalog.vue";

/* -------------------------
 * Dayjs & Router
 * ------------------------*/
dayjs.extend(utc);
dayjs.extend(tz);
const KST = "Asia/Seoul";
const router = useRouter();

/* -------------------------
 * Types
 * ------------------------*/
type SearchType = "전체" | "제목" | "작성자";
type ApiSearchType = "ALL" | "TITLE" | "AUTHOR";

interface DataGroupRow {
  no: number;
  name: string;
  description: string;
  author: string;
  registDt: string | number | Date;
  deviceKey: number;
}

/* -------------------------
 * Constants
 * ------------------------*/
const TABLE_HEADERS = [
  { label: "No", width: "6%", style: "word-break: keep-all;" },
  { label: "DataGroup Name", width: "24%", style: "word-break: keep-all;" },
  { label: "Description", width: "32%", style: "word-break: keep-all;" },
  { label: "Author", width: "14%", style: "word-break: keep-all;" },
  { label: "Created DateTime", width: "16%", style: "word-break: keep-all;" },
  { label: "Action", width: "8%", style: "word-break: keep-all;" },
] as const;

const SEARCH_OPTIONS = [
  { label: "전체", value: "전체" as SearchType },
  { label: "제목", value: "제목" as SearchType },
  { label: "작성자", value: "작성자" as SearchType },
];

const PAGE_SIZE_OPTIONS = [
  { text: "10 페이지", value: 10 },
  { text: "50 페이지", value: 50 },
  { text: "100 페이지", value: 100 },
];

const SEARCH_TYPE_MAP: Record<SearchType | "", ApiSearchType> = {
  "": "ALL",
  전체: "ALL",
  제목: "TITLE",
  작성자: "AUTHOR",
};

/* -------------------------
 * Store & Local State
 * ------------------------*/
const store = commonStore();
const openView = ref(false);

const isRunVisible = ref(false); // 유지 (다른 곳에서 열릴 수 있음)
const selectedRun = ref<any | null>(null);

const data = ref({
  params: {
    pageNum: 1,
    pageSize: 10,
    searchType: "전체" as SearchType,
    searchText: "",
  },
  results: [] as DataGroupRow[],
  totalElements: 0,
  pageLength: 0,
  modalMode: "" as "create" | "edit" | "upload" | "",
  selectedData: null as any,
  allSelected: false,
  selected: [] as Array<{ deviceKey: number }>,
  isCreateVisible: false,
  isUploadVisible: false,
  isModalVisible: false,
  isConfirmDialogVisible: false,
  userOption: [] as any[],
});

/* -------------------------
 * Utils
 * ------------------------*/
const formatDateTime = (
  v?: string | number | Date,
  fmt = "YYYY-MM-DD HH:mm:ss",
) => (v ? dayjs(v).tz(KST).format(fmt) : "");

const toRow = (g: any, no: number): DataGroupRow => ({
  no,
  name: g.dsNm,
  description: g.dsDesc,
  author: g.regUserNm,
  registDt: g.regDate,
  deviceKey: g.id,
});

function onRowClick(row: DataGroupRow) {
  const id = Number(row?.deviceKey);
  if (!Number.isFinite(id)) return;
  router.push({
    path: "/training-script",
    query: { refId: String(id), refName: row.name },
  });
}

/* -------------------------
 * Data Loaders
 * ------------------------*/
async function fetchList() {
  const projectId = Number(localStorage.getItem("projectId"));
  if (!projectId) {
    console.warn("[TrainingscriptGroup] projectId 없음 — 프로젝트 먼저 선택");
    data.value.results = [];
    data.value.totalElements = 0;
    data.value.pageLength = 0;
    return;
  }

  const { pageNum, pageSize, searchType, searchText } = data.value.params;
  const mapped = SEARCH_TYPE_MAP[searchType] || "ALL";
  const keyword = (searchText || "").trim();
  const needLocalFilter = mapped !== "ALL" && keyword.length > 0;

  // 서버 요청 크기 설정 (로컬 필터가 필요하면 넉넉히 가져옴)
  const reqPage = needLocalFilter ? 0 : pageNum - 1; // 서버가 0-based 라면 조정
  const reqSize = needLocalFilter ? 1000 : pageSize;

  try {
    const payload = {
      projectId,
      page: reqPage,
      size: reqSize,
      keyword,
      searchType: mapped,
      refType: "TRAINING_SCRIPT",
    };
    const res: any = await DataGroupService.search(payload);
    if (res?.status !== 200) return;

    const result = res.data;
    let list: any[] = result?.content ?? [];

    // 로컬 필터
    if (needLocalFilter) {
      const kw = keyword.toLowerCase();
      if (mapped === "TITLE") {
        list = list.filter((w: any) =>
          String(w?.name ?? "")
            .toLowerCase()
            .includes(kw),
        );
      } else if (mapped === "AUTHOR") {
        list = list.filter((w: any) =>
          String(w?.regUserNm ?? "")
            .toLowerCase()
            .includes(kw),
        );
      }

      const uiSize = pageSize;
      const totalElements = list.length;
      const totalPages = Math.max(1, Math.ceil(totalElements / uiSize));
      const safePage = Math.min(Math.max(1, pageNum), totalPages);
      const start = (safePage - 1) * uiSize;
      const pageSlice = list.slice(start, start + uiSize);
      const firstNo = totalElements - start;

      data.value.results = pageSlice.map((w: any, i: number) =>
        toRow(w, firstNo - i),
      );
      data.value.totalElements = totalElements;
      data.value.pageLength = totalPages;
      return;
    }

    // 서버 페이징 결과 사용
    const totalElements = result.totalElements ?? list.length;
    const totalPages = result.totalPages ?? 1;
    const serverPage = result.pageable?.pageNumber ?? 0;
    const serverSize = result.pageable?.pageSize ?? pageSize;
    const offset =
      typeof result.pageable?.offset === "number"
        ? result.pageable.offset
        : serverPage * serverSize;
    const firstNo = totalElements - offset;

    data.value.results = list.map((w: any, i: number) => toRow(w, firstNo - i));
    data.value.totalElements = totalElements;
    data.value.pageLength = totalPages;
  } catch (err) {
    console.error("[TrainingscriptGroup] 조회 에러:", err);
  }
}

/* -------------------------
 * Actions
 * ------------------------*/
function doSearch() {
  data.value.params.pageNum = 1;
  fetchList();
}
function changePageNum(page: number) {
  data.value.params.pageNum = page;
  fetchList();
}
function changePageSize(size: number) {
  data.value.params.pageSize = size;
  data.value.params.pageNum = 1;
  fetchList();
}

function removeData(value?: Array<{ deviceKey: number }>) {
  const removeList = value ?? data.value.selected;
  if (!removeList?.length) return;

  const ids = removeList.map((x) => x.deviceKey);
  const removeOnce = (id: number) =>
    DataGroupService.delete(id).then((res: any) => {
      if (res.status < 200 || res.status >= 300) return Promise.reject(res);
    });

  const after = () => {
    if (
      ids.length >= data.value.results.length &&
      data.value.params.pageNum > 1
    ) {
      data.value.params.pageNum -= 1;
    }
    fetchList();
    data.value.isConfirmDialogVisible = false;
    data.value.selected = [];
    data.value.allSelected = false;
  };

  if (ids.length === 1) {
    removeOnce(ids[0])
      .then(() =>
        store.setSnackbarMsg({
          color: "success",
          text: "삭제되었습니다.",
          result: 200,
        }),
      )
      .catch((err) => {
        console.error(err);
        store.setSnackbarMsg({
          color: "warning",
          text: "삭제 실패",
          result: 500,
        });
      })
      .finally(after);
  } else {
    Promise.all(ids.map(removeOnce))
      .then(() =>
        store.setSnackbarMsg({
          color: "success",
          text: "모두 삭제되었습니다.",
          result: 200,
        }),
      )
      .catch((err) => {
        console.error(err);
        store.setSnackbarMsg({
          color: "warning",
          text: "일부 삭제 실패",
          result: 500,
        });
      })
      .finally(after);
  }
}

function handleRemoveData() {
  if (data.value.selected.length === 0) return;
  if (data.value.allSelected || data.value.selected.length !== 1) {
    data.value.isConfirmDialogVisible = true;
    return;
  }
  removeData();
}

function getSelectedAllData() {
  data.value.selected = data.value.allSelected
    ? data.value.results.map((item) => ({ deviceKey: item.deviceKey }))
    : [];
}

function openDetailModal(selectedItem: DataGroupRow) {
  data.value.selectedData = selectedItem;
  openView.value = true;
}
const closeDetail = () => (openView.value = false);

function openRunModal(item: any) {
  selectedRun.value = item;
  isRunVisible.value = true;
}

function openModifyModal(item: DataGroupRow) {
  data.value.selectedData = {
    id: item.deviceKey,
    workflowName: item.name,
    workflowDescription: item.description,
  };
  data.value.modalMode = "edit";
  data.value.isCreateVisible = true;
}
function openCreateModal() {
  data.value.selectedData = null;
  data.value.modalMode = "create";
  data.value.isCreateVisible = true;
}
function openUploadModal() {
  data.value.selectedData = null;
  data.value.modalMode = "upload";
  data.value.isUploadVisible = true;
}
function closeCreateModal() {
  data.value.isModalVisible = false;
  data.value.isCreateVisible = false;
}
function closeUploadModal() {
  data.value.isModalVisible = false;
  data.value.isUploadVisible = false;
}

/* -------------------------
 * Watchers & Lifecycle
 * ------------------------*/
watch(
  () => data.value.isCreateVisible,
  (now, prev) => {
    if (prev && !now) fetchList();
  },
);
watch(
  () => data.value.isUploadVisible,
  (now, prev) => {
    if (prev && !now) fetchList();
  },
);
onMounted(fetchList);
</script>

<template>
  <div class="w-100" v-if="!openView">
    <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
      <v-card
        flat
        class="bg-shades-transparent d-flex flex-column align-center justify-center w-100"
      >
        <v-card flat class="bg-shades-transparent w-100">
          <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
            <div class="d-flex flex-row justify-start align-center">
              <div>TrainingScriptGroup</div>
            </div>
          </v-card-item>
        </v-card>

        <!-- Search -->
        <v-card flat class="bg-shades-transparent w-100">
          <v-card flat class="bg-shades-transparent mb-4">
            <div class="d-flex justify-center flex-wrap align-center">
              <v-responsive
                max-width="180"
                min-width="180"
                class="mr-3 mt-3 mb-3"
              >
                <v-select
                  v-model="data.params.searchType"
                  label="검색조건"
                  density="compact"
                  :items="SEARCH_OPTIONS"
                  item-title="label"
                  item-value="value"
                  hide-details
                  @update:model-value="doSearch"
                />
              </v-responsive>

              <v-responsive min-width="540" max-width="540">
                <v-text-field
                  v-model="data.params.searchText"
                  label="검색어"
                  density="compact"
                  clearable
                  required
                  class="mt-3 mb-3"
                  hide-details
                  @keyup.enter="doSearch"
                />
              </v-responsive>

              <div class="ml-3">
                <v-btn
                  size="large"
                  color="primary"
                  :rounded="5"
                  @click="doSearch"
                >
                  <v-icon>mdi-magnify</v-icon>
                </v-btn>
              </div>
            </div>
          </v-card>

          <!-- Toolbar -->
          <v-sheet
            class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
          >
            <v-sheet class="d-flex flex-wrap me-auto bg-shades-transparent">
              <v-sheet
                class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
              >
                <v-chip color="primary"
                  >총 {{ data.totalElements.toLocaleString() }}개</v-chip
                >
              </v-sheet>
              <v-sheet class="bg-shades-transparent">
                <v-responsive max-width="140" min-width="140" class="mb-2">
                  <v-select
                    v-model="data.params.pageSize"
                    density="compact"
                    :items="PAGE_SIZE_OPTIONS"
                    item-title="text"
                    item-value="value"
                    variant="outlined"
                    color="primary"
                    hide-details
                    @update:model-value="changePageSize"
                  />
                </v-responsive>
              </v-sheet>
            </v-sheet>
            <v-sheet class="justify-end mb-2">
              <v-btn color="info" @click="openCreateModal"
                >Create TrainingGroup</v-btn
              >
            </v-sheet>
          </v-sheet>

          <!-- Table -->
          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
            <v-col cols="12">
              <v-sheet>
                <v-table
                  density="comfortable"
                  fixed-header
                  height="625"
                  col-md-12
                  col-12
                  overflow-x-auto
                >
                  <colgroup>
                    <col
                      v-for="(h, i) in TABLE_HEADERS"
                      :key="i"
                      :style="`width:${h.width}`"
                    />
                  </colgroup>
                  <thead>
                    <tr>
                      <th
                        v-for="(h, i) in TABLE_HEADERS"
                        :key="i"
                        class="text-center font-weight-bold"
                        :style="h.style"
                      >
                        {{ h.label }}
                      </th>
                    </tr>
                  </thead>
                  <tbody class="text-body-2">
                    <tr
                      v-for="(row, i) in data.results"
                      :key="i"
                      class="text-center row-hover"
                      @click="onRowClick(row)"
                    >
                      <td>{{ row.no }}</td>
                      <td>{{ row.name }}</td>
                      <td>{{ row.description }}</td>
                      <td>{{ row.author || "-" }}</td>
                      <td>{{ formatDateTime(row.registDt) }}</td>
                      <td
                        style="white-space: nowrap"
                        @click.stop
                        @mousedown.stop
                      >
                        <IconModifyBtn @on-click="openModifyModal(row)" />
                        <IconDeleteBtn
                          @on-click="removeData([{ deviceKey: row.deviceKey }])"
                        />
                      </td>
                    </tr>
                  </tbody>
                </v-table>
              </v-sheet>

              <v-card-actions class="text-center mt-8 justify-center">
                <v-pagination
                  v-model="data.params.pageNum"
                  :length="data.pageLength"
                  :total-visible="10"
                  color="primary"
                  rounded="circle"
                  @update:model-value="changePageNum"
                />
              </v-card-actions>
            </v-col>
          </v-card>
        </v-card>
      </v-card>
    </v-container>

    <!-- Create/Edit Dialog -->
    <v-dialog v-model="data.isCreateVisible" max-width="800" persistent>
      <TrainingGroupBaseDoalog
        :key="data.modalMode + String(data.selectedData?.deviceKey ?? '')"
        :edit-data="data.selectedData"
        :mode="data.modalMode"
        @close-modal="closeCreateModal"
      />
    </v-dialog>
  </div>

  <div class="w-100" v-else>
    <ViewComponent
      v-if="data.selectedData"
      :id="data.selectedData.deviceKey"
      @close="closeDetail"
    />
  </div>
</template>

<style scoped>
/* 행 Hover 효과 */
.row-hover {
  cursor: pointer;
  transition: background-color 120ms ease;
}
tbody tr.row-hover:hover {
  background-color: rgba(255, 255, 255, 0.06);
}
tbody tr.row-hover:active {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>