Skip to content

Commit e49b4ee

Browse files
realstomanrealstoman
committed
Projects components refactoring
1 parent 23bb7e1 commit e49b4ee

File tree

7 files changed

+120
-127
lines changed

7 files changed

+120
-127
lines changed

‎src/components/projects/ProjectGallery.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
<script>
2+
export default {
3+
props: ['projectImages'],
4+
};
5+
</script>
6+
17
<template>
2-
<!-- Project gallery -->
38
<div class="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
49
<div
510
class="mb-10 sm:mb-0"
@@ -14,9 +19,3 @@
1419
</div>
1520
</div>
1621
</template>
17-
18-
<script>
19-
export default {
20-
props: ['projectImages'],
21-
};
22-
</script>

‎src/components/projects/ProjectHeader.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<script>
2+
export default {
3+
props: ['singleProjectHeader'],
4+
};
5+
</script>
6+
17
<template>
28
<div>
39
<!-- Project heading and meta info -->
@@ -30,9 +36,3 @@
3036
</div>
3137
</div>
3238
</template>
33-
34-
<script>
35-
export default {
36-
props: ['singleProjectHeader'],
37-
};
38-
</script>

‎src/components/projects/ProjectInfo.vue

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
1+
<script>
2+
import feather from 'feather-icons';
3+
4+
export default {
5+
props: ['projectInfo'],
6+
7+
mounted() {
8+
feather.replace();
9+
},
10+
updated() {
11+
feather.replace();
12+
},
13+
};
14+
</script>
15+
116
<template>
2-
<!-- Project information -->
317
<div class="block sm:flex gap-0 sm:gap-10 mt-14">
418
<!-- Single project left section details -->
519
<div class="w-full sm:w-1/3 text-left">
@@ -100,18 +114,3 @@
100114
</div>
101115
</div>
102116
</template>
103-
104-
<script>
105-
import feather from 'feather-icons';
106-
107-
export default {
108-
props: ['projectInfo'],
109-
110-
mounted() {
111-
feather.replace();
112-
},
113-
updated() {
114-
feather.replace();
115-
},
116-
};
117-
</script>

‎src/components/projects/ProjectRelatedProjects.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
<script>
2+
export default {
3+
props: ['relatedProject'],
4+
};
5+
</script>
6+
17
<template>
2-
<!-- Related projects -->
38
<div
49
class="mt-10 pt-10 sm:pt-14 sm:mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
510
>
@@ -20,9 +25,3 @@
2025
</div>
2126
</div>
2227
</template>
23-
24-
<script>
25-
export default {
26-
props: ['relatedProject'],
27-
};
28-
</script>

‎src/components/projects/ProjectSingle.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
<script>
2+
export default {
3+
props: ['project'],
4+
};
5+
</script>
6+
17
<template>
2-
<!-- Single project -->
38
<router-link
49
to="/projects/single-project"
510
class="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
@@ -26,10 +31,4 @@
2631
</router-link>
2732
</template>
2833

29-
<script>
30-
export default {
31-
props: ['project'],
32-
};
33-
</script>
34-
3534
<style lang="scss" scoped></style>

‎src/components/projects/ProjectsFilter.vue

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,3 @@
1-
<template>
2-
<div>
3-
<!-- Filter projects select -->
4-
<select
5-
@change="$emit('change', $event.target.value)"
6-
:name="select"
7-
:id="select"
8-
class="font-general-medium
9-
px-4
10-
py-2
11-
border-1 border-gray-200
12-
dark:border-secondary-dark
13-
rounded-lg
14-
text-sm
15-
sm:text-md
16-
bg-secondary-light
17-
dark:bg-ternary-dark
18-
text-primary-dark
19-
dark:text-ternary-light
20-
"
21-
>
22-
<option value class="text-sm sm:text-md">All Projects</option>
23-
<option
24-
v-for="option in selectOptions"
25-
:key="option"
26-
:value="option"
27-
class="text-normal sm:text-md"
28-
>
29-
{{ option }}
30-
</option>
31-
</select>
32-
</div>
33-
</template>
34-
351
<script>
362
export default {
373
props: {
@@ -53,4 +19,35 @@ export default {
5319
};
5420
</script>
5521

22+
<template>
23+
<select
24+
@change="$emit('change', $event.target.value)"
25+
:name="select"
26+
:id="select"
27+
class="font-general-medium
28+
px-4
29+
py-2
30+
border-1 border-gray-200
31+
dark:border-secondary-dark
32+
rounded-lg
33+
text-sm
34+
sm:text-md
35+
bg-secondary-light
36+
dark:bg-ternary-dark
37+
text-primary-dark
38+
dark:text-ternary-light
39+
"
40+
>
41+
<option value class="text-sm sm:text-md">All Projects</option>
42+
<option
43+
v-for="option in selectOptions"
44+
:key="option"
45+
:value="option"
46+
class="sm:text-md"
47+
>
48+
{{ option }}
49+
</option>
50+
</select>
51+
</template>
52+
5653
<style lang="scss" scoped></style>

‎src/components/projects/ProjectsGrid.vue

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,53 @@
1+
<script>
2+
import feather from 'feather-icons';
3+
import ProjectsFilter from './ProjectsFilter.vue';
4+
import ProjectSingle from './ProjectSingle.vue';
5+
import projects from '../../data/projects';
6+
7+
export default {
8+
components: { ProjectSingle, ProjectsFilter },
9+
data: () => {
10+
return {
11+
projects,
12+
projectsHeading: 'Projects Portfolio',
13+
selectedProject: '',
14+
searchProject: '',
15+
};
16+
},
17+
computed: {
18+
// Get the filtered projects
19+
filteredProjects() {
20+
if (this.selectedProject) {
21+
return this.filterProjectsByCategory();
22+
} else if (this.searchProject) {
23+
return this.filterProjectsBySearch();
24+
}
25+
return this.projects;
26+
},
27+
},
28+
methods: {
29+
// Filter projects by category
30+
filterProjectsByCategory() {
31+
return this.projects.map((item) => {
32+
let category =
33+
item.category.charAt(0).toUpperCase() +
34+
item.category.slice(1);
35+
console.log(category);
36+
return category.includes(this.selectedProject);
37+
});
38+
},
39+
// Filter projects by title search
40+
filterProjectsBySearch() {
41+
let project = new RegExp(this.searchProject, 'i');
42+
return this.projects.filter((el) => el.title.match(project));
43+
},
44+
},
45+
mounted() {
46+
feather.replace();
47+
},
48+
};
49+
</script>
50+
151
<template>
252
<!-- Projects grid -->
353
<section class="pt-10 sm:pt-14">
@@ -94,54 +144,4 @@
94144
</section>
95145
</template>
96146

97-
<script>
98-
import feather from 'feather-icons';
99-
import ProjectsFilter from './ProjectsFilter.vue';
100-
import ProjectSingle from './ProjectSingle.vue';
101-
import projects from '../../data/projects';
102-
103-
export default {
104-
components: { ProjectSingle, ProjectsFilter },
105-
data: () => {
106-
return {
107-
projects,
108-
projectsHeading: 'Projects Portfolio',
109-
selectedProject: '',
110-
searchProject: '',
111-
};
112-
},
113-
computed: {
114-
// Get the filtered projects
115-
filteredProjects() {
116-
if (this.selectedProject) {
117-
return this.filterProjectsByCategory();
118-
} else if (this.searchProject) {
119-
return this.filterProjectsBySearch();
120-
}
121-
return this.projects;
122-
},
123-
},
124-
methods: {
125-
// Filter projects by category
126-
filterProjectsByCategory() {
127-
return this.projects.map((item) => {
128-
let category =
129-
item.category.charAt(0).toUpperCase() +
130-
item.category.slice(1);
131-
console.log(category);
132-
return category.includes(this.selectedProject);
133-
});
134-
},
135-
// Filter projects by title search
136-
filterProjectsBySearch() {
137-
let project = new RegExp(this.searchProject, 'i');
138-
return this.projects.filter((el) => el.title.match(project));
139-
},
140-
},
141-
mounted() {
142-
feather.replace();
143-
},
144-
};
145-
</script>
146-
147147
<style scoped></style>

0 commit comments

Comments
 (0)