MyAccount page prototype

package-lock.json

@@ -15,6 +15,7 @@
         "chartjs-plugin-datalabels": "^2.2.0",
         "chartjs-plugin-dragdata": "^1.1.3",
         "cytoscape": "^3.30.2",
+        "cytoscape-cola": "^2.5.1",
         "cytoscape-dagre": "^2.5.0",
         "cytoscape-fcose": "^2.2.0",
         "cytoscape-popper": "^2.0.0",
@@ -2340,6 +2341,17 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/cytoscape-cola": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/cytoscape-cola/-/cytoscape-cola-2.5.1.tgz",
+      "integrity": "sha512-4/2S9bW1LvdsEPmxXN1OEAPFPbk7DvCx2c9d+TblkQAAvptGaSgtPWCByTEGgT8UxCxcVqes2aFPO5pzwo7R2w==",
+      "dependencies": {
+        "webcola": "^3.4.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
     "node_modules/cytoscape-dagre": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/cytoscape-dagre/-/cytoscape-dagre-2.5.0.tgz",
@@ -2398,11 +2410,29 @@
         "d3-selection": "1"
       }
     },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
     "node_modules/d3-selection": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
       "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
     },
+    "node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
     "node_modules/dagre": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
@@ -13995,6 +14025,17 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/webcola": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/webcola/-/webcola-3.4.0.tgz",
+      "integrity": "sha512-4BiLXjXw3SJHo3Xd+rF+7fyClT6n7I+AR6TkBqyQ4kTsePSAMDLRCXY1f3B/kXJeP9tYn4G1TblxTO+jAt0gaw==",
+      "dependencies": {
+        "d3-dispatch": "^1.0.3",
+        "d3-drag": "^1.0.4",
+        "d3-shape": "^1.3.5",
+        "d3-timer": "^1.0.5"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -15966,6 +16007,14 @@
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz",
       "integrity": "sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw=="
     },
+    "cytoscape-cola": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/cytoscape-cola/-/cytoscape-cola-2.5.1.tgz",
+      "integrity": "sha512-4/2S9bW1LvdsEPmxXN1OEAPFPbk7DvCx2c9d+TblkQAAvptGaSgtPWCByTEGgT8UxCxcVqes2aFPO5pzwo7R2w==",
+      "requires": {
+        "webcola": "^3.4.0"
+      }
+    },
     "cytoscape-dagre": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/cytoscape-dagre/-/cytoscape-dagre-2.5.0.tgz",
@@ -16012,11 +16061,29 @@
         "d3-selection": "1"
       }
     },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
     "d3-selection": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
       "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
     },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
     "dagre": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
@@ -24366,6 +24433,17 @@
       "resolved": "https://registry.npmjs.org/weaverjs/-/weaverjs-1.2.0.tgz",
       "integrity": "sha512-X+nDGl5mrc8ysArmafu6dD3GNFP2r+NdV6L/PiWac8TpH4BVODO/HMaPLhrXmOZhdI3XM0LVxW5ZrAbwKqkkmw=="
     },
+    "webcola": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/webcola/-/webcola-3.4.0.tgz",
+      "integrity": "sha512-4BiLXjXw3SJHo3Xd+rF+7fyClT6n7I+AR6TkBqyQ4kTsePSAMDLRCXY1f3B/kXJeP9tYn4G1TblxTO+jAt0gaw==",
+      "requires": {
+        "d3-dispatch": "^1.0.3",
+        "d3-drag": "^1.0.4",
+        "d3-shape": "^1.3.5",
+        "d3-timer": "^1.0.5"
+      }
+    },
     "webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "chartjs-plugin-datalabels": "^2.2.0",
     "chartjs-plugin-dragdata": "^1.1.3",
     "cytoscape": "^3.30.2",
+    "cytoscape-cola": "^2.5.1",
     "cytoscape-dagre": "^2.5.0",
     "cytoscape-fcose": "^2.2.0",
     "cytoscape-popper": "^2.0.0",

src/components/AccountMenu/AcctMenu.vue

@@ -15,7 +15,7 @@
         </li>
         <li id="btn_mang_ur_acct"
           class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center">
+          items-center" @click="onBtnMyAccountClick">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-head-black.svg" alt="head-black"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.mangUrAcct")}}</span>
         </li>
@@ -33,6 +33,7 @@
 import { computed, onMounted, ref, } from 'vue';
 import { mapActions, mapState, storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
+import { useRouter } from 'vue-router';
 import LoginStore from '@/stores/login.ts';
 import AcctMgmtStore from '@/stores/acctMgmt.ts';
 import AllMapDataStore from '@/stores/allMapData.js';
@@ -43,6 +44,7 @@ export default {
   setup() {
     const { logOut } = LoginStore();
     const loginStore = LoginStore();
+    const router = useRouter();
     const allMapDataStore = AllMapDataStore();
     const conformanceStore = ConformanceStore();
     const acctMgmtStore = AcctMgmtStore();
@@ -61,6 +63,11 @@ export default {
           isAdmin.value = true;
         }
       };
+    
+    const onBtnMyAccountClick = async() => {
+      acctMgmtStore.closeAcctMenu();
+      await router.push('/my-account');
+    }
 
     onMounted(async () => { 
         await getIsAdminValue();
@@ -73,6 +80,7 @@ export default {
       allMapDataStore,
       conformanceStore,
       isAdmin,
+      onBtnMyAccountClick,
     };
   },
   data() {

src/components/Navbar.vue

@@ -94,6 +94,7 @@ export default {
         // 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
         COMPARE: ['PERFORMANCE'],
         'ACCOUNT MANAGEMENT': [],
+        'MY ACCOUNT': [],
       },
       navViewName: 'FILES',
       uploadModal: false,

src/module/cytoscapeMap.js

@@ -2,6 +2,7 @@ import cytoscape from 'cytoscape';
 import spread from 'cytoscape-spread';
 import dagre from 'cytoscape-dagre';
 import fcose from 'cytoscape-fcose';
+import cola from 'cytoscape-cola';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import MapPathStore from '@/stores/mapPathStore';
@@ -24,6 +25,7 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona
 cytoscape.use(dagre);
 cytoscape.use(spread);
 cytoscape.use(fcose);
+cytoscape.use(cola); 
 
 /**
  * @param {object}  mapData processMapData | bpmnData，可選以上任一。
@@ -278,6 +280,47 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     fit: true,
   }).run();
 
+  cy.layout({
+    name: 'cola',
+    refresh: 1,
+    ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
+    fit: true, // on every layout reposition of nodes, fit the viewport
+    padding: 30, // padding around the simulation
+    boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
+  nodeDimensionsIncludeLabels: false, // whether labels should be included in determining the space used by a node
+
+  // layout event callbacks
+  ready: function(){}, // on layoutready
+  stop: function(){}, // on layoutstop
+
+  // positioning options
+  randomize: false, // use random node positions at beginning of layout
+  avoidOverlap: true, // if true, prevents overlap of node bounding boxes
+  handleDisconnected: true, // if true, avoids disconnected components from overlapping
+  convergenceThreshold: 0.01, // when the alpha value (system energy) falls below this value, the layout stops
+  nodeSpacing: function( node ){ return 10; }, // extra spacing around nodes
+  flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
+  alignment: function(node) {
+    return {
+      x: 1, // 將所有節點對齊在相同的 X 座標上
+      y: 0 // Y 座標保持不變
+    };
+  }, // relative alignment constraints on nodes, e.g. {vertical: [[{node: node1, offset: 0}, {node: node2, offset: 5}]], horizontal: [[{node: node3}, {node: node4}], [{node: node5}, {node: node6}]]}
+  gapInequalities: undefined, // list of inequality constraints for the gap between the nodes, e.g. [{"axis":"y", "left":node1, "right":node2, "gap":25}]
+  centerGraph: 10000, // adjusts the node positions initially to center the graph (pass false if you want to start the layout from the current position)
+
+  // different methods of specifying edge length
+  // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
+  edgeLength: 10, // sets edge length directly in simulation
+  edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
+  edgeJaccardLength: undefined, // jaccard edge length in simulation
+
+  // iterations of cola algorithm; uses default values on undefined
+  unconstrIter: undefined, // unconstrained initial layout iterations
+  userConstIter: undefined, // initial layout iterations with user-specified constraints
+  allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
+  }).run();
+
   // 按下線條，線條及線條上數字有光暈效果
   cy.on('tap', 'edge', function(event) {
     cy.edges().removeClass('highlight-edge');

src/router/index.ts

@@ -9,6 +9,7 @@ import Conformance from '@/views/Discover/Conformance/index.vue';
 import Performance from '@/views/Discover/Performance/index.vue';
 import CompareDashboard from '@/views/Compare/Dashboard/Compare.vue';
 import AccountAdmin from '@/views/AccountManagement/AccountAdmin/AccountAdmin.vue';
+import MyAccount from '@/views/AccountManagement/MyAccount.vue';
 import MemberArea from '@/views/MemberArea/index.vue';
 import NotFound404 from '@/views/NotFound404.vue';
 
@@ -58,6 +59,10 @@ const routes = [
             component: AccountAdmin,
           },
         ]
+      },{
+         path: "/my-account",
+        name: "My Account",
+        component: MyAccount,
       },
       {
         path: "/upload", // router.push({ replace: true }) 路徑不添進歷史紀錄

src/views/AccountManagement/MyAccount.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="div flex justify-center w-[600px]">
+        
+    </div>
+</template>
+
+<script>
+import { onMounted, } from 'vue';
+import LoadingStore from '@/stores/loading.js';
+export default {
+    props: {
+
+    },
+    setup(props) {
+        const loadingStore = LoadingStore();
+
+        onMounted(() => {
+            loadingStore.setIsLoading(false);
+        });
+
+        return {
+
+        };
+  }
+}
+</script>

yarn.lock

@@ -1812,6 +1812,13 @@ cypress@^12.0.2, "cypress@2 - 13":
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
+cytoscape-cola@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/cytoscape-cola/-/cytoscape-cola-2.5.1.tgz"
+  integrity sha512-4/2S9bW1LvdsEPmxXN1OEAPFPbk7DvCx2c9d+TblkQAAvptGaSgtPWCByTEGgT8UxCxcVqes2aFPO5pzwo7R2w==
+  dependencies:
+    webcola "^3.4.0"
+
 cytoscape-dagre@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/cytoscape-dagre/-/cytoscape-dagre-2.5.0.tgz"
@@ -1845,12 +1852,12 @@ cytoscape@^3.0.0, cytoscape@^3.2.0, cytoscape@^3.2.22, cytoscape@^3.30.2:
   resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz"
   integrity sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw==
 
-d3-dispatch@1:
+d3-dispatch@^1.0.3, d3-dispatch@1:
   version "1.0.6"
   resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz"
   integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==
 
-d3-drag@^1.2.5:
+d3-drag@^1.0.4, d3-drag@^1.2.5:
   version "1.2.5"
   resolved "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz"
   integrity sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==
@@ -1858,11 +1865,28 @@ d3-drag@^1.2.5:
     d3-dispatch "1"
     d3-selection "1"
 
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
 d3-selection@^1.4.1, d3-selection@1:
   version "1.4.2"
   resolved "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz"
   integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==
 
+d3-shape@^1.3.5:
+  version "1.3.7"
+  resolved "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+d3-timer@^1.0.5:
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz"
+  integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
+
 dagre@^0.8.5:
   version "0.8.5"
   resolved "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz"
@@ -6596,6 +6620,16 @@ weaverjs@^1.2.0:
   resolved "https://registry.npmjs.org/weaverjs/-/weaverjs-1.2.0.tgz"
   integrity sha512-X+nDGl5mrc8ysArmafu6dD3GNFP2r+NdV6L/PiWac8TpH4BVODO/HMaPLhrXmOZhdI3XM0LVxW5ZrAbwKqkkmw==
 
+webcola@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/webcola/-/webcola-3.4.0.tgz"
+  integrity sha512-4BiLXjXw3SJHo3Xd+rF+7fyClT6n7I+AR6TkBqyQ4kTsePSAMDLRCXY1f3B/kXJeP9tYn4G1TblxTO+jAt0gaw==
+  dependencies:
+    d3-dispatch "^1.0.3"
+    d3-drag "^1.0.4"
+    d3-shape "^1.3.5"
+    d3-timer "^1.0.5"
+
 webidl-conversions@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz"