From 09237a075991bb514a050c411994fb65e6deb5c1 Mon Sep 17 00:00:00 2001 From: Cindy Chang Date: Tue, 27 Aug 2024 09:32:06 +0800 Subject: [PATCH] MyAccount page prototype --- package-lock.json | 78 +++++++++++++++++++++++ package.json | 1 + src/components/AccountMenu/AcctMenu.vue | 10 ++- src/components/Navbar.vue | 1 + src/module/cytoscapeMap.js | 43 +++++++++++++ src/router/index.ts | 5 ++ src/views/AccountManagement/MyAccount.vue | 26 ++++++++ yarn.lock | 38 ++++++++++- 8 files changed, 199 insertions(+), 3 deletions(-) create mode 100644 src/views/AccountManagement/MyAccount.vue diff --git a/package-lock.json b/package-lock.json index f759b65..cd382c6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 24ad3f5..95ed9d4 100644 --- a/package.json +++ b/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", diff --git a/src/components/AccountMenu/AcctMenu.vue b/src/components/AccountMenu/AcctMenu.vue index 4097682..d640837 100644 --- a/src/components/AccountMenu/AcctMenu.vue +++ b/src/components/AccountMenu/AcctMenu.vue @@ -15,7 +15,7 @@
  • + items-center" @click="onBtnMyAccountClick"> head-black {{i18next.t("AcctMgmt.mangUrAcct")}}
    • @@ -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() { diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 7498b47..a149ec3 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -94,6 +94,7 @@ export default { // 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD'] COMPARE: ['PERFORMANCE'], 'ACCOUNT MANAGEMENT': [], + 'MY ACCOUNT': [], }, navViewName: 'FILES', uploadModal: false, diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js index 5a856cc..58d7d73 100644 --- a/src/module/cytoscapeMap.js +++ b/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'); diff --git a/src/router/index.ts b/src/router/index.ts index 130ff2d..8454be0 100644 --- a/src/router/index.ts +++ b/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 }) 路徑不添進歷史紀錄 diff --git a/src/views/AccountManagement/MyAccount.vue b/src/views/AccountManagement/MyAccount.vue new file mode 100644 index 0000000..a818cc3 --- /dev/null +++ b/src/views/AccountManagement/MyAccount.vue @@ -0,0 +1,26 @@ + + + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 91bbc00..731247e 100644 --- a/yarn.lock +++ b/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"