Skip to content

Commit 2b91663

Browse files
fr4iser90fr4iser90
committed
Integrate ProjectList component into App.vue for project management, updating project handling logic in ScanRunner.vue to utilize props for project data. Remove createDefaultProject method and enhance project list update handling. Update main.js to include global styles and prepare axios for potential global use.
1 parent 9326a7e commit 2b91663

5 files changed

Lines changed: 558 additions & 114 deletions

File tree

‎frontend/src/App.vue‎

Lines changed: 24 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import UserProfileDisplay from './components/UserProfileDisplay.vue'
77
import ApiKeyManager from './components/ApiKeyManager.vue'
88
import ScanJobList from './components/ScanJobList.vue'
99
import ScanConfigurationManager from './components/ScanConfigurationManager.vue'
10+
import ProjectList from './components/ProjectList.vue'
1011
import axios from 'axios';
1112
1213
const AUTH_API_URL = '/api/v1/auth';
@@ -21,12 +22,14 @@ export default {
2122
UserProfileDisplay,
2223
ApiKeyManager,
2324
ScanJobList,
24-
ScanConfigurationManager
25+
ScanConfigurationManager,
26+
ProjectList
2527
},
2628
data() {
2729
return {
2830
isLoggedIn: false,
2931
currentProjectIdForConfigManager: null,
32+
projectsForScanRunner: [],
3033
};
3134
},
3235
created() {
@@ -43,6 +46,9 @@ export default {
4346
axios.defaults.headers.common['Authorization'] = `Token ${token}`;
4447
this.isLoggedIn = true;
4548
this.currentProjectIdForConfigManager = null;
49+
if (this.$refs.projectList) {
50+
this.$refs.projectList.fetchProjects();
51+
}
4652
} else {
4753
console.error("Login event received, but no token found in localStorage.");
4854
this.handleLogout(true);
@@ -65,34 +71,21 @@ export default {
6571
delete axios.defaults.headers.common['Authorization'];
6672
this.isLoggedIn = false;
6773
this.currentProjectIdForConfigManager = null;
74+
this.projectsForScanRunner = [];
6875
},
6976
handleSessionExpired() {
7077
this.handleLogout(true);
7178
},
7279
handleProjectSelectedForConfigManager(projectId) {
7380
this.currentProjectIdForConfigManager = projectId;
7481
},
75-
async createDefaultProject() {
76-
try {
77-
const response = await axios.post('/api/v1/core/projects/', { name: 'Default Project' });
78-
console.log('Default project created:', response.data);
79-
alert('Default Project created successfully! The project list will refresh.');
80-
// Refresh the project list in ScanRunner, assuming ScanRunner component has a ref and a method to fetch projects
81-
if (this.$refs.scanRunner && typeof this.$refs.scanRunner.fetchProjects === 'function') {
82-
this.$refs.scanRunner.fetchProjects();
83-
} else {
84-
console.warn('ScanRunner component or fetchProjects method not available.');
85-
// Optionally, emit an event that a parent component or global state manager can listen to
86-
// this.$root.$emit('projectListShouldRefresh'); // Example if using root instance as event bus
87-
}
88-
} catch (error) {
89-
console.error('Failed to create default project:', error);
90-
if (error.response && error.response.data && error.response.data.name && error.response.data.name[0].includes('project with this name already exists')) {
91-
alert('Failed to create default project: A project with the name "Default Project" already exists.');
92-
} else {
93-
alert('Failed to create default project: Request failed with status code ' + (error.response ? error.response.status : 'unknown'));
94-
}
95-
}
82+
handleProjectListUpdate(updatedProjects) {
83+
this.projectsForScanRunner = updatedProjects;
84+
console.log('App.vue: projectsForScanRunner updated by ProjectList event:', JSON.parse(JSON.stringify(updatedProjects)));
85+
},
86+
updateCurrentUser() {
87+
const token = localStorage.getItem('authToken');
88+
// ... existing code ...
9689
}
9790
}
9891
}
@@ -119,11 +112,13 @@ export default {
119112
<hr class="separator" />
120113
<ApiKeyManager :isLoggedIn="isLoggedIn" @session-expired="handleSessionExpired" />
121114
<hr class="separator" />
115+
<ProjectList @project-list-updated="handleProjectListUpdate" ref="projectList" />
116+
<hr class="separator" />
122117
<h2>Scan Operations</h2>
123-
<button @click="createDefaultProject" class="action-button create-button">Create Default Project</button>
124118
<ScanRunner
125119
ref="scanRunner"
126120
:isLoggedIn="isLoggedIn"
121+
:projects="projectsForScanRunner"
127122
@session-expired="handleSessionExpired"
128123
@project-selected="handleProjectSelectedForConfigManager"
129124
/>
@@ -142,69 +137,11 @@ export default {
142137
</div>
143138
</template>
144139

145-
<style>
146-
#app {
147-
font-family: Avenir, Helvetica, Arial, sans-serif;
148-
-webkit-font-smoothing: antialiased;
149-
-moz-osx-font-smoothing: grayscale;
150-
color: #2c3e50;
151-
margin-top: 60px;
152-
}
153-
154-
header {
155-
text-align: center;
156-
margin-bottom: 40px;
157-
position: relative;
158-
}
159-
160-
header img {
161-
width: 80px;
162-
height: 80px;
163-
}
164-
165-
.user-status {
166-
position: absolute;
167-
top: 10px;
168-
right: 20px;
169-
display: flex;
170-
align-items: center;
171-
font-size: 0.9em;
172-
}
173-
174-
.user-status span {
175-
margin-right: 10px;
176-
}
177-
178-
.user-status button {
179-
padding: 5px 10px;
180-
background-color: #dc3545;
181-
color: white;
182-
border: none;
183-
border-radius: 4px;
184-
cursor: pointer;
185-
}
186-
187-
main {
188-
max-width: 900px;
189-
margin: 0 auto;
190-
padding: 20px;
191-
}
192-
193-
.auth-section,
194-
.main-content {
195-
padding: 20px;
196-
border: 1px solid #e0e0e0;
197-
border-radius: 8px;
198-
background-color: #f9f9f9;
199-
}
200-
201-
.separator {
202-
margin: 40px 0;
203-
border: 0;
204-
border-top: 1px solid #e9ecef;
205-
}
206-
207-
main h2 {
208-
text-align: center;
140+
<style scoped>
141+
/* If App.vue has any specific scoped styles, they would remain here. */
142+
/* For example, if #app itself needed very specific App.vue-only styling */
143+
/* Based on current structure, likely no scoped styles needed here. */
144+
.app-container {
145+
/* Example if needed */
209146
}
210147
</style>

‎frontend/src/assets/global.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/* Global Styles */
2+
body {
3+
font-family: Avenir, Helvetica, Arial, sans-serif;
4+
-webkit-font-smoothing: antialiased;
5+
-moz-osx-font-smoothing: grayscale;
6+
color: #2c3e50;
7+
background-color: #f0f2f5; /* Slightly different background for distinction */
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
#app {
13+
margin-top: 60px;
14+
}
15+
16+
header {
17+
text-align: center;
18+
margin-bottom: 40px;
19+
position: relative;
20+
}
21+
22+
header img { /* If you have a logo */
23+
width: 80px;
24+
height: 80px;
25+
}
26+
27+
.user-status {
28+
position: absolute;
29+
top: 10px;
30+
right: 20px;
31+
display: flex;
32+
align-items: center;
33+
font-size: 0.9em;
34+
}
35+
36+
.user-status span {
37+
margin-right: 10px;
38+
}
39+
40+
.user-status button {
41+
padding: 5px 10px;
42+
background-color: #dc3545;
43+
color: white;
44+
border: none;
45+
border-radius: 4px;
46+
cursor: pointer;
47+
}
48+
49+
main {
50+
max-width: 900px;
51+
margin: 0 auto;
52+
padding: 20px;
53+
}
54+
55+
.auth-section,
56+
.main-content > div, /* Target direct children of main-content for card styling */
57+
.project-list-container /* Also style the new project list container similarly */
58+
{
59+
padding: 20px;
60+
border: 1px solid #e0e0e0;
61+
border-radius: 8px;
62+
background-color: #ffffff;
63+
margin-bottom: 25px;
64+
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
65+
}
66+
67+
.separator {
68+
margin: 40px 0;
69+
border: 0;
70+
border-top: 1px solid #e9ecef;
71+
}
72+
73+
main h2 {
74+
text-align: center;
75+
color: #333;
76+
margin-bottom: 20px;
77+
}
78+
79+
/* General button styling for consistency */
80+
.btn {
81+
cursor: pointer;
82+
padding: 0.375rem 0.75rem;
83+
font-size: 1rem;
84+
border-radius: 0.25rem;
85+
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
86+
text-decoration: none; /* Ensure buttons used as links look right */
87+
display: inline-block;
88+
font-weight: 400;
89+
line-height: 1.5;
90+
text-align: center;
91+
vertical-align: middle;
92+
user-select: none;
93+
border: 1px solid transparent;
94+
}
95+
96+
.btn-primary {
97+
color: #fff;
98+
background-color: #007bff;
99+
border-color: #007bff;
100+
}
101+
.btn-primary:hover {
102+
background-color: #0069d9;
103+
border-color: #0062cc;
104+
}
105+
106+
.btn-sm {
107+
padding: 0.25rem 0.5rem;
108+
font-size: .875rem;
109+
border-radius: 0.2rem;
110+
}
111+
112+
.btn-outline-danger {
113+
color: #dc3545;
114+
border-color: #dc3545;
115+
}
116+
.btn-outline-danger:hover {
117+
color: #fff;
118+
background-color: #dc3545;
119+
border-color: #dc3545;
120+
}
121+
122+
.action-button {
123+
padding: 8px 15px;
124+
margin: 5px;
125+
border-radius: 5px;
126+
cursor: pointer;
127+
font-size: 0.9em;
128+
}
129+
130+
.create-button {
131+
background-color: #28a745; /* Green */
132+
color: white;
133+
border: 1px solid #28a745;
134+
}
135+
136+
.text-danger {
137+
color: #dc3545 !important;
138+
}
139+
140+
.mb-3 {
141+
margin-bottom: 1rem !important;
142+
}
143+
144+
/* Utility classes often found in frameworks, good to have */
145+
.mt-4 {
146+
margin-top: 1.5rem !important;
147+
}
148+
149+
.text-center {
150+
text-align: center !important;
151+
}
152+
153+
.shadow-sm {
154+
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
155+
}
156+
157+
.my-4 {
158+
margin-top: 1.5rem!important;
159+
margin-bottom: 1.5rem!important;
160+
}
161+
162+
.p-4 {
163+
padding: 1.5rem !important;
164+
}

0 commit comments

Comments
 (0)