[ADD] 코드 정리

components.d.ts

@@ -11,7 +11,10 @@ declare module 'vue' {
     AppFooter: typeof import('./src/components/AppFooter.vue')['default']
     DrawerComponent: typeof import('./src/components/common/DrawerComponent.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    IconDeleteBtn: typeof import('./src/components/button/IconDeleteBtn.vue')['default']
+    IconModifyBtn: typeof import('./src/components/button/IconModifyBtn.vue')['default']
     LayoutComponent: typeof import('./src/components/common/LayoutComponent.vue')['default']
+    ListComponent: typeof import('./src/components/workflow/ListComponent.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/components/button/IconDeleteBtn.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { defineEmits } from "vue";
+
+const emit = defineEmits(["onClick"]);
+
+const onClick = () => {
+  emit("onClick");
+};
+</script>
+
+<template>
+  <v-tooltip location="bottom" text="삭제">
+    <template v-slot:activator="{ props }">
+      <v-btn
+        icon="mdi-trash-can-outline"
+        class="ma-1"
+        color="error"
+        density="comfortable"
+        elevation="0"
+        @click="onClick"
+        size="small"
+        v-bind="props"
+      ></v-btn>
+    </template>
+  </v-tooltip>
+</template>

src/components/button/IconModifyBtn.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { defineEmits } from "vue";
+
+const emit = defineEmits(["onClick"]);
+
+const onClick = () => {
+  emit("onClick");
+};
+</script>
+
+<template>
+  <v-tooltip location="bottom" text="수정">
+    <template v-slot:activator="{ props }">
+      <v-btn
+        @click="onClick"
+        class="ma-1"
+        icon="mdi-pencil"
+        color="warning"
+        density="comfortable"
+        elevation="0"
+        size="small"
+        v-bind="props"
+      >
+      </v-btn>
+    </template>
+  </v-tooltip>
+</template>

src/components/common/DrawerComponent.vue

@@ -4,6 +4,7 @@ import { useRoute } from "vue-router";
 import { useRouter } from "vue-router";
 import { menuUtils } from "@/utils/menuUtils";
 import { storage } from "@/utils/storage";
+import logo from "@/assets/iteration (1).png";
 
 const route = useRoute();
 const router = useRouter();
@@ -33,11 +34,13 @@ onMounted(() => {
       class="bg-shades-transparent font-weight-bold d-flex w-100 justify-center text-h5 pa-4 pb-16"
       @click="goMain"
     >
-      <div>
+      <div class="d-flex flex-column align-center pt-6">
-        <v-img :src="logo" width="auto" height="32" />
+        <v-img :src="logo" width="auto" height="36" class="mb-3"/>
+        <div class="text-subtitle-2 font-weight-medium text-primary">Autoflow Web Console</div>
+
       </div>
     </v-card>
-    <v-list nav class="pa-5">
+    <v-list nav class="pa-5 pt-0">
       <template
         v-for="({ title, value, icon, path, depth }, i) in menuUtils.menuItem"
         :key="`group_id_${i}`"

src/components/common/LayoutComponent.vue

@@ -83,29 +83,26 @@ watchEffect(() => {
       </v-navigation-drawer>
 
     <v-app-bar class="bg-shades-transparent" flat>
-      <div class="px-8 text-h6 text-secondary font-weight-medium">
-        Autoflow Web Console
-      </div>
       <v-spacer></v-spacer>
       <v-menu location="bottom end">
         <template v-slot:activator="{ props }">
-          <v-tooltip location="bottom" text="dashboard">
+          <v-tooltip location="bottom" text="settings">
             <template #activator="{ props }">
               <v-btn
                 icon
-                color="secondary"
+                color="primary"
                 class="mr-3"
                 v-bind="props"
               >
-                <v-icon>mdi-settings</v-icon>
+                <v-icon>mdi-cog</v-icon>
               </v-btn>
             </template>
           </v-tooltip>
-          <v-tooltip location="bottom" text="dashboard">
+          <v-tooltip location="bottom" text="home">
             <template #activator="{ props }">
               <v-btn
                 icon
-                color="secondary"
+                color="primary"
                 class="mr-3"
                 @click="goHome"
                 v-bind="props"
@@ -118,7 +115,7 @@ watchEffect(() => {
             <div class="font-weight-black">ADMIN_001</div>
             <div class="text-subtitle-2">No Project Selected</div>
           </div>
-          <v-btn icon color="secondary" v-bind="props" class="mr-3">
+          <v-btn icon color="primary" v-bind="props" class="mr-3">
             <v-icon>mdi-arrow-down-drop-circle-outline</v-icon>
           </v-btn>
         </template>

src/components/workflow/ListComponent.vue

@@ -0,0 +1,532 @@
+<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>

src/pages/DatasetView.vue

@@ -3,7 +3,6 @@
 </script>
 
 <template>
-<div>main</div>
 </template>
 
 <style scoped lang="sass">

src/pages/DeploymentView.vue

@@ -3,7 +3,6 @@
 </script>
 
 <template>
-<div>main</div>
 </template>
 
 <style scoped lang="sass">

src/pages/ExcutionsView.vue

@@ -3,7 +3,6 @@
 </script>
 
 <template>
-<div>main</div>
 </template>
 
 <style scoped lang="sass">

src/pages/ExperimentView.vue

@@ -3,7 +3,6 @@
 </script>
 
 <template>
-<div>main</div>
 </template>
 
 <style scoped lang="sass">

src/pages/HomeView.vue

@@ -3,7 +3,6 @@
 </script>
 
 <template>
-<div>main</div>
 </template>
 
 <style scoped lang="sass">

src/pages/LoginView.vue

@@ -37,7 +37,7 @@ const signIn = () => {
   // UserManagerService.signIn(params).then((d) => {
   //   if (d.data.success === true) {
   //     storage.setAuth(d.data.data);
-      router.push("/main");
+      router.push("/workflows");
   //   } else {
   //     resetForm();
   //     data.value.snackbar = true;
@@ -60,13 +60,13 @@ const signIn = () => {
           <div class="mb-4 w-100 d-flex justify-center">
             <div
               class="bg-transparent rounded-circle pa-2"
-              style="border: 1.5px solid #f7f7f8"
+              style="border: 1.8px solid #398bec"
             >
-              <v-icon>mdi-shield-key-outline</v-icon>
+              <v-icon class="text-primary">mdi-shield-key-outline</v-icon>
             </div>
 
           </div>
-          <div class="text-h5 pb-2 text-center font-weight-bold">
+          <div class="text-h5 pb-2 text-center font-weight-bold text-primary">
             Autoflow Web Console
           </div>
 

src/pages/MainView.vue

@@ -3,7 +3,6 @@
 </script>
 
 <template>
-<div>main</div>
 </template>
 
 <style scoped lang="sass">

src/pages/TrainingScriptView.vue

@@ -3,7 +3,6 @@
 </script>
 
 <template>
-<div>main</div>
 </template>
 
 <style scoped lang="sass">

src/pages/WorkflowStepConfigView.vue

@@ -3,7 +3,6 @@
 </script>
 
 <template>
-<div>main</div>
 </template>
 
 <style scoped lang="sass">

src/pages/WorkflowView.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-<div>main</div>
+<ListComponent/>
 </template>
 
 <style scoped lang="sass">