Compare commits
52 Commits
main
...
feature/re
| Author | SHA1 | Date | |
|---|---|---|---|
|
0e4a5f4435 | ||
|
|
95dbc0cff7 | ||
|
|
0ed5053cf5 | ||
|
|
bbb5acb67c | ||
|
|
e22b9bacbc | ||
|
|
44f88a43c9 | ||
|
|
dbe1597d21 | ||
|
|
45fba7f26d | ||
|
|
d4ec2b154a | ||
|
|
56b75203e6 | ||
|
|
0b78d804f3 | ||
|
|
aee30f0c6b | ||
|
|
ac34e4c302 | ||
|
|
ee68986353 | ||
|
|
1c61ccad2c | ||
|
|
eef5abc444 | ||
|
|
6a1d5149da | ||
|
|
61bcdde399 | ||
|
|
b6b3a7d422 | ||
|
|
53daf96caa | ||
|
|
5364b95930 | ||
|
|
ad84d9f97e | ||
|
|
12017afe52 | ||
|
|
995643abd5 | ||
|
|
5d0bba824f | ||
|
|
6e58c4ed38 | ||
|
|
b4edc35211 | ||
|
|
28605753a1 | ||
|
|
866efea933 | ||
|
|
21a7c0b778 | ||
|
|
0bc2875bba | ||
|
|
3a58e5a1ce | ||
|
|
34dc16d12a | ||
|
|
ba48c82b4c | ||
|
|
7950c4268a | ||
|
|
db48679f5a | ||
|
|
c55d3f23c6 | ||
|
|
3fa52f24b5 | ||
|
|
c02fb613c5 | ||
|
|
22b6745de0 | ||
|
|
a663f5276c | ||
|
|
4db1601504 | ||
|
|
f93488aa71 | ||
|
|
fff24db214 | ||
|
|
c181c3e69d | ||
|
|
3735b85611 | ||
|
|
dddb7c7257 | ||
|
|
271eea9538 | ||
|
|
f0877effa1 | ||
|
|
5cd3e50485 | ||
|
|
95b210c1cd | ||
|
|
3b4ab3100e |
5
axiosConfig.js
Normal file
5
axiosConfig.js
Normal file
@ -0,0 +1,5 @@
|
||||
import axios from 'axios';
|
||||
const instance = axios.create({
|
||||
baseURL: 'http://localhost:8080/SonyMusicRights'
|
||||
});
|
||||
export default instance;
|
||||
@ -1,7 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./src",
|
||||
"checkJs": true,
|
||||
"jsx": "react"
|
||||
}
|
||||
}
|
||||
317
package-lock.json
generated
317
package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@mui/icons-material": "^5.14.18",
|
||||
"@mui/material": "^5.14.18",
|
||||
"@reduxjs/toolkit": "^2.0.1",
|
||||
"@tanstack/react-query": "^5.8.4",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
@ -19,9 +20,14 @@
|
||||
"axios": "^1.6.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-query": "^3.39.3",
|
||||
"react-redux": "^9.0.2",
|
||||
"react-router-dom": "^6.19.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
@ -3723,6 +3729,38 @@
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.0.1.tgz",
|
||||
"integrity": "sha512-fxIjrR9934cmS8YXIGd9e7s1XRsEU++aFc9DVNMFMRTM5Vtsg2DCRMj21eslGtDt43IUf9bJL3h5bwUlZleibA==",
|
||||
"dependencies": {
|
||||
"immer": "^10.0.3",
|
||||
"redux": "^5.0.0",
|
||||
"redux-thunk": "^3.1.0",
|
||||
"reselect": "^5.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18",
|
||||
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit/node_modules/immer": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.0.3.tgz",
|
||||
"integrity": "sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.12.0.tgz",
|
||||
@ -4083,104 +4121,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom": {
|
||||
"version": "9.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
|
||||
"integrity": "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@types/aria-query": "^5.0.1",
|
||||
"aria-query": "5.1.3",
|
||||
"chalk": "^4.1.0",
|
||||
"dom-accessibility-api": "^0.5.9",
|
||||
"lz-string": "^1.5.0",
|
||||
"pretty-format": "^27.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/aria-query": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
|
||||
"integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"deep-equal": "^2.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/jest-dom": {
|
||||
"version": "5.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
|
||||
@ -4867,9 +4807,9 @@
|
||||
"integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.2.37",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
|
||||
"integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
|
||||
"version": "18.2.42",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz",
|
||||
"integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
@ -4877,9 +4817,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "18.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz",
|
||||
"integrity": "sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==",
|
||||
"version": "18.2.17",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz",
|
||||
"integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
@ -4968,6 +4908,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.6.tgz",
|
||||
"integrity": "sha512-HYtNooPvUY9WAVRBr4u+4Qa9fYD1ze2IUlAD3HoA6oehn1taGwBx3Oa52U4mTslTS+GAExKpaFu39Y5xUEwfjg=="
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.9.tgz",
|
||||
@ -6169,6 +6114,14 @@
|
||||
"node": ">= 8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/big-integer": {
|
||||
"version": "1.6.52",
|
||||
"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
|
||||
"integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/big.js": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||
@ -6281,6 +6234,21 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/broadcast-channel": {
|
||||
"version": "3.7.0",
|
||||
"resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
|
||||
"integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.7.2",
|
||||
"detect-node": "^2.1.0",
|
||||
"js-sha3": "0.8.0",
|
||||
"microseconds": "0.2.0",
|
||||
"nano-time": "1.0.0",
|
||||
"oblivious-set": "1.0.0",
|
||||
"rimraf": "3.0.2",
|
||||
"unload": "2.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/browser-process-hrtime": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
|
||||
@ -12418,6 +12386,11 @@
|
||||
"jiti": "bin/jiti.js"
|
||||
}
|
||||
},
|
||||
"node_modules/js-sha3": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
|
||||
"integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@ -12810,6 +12783,15 @@
|
||||
"tmpl": "1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/match-sorter": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
|
||||
"integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"remove-accents": "0.4.2"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
|
||||
@ -12872,6 +12854,11 @@
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/microseconds": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
|
||||
"integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
|
||||
},
|
||||
"node_modules/mime": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
||||
@ -13047,6 +13034,14 @@
|
||||
"thenify-all": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nano-time": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
|
||||
"integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
|
||||
"dependencies": {
|
||||
"big-integer": "^1.6.16"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
|
||||
@ -13318,6 +13313,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/oblivious-set": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
|
||||
"integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
|
||||
},
|
||||
"node_modules/obuf": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
|
||||
@ -15292,6 +15292,65 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-query": {
|
||||
"version": "3.39.3",
|
||||
"resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
|
||||
"integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"broadcast-channel": "^3.4.1",
|
||||
"match-sorter": "^6.0.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "9.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.0.2.tgz",
|
||||
"integrity": "sha512-34EI42cYZxJF59Iht6RDM5xDun5EdhV8CbJcTe+mYx97XMHLNYA6RrH9r/ZOZX3CetVCYfBEU9oAY9h3sZarsw==",
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.3",
|
||||
"use-sync-external-store": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18.2.41",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"react": "^18.0",
|
||||
"react-dom": "^18.0",
|
||||
"react-native": ">=0.71",
|
||||
"redux": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@ -15472,6 +15531,19 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.0.tgz",
|
||||
"integrity": "sha512-blLIYmYetpZMET6Q6uCY7Jtl/Im5OBldy+vNPauA8vvsdqyt66oep4EUpAMWNHauTC6xa9JuRPhRB72rY82QGA=="
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
||||
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
|
||||
"peerDependencies": {
|
||||
"redux": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
|
||||
@ -15584,6 +15656,11 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/remove-accents": {
|
||||
"version": "0.4.2",
|
||||
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
|
||||
"integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
|
||||
},
|
||||
"node_modules/renderkid": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
|
||||
@ -15617,6 +15694,11 @@
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.0.1.tgz",
|
||||
"integrity": "sha512-D72j2ubjgHpvuCiORWkOUxndHJrxDaSolheiz5CO+roz8ka97/4msh2E8F5qay4GawR5vzBt5MkbDHT+Rdy/Wg=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.8",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
|
||||
@ -17337,16 +17419,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.9.5",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
|
||||
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
|
||||
"peer": true,
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
|
||||
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.2.0"
|
||||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/unbox-primitive": {
|
||||
@ -17428,6 +17510,15 @@
|
||||
"node": ">= 10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/unload": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
|
||||
"integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.6.2",
|
||||
"detect-node": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/unpipe": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||
@ -17496,6 +17587,14 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@mui/icons-material": "^5.14.18",
|
||||
"@mui/material": "^5.14.18",
|
||||
"@reduxjs/toolkit": "^2.0.1",
|
||||
"@tanstack/react-query": "^5.8.4",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
@ -14,6 +15,8 @@
|
||||
"axios": "^1.6.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-query": "^3.39.3",
|
||||
"react-redux": "^9.0.2",
|
||||
"react-router-dom": "^6.19.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
@ -41,5 +44,8 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
|
||||
42
public/config/config.json
Normal file
42
public/config/config.json
Normal file
@ -0,0 +1,42 @@
|
||||
{
|
||||
"userName" : "Vipeesh",
|
||||
"apiUrl" : "http://localhost:8080/SonyMusicRights",
|
||||
"facebook" : "https://www.facebook.com",
|
||||
"twiter" : "https://twitter.com",
|
||||
"instagram" : "https://www.instagram.com",
|
||||
"youtube" : "https://www.youtube.com",
|
||||
"downloadRole": "admin",
|
||||
"projectLevelDataDownloadFileName": "Project data",
|
||||
"assetLevelDataDownloadFileName": "Project and Asset data",
|
||||
"menuList" : [{
|
||||
"name": "Home",
|
||||
"link": "/SonyMusicRights",
|
||||
"type": "intern"
|
||||
},
|
||||
{
|
||||
"name": "Projects",
|
||||
"link": "/SonyMusicRights/projects",
|
||||
"type": "intern"
|
||||
},
|
||||
{
|
||||
"name": "Search",
|
||||
"link": "/SonyMusicRights/search",
|
||||
"type": "intern"
|
||||
},
|
||||
{
|
||||
"name": "Admin",
|
||||
"link": "/SonyMusicRights/admin",
|
||||
"type": "intern"
|
||||
},
|
||||
{
|
||||
"name": "Manage Users",
|
||||
"link": "/SonyMusicRights/user-management",
|
||||
"type": "intern"
|
||||
},
|
||||
{
|
||||
"name": "Intranet Users",
|
||||
"link": "/SonyMusicRights/intranet-user-management",
|
||||
"type": "intern"
|
||||
}
|
||||
]
|
||||
}
|
||||
19
src/APIs/IntranetUsersAPIs/getUsersList.tsx
Normal file
19
src/APIs/IntranetUsersAPIs/getUsersList.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import {useQuery} from '@tanstack/react-query'
|
||||
|
||||
export const getIntranetUsersList = async()=>{
|
||||
const response = await fetch(`${process.env.REACT_APP_API_URL}/intranet-users-list`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get User list data');
|
||||
}
|
||||
const UserListData = await response.json()
|
||||
return UserListData;
|
||||
}
|
||||
|
||||
export const useGetIntranetUsersData = () => {
|
||||
return useQuery(
|
||||
{
|
||||
queryKey: ['IntranetUsers-list'],
|
||||
queryFn: () => getIntranetUsersList(),
|
||||
}
|
||||
);
|
||||
}
|
||||
9
src/APIs/IntranetUsersAPIs/postAddUser.tsx
Normal file
9
src/APIs/IntranetUsersAPIs/postAddUser.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import axios from "axios";
|
||||
|
||||
export const postNewIntranetUsersData = async (data: any)=> {
|
||||
const { data: response } = await axios.post(
|
||||
`${process.env.REACT_APP_API_URL}/add-intranet-user`,
|
||||
data
|
||||
);
|
||||
return await response.data;
|
||||
};
|
||||
9
src/APIs/IntranetUsersAPIs/postEditUser.tsx
Normal file
9
src/APIs/IntranetUsersAPIs/postEditUser.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import axios from "axios";
|
||||
|
||||
export const postEditIntranetUsersData = async (data: any)=> {
|
||||
const { data: response } = await axios.post(
|
||||
`${process.env.REACT_APP_API_URL}/edit-intranet-user`,
|
||||
data
|
||||
);
|
||||
return await response.data;
|
||||
};
|
||||
19
src/APIs/ManageUsersAPIs/getUsersList.tsx
Normal file
19
src/APIs/ManageUsersAPIs/getUsersList.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import {useQuery} from '@tanstack/react-query'
|
||||
|
||||
export const getUsersList = async()=>{
|
||||
const response = await fetch(`${process.env.REACT_APP_API_URL}/users-list`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get User list data');
|
||||
}
|
||||
const UserListData = await response.json()
|
||||
return UserListData;
|
||||
}
|
||||
|
||||
export const useGetUsersData = () => {
|
||||
return useQuery(
|
||||
{
|
||||
queryKey: ['Users-list'],
|
||||
queryFn: () => getUsersList(),
|
||||
}
|
||||
);
|
||||
}
|
||||
9
src/APIs/ManageUsersAPIs/postAddUser.tsx
Normal file
9
src/APIs/ManageUsersAPIs/postAddUser.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import axios from "axios";
|
||||
|
||||
export const postNewManageUsersData = async (data: any)=> {
|
||||
const { data: response } = await axios.post(
|
||||
`${process.env.REACT_APP_API_URL}/add-user`,
|
||||
data
|
||||
);
|
||||
return await response.data;
|
||||
};
|
||||
9
src/APIs/ManageUsersAPIs/postEditUser.tsx
Normal file
9
src/APIs/ManageUsersAPIs/postEditUser.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import axios from "axios";
|
||||
|
||||
export const postEditManageUsersData = async (data: any)=> {
|
||||
const { data: response } = await axios.post(
|
||||
`${process.env.REACT_APP_API_URL}/edit-user`,
|
||||
data
|
||||
);
|
||||
return await response.data;
|
||||
};
|
||||
13
src/APIs/ProjectScreenAPIs/getAutoLinkedProjectsAssets.tsx
Normal file
13
src/APIs/ProjectScreenAPIs/getAutoLinkedProjectsAssets.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import axios from 'axios';
|
||||
|
||||
export const fetchAutolinkedAssets = (searchBy:any, config:any) => {
|
||||
const fetchData = async () => {
|
||||
const response = await axios.get(`${process.env.REACT_APP_API_URL}/autolinked-assets`, {
|
||||
params: {
|
||||
searchBy
|
||||
}
|
||||
});
|
||||
return response.data;
|
||||
};
|
||||
};
|
||||
23
src/APIs/ProjectScreenAPIs/getLinkedProject.tsx
Normal file
23
src/APIs/ProjectScreenAPIs/getLinkedProject.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import {useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
|
||||
|
||||
export const getLinkedProjectList = async(searchBy:any)=>{
|
||||
try {
|
||||
const response = await fetch(`${process.env.REACT_APP_API_URL}/linked-project?searchBy=${searchBy}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
const projectListData = await response.json()
|
||||
return projectListData;
|
||||
}catch(error){
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
export const useLinkedProjectData = (searchBy: any) => {
|
||||
return useQuery(
|
||||
{
|
||||
queryKey: ['linked-project-list', searchBy],
|
||||
queryFn: () => getLinkedProjectList(searchBy)
|
||||
}
|
||||
);
|
||||
};
|
||||
16
src/APIs/ProjectScreenAPIs/getProject.tsx
Normal file
16
src/APIs/ProjectScreenAPIs/getProject.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import {useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
|
||||
|
||||
export const getProjectList = async(searchBy:any)=>{
|
||||
const response = await fetch(`${process.env.REACT_APP_API_URL}/project-list?searchBy=${searchBy}`);
|
||||
const projectListData = await response.json()
|
||||
return projectListData;
|
||||
}
|
||||
|
||||
export const useGetProjectData = (searchBy: any) => {
|
||||
return useQuery(
|
||||
{
|
||||
queryKey: ['Project-list', searchBy],
|
||||
queryFn: () => getProjectList(searchBy)
|
||||
}
|
||||
);
|
||||
};
|
||||
7
src/APIs/ProjectScreenAPIs/getPublishedProject.tsx
Normal file
7
src/APIs/ProjectScreenAPIs/getPublishedProject.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import {useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
|
||||
|
||||
export const getPublishedProjects = async(searchBy:any)=>{
|
||||
const response = await fetch(`${process.env.REACT_APP_API_URL}/published-project?searchBy=${searchBy}`);
|
||||
const projectListData = await response.json()
|
||||
return projectListData;
|
||||
}
|
||||
16
src/APIs/ProjectScreenAPIs/getUnlinkedProject.tsx
Normal file
16
src/APIs/ProjectScreenAPIs/getUnlinkedProject.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import {useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
|
||||
|
||||
export const getUnlinkedProjects = async(searchBy:any)=>{
|
||||
const response = await fetch(`${process.env.REACT_APP_API_URL}/unlinked-project?searchBy=${searchBy}`);
|
||||
const projectListData = await response.json()
|
||||
return projectListData;
|
||||
}
|
||||
|
||||
export const useUnlinkedProjectData = (searchBy: any) => {
|
||||
return useQuery(
|
||||
{
|
||||
queryKey: ['unlinked-project-list', searchBy],
|
||||
queryFn: () => getUnlinkedProjects(searchBy)
|
||||
}
|
||||
);
|
||||
};
|
||||
9
src/APIs/SearchAPIs/postSearchList.ts
Normal file
9
src/APIs/SearchAPIs/postSearchList.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import axios from "axios";
|
||||
|
||||
export const postSearchList = async (data: any)=> {
|
||||
const { data: response } = await axios.post(
|
||||
`${process.env.REACT_APP_API_URL}/project-list-search`,
|
||||
data
|
||||
);
|
||||
return await response.data;
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const getLinkedProjects = async () => {
|
||||
const response = await fetch('http://localhost:8080/SonyMusicRights/linked-project?searchBy=');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get UploadStatus data');
|
||||
}
|
||||
const LinkedProjectsdata = await response.json();
|
||||
return LinkedProjectsdata;
|
||||
};
|
||||
|
||||
export const useGetLinkedProjects = () => {
|
||||
return useQuery({
|
||||
queryKey: ['LnikedProject-list'],
|
||||
queryFn: getLinkedProjects,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
19
src/APIs/getProjectRQ.tsx
Normal file
19
src/APIs/getProjectRQ.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import {useQuery} from '@tanstack/react-query'
|
||||
|
||||
export const getProjectListRQ = async(searchBy: any)=>{
|
||||
const response = await fetch(`${process.env.REACT_APP_API_URL}/project-list?searchBy=${searchBy}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get project list data');
|
||||
}
|
||||
const projectListData = await response.json()
|
||||
return projectListData;
|
||||
}
|
||||
|
||||
export const useGetProjectDataRQ = (searchBy:any) => {
|
||||
return useQuery(
|
||||
{
|
||||
queryKey: ['Project-list', searchBy],
|
||||
queryFn: () => getProjectListRQ(searchBy),
|
||||
}
|
||||
);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const getUnlinkedProjects = async () => {
|
||||
const response = await fetch('http://localhost:8080/SonyMusicRights/unlinked-project?searchBy=');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get UploadStatus data');
|
||||
}
|
||||
const UnlinkedProjectsdata = await response.json();
|
||||
return UnlinkedProjectsdata;
|
||||
};
|
||||
|
||||
export const useGetUnlinkedProjects = () => {
|
||||
return useQuery({
|
||||
queryKey: ['UnlinkedProject-list'],
|
||||
queryFn: getUnlinkedProjects,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
306
src/App.css
306
src/App.css
@ -1,302 +1,40 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
.app-background {
|
||||
background-color: #0d0d0d !important;
|
||||
color:white !important;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color:#101010;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
.projectScreen-background .css-1ex1afd-MuiTableCell-root{
|
||||
background-color: #171716 !important;
|
||||
color:white ;
|
||||
border-bottom: 1px solid rgb(45 51 59);
|
||||
|
||||
}
|
||||
|
||||
.App-footer {
|
||||
background-color: #101010;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
/* position : absolute;
|
||||
bottom : 0;
|
||||
width:100%; */
|
||||
.app-screen-heights{
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-right: 15%;
|
||||
}
|
||||
|
||||
.header-menu a {
|
||||
margin-left: 12%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.gridListRoot {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
overflow: hidden;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.gridList {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gridListItem {
|
||||
width: 245.5px;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
.gridListItem {
|
||||
width: 320px;
|
||||
height: 328px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1300px) and (max-width: 1500px) {
|
||||
.gridListItem {
|
||||
width: 272px;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.gridListItem {
|
||||
width: 360px;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 800px) {
|
||||
.gridListItem {
|
||||
width: 288px;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
padding: 15px;
|
||||
font-size: 25px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
margin: 5px 3px 0px 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fa:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.fa-facebook {
|
||||
background: #3B5998;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa-twitter {
|
||||
background: #55ACEE;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa-youtube {
|
||||
background: #bb0000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa-instagram {
|
||||
background: #125688;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 5% auto;
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
perspective: 1000px;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
|
||||
.card-body {
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
transform-style: preserve-3d;
|
||||
transition: all .7s linear;
|
||||
}
|
||||
|
||||
.card-container:last-child{
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
/* .card-container:hover .card-body {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.card-container:hover > .card-body > .side-front {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s ease-in, visibility .75s linear;
|
||||
} */
|
||||
|
||||
/*- Card sides -*/
|
||||
.card-side {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #212121;
|
||||
background-color: #fff;
|
||||
backface-visibility: hidden;
|
||||
box-shadow: 0 10px 35px rgba(50,50,93,.1),0 2px 15px rgba(0,0,0,.07);
|
||||
}
|
||||
|
||||
.side-front {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/*- Back side -*/
|
||||
.side-back {
|
||||
z-index: 2;
|
||||
padding: 32px;
|
||||
transform: rotateY(180deg);
|
||||
background-color: #878383
|
||||
}
|
||||
|
||||
.side-back div {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.side-back a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.side-back a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.flip-card-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.flip-card-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
div[role=columnheader] {
|
||||
height: 35px;
|
||||
margin-top: 5px;
|
||||
.projectScreen-filter-style .css-1ff8729-MuiInputBase-root-MuiFilledInput-root{
|
||||
background-color: #171716 !important;
|
||||
color: aliceblue !important;
|
||||
}
|
||||
|
||||
.select-field {
|
||||
width : 35%;
|
||||
}
|
||||
|
||||
.ReactTable .rt-tbody .rt-tr-group {
|
||||
border-bottom: solid 1px #2d333b !important;
|
||||
}
|
||||
|
||||
.ReactTable .rt-thead .rt-tr {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.card_header span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.project_details {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.project_details li {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
|
||||
/* ul[class*="MuiList-padding-"] {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
} */
|
||||
|
||||
.groupArrow {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
.manageusers-table-header-style .css-1ygcj2i-MuiTableCell-root{
|
||||
background-color: #171716;
|
||||
color: white;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noResult {
|
||||
margin: auto;
|
||||
width: 288px;
|
||||
.no-padding-cell {
|
||||
padding-top: 6.5px !important;
|
||||
padding-bottom: 6.5px !important;
|
||||
}
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: 55%;
|
||||
z-index: 1000;
|
||||
.table-header-bottomBorder-style .css-1ygcj2i-MuiTableCell-root{
|
||||
/* background-color: #171716 !important; */
|
||||
/* color:white ; */
|
||||
border-bottom: 1px solid rgb(45 51 59) !important;
|
||||
}
|
||||
|
||||
/* .full-height div:nth-of-type(3n) {
|
||||
width: 10px !important;
|
||||
top: 100px !important;
|
||||
}
|
||||
|
||||
.full-height div:nth-of-type(3n) div {
|
||||
background-color: red !important;
|
||||
} */
|
||||
|
||||
.track-vertical {
|
||||
width: 10px !important;
|
||||
top: 100px !important;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.111);
|
||||
}
|
||||
.track-vertical .thumb-vertical {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 10% !important;
|
||||
cursor: pointer;
|
||||
border-radius: inherit;
|
||||
background-color: white;
|
||||
}
|
||||
30
src/App.js
30
src/App.js
@ -1,30 +0,0 @@
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import Header from './components/Header';
|
||||
import React from 'react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { Container } from '@mui/material';
|
||||
import { BrowserRouter as Router, Routes, Route, BrowserRouter} from 'react-router-dom'
|
||||
import Dashboard from 'components/Dashboard';
|
||||
|
||||
|
||||
function App() {
|
||||
const queryClient = new QueryClient();
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{/* <Container maxWidth="lg" > */}
|
||||
<div className="App">
|
||||
<BrowserRouter>
|
||||
<Header/>
|
||||
{/* <Home/> */}
|
||||
<Routes>
|
||||
<Route path='/home' element={<Dashboard/>} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
{/* </Container> */}
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
37
src/App.tsx
Normal file
37
src/App.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import './App.css';
|
||||
import Header from './components/Header';
|
||||
import React from 'react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { Container } from '@mui/material';
|
||||
import { BrowserRouter as Router, Routes, Route, BrowserRouter} from 'react-router-dom'
|
||||
import Dashboard from './components/Dashboard';
|
||||
import Projects from './components/projects/Projects';
|
||||
import { ReactQueryDevtools} from 'react-query/devtools'
|
||||
import ManageUsers from './components/manage_users/ManageUsers';
|
||||
import IntranetUsers from './components/intranet_users/IntranetUsers';
|
||||
import Search from './components/search/Search';
|
||||
import Admin from './components/admin/Admin';
|
||||
|
||||
function App() {
|
||||
const queryClient = new QueryClient();
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<div className="App">
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/projects" element={<Projects />} />
|
||||
<Route path="/manage-users" element={<ManageUsers />} />
|
||||
<Route path="/intranet-users" element={<IntranetUsers />} />
|
||||
<Route path="/search" element={<Search />} />
|
||||
<Route path="/admin" element={<Admin />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
{/* <ReactQueryDevtools initialIsOpen={false} /> */}
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -1,53 +0,0 @@
|
||||
import { Card, CardContent, Grid, Paper, Typography } from "@mui/material";
|
||||
import React, { useEffect } from "react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import {Link} from 'react-router-dom';
|
||||
import { getLinkedProjects, useGetLinkedProjects } from "APIs/getLinkedProjects";
|
||||
import { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects";
|
||||
|
||||
export default function Dashboard(){
|
||||
|
||||
const [linkedProjectData, setLinkedProjectData] = React.useState()
|
||||
const { data: getLinkedProjectList } = useGetLinkedProjects();
|
||||
const { data: getUnlinkedProjectList } = useGetUnlinkedProjects();
|
||||
|
||||
console.log('sdfsds',getLinkedProjectList,getUnlinkedProjectList)
|
||||
|
||||
return (
|
||||
<Paper sx={{bgcolor:'#1e1e1e', height:600, color:'white',margin:'0px !important'}}>
|
||||
<div className="home-page">
|
||||
<div className="navbar-margin stories" style={{minHeight : '500px'}}>
|
||||
<h1 className="mobile-heading">Home</h1>
|
||||
<div style={{marginTop: '5%', marginLeft: '1%', marginRight: '1%', display: 'flex', flexDirection: 'row', justifyContent:'space-between'}}>
|
||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%', backgroundColor:'#181817'}}>
|
||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'unlinked'} }}> */}
|
||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
||||
<Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
|
||||
{getUnlinkedProjectList && getUnlinkedProjectList.length}
|
||||
</Typography>
|
||||
<Typography component="h6" variant="h6" style={{color: '#C00243', margin: '3%'}}>
|
||||
New Projects That needs Contract Linkage
|
||||
</Typography>
|
||||
</CardContent>
|
||||
{/* </Link> */}
|
||||
</Card>
|
||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%', backgroundColor:'#181817',}}>
|
||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'linked'} }}> */}
|
||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
||||
<Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
|
||||
{getLinkedProjectList && getLinkedProjectList.length}
|
||||
</Typography>
|
||||
<Typography component="h6" variant="h6" style={{color: '#E1AB1A', margin: '3%'}}>
|
||||
Projects That needs To Be Published
|
||||
</Typography>
|
||||
</CardContent>
|
||||
{/* </Link> */}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Paper>
|
||||
|
||||
)
|
||||
}
|
||||
56
src/components/Dashboard.tsx
Normal file
56
src/components/Dashboard.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
Paper,
|
||||
Typography,
|
||||
styled,
|
||||
} from "@mui/material";
|
||||
import { useUnlinkedProjectData } from "../APIs/ProjectScreenAPIs/getUnlinkedProject";
|
||||
import { useLinkedProjectData } from "../APIs/ProjectScreenAPIs/getLinkedProject";
|
||||
|
||||
const DashboardItem = styled(Paper)(({ theme }) => ({
|
||||
backgroundColor: "#1e1e1e",
|
||||
color: "white",
|
||||
padding: theme.spacing(5),
|
||||
textAlign: "left",
|
||||
}));
|
||||
|
||||
const Dashboard = () => {
|
||||
const { data: unlinkedProjects } = useUnlinkedProjectData("");
|
||||
const { data: linkedProjects } = useLinkedProjectData("");
|
||||
|
||||
return (
|
||||
<Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
|
||||
<Paper square className="app-background app-screen-heights">
|
||||
<Box sx={{ flexGrow: 1, marginLeft: "1%",marginRight:'1%', padding: "16px" }}>
|
||||
<Grid container spacing={3} sx={{ flexDirection: { xs: 'column', md: 'row' }, marginTop:'2%' }}>
|
||||
{renderDashboardItem("New Projects That needs Contract Linkage", unlinkedProjects, "#C00243")}
|
||||
{renderDashboardItem("Projects That needs To Be Published", linkedProjects, "#E1AB1A")}
|
||||
</Grid>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDashboardItem = (label:any, projects:any, color:any) => (
|
||||
<Grid item xs={12} md={6} sx={{ marginTop: "16px" }}>
|
||||
<DashboardItem>
|
||||
<Grid container spacing={2} sx={{ flexDirection: "row", flexWrap: "nowrap" }}>
|
||||
<Grid item>
|
||||
<Typography component="h2" variant="h2" sx={{ color, fontWeight: "bold" }}>
|
||||
{projects && projects.length}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography component="h6" variant="h6" sx={{ color, margin: "3%" }}>
|
||||
{`${label}`}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DashboardItem>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
export default Dashboard;
|
||||
@ -1,179 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import Container from '@mui/material/Container';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import AdbIcon from '@mui/icons-material/Adb';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const pages = ['HOME','PROJECTS', 'SEARCH', 'ADMIN','MANAGE USERS','INTRANET USERS'];
|
||||
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
|
||||
|
||||
function Header() {
|
||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||
|
||||
const handleOpenNavMenu = (event) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
};
|
||||
const handleOpenUserMenu = (event) => {
|
||||
setAnchorElUser(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null);
|
||||
};
|
||||
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar position="static" sx={{bgcolor:'#0d0d0d', height:'94px'}}>
|
||||
<Container maxWidth="xl">
|
||||
|
||||
<Toolbar disableGutters sx={{marginTop:'10px'}}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="a"
|
||||
// href="#app-bar-with-responsive-menu"
|
||||
sx={{
|
||||
mr: 2,
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '.3rem',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<img src='sonymusic_logo1.png' width="70" height="70"></img>
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleOpenNavMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={Boolean(anchorElNav)}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' },
|
||||
}}
|
||||
>
|
||||
{/* {pages.map((page) => (
|
||||
<MenuItem key={page} onClick={handleCloseNavMenu}>
|
||||
<Typography textAlign="center">{page}</Typography>
|
||||
</MenuItem>
|
||||
))} */}
|
||||
<MenuItem key='home' onClick={handleCloseNavMenu}>
|
||||
<Typography textAlign="center" component={Link}
|
||||
to='/home'>HOME</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
|
||||
<Typography
|
||||
variant="h5"
|
||||
noWrap
|
||||
component="a"
|
||||
// href="#app-bar-with-responsive-menu"
|
||||
sx={{
|
||||
mr: 2,
|
||||
display: { xs: 'flex', md: 'none' },
|
||||
flexGrow: 1,
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '.3rem',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<img src='sonymusic_logo1.png' width="70" height="70"></img>
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
|
||||
{/* {pages.map((page) => (
|
||||
<Button
|
||||
key={page}
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))} */}
|
||||
<Button
|
||||
key='home'
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
||||
component={Link}
|
||||
to='/home'
|
||||
>
|
||||
HOME
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Tooltip title="Open settings">
|
||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
||||
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
|
||||
<Typography textAlign="center" sx={{fontWeight:700, marginLeft:2, color:'white'}}>Riveesh</Typography>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
sx={{ mt: '45px' }}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
{settings.map((setting) => (
|
||||
<MenuItem key={setting} onClick={handleCloseUserMenu}>
|
||||
<Typography textAlign="center">{setting}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
export default Header;
|
||||
184
src/components/Header.tsx
Normal file
184
src/components/Header.tsx
Normal file
@ -0,0 +1,184 @@
|
||||
import * as React from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import Container from '@mui/material/Container';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
|
||||
function Header() {
|
||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||
const location = useLocation();
|
||||
|
||||
const handleOpenNavMenu = (event: any) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar position="static" sx={{ bgcolor: '#0d0d0d', height: '84px' }}>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters sx={{ marginTop: '10px', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="a"
|
||||
sx={{
|
||||
mr: 2,
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '.3rem',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<img src='sonymusic_logo1.png' width="70" height="70" alt="logo"></img>
|
||||
</Typography>
|
||||
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleOpenNavMenu}
|
||||
color="inherit"
|
||||
sx={{ display: { xs: 'flex', md: 'none' } }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={Boolean(anchorElNav)}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' },
|
||||
}}
|
||||
>
|
||||
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Button
|
||||
key="home"
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
mx: 1,
|
||||
color: 'white',
|
||||
borderRadius:0,
|
||||
borderBottom: location.pathname === '/' ? '2px solid red' : 'none',
|
||||
}}
|
||||
component={Link}
|
||||
to="/"
|
||||
>
|
||||
HOME
|
||||
</Button>
|
||||
<Button
|
||||
key="projects"
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
mx: 1,
|
||||
color: 'white',
|
||||
borderRadius:0,
|
||||
borderBottom: location.pathname === '/projects' ? '2px solid red' : 'none',
|
||||
}}
|
||||
component={Link}
|
||||
to="/projects"
|
||||
>
|
||||
PROJECTS
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
key="search"
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
mx: 1,
|
||||
color: 'white',
|
||||
borderRadius:0,
|
||||
borderBottom: location.pathname === '/search' ? '2px solid red' : 'none',
|
||||
}}
|
||||
component={Link}
|
||||
to="/search"
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
key="admin"
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
mx: 1,
|
||||
color: 'white',
|
||||
borderRadius:0,
|
||||
borderBottom: location.pathname === '/admin' ? '2px solid red' : 'none',
|
||||
}}
|
||||
component={Link}
|
||||
to="/admin"
|
||||
>
|
||||
Admin
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
key="manage-users"
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
mx: 1,
|
||||
color: 'white',
|
||||
borderRadius:0,
|
||||
borderBottom: location.pathname === '/manage-users' ? '2px solid red' : 'none',
|
||||
}}
|
||||
component={Link}
|
||||
to="/manage-users"
|
||||
>
|
||||
MANAGE USERS
|
||||
</Button>
|
||||
<Button
|
||||
key="intranet-users"
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
mx: 1,
|
||||
color: 'white',
|
||||
borderBottom: location.pathname === '/intranet-users' ? '2px solid red' : 'none',
|
||||
borderRadius:0
|
||||
}}
|
||||
component={Link}
|
||||
to="/intranet-users"
|
||||
>
|
||||
INTRANET USERS
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<IconButton sx={{ p: 0 }}>
|
||||
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
|
||||
<Typography textAlign="center" sx={{ fontWeight: 700, marginLeft: 2, color: 'white' }}>Riveesh</Typography>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
34
src/components/admin/Admin.tsx
Normal file
34
src/components/admin/Admin.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { AppBar, Box, Button, Container, CssBaseline, Paper, Toolbar, Typography } from "@mui/material";
|
||||
import React from "react";
|
||||
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
|
||||
|
||||
export default function Admin(){
|
||||
const [files, setFiles] = React.useState([]);
|
||||
|
||||
const handleFileUpload = (event:any) => {
|
||||
const newFiles:any = [...files, ...event.target.files];
|
||||
setFiles(newFiles);
|
||||
};
|
||||
return (
|
||||
<Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
|
||||
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
|
||||
<Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
|
||||
|
||||
<Paper style={{ padding: '20px', backgroundColor: "#181817", color: 'white', display:'flex',flexDirection:'row' }}>
|
||||
<CloudUploadIcon />
|
||||
<input type="file" multiple onChange={handleFileUpload} />
|
||||
<ul>
|
||||
{files.map((file:any, index:number) => (
|
||||
<li key={index}>{file.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button variant="contained" color="primary">
|
||||
Upload
|
||||
</Button>
|
||||
</Paper>
|
||||
|
||||
</Paper>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
315
src/components/intranet_users/IntranetUsers.tsx
Normal file
315
src/components/intranet_users/IntranetUsers.tsx
Normal file
@ -0,0 +1,315 @@
|
||||
import React, { ChangeEvent, useEffect, useState } from "react";
|
||||
import { useGetIntranetUsersData } from "../../APIs/IntranetUsersAPIs/getUsersList";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
tableRowClasses,
|
||||
Paper,
|
||||
Button,
|
||||
IconButton,
|
||||
TextField,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TablePagination,
|
||||
Grid,
|
||||
InputAdornment,
|
||||
Box,
|
||||
Select,
|
||||
MenuItem,
|
||||
InputLabel,
|
||||
} from '@mui/material';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { postNewIntranetUsersData } from "../../APIs/IntranetUsersAPIs/postAddUser";
|
||||
import { AccountCircle } from "@mui/icons-material";
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
|
||||
|
||||
const StyledTextField = (props:any) => (
|
||||
<TextField
|
||||
variant="standard"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
{...props}
|
||||
sx={{
|
||||
input: { color: 'white' },
|
||||
'& label': { color: 'white' },
|
||||
'& label.Mui-focused': { color: 'white' },
|
||||
'& .MuiInput-underline:after': { borderBottomColor: 'white' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': { borderColor: 'white' },
|
||||
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
|
||||
// '&.Mui-focused fieldset': { borderColor: 'white' },
|
||||
},
|
||||
...props.sx,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const StyledSelect = (props: any) => (
|
||||
<div>
|
||||
<InputLabel htmlFor={props.name} sx={{ color: 'white', fontSize:13 }}>
|
||||
{props.label}
|
||||
</InputLabel>
|
||||
<Select
|
||||
variant="standard"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
{...props}
|
||||
sx={{
|
||||
color: 'white',
|
||||
'& .MuiInputBase-input': { color: 'white' },
|
||||
'& .MuiInput-underline:after': { borderBottomColor: 'white' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': { borderColor: 'white' },
|
||||
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
|
||||
},
|
||||
...props.sx,
|
||||
width:'92vh'
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
interface Row {
|
||||
username: string;
|
||||
role: string;
|
||||
active:any;
|
||||
}
|
||||
|
||||
export default function IntranetUsers(){
|
||||
const [searchByFilterOnBlur,setSearchByFilterOnBlur] = useState<any>()
|
||||
const { data: manageUsersResponse, isLoading, isError } = useGetIntranetUsersData();
|
||||
const [data, setData] = useState<Row[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedRow, setSelectedRow] = useState<any>();
|
||||
const [newRow, setNewRow] = useState<any>();
|
||||
const [page, setPage] = React.useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
||||
const [filteredData, setFilteredData] = useState<Row[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchByFilterOnBlur) {
|
||||
// Filter data based on the username
|
||||
const filtered = manageUsersResponse?.filter((row: any) =>
|
||||
row.username.toLowerCase().includes(searchByFilterOnBlur.toLowerCase()) ||
|
||||
row.role.toLowerCase().includes(searchByFilterOnBlur.toLowerCase())
|
||||
);
|
||||
setFilteredData(filtered || []);
|
||||
} else {
|
||||
// If search input is empty, show all data
|
||||
setFilteredData(manageUsersResponse || []);
|
||||
}
|
||||
}, [searchByFilterOnBlur, manageUsersResponse]);
|
||||
|
||||
useEffect(()=>{
|
||||
if (!open){
|
||||
setSelectedRow({username: '', role: '', active: '' });
|
||||
setNewRow({username: '', role: '', active: '' });
|
||||
}
|
||||
},[open])
|
||||
useEffect(() => {
|
||||
if (selectedRow){
|
||||
postNewIntranetUsersData(selectedRow);
|
||||
}
|
||||
},[data])
|
||||
|
||||
const handleChangePage = (event:any, newPage:any) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event:any) => {
|
||||
setRowsPerPage(+event.target.value);
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const handleEdit = (row: Row) => {
|
||||
setSelectedRow({...row});
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// if (selectedRow.id) {
|
||||
// const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
|
||||
// setData(updatedData);
|
||||
// } else {
|
||||
const id = data.length + 1;
|
||||
setData([...data, { ...selectedRow, id }]);
|
||||
// }
|
||||
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
setSelectedRow({username: '', role: '', active: '' });
|
||||
setNewRow({username: '', role: '', active: '' });
|
||||
};
|
||||
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
if (selectedRow) {
|
||||
// Editing existing row
|
||||
setSelectedRow({ ...selectedRow, [name]: value });
|
||||
} else {
|
||||
// Adding a new row
|
||||
setNewRow({ ...newRow, [name]: value });
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
return(
|
||||
<Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
|
||||
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
|
||||
<Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
|
||||
<TableContainer component={Paper}>
|
||||
<TableRow sx={{bgcolor:'#171716 !important',borderBottom:'#171716',width:'100%', display:'flex',flexDirection:'row-reverse'}}>
|
||||
<TableCell className="no-padding-cell" sx={{borderBottom:'black'}}>
|
||||
<TextField
|
||||
id="standard-name"
|
||||
variant="standard"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment sx={{fontSize: 40}} position="start">
|
||||
<SearchIcon sx={{color:'white'}}/>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
value={searchByFilterOnBlur}
|
||||
onChange={(e)=>{
|
||||
setSearchByFilterOnBlur(e.target.value);
|
||||
}}
|
||||
sx={{input: { color: 'white' },
|
||||
"& label": {
|
||||
color: "white"
|
||||
},
|
||||
"& label.Mui-focused": {
|
||||
color: "white"
|
||||
},
|
||||
"& .MuiInput-underline:after": {
|
||||
borderBottomColor: "white"
|
||||
},
|
||||
"& .MuiOutlinedInput-root": {
|
||||
"& fieldset": {
|
||||
borderColor: "white"
|
||||
}},
|
||||
"&:hover fieldset": {
|
||||
borderColor: "white",
|
||||
borderWidth: 2
|
||||
},
|
||||
"&.Mui-focused fieldset": {
|
||||
borderColor: "white"
|
||||
},
|
||||
margin:1,
|
||||
// marginTop:3
|
||||
|
||||
}}
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<Table>
|
||||
<TableHead className="manageusers-table-header-style">
|
||||
<TableRow>
|
||||
<TableCell className="no-padding-cell">
|
||||
<Button variant="contained" sx={{bgcolor:'#1e1e1e',color:'#3f51b5', fontWeight:600}} onClick={handleOpen}>
|
||||
New
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell className="no-padding-cell table-header-bottomBorder-style">Name</TableCell>
|
||||
<TableCell className="no-padding-cell">Role</TableCell>
|
||||
<TableCell className="no-padding-cell">Active</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{filteredData && filteredData.map((row:any) => (
|
||||
<TableRow key={row.id} sx={{height:'20px'}}>
|
||||
<TableCell className="no-padding-cell">
|
||||
<IconButton onClick={() => handleEdit(row)} aria-label="edit">
|
||||
<EditIcon sx={{ color: 'white' }}/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell className="no-padding-cell">{row.username}</TableCell>
|
||||
<TableCell className="no-padding-cell">{row.role}</TableCell>
|
||||
{row.active==1?
|
||||
<TableCell className="no-padding-cell" sx={{color:'green', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Active</TableCell>
|
||||
:
|
||||
<TableCell className="no-padding-cell" sx={{color:'red', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Inactive</TableCell>}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
sx={{bgcolor:'#171716',color:'white'}}
|
||||
rowsPerPageOptions={[10, 25, 100]}
|
||||
component="div"
|
||||
count={manageUsersResponse && manageUsersResponse.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
|
||||
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle sx={{ bgcolor: 'rgb(24 24 23)', color: 'white', textAlign: 'center' }}>
|
||||
{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ bgcolor: 'rgb(24 24 23)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }} className="dialog-class">
|
||||
<StyledTextField
|
||||
label="Name"
|
||||
type="text"
|
||||
name="username"
|
||||
value={selectedRow && selectedRow.username}
|
||||
onChange={handleChange}
|
||||
sx={{ width: '100%', marginBottom: '20px', }}
|
||||
/>
|
||||
<StyledTextField
|
||||
label="Role"
|
||||
name="role"
|
||||
value={selectedRow && selectedRow.role}
|
||||
onChange={handleChange}
|
||||
sx={{ width: '100%', marginBottom: '20px' }}
|
||||
/>
|
||||
<StyledSelect
|
||||
fullWidth
|
||||
label="Active"
|
||||
placeholder="Active"
|
||||
name="active"
|
||||
value={selectedRow && selectedRow.active}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem value='Active'>Active</MenuItem>
|
||||
<MenuItem value='Inactive'>Inactive</MenuItem>
|
||||
</StyledSelect>
|
||||
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ bgcolor: 'rgb(24 24 23)', justifyContent: 'space-between', padding: '20px' }} className="dialog-class-actions">
|
||||
<Button onClick={handleClose} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave} color="primary">
|
||||
Save
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
|
||||
</Paper>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
313
src/components/manage_users/ManageUsers.tsx
Normal file
313
src/components/manage_users/ManageUsers.tsx
Normal file
@ -0,0 +1,313 @@
|
||||
import React, { ChangeEvent, useEffect, useState } from "react";
|
||||
import { getUsersList, useGetUsersData } from "../../APIs/ManageUsersAPIs/getUsersList";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
tableRowClasses,
|
||||
Paper,
|
||||
Button,
|
||||
IconButton,
|
||||
TextField,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TablePagination,
|
||||
InputAdornment,
|
||||
Box,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
} from '@mui/material';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { postNewManageUsersData } from "../../APIs/ManageUsersAPIs/postAddUser";
|
||||
|
||||
|
||||
const StyledTextField = (props:any) => (
|
||||
<TextField
|
||||
variant="standard"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
{...props}
|
||||
sx={{
|
||||
input: { color: 'white' },
|
||||
'& label': { color: 'white' },
|
||||
'& label.Mui-focused': { color: 'white' },
|
||||
'& .MuiInput-underline:after': { borderBottomColor: 'white' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': { borderColor: 'white' },
|
||||
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
|
||||
// '&.Mui-focused fieldset': { borderColor: 'white' },
|
||||
},
|
||||
...props.sx,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const StyledSelect = (props: any) => (
|
||||
<div>
|
||||
<InputLabel htmlFor={props.name} sx={{ color: 'white', fontSize:13 }}>
|
||||
{props.label}
|
||||
</InputLabel>
|
||||
<Select
|
||||
variant="standard"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
{...props}
|
||||
sx={{
|
||||
color: 'white',
|
||||
'& .MuiInputBase-input': { color: 'white' },
|
||||
'& .MuiInput-underline:after': { borderBottomColor: 'white' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': { borderColor: 'white' },
|
||||
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
|
||||
},
|
||||
...props.sx,
|
||||
width:'92vh'
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
|
||||
interface Row {
|
||||
username: string;
|
||||
email_id: string;
|
||||
last_login:string;
|
||||
active:boolean|string;
|
||||
}
|
||||
|
||||
export default function ManageUsers(){
|
||||
const [manageUsersData,setManageUsersData] = useState<any>()
|
||||
const { data: manageUsersResponse, isLoading, isError } = useGetUsersData();
|
||||
const [data, setData] = useState<Row[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedRow, setSelectedRow] = useState<any>();
|
||||
const [newRow, setNewRow] = useState<any>();
|
||||
const [page, setPage] = React.useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
||||
const [filteredData, setFilteredData] = useState<Row[]>([]);
|
||||
const [searchByFilterOnBlur,setSearchByFilterOnBlur] = useState<any>()
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (searchByFilterOnBlur) {
|
||||
// Filter data based on the username
|
||||
const filtered = manageUsersResponse?.filter((row: any) =>
|
||||
row.username.toLowerCase().includes(searchByFilterOnBlur.toLowerCase()) ||
|
||||
(row.email_id && row.email_id.toLowerCase().includes(searchByFilterOnBlur.toLowerCase()))
|
||||
);
|
||||
setFilteredData(filtered || []);
|
||||
} else {
|
||||
// If search input is empty, show all data
|
||||
setFilteredData(manageUsersResponse || []);
|
||||
}
|
||||
}, [searchByFilterOnBlur, manageUsersResponse]);
|
||||
|
||||
useEffect(()=>{
|
||||
if (!open){
|
||||
setSelectedRow({username: '', email_id: '', last_login: '', active: '' });
|
||||
setNewRow({username: '', email_id: '', last_login: '', active: '' });
|
||||
}
|
||||
},[open])
|
||||
useEffect(() => {
|
||||
if (selectedRow){
|
||||
postNewManageUsersData(selectedRow);
|
||||
}
|
||||
},[data])
|
||||
|
||||
const handleChangePage = (event:any, newPage:any) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event:any) => {
|
||||
setRowsPerPage(+event.target.value);
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const handleEdit = (row: Row) => {
|
||||
setSelectedRow({...row});
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// if (selectedRow.id) {
|
||||
// const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
|
||||
// setData(updatedData);
|
||||
// } else {
|
||||
const id = data.length + 1;
|
||||
setData([...data, { ...selectedRow, id }]);
|
||||
// }
|
||||
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
setSelectedRow({username: '', email_id: '', last_login: '', active: '' });
|
||||
setNewRow({username: '', email_id: '', last_login: '', active: '' });
|
||||
};
|
||||
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
if (selectedRow) {
|
||||
// Editing existing row
|
||||
setSelectedRow({ ...selectedRow, [name]: value });
|
||||
} else {
|
||||
// Adding a new row
|
||||
setNewRow({ ...newRow, [name]: value });
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
return(
|
||||
<Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
|
||||
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
|
||||
<Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
|
||||
<TableContainer component={Paper}>
|
||||
<TableRow sx={{bgcolor:'#171716 !important',borderBottom:'#171716',width:'100%', display:'flex',flexDirection:'row-reverse'}}>
|
||||
<TableCell className="no-padding-cell" sx={{borderBottom:'black'}}>
|
||||
<TextField
|
||||
id="standard-name"
|
||||
variant="standard"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment sx={{fontSize: 40}} position="start">
|
||||
<SearchIcon sx={{color:'white'}}/>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
value={searchByFilterOnBlur}
|
||||
onChange={(e)=>{
|
||||
setSearchByFilterOnBlur(e.target.value);
|
||||
}}
|
||||
sx={{input: { color: 'white' },
|
||||
"& label": {
|
||||
color: "white"
|
||||
},
|
||||
"& label.Mui-focused": {
|
||||
color: "white"
|
||||
},
|
||||
"& .MuiInput-underline:after": {
|
||||
borderBottomColor: "white"
|
||||
},
|
||||
"& .MuiOutlinedInput-root": {
|
||||
"& fieldset": {
|
||||
borderColor: "white"
|
||||
}},
|
||||
"&:hover fieldset": {
|
||||
borderColor: "white",
|
||||
borderWidth: 2
|
||||
},
|
||||
"&.Mui-focused fieldset": {
|
||||
borderColor: "white"
|
||||
},
|
||||
margin:1,
|
||||
// marginTop:3
|
||||
|
||||
}}
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<Table>
|
||||
<TableHead className="manageusers-table-header-style">
|
||||
<TableRow >
|
||||
<TableCell className="no-padding-cell">
|
||||
<Button variant="contained" sx={{bgcolor:'#1e1e1e',color:'#3f51b5', fontWeight:600}} onClick={handleOpen}>
|
||||
New
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell className="no-padding-cell">Name</TableCell>
|
||||
<TableCell className="no-padding-cell">Email Id</TableCell>
|
||||
<TableCell className="no-padding-cell">Last Login</TableCell>
|
||||
<TableCell className="no-padding-cell">Active</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{filteredData && filteredData.map((row:any) => (
|
||||
<TableRow key={row.id} >
|
||||
<TableCell className="no-padding-cell">
|
||||
<IconButton onClick={() => handleEdit(row)} aria-label="edit">
|
||||
<EditIcon sx={{ color: 'white' }}/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell className="no-padding-cell">{row.username}</TableCell>
|
||||
<TableCell className="no-padding-cell">{row.email_id}</TableCell>
|
||||
<TableCell className="no-padding-cell">{row.last_login}</TableCell>
|
||||
{row.active?
|
||||
<TableCell className="no-padding-cell" sx={{color:'green', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Active</TableCell>
|
||||
:
|
||||
<TableCell className="no-padding-cell" sx={{color:'red', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Inactive</TableCell>}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
sx={{bgcolor:'#171716',color:'white'}}
|
||||
rowsPerPageOptions={[10, 25, 100]}
|
||||
component="div"
|
||||
count={manageUsersResponse && manageUsersResponse.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle sx={{ bgcolor: 'rgb(24 24 23)', color: 'white', textAlign: 'center' }}>
|
||||
{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ bgcolor: 'rgb(24 24 23)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }} className="dialog-class">
|
||||
<StyledTextField
|
||||
label="Name"
|
||||
type="text"
|
||||
name="username"
|
||||
value={selectedRow && selectedRow.username}
|
||||
onChange={handleChange}
|
||||
sx={{ width: '100%', marginBottom: '20px', }}
|
||||
/>
|
||||
<StyledTextField
|
||||
label="Role"
|
||||
name="role"
|
||||
value={selectedRow && selectedRow.role}
|
||||
onChange={handleChange}
|
||||
sx={{ width: '100%', marginBottom: '20px' }}
|
||||
/>
|
||||
<StyledSelect
|
||||
fullWidth
|
||||
label="Active"
|
||||
placeholder="Active"
|
||||
name="active"
|
||||
value={selectedRow && selectedRow.active}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem value='Active'>Active</MenuItem>
|
||||
<MenuItem value='Inactive'>Inactive</MenuItem>
|
||||
</StyledSelect>
|
||||
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ bgcolor: 'rgb(24 24 23)', justifyContent: 'space-between', padding: '20px' }} className="dialog-class-actions">
|
||||
<Button onClick={handleClose} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave} color="primary">
|
||||
Save
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Paper>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
114
src/components/projects/Projects.tsx
Normal file
114
src/components/projects/Projects.tsx
Normal file
@ -0,0 +1,114 @@
|
||||
import React from "react";
|
||||
import ProjectList from "./ProjectsList";
|
||||
import { getProjectList } from "../../APIs/ProjectScreenAPIs/getProject";
|
||||
import { useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { getLinkedProjectList } from "../../APIs/ProjectScreenAPIs/getLinkedProject";
|
||||
import { Box, Card, CardContent, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
|
||||
import { getPublishedProjects } from "../../APIs/ProjectScreenAPIs/getPublishedProject";
|
||||
import { getUnlinkedProjects } from "../../APIs/ProjectScreenAPIs/getUnlinkedProject";
|
||||
|
||||
|
||||
export default function Projects(){
|
||||
const [selectedContractFilter, setSelectedContractFilter] = useState<any>('All');
|
||||
const [ContractFilterResponseData, setContractFilterResponseData] = useState<any>();
|
||||
const [searchByFilter, setSearchByFilter] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
if (selectedContractFilter === 'All') {
|
||||
const data = await getProjectList(searchByFilter);
|
||||
setContractFilterResponseData(data);
|
||||
} else if (selectedContractFilter === 'linked') {
|
||||
const data = await getLinkedProjectList(searchByFilter);
|
||||
setContractFilterResponseData(data);
|
||||
} else if (selectedContractFilter === 'unlinked') {
|
||||
const data = await getUnlinkedProjects(searchByFilter);
|
||||
setContractFilterResponseData(data);
|
||||
} else if (selectedContractFilter === 'published') {
|
||||
const data = await getPublishedProjects(searchByFilter);
|
||||
setContractFilterResponseData(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [selectedContractFilter, searchByFilter]);
|
||||
|
||||
|
||||
return(
|
||||
|
||||
<Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
|
||||
<Card square style={{ backgroundColor:'rgb(13 13 13)'}}>
|
||||
<Card sx={{margin:'1%', backgroundColor:'rgb(23 23 22)'}}>
|
||||
<CardContent>
|
||||
<FormControl className="select-field" variant="standard" style={{marginTop: '1%'}}>
|
||||
<InputLabel htmlFor="contract-list" sx={{ color: 'white',paddingLeft:1 }}>Select Contract</InputLabel>
|
||||
<Select
|
||||
sx={{color: 'white',
|
||||
'& .MuiSelect-iconOutlined ': {
|
||||
color: '#393939',
|
||||
},
|
||||
}}
|
||||
value={selectedContractFilter}
|
||||
inputProps={{
|
||||
name: 'contracts',
|
||||
id: 'contract-type',
|
||||
}}
|
||||
onChange={(e)=>{
|
||||
setSelectedContractFilter(e.target.value)
|
||||
setSearchByFilter('')
|
||||
}}
|
||||
>
|
||||
<MenuItem value="All">All</MenuItem>
|
||||
<MenuItem value="unlinked">Contract Pending</MenuItem>
|
||||
<MenuItem value="linked">Contract Linked</MenuItem>
|
||||
<MenuItem value="published">Contract Published</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
id="standard-name"
|
||||
variant="standard"
|
||||
label="Search By"
|
||||
value={searchByFilter}
|
||||
onChange={(e)=>{
|
||||
setSearchByFilter(e.target.value);
|
||||
}}
|
||||
|
||||
sx={{input: { color: 'white' },
|
||||
"& label": {
|
||||
color: "white"
|
||||
},
|
||||
"& label.Mui-focused": {
|
||||
color: "white"
|
||||
},
|
||||
"& .MuiInput-underline:after": {
|
||||
borderBottomColor: "white"
|
||||
},
|
||||
"& .MuiOutlinedInput-root": {
|
||||
"& fieldset": {
|
||||
borderColor: "white"
|
||||
}},
|
||||
"&:hover fieldset": {
|
||||
borderColor: "white",
|
||||
borderWidth: 2
|
||||
},
|
||||
"&.Mui-focused fieldset": {
|
||||
borderColor: "white"
|
||||
}
|
||||
}}
|
||||
placeholder="Search By Title, Project Title, Contract No, Asset Title, Track Grid, ISRC"
|
||||
style={{marginLeft: '10%', width: '45%'}}
|
||||
margin="normal"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Card>
|
||||
|
||||
<ProjectList projectData={ContractFilterResponseData}/>
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
132
src/components/projects/ProjectsList.tsx
Normal file
132
src/components/projects/ProjectsList.tsx
Normal file
@ -0,0 +1,132 @@
|
||||
import * as React from 'react';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TablePagination from '@mui/material/TablePagination';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import { Button } from '@mui/material';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
id: 'project_title',
|
||||
label: 'Title',
|
||||
minWidth: 170,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
id: 'cms_contract_no',
|
||||
label: 'Contract No',
|
||||
minWidth: 170,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
id: 'ticket_title',
|
||||
label: 'Project Title',
|
||||
minWidth: 170,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
id: 'term',
|
||||
label: 'Term',
|
||||
Cell: (row:any) => (
|
||||
(row.perpetuity !== '' && row.perpetuity !== null)
|
||||
? (row.perpetuity !== "Yes" ? <span>{row.effective_from1} - {row.effective_to1}</span> : `${row.effective_from1} - Perpetual`)
|
||||
: ""
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'link',
|
||||
label: 'Link',
|
||||
Cell: (row:any) => (
|
||||
(row.cid === null || row.cid === 0 || row.effective_from1 === null)
|
||||
? <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" size="small">Link</Button>
|
||||
: (row.published === 1
|
||||
? <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" color="primary" size="small">View</Button>
|
||||
: <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained" color="primary" size="small">Publish</Button>
|
||||
)
|
||||
),
|
||||
minWidth: 80,
|
||||
align: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
type Props={
|
||||
projectData:any
|
||||
}
|
||||
|
||||
|
||||
export default function ProjectList({projectData}:Props) {
|
||||
const [page, setPage] = React.useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
||||
|
||||
const handleChangePage = (event:any, newPage:any) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event:any) => {
|
||||
setRowsPerPage(+event.target.value);
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
|
||||
<Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
|
||||
<TableContainer sx={{ maxHeight: '600px'}}>
|
||||
<Table stickyHeader aria-label="sticky table">
|
||||
<TableHead >
|
||||
<TableRow >
|
||||
{columns.map((column) => (
|
||||
<TableCell
|
||||
sx={{bgcolor:'#171716',color:'white', borderBottom:'#171716'}}
|
||||
key={column.id}
|
||||
// align={column.align}
|
||||
style={{ minWidth: column.minWidth }}
|
||||
>
|
||||
{column.label}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{projectData && projectData
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row:any) => {
|
||||
return (
|
||||
<TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
|
||||
{columns.map((column:any) => {
|
||||
const value = row[column.id];
|
||||
return (
|
||||
<TableCell key={column.id}
|
||||
// align={column.align}
|
||||
>
|
||||
{column.format && typeof value === 'number'
|
||||
? column.format(value)
|
||||
: value}
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
sx={{bgcolor:'#171716',color:'white'}}
|
||||
rowsPerPageOptions={[10, 25, 100]}
|
||||
component="div"
|
||||
count={projectData && projectData.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
238
src/components/search/AdvancedFilters.tsx
Normal file
238
src/components/search/AdvancedFilters.tsx
Normal file
@ -0,0 +1,238 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Paper,
|
||||
Grid,
|
||||
Select,
|
||||
MenuItem,
|
||||
InputLabel,
|
||||
FormControl,
|
||||
TextField,
|
||||
} from '@mui/material';
|
||||
|
||||
const menuItemStyle = {
|
||||
fontSize: '13px',
|
||||
};
|
||||
|
||||
const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
|
||||
|
||||
const handleFilterChange = (filterName:any, value:any) => {
|
||||
setAdvanceFilterData((prevData:any) => ({ ...prevData, [filterName]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper square sx={{ width:'100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}>
|
||||
<Grid container spacing={1} justifyContent="center" sx={{marginTop:'1%',marginBottom:'1%'}} >
|
||||
<Grid item xs={6} sm={3} md={3} lg={1.6} >
|
||||
<FormControl fullWidth variant="standard">
|
||||
<InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Assets</InputLabel>
|
||||
<Select
|
||||
value={advanceFilterData.asset_type}
|
||||
label="Assets"
|
||||
onChange={(e) => {
|
||||
handleFilterChange('asset_type', e.target.value);
|
||||
}}
|
||||
|
||||
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
|
||||
sx={{ color: 'white', border: '1px solid white', }}
|
||||
>
|
||||
<MenuItem value="0" sx={menuItemStyle}>All</MenuItem>
|
||||
<MenuItem value="1" sx={menuItemStyle}>Audio Song</MenuItem>
|
||||
<MenuItem value="2" sx={menuItemStyle}>Video Song</MenuItem>
|
||||
<MenuItem value="3" sx={menuItemStyle}>Audio visual</MenuItem>
|
||||
<MenuItem value="4" sx={menuItemStyle}>Story</MenuItem>
|
||||
<MenuItem value="5" sx={menuItemStyle}>Score</MenuItem>
|
||||
<MenuItem value="6" sx={menuItemStyle}>Dialogue</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6} sm={3} md={3} lg={1.6} >
|
||||
<FormControl fullWidth variant="standard">
|
||||
<InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Rights</InputLabel>
|
||||
<Select
|
||||
value={advanceFilterData.rights}
|
||||
label="Rights"
|
||||
onChange={(e) =>{
|
||||
handleFilterChange('rights', e.target.value);
|
||||
}}
|
||||
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
|
||||
sx={{ color: 'white', border: '1px solid white', }}
|
||||
>
|
||||
<MenuItem value="0" sx={menuItemStyle}>All</MenuItem>
|
||||
<MenuItem value="1" sx={menuItemStyle}>Physical</MenuItem>
|
||||
<MenuItem value="2" sx={menuItemStyle}>Digital</MenuItem>
|
||||
<MenuItem value="3" sx={menuItemStyle}>Adaptation</MenuItem>
|
||||
<MenuItem value="4" sx={menuItemStyle}>Synchronisation</MenuItem>
|
||||
<MenuItem value="5" sx={menuItemStyle}>Copyright Registration</MenuItem>
|
||||
<MenuItem value="6" sx={menuItemStyle}>Public Performance</MenuItem>
|
||||
<MenuItem value="7" sx={menuItemStyle}>Compilation</MenuItem>
|
||||
<MenuItem value="8" sx={menuItemStyle}>Games</MenuItem>
|
||||
<MenuItem value="9" sx={menuItemStyle}>GamesDuplicate</MenuItem>
|
||||
<MenuItem value="10" sx={menuItemStyle}>Literary Work</MenuItem>
|
||||
<MenuItem value="11" sx={menuItemStyle}>Musical Work</MenuItem>
|
||||
<MenuItem value="12" sx={menuItemStyle}>Performances/Singer</MenuItem>
|
||||
<MenuItem value="13" sx={menuItemStyle}>Background Score</MenuItem>
|
||||
<MenuItem value="14" sx={menuItemStyle}>Dialogue</MenuItem>
|
||||
<MenuItem value="15" sx={menuItemStyle}>Synchronisation</MenuItem>
|
||||
<MenuItem value="16" sx={menuItemStyle}>Composition</MenuItem>
|
||||
<MenuItem value="17" sx={menuItemStyle}>Lyrics</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6} sm={3} md={3} lg={1.6} >
|
||||
<FormControl fullWidth variant="standard">
|
||||
<InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Validity</InputLabel>
|
||||
<Select
|
||||
value={advanceFilterData.validity}
|
||||
label="validity"
|
||||
onChange={(e) =>{
|
||||
handleFilterChange('validity', e.target.value);
|
||||
}}
|
||||
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
|
||||
sx={{ color: 'white', border: '1px solid white', }}
|
||||
>
|
||||
<MenuItem value="0" sx={menuItemStyle}>All</MenuItem>
|
||||
<MenuItem value="6" sx={menuItemStyle}>6 Months</MenuItem>
|
||||
<MenuItem value="12" sx={menuItemStyle}>12 Months</MenuItem>
|
||||
<MenuItem value="24" sx={menuItemStyle}>24 Months</MenuItem>
|
||||
<MenuItem value="60" sx={menuItemStyle}>60 Months</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6} sm={3} md={3} lg={1.6}>
|
||||
{/* <FormControl fullWidth variant="standard"> */}
|
||||
{/* <InputLabel sx={{ color: 'white', paddingLeft: 1 }}>Territory</InputLabel> */}
|
||||
<TextField
|
||||
variant="standard"
|
||||
value={advanceFilterData.territory}
|
||||
onChange={(e) => {
|
||||
handleFilterChange('territory', e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
style: { marginLeft:2 },
|
||||
}}
|
||||
sx={{ color: 'white', border: '1px solid white', marginTop: 2,'& input': {
|
||||
color: 'white',
|
||||
}, }}
|
||||
/>
|
||||
{/* </FormControl> */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6} sm={3} md={3} lg={1.6} >
|
||||
<FormControl fullWidth variant="standard">
|
||||
<InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Mood</InputLabel>
|
||||
<Select
|
||||
value={advanceFilterData.mood}
|
||||
label="Mood"
|
||||
onChange={(e) =>{
|
||||
handleFilterChange('mood', e.target.value);
|
||||
}}
|
||||
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
|
||||
sx={{ color: 'white', border: '1px solid white', }}
|
||||
>
|
||||
<MenuItem value="All" sx={menuItemStyle}>All</MenuItem>
|
||||
<MenuItem value="Happy" sx={menuItemStyle}>Happy</MenuItem>
|
||||
<MenuItem value="Sad" sx={menuItemStyle}>Sad</MenuItem>
|
||||
<MenuItem value="Romantic" sx={menuItemStyle}>Romantic</MenuItem>
|
||||
<MenuItem value="Bored" sx={menuItemStyle}>Bored</MenuItem>
|
||||
<MenuItem value="Upbeat" sx={menuItemStyle}>Upbeat</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6} sm={3} md={3} lg={1.6} >
|
||||
<FormControl fullWidth variant="standard">
|
||||
<InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Language</InputLabel>
|
||||
<Select
|
||||
value={advanceFilterData.language}
|
||||
label="Language"
|
||||
onChange={(e) =>{
|
||||
handleFilterChange('language', e.target.value);
|
||||
}}
|
||||
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
|
||||
sx={{ color: 'white', border: '1px solid white', }}
|
||||
>
|
||||
<MenuItem value="All" sx={menuItemStyle}>All</MenuItem>
|
||||
<MenuItem value="English" sx={menuItemStyle}>English</MenuItem>
|
||||
<MenuItem value="Punjabi" sx={menuItemStyle}>Punjabi </MenuItem>
|
||||
<MenuItem value="Gujarati" sx={menuItemStyle}>Gujarati </MenuItem>
|
||||
<MenuItem value="Telugu" sx={menuItemStyle}>Telugu </MenuItem>
|
||||
<MenuItem value="Bahasa Indonesia" sx={menuItemStyle}>Bahasa Indonesia </MenuItem>
|
||||
<MenuItem value="Tamil" sx={menuItemStyle}>Tamil </MenuItem>
|
||||
<MenuItem value="Kannada" sx={menuItemStyle}>Kannada </MenuItem>
|
||||
<MenuItem value="Marathi" sx={menuItemStyle}>Marathi </MenuItem>
|
||||
<MenuItem value="Bahasa Malaysia" sx={menuItemStyle}>Bahasa Malaysia </MenuItem>
|
||||
<MenuItem value="Malayalam" sx={menuItemStyle}>Malayalam </MenuItem>
|
||||
<MenuItem value="Hindi" sx={menuItemStyle}>Hindi </MenuItem>
|
||||
<MenuItem value="Bengali" sx={menuItemStyle}>Bengali </MenuItem>
|
||||
<MenuItem value="Assamese" sx={menuItemStyle}>Assamese </MenuItem>
|
||||
<MenuItem value="Carnatic" sx={menuItemStyle}>Carnatic </MenuItem>
|
||||
<MenuItem value="Spanish" sx={menuItemStyle}>Spanish </MenuItem>
|
||||
<MenuItem value="Urdu" sx={menuItemStyle}>Urdu </MenuItem>
|
||||
<MenuItem value="Rajasthani" sx={menuItemStyle}>Rajasthani </MenuItem>
|
||||
<MenuItem value="Multi Language" sx={menuItemStyle}>Multi Language </MenuItem>
|
||||
<MenuItem value="Other" sx={menuItemStyle}>Other </MenuItem>
|
||||
<MenuItem value="Arabic" sx={menuItemStyle}>Arabic </MenuItem>
|
||||
<MenuItem value="Sanskrit" sx={menuItemStyle}>Sanskrit </MenuItem>
|
||||
<MenuItem value="Not Applicable" sx={menuItemStyle}>Not Applicable </MenuItem>
|
||||
<MenuItem value="Maithili" sx={menuItemStyle}>Maithili </MenuItem>
|
||||
<MenuItem value="Greek" sx={menuItemStyle}>Greek </MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6} sm={3} md={3} lg={1.6} >
|
||||
<FormControl fullWidth variant="standard">
|
||||
<InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Genre</InputLabel>
|
||||
<Select
|
||||
value={advanceFilterData.genre}
|
||||
label="Genre"
|
||||
onChange={(e) =>{
|
||||
handleFilterChange('genre', e.target.value);
|
||||
}}
|
||||
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
|
||||
sx={{ color: 'white', border: '1px solid white', }}
|
||||
>
|
||||
<MenuItem value="All" sx={menuItemStyle}>All</MenuItem>
|
||||
<MenuItem value="Childrens Music" sx={menuItemStyle}>Childrens Music</MenuItem>
|
||||
<MenuItem value="Pop" sx={menuItemStyle}>Pop</MenuItem>
|
||||
<MenuItem value="Soundtrack (Bollywood)" sx={menuItemStyle}>Soundtrack (Bollywood)</MenuItem>
|
||||
<MenuItem value="Ghazals, Sufi & Qawwali" sx={menuItemStyle}>Ghazals, Sufi & Qawwali</MenuItem>
|
||||
<MenuItem value="Regional Indian" sx={menuItemStyle}>Regional Indian</MenuItem>
|
||||
<MenuItem value="Classical - Carnatic" sx={menuItemStyle}>Classical - Carnatic</MenuItem>
|
||||
<MenuItem value="Soundtrack (Punjabi)" sx={menuItemStyle}>Soundtrack (Punjabi)</MenuItem>
|
||||
<MenuItem value="Soundtrack (Telugu)" sx={menuItemStyle}>Soundtrack (Telugu)</MenuItem>
|
||||
<MenuItem value="World Music" sx={menuItemStyle}>World Music</MenuItem>
|
||||
<MenuItem value="Qawwali" sx={menuItemStyle}>Qawwali</MenuItem>
|
||||
<MenuItem value="Indian Pop" sx={menuItemStyle}>Indian Pop</MenuItem>
|
||||
<MenuItem value="Classical - Hindustani" sx={menuItemStyle}>Classical - Hindustani</MenuItem>
|
||||
<MenuItem value="Soundtrack (Bengali)" sx={menuItemStyle}>Soundtrack (Bengali)</MenuItem>
|
||||
<MenuItem value="Soundtrack (Kannada)" sx={menuItemStyle}>Soundtrack (Kannada)</MenuItem>
|
||||
<MenuItem value="Folk" sx={menuItemStyle}>Folk</MenuItem>
|
||||
<MenuItem value="Miscellaneous/Other" sx={menuItemStyle}>Miscellaneous/Other</MenuItem>
|
||||
<MenuItem value="Fusion" sx={menuItemStyle}>Fusion</MenuItem>
|
||||
<MenuItem value="Electronica" sx={menuItemStyle}>Electronica</MenuItem>
|
||||
<MenuItem value="Soundtrack (Malayalam)" sx={menuItemStyle}>Soundtrack (Malayalam)</MenuItem>
|
||||
<MenuItem value="IndiPop" sx={menuItemStyle}>IndiPop</MenuItem>
|
||||
<MenuItem value="Devotional & Spiritual" sx={menuItemStyle}>Devotional & Spiritual</MenuItem>
|
||||
<MenuItem value="Soundtrack (Other)" sx={menuItemStyle}>Soundtrack (Other)</MenuItem>
|
||||
<MenuItem value="Western Pop/Rock" sx={menuItemStyle}>Western Pop/Rock</MenuItem>
|
||||
<MenuItem value="International" sx={menuItemStyle}>International</MenuItem>
|
||||
<MenuItem value="Soundtrack (Marathi)" sx={menuItemStyle}>Soundtrack (Marathi)</MenuItem>
|
||||
<MenuItem value="Punjabi/Bhangra" sx={menuItemStyle}>Punjabi/Bhangra</MenuItem>
|
||||
<MenuItem value="Soundtrack (Tamil)" sx={menuItemStyle}>Soundtrack (Tamil)</MenuItem>
|
||||
<MenuItem value="Indian Folk" sx={menuItemStyle}>Indian Folk</MenuItem>
|
||||
<MenuItem value="Devotional" sx={menuItemStyle}>Devotional</MenuItem>
|
||||
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvancedFilters;
|
||||
104
src/components/search/Search.tsx
Normal file
104
src/components/search/Search.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
import { Box, Button, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { postSearchList, } from "../../APIs/SearchAPIs/postSearchList";
|
||||
import AdvancedFilters from "./AdvancedFilters";
|
||||
|
||||
export default function Search() {
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [advanceFilterData, setAdvanceFilterData] = useState<any>(
|
||||
{
|
||||
searchByValue:searchText,
|
||||
rights: "0",
|
||||
asset_type: "0",
|
||||
territory: '',
|
||||
genre: 'All',
|
||||
language: 'All',
|
||||
mood: 'All',
|
||||
validity: "0",
|
||||
artist: ''
|
||||
}
|
||||
);
|
||||
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
|
||||
|
||||
// useEffect(()=>{
|
||||
// postSearchList(advanceFilterData)
|
||||
// },[advanceFilterData])
|
||||
|
||||
const handleSearch = () => {
|
||||
postSearchList(advanceFilterData)
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setSearchText('');
|
||||
setShowAdvancedFilters(false);
|
||||
};
|
||||
|
||||
const handleAdvancedFilter = () => {
|
||||
setShowAdvancedFilters(!showAdvancedFilters);
|
||||
if (showAdvancedFilters==false){
|
||||
setAdvanceFilterData({
|
||||
searchText,
|
||||
rights: "0",
|
||||
asset_type: "0",
|
||||
territory: '',
|
||||
genre: 'All',
|
||||
language: 'All',
|
||||
mood: 'All',
|
||||
validity: "0",
|
||||
artist: ''
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
|
||||
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}>
|
||||
<Paper className='projectScreen-background' sx={{ margin: '1%', width: '100%', overflow: 'hidden', textAlign: 'center' }}>
|
||||
<Grid container spacing={2} sx={{ bgcolor: '#181818' }} justifyContent="center">
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
placeholder="Search By Project Title, Asset Title, Artist, Track Grid, ISRC"
|
||||
variant="outlined"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
sx={{
|
||||
width: '50%',
|
||||
'& label.Mui-focused': {
|
||||
color: 'white',
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': {
|
||||
borderColor: 'white',
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: 'white',
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: 'white',
|
||||
},
|
||||
},
|
||||
'& input': {
|
||||
color: 'white',
|
||||
},
|
||||
marginTop:2,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button variant="contained" onClick={handleSearch} sx={{ marginRight: '1%', bgcolor: 'red' }}>
|
||||
Search
|
||||
</Button>
|
||||
<Button variant="contained" onClick={handleClear} sx={{ marginRight: '1%', bgcolor: 'red' }}>
|
||||
Clear
|
||||
</Button>
|
||||
<Button variant="contained" onClick={handleAdvancedFilter} sx={{ bgcolor: 'red' }}>
|
||||
Advanced Filter
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{showAdvancedFilters && <AdvancedFilters advanceFilterData={advanceFilterData} setAdvanceFilterData={setAdvanceFilterData}/>}
|
||||
</Paper>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@ -3,11 +3,15 @@ import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import { Provider } from 'react-redux';
|
||||
import { store } from './redux/store.js'
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
</Provider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
||||
24
src/redux/slices/counterSlice.js
Normal file
24
src/redux/slices/counterSlice.js
Normal file
@ -0,0 +1,24 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
value:0,
|
||||
}
|
||||
|
||||
export const counterSlice = createSlice({
|
||||
name:'counter',
|
||||
initialState,
|
||||
reducers:{
|
||||
increment:(state)=>{
|
||||
state.value+=1
|
||||
},
|
||||
decrement:(state)=>{
|
||||
state.value-=1
|
||||
},
|
||||
incrementByAmount:(state,action)=>{
|
||||
state.value+=action.payload
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const {increment, decrement, incrementByAmount} = counterSlice.actions
|
||||
export default counterSlice.reducer
|
||||
8
src/redux/store.js
Normal file
8
src/redux/store.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { configureStore } from '@reduxjs/toolkit'
|
||||
import counterReducer from './slices/counterSlice'
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
counter:counterReducer,
|
||||
},
|
||||
})
|
||||
11
tsconfig.json
Normal file
11
tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||
"module": "commonjs", /* Specify what module code is generated. */
|
||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
|
||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
"skipLibCheck": true ,
|
||||
"jsx": "react", /* Skip type checking all .d.ts files. */
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user