Skip to content

Commit 3b9c10b

Browse files
DannyFelizDannyFeliz
authored
Merge pull request #36 from VueDominicana/search-repo
2 parents 13730de + 61df4cb commit 3b9c10b

14 files changed

+384
-157
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"core-js": "^3.6.5",
1414
"lodash": "^4.17.15",
1515
"materialize-css": "^1.0.0-rc.2",
16+
"node-emoji": "^1.10.0",
1617
"vue": "^2.6.11",
1718
"vue-loading-overlay": "^3.3.2",
1819
"vue-router": "^3.1.6",

‎src/App.vue

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<template>
22
<div>
3-
<loading :active="isLoading" />
3+
<loading :active="isLoading" :opacity="0.9">
4+
<div class="loading-content">
5+
<span>Loading...</span>
6+
<p>Please wait until we get all the data.</p>
7+
</div>
8+
</loading>
49
<AppNav />
510
<div class="container">
611
<router-view />
@@ -30,7 +35,18 @@ export default {
3035
async mounted() {
3136
await this.$store.dispatch("App/setLoading", true);
3237
33-
await Promise.all([this.$store.dispatch("About/getDevelopers"), this.$store.dispatch("About/getRepositories")]);
38+
await Promise.all([
39+
this.$store.dispatch("Developers/getDevelopers"),
40+
this.$store.dispatch("Repositories/getRepositories")
41+
]);
42+
43+
this.$store.dispatch("About/developersWithMoreThanTenRepos");
44+
this.$store.dispatch("About/reposWithMoreThanOneStar");
45+
this.$store.dispatch("About/reposContributionAvg");
46+
this.$store.dispatch("About/reposLanguagesTotals");
47+
this.$store.dispatch("About/reposLanguages");
48+
this.$store.dispatch("About/mostPopularLanguages");
49+
this.$store.dispatch("About/lessUsedLanguages");
3450
3551
await this.$store.dispatch("App/setLoading", false);
3652
}
@@ -40,6 +56,11 @@ export default {
4056
<style lang="scss" scoped>
4157
@import "./assets/global";
4258
59+
.loading-content {
60+
display: flex;
61+
flex-direction: column;
62+
align-items: center;
63+
}
4364
.md-content {
4465
padding: 16px;
4566
height: 100%;

‎src/components/InputSearch.vue

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
<template>
2-
<div class="row">
3-
<form class="col s12">
4-
<div class="row">
5-
<div class="input-field col s12">
6-
<i class="material-icons prefix">search</i>
7-
<input id="search" type="text" class="validate" />
8-
<label for="search"> {{ label }} </label>
9-
</div>
10-
</div>
11-
</form>
2+
<div class="row input-search">
3+
<div class="input-field col s12">
4+
<i class="material-icons prefix">search</i>
5+
<input id="search" type="search" v-model="searchTerm" autocomplete="off" />
6+
<label for="search">{{ label }}</label>
7+
</div>
128
</div>
139
</template>
1410

@@ -20,36 +16,42 @@ export default {
2016
type: String,
2117
required: true
2218
}
19+
},
20+
data() {
21+
return {
22+
searchTerm: ""
23+
};
24+
},
25+
watch: {
26+
searchTerm(newVal) {
27+
this.$emit("input", newVal.trim());
28+
}
2329
}
2430
};
2531
</script>
2632

2733
<style lang="scss" scoped>
28-
/* label color */
29-
.input-field label {
30-
color: #039be5 !important;
31-
}
32-
/* label focus color */
33-
.input-field input[type="text"]:focus + label {
34-
color: #039be5 !important;
35-
}
36-
/* label underline focus color */
37-
.input-field input[type="text"]:focus {
38-
border-bottom: 1px solid #039be5 !important;
39-
box-shadow: 0 1px 0 0 #039be5 !important;
40-
}
41-
/* valid color */
42-
.input-field input[type="text"].valid {
43-
border-bottom: 1px solid #039be5 !important;
44-
box-shadow: 0 1px 0 0 #039be5 !important;
45-
}
46-
/* invalid color */
47-
.input-field input[type="text"].invalid {
48-
border-bottom: 1px solid #039be5 !important;
49-
box-shadow: 0 1px 0 0 #039be5 !important;
50-
}
51-
/* icon prefix focus color */
52-
.input-field .prefix.active {
53-
color: #039be5 !important;
34+
.input-search {
35+
margin-bottom: 0 !important;
36+
.input-field {
37+
label {
38+
color: #039be5 !important;
39+
}
40+
41+
input {
42+
&:focus {
43+
+ label {
44+
color: #039be5 !important;
45+
}
46+
47+
border-bottom: 1px solid #039be5 !important;
48+
box-shadow: 0 1px 0 0 #039be5 !important;
49+
}
50+
}
51+
52+
.prefix.active {
53+
color: #039be5 !important;
54+
}
55+
}
5456
}
5557
</style>

‎src/components/Languages.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,5 @@ export default {
4848
<style lang="scss" scoped>
4949
a {
5050
margin-right: 12px !important;
51-
&:hover {
52-
text-decoration: underline;
53-
}
5451
}
5552
</style>

‎src/components/PopularLanguages.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,12 @@
1616
</template>
1717

1818
<script>
19-
import { mapGetters } from "vuex";
20-
19+
import { mapState } from "vuex";
2120
export default {
2221
name: "PopularLanguages",
2322
computed: {
24-
...mapGetters({
25-
popularLanguages: "About/mostPopularLanguage"
23+
...mapState({
24+
popularLanguages: state => state.About.mostPopularLanguages
2625
})
2726
}
2827
};

‎src/components/RepositoryCard.vue

Lines changed: 79 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,89 @@
11
<template>
2-
<div>
3-
<div class="row">
4-
<div class="col s12 m12">
5-
<div class="card">
6-
<div class="card-content black-text">
7-
<header>
8-
<strong>#1</strong>
9-
<a href="#">Amejia481/Associate-Android-Developer-Certification</a>
10-
<div class="star">
2+
<div class="row">
3+
<div class="col s12 m12">
4+
<div class="card">
5+
<div class="card-content black-text">
6+
<header>
7+
<strong>#{{ repository.position }}</strong>
8+
<span>
9+
<a :href="repository.url" target="_blank">{{ repository.name }}</a>
10+
</span>
11+
<div class="star">
12+
<a :href="`${repository.url}/stargazers`" target="_blank">
1113
<i class="material-icons">star</i>
12-
<span>723</span>
13-
</div>
14-
</header>
15-
<p>
16-
All the info and materials about the certification that I've collected so far
17-
</p>
18-
</div>
19-
<div class="card-action languages">
20-
<languages :languages="'javascript c# random'" />
21-
</div>
22-
<div class="card-action user">
23-
<a href="#" class="center-items">
24-
<img
25-
class="responsive-img circle"
26-
width="32"
27-
src="https://avatars2.githubusercontent.com/u/773158?v=4&s=64"
28-
/>
29-
<span>ARTURO MEJIA</span>
30-
</a>
31-
<a href="#" class="center-items">
32-
<i class="material-icons">link</i>
33-
<span>Github Project</span>
34-
</a>
35-
</div>
14+
<span>{{ repository.stargazers }}</span>
15+
</a>
16+
</div>
17+
</header>
18+
<p>
19+
{{ repository.description | parseEmoji }}
20+
</p>
21+
</div>
22+
<div class="card-action languages">
23+
<languages :languages="repository.languages" />
24+
</div>
25+
<div class="card-action user">
26+
<a :href="`https://github.com/${developer.login}`" target="_blank" class="center-items">
27+
<img
28+
class="responsive-img circle"
29+
:alt="`${developer.name} profile image`"
30+
width="32"
31+
:src="developer.avatarUrl"
32+
/>
33+
<span>{{ developer.name }}</span>
34+
</a>
35+
<a :href="repository.url" class="center-items" target="_blank">
36+
<i class="material-icons">link</i>
37+
<span>Github Project</span>
38+
</a>
3639
</div>
3740
</div>
3841
</div>
3942
</div>
4043
</template>
4144

4245
<script>
46+
import emoji from "node-emoji";
47+
import { mapActions } from "vuex";
4348
import languages from "@/components/Languages";
4449
4550
export default {
4651
name: "Repository",
4752
components: {
4853
languages
54+
},
55+
props: {
56+
repository: {
57+
type: Object,
58+
required: true
59+
}
60+
},
61+
data() {
62+
return {
63+
developer: {}
64+
};
65+
},
66+
filters: {
67+
parseEmoji(text) {
68+
if (!text) {
69+
return text;
70+
}
71+
return emoji.emojify(text);
72+
}
73+
},
74+
watch: {
75+
repository: {
76+
async handler() {
77+
const username = this.repository.name.split("/")[0];
78+
this.developer = await this.getDeveloperByUsername(username);
79+
},
80+
immediate: true
81+
}
82+
},
83+
methods: {
84+
...mapActions({
85+
getDeveloperByUsername: "Developers/getDeveloperByUsername"
86+
})
4987
}
5088
};
5189
</script>
@@ -59,14 +97,17 @@ header {
5997
strong {
6098
margin-right: 20px;
6199
}
62-
a {
100+
span {
63101
flex: 1;
64102
}
65103
.star {
66-
display: flex;
67-
align-items: center;
68-
i {
69-
margin-right: 3px;
104+
a {
105+
color: black;
106+
display: flex;
107+
align-items: center;
108+
i {
109+
margin-right: 3px;
110+
}
70111
}
71112
}
72113
}

‎src/components/Statistics.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,19 +45,19 @@
4545
</template>
4646

4747
<script>
48-
import { mapGetters } from "vuex";
48+
import { mapState } from "vuex";
4949
5050
export default {
5151
name: "Statistics",
5252
computed: {
53-
...mapGetters({
54-
developers: "About/developers",
55-
repositories: "About/repositories",
56-
developersWithMoreThanTenRepos: "About/developersWithMoreThanTenRepos",
57-
reposWithMoreThanOneStar: "About/reposWithMoreThanOneStar",
58-
reposContributionAvg: "About/reposContributionAvg",
59-
reposLanguages: "About/reposLanguages",
60-
lessUsedLanguages: "About/lessUsedLanguages"
53+
...mapState({
54+
developers: state => state.Developers.developers,
55+
repositories: state => state.Repositories.repositories,
56+
developersWithMoreThanTenRepos: state => state.About.developersWithMoreThanTenRepos,
57+
reposWithMoreThanOneStar: state => state.About.reposWithMoreThanOneStar,
58+
reposContributionAvg: state => state.About.reposContributionAvg,
59+
reposLanguages: state => state.About.reposLanguages,
60+
lessUsedLanguages: state => state.About.lessUsedLanguages
6161
})
6262
}
6363
};

0 commit comments

Comments
 (0)