autoflow-web-console/src/components/workflow/ListComponent.vue

<script setup lang="ts">
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
// import FormComponent from "@/components/device/FormComponent.vue";
import { onMounted, ref, watch } from "vue";

// const store = commonStore();

const tableHeader = [
  {
    label: "No",
    width: "5%",
    style: "word-break: keep-all;",
  },
  {
    label: "Workflow Name",
    width: "7%",
    style: "word-break: keep-all;",
  },
  {
    label: "Version",
    width: "7%",
    style: "word-break: keep-all;",
  },
  {
    label: "Step Count",
    width: "7%",
    style: "word-break: keep-all;",
  },
  {
    label: "Config Progress",
    width: "7%",
    style: "word-break: keep-all;",
  },
  {
    label: "Kubeflow Status",
    width: "7%",
    style: "word-break: keep-all;",
  },
  {
    label: "Created DateTime",
    width: "7%",
    style: "word-break: keep-all;",
  },
  {
    label: "Action",
    width: "7%",
    style: "word-break: keep-all;",
  },
];

const searchOptions = [
  {
    searchType: "전체",
    searchText: "",
  },
  {
    searchType: "디바이스 별칭",
    searchText: "deviceAlias",
  },
  {
    searchType: "디바이스 키",
    searchText: "deviceKey",
  },
  {
    searchType: "사용자",
    searchText: "userId",
  },
  {
    searchType: "디바이스 이름",
    searchText: "deviceName",
  },
  {
    searchType: "디바이스 모델",
    searchText: "deviceModel",
  },
  {
    searchType: "디바이스 OS",
    searchText: "deviceOs",
  },
  {
    searchType: "디바이스 버전",
    searchText: "deviceVersion",
  },
];

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

const data = ref({
  params: {
    pageNum: 1,
    pageSize: 10,
    searchType: "",
    searchText: "",
  },
  results: [],
  totalDataLength: 0,
  pageLength: 0,
  modalMode: "",
  selectedData: null,
  allSelected: false,
  selected: [],
  isModalVisible: false,
  isConfirmDialogVisible: false,
  userOption: [],
});

const getCodeList = () => {
  // UserService.search(data.value.params).then((d) => {
  //   if (d.status === 200) {
  //     data.value.userOption = d.data.userList;
  //   }
  // });
};

const getData = () => {
  const params = { ...data.value.params };
  if (params.searchType === "" || params.searchText === "") {
    delete params.searchType;
    delete params.searchText;
  }
  data.value.results = [{
    "no":5,
    "name": "sentiment-analysis",
    "version": "v2.0",
    "stepCount": 2,
    "configProgress": "0/2",
    "kubeflowStatus": "Not Uploaded",
    "registDt": "2025-06-10T00:00:00Z",
  },
    {
      "no":4,
      "name": "image-classfier",
      "version": "v2.0",
      "stepCount": 3,
      "configProgress": "1/3",
      "kubeflowStatus": "Not Uploaded",
      "registDt": "2025-06-09T00:00:00Z",
    },
    {
      "no":3,
      "name": "user-clustering",
      "version": "v1.0",
      "stepCount": 3,
      "configProgress": "0/3",
      "kubeflowStatus": "Not Uploaded",
      "registDt": "2025-06-01T00:00:00Z",
    },
    {
      "no":2,
      "name": "time-series-train",
      "version": "v1.0",
      "stepCount": 2,
      "configProgress": "1/3",
      "kubeflowStatus": "Not Uploaded",
      "registDt": "2025-05-29T00:00:00Z",
    },
    {
      "no":1,
      "name": "customer-churn-pred",
      "version": "v1.0",
      "stepCount": 3,
      "configProgress": "0/3",
      "kubeflowStatus": "Not Uploaded",
      "registDt": "2025-05-31T00:00:00Z",
    }];
  data.value.totalDataLength =5;
  // DeviceService.search(params).then((d) => {
  //   if (d.status === 200) {
  //     data.value.results = d.data.deviceList;
  //     data.value.totalDataLength = d.data.totalCount;
  //     setTimeout(() => {
  //       setPaginationLength();
  //     }, 200);
  //   } else {
  //     store.setSnackbarMsg({
  //       text: "디바이스 조회 실패",
  //       color: "error",
  //     });
  //   }
  // });
  // DeviceService.search().then((d) => {
  //   data.value.totalDataLength = d.data.totalCount;
  //   setTimeout(() => {
  //     setPaginationLength();
  //   }, 200);
  // });
};

const setPaginationLength = () => {
  if (data.value.totalDataLength % data.value.params.pageSize === 0) {
    data.value.pageLength =
      data.value.totalDataLength / data.value.params.pageSize;
  } else {
    data.value.pageLength = Math.ceil(
      data.value.totalDataLength / data.value.params.pageSize,
    );
  }
};

const saveData = (formData) => {
  if (data.value.modalMode === "create") {
    // DeviceService.add(formData).then((d) => {
    //   if (d.status === 200) {
    //     data.value.isModalVisible = false;
    //     store.setSnackbarMsg({
    //       text: "등록 되었습니다.",
    //       result: 200,
    //     });
    //     changePageNum(1);
    //   } else {
    //     store.setSnackbarMsg({
    //       text: d,
    //       result: 500,
    //     });
    //   }
    // });
  } else {
    // DeviceService.update(formData.deviceKey, formData).then((d) => {
    //   if (d.status === 200) {
    //     data.value.isModalVisible = false;
    //     store.setSnackbarMsg({
    //       text: "수정 되었습니다.",
    //       result: 200,
    //     });
    //     changePageNum();
    //   } else {
    //     store.setSnackbarMsg({
    //       text: d,
    //       result: 500,
    //     });
    //   }
    // });
  }
};

const removeData = (value) => {
  let removeList = value ? value : data.value.selected;
  const remove = (code) => {
    // return DeviceService.delete(code).then((d) => {
    //   if (d.status !== 200) {
    //     store.setSnackbarMsg({
    //       text: d,
    //       result: 500,
    //     });
    //   }
    // });
  };

  if (removeList.length === 1) {
    remove(removeList[0].deviceKey).then(() => {
      // store.setSnackbarMsg({
      //   text: "삭제되었습니다.",
      //   result: 200,
      // });
      changePageNum();
      data.value.isConfirmDialogVisible = false;
      data.value.selected = [];
      data.value.allSelected = false;
    });
  } else {
    Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
      () => {
        // store.setSnackbarMsg({
        //   text: "모두 삭제되었습니다.",
        //   result: 200,
        // });
        changePageNum();
        data.value.isConfirmDialogVisible = false;
        data.value.selected = [];
        data.value.allSelected = false;
      },
    );
  }
};

const handleRemoveData = () => {
  if (data.value.selected.length === 0) {
    // store.setSnackbarMsg({
    //   text: "삭제 할 데이터를 선택해주세요. ",
    //   result: 500,
    // });
    return;
  }
  if (data.value.allSelected || data.value.selected.length !== 1) {
    data.value.isConfirmDialogVisible = true;
    return;
  }
  //리스트로 삭제 할때
  removeData(undefined);
};

const changePageNum = (page) => {
  data.value.params.pageNum = page;
  getData();
};

const openModifyModal = (selectedItem) => {
  data.value.selectedData = selectedItem;
  data.value.modalMode = "modify";
  data.value.isModalVisible = true;
};

const openCreateModal = () => {
  data.value.selectedData = null;
  data.value.modalMode = "create";
  data.value.isModalVisible = true;
};

const closeModal = () => {
  data.value.isModalVisible = false;
  data.value.selectedData = null;
};

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

onMounted(() => {
  getData();
  getCodeList();
});
</script>

<template>
<!--  <v-dialog v-model="data.isModalVisible" max-width="600" persistent>-->
<!--    <FormComponent-->
<!--      :edit-data="data.selectedData"-->
<!--      :mode="data.modalMode"-->
<!--      @close-modal="closeModal"-->
<!--      @handle-data="saveData"-->
<!--      :user-option="data.userOption"-->
<!--    />-->
<!--  </v-dialog>-->
<!--  <v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">-->
<!--    <ConfirmDialogComponent-->
<!--      @cancel="data.isConfirmDialogVisible = false"-->
<!--      @delete="removeData(undefined)"-->
<!--      @init="(data.selected = []), (data.allSelected = false)"-->
<!--    />-->
<!--  </v-dialog>-->
  <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 class="text-primary">Workflows</div>
          </div>
        </v-card-item>
      </v-card>
      <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="searchOptions"
                item-title="searchType"
                item-value="searchText"
                hide-details
              ></v-select>
            </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="changePageNum(1)"
              ></v-text-field>
            </v-responsive>

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

        <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.totalDataLength.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="pageSizeOptions"
                  item-title="text"
                  item-value="value"
                  variant="outlined"
                  color="primary"
                  hide-details
                  @update:model-value="changePageNum(1)"
                ></v-select>
              </v-responsive>
            </v-sheet>
          </v-sheet>
          <v-sheet class="justify-end mb-2">
            <v-btn color="error" class="mr-4" @click="handleRemoveData"
            >선택 삭제
            </v-btn>
            <v-btn color="success" @click="openCreateModal">등록</v-btn>
          </v-sheet>
        </v-sheet>

        <v-card class="rounded-lg pa-8">
          <v-col cols="12">
            <v-sheet>
              <v-table
                density="comfortable"
                fixed-header
                height="625"
                col-md-12
                col-12
                overflow-x-auto
              >
                <colgroup>
                  <col style="width: 5%" />
                  <col
                    v-for="(item, i) in tableHeader"
                    :key="i"
                    :style="`width:${item.width}`"
                  />
                </colgroup>
                <thead>
                <tr>
                  <th>
                    <v-checkbox
                      v-model="data.allSelected"
                      style="min-width: 36px"
                      :indeterminate="data.allSelected === true"
                      hide-details
                      @change="getSelectedAllData"
                    ></v-checkbox>
                  </th>
                  <th
                    v-for="(item, i) in tableHeader"
                    :key="i"
                    class="text-center font-weight-bold"
                    :style="`${item.style}`"
                  >
                    {{ item.label }}
                  </th>
                </tr>
                </thead>
                <tbody class="text-body-2">
                <tr
                  v-for="(item, i) in data.results"
                  :key="i"
                  class="text-center"
                >
                  <td>
                    <v-checkbox
                      v-model="data.selected"
                      hide-details
                      :value="{
                          deviceKey: item.deviceKey,
                        }"
                    ></v-checkbox>
                  </td>
                  <td>{{ item.no }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.version }}</td>
                  <td>{{ item.stepCount }}</td>
                  <td>{{ item.configProgress }}</td>
                  <td>{{ item.kubeflowStatus }}</td>
                  <td>{{ item.registDt }}</td>
                  <td style="white-space: nowrap">
                    <IconModifyBtn @on-click="openModifyModal(item)" />
                    <IconDeleteBtn
                      @on-click="removeData([{ deviceKey: item.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="getData"
              ></v-pagination>
            </v-card-actions>
          </v-col>
        </v-card>
      </v-card>
    </v-card>
  </v-container>
</template>

<style scoped></style>