imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MyAccount page prototype

Browse Source
This commit is contained in:
Cindy Chang
2024-08-27 09:32:06 +08:00
parent 7243100d9c
commit 09237a0759
8 changed files with 199 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

10
src/components/AccountMenu/AcctMenu.vue
View File

@@ -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() {

1
src/components/Navbar.vue
View File

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

43
src/module/cytoscapeMap.js
View File

@@ -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');

5
src/router/index.ts
View File

@@ -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 }) 路徑不添進歷史紀錄

26
src/views/AccountManagement/MyAccount.vue Normal file
View File

@@ -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>

38
yarn.lock
View File

@@ -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"