Skip to content
Permalink
Browse files

added framework chips

  • Loading branch information...
garywoodfine committed Nov 7, 2019
1 parent 807b268 commit 60f316597d2647e6818a3e16c1a927e2e938eee1
Showing with 123 additions and 15 deletions.
  1. +12 −12 package-lock.json
  2. +90 −3 src/components/profile/Framework.vue
  3. +7 −0 src/graphql/queries/skillQueries.js
  4. +14 −0 src/views/resume/Overview.vue

Some generated files are not rendered by default. Learn more.

@@ -1,11 +1,98 @@
<template>
<mdb-container>
<section>
<mdb-row>
<mdb-col md="8" xl="10">
<mdb-select search v-model="frameworks"
id="framework"
label="Frameworks"
v-on:getValue="selectedFramework"/>
</mdb-col>
<mdb-col md="4" xl="1" >
<mdb-btn v-on:click="add" floating gradient="green" tag="a" size="sm" >
<mdb-icon icon="plus"></mdb-icon>
</mdb-btn>

</mdb-col>
</mdb-row>
<mdb-row>
<mdb-col md="12" xl="12">
<mdb-chip v-for="framework in skills" pill size="md"
v-bind:key="framework"
v-bind:title="framework"
tag="a"
color="blue lighten-2" text="white" close v-on:closeChip="remove"
>{{ framework }}</mdb-chip>
</mdb-col>
</mdb-row>
</section>
</mdb-container>

</template>

<script>
export default {
name: 'Framework'
};
import {
mdbContainer,
mdbRow,
mdbCol,
mdbIcon,
mdbBtn,
mdbSelect,
mdbChip,
}
from 'mdbvue';
import { GET_FRAMEWORKS_QUERY } from '@/graphql/queries/skillQueries';
export default {
name: 'Framework',
props: {
skills: {
type: Array,
},
},
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbIcon,
mdbBtn,
mdbSelect,
mdbChip,
},
data() {
return {
frameworks: [],
framework: '',
};
},
async mounted() {
this.$apollo.query({ query: GET_FRAMEWORKS_QUERY })
.then((response) => {
response.data.frameworks.forEach((framework) => {
this.frameworks.push({ text: framework.Name, value: framework.Name });
});
});
this.frameworks.sort();
},
methods: {
selectedFramework(value) {
this.framework = value;
},
add() {
if ((this.framework !== undefined) && (this.framework !== '')) {
this.$emit('add', this.framework);
this.framework = '';
}
},
remove(chip) {
if (chip !== undefined) {
this.$emit('remove', chip);
}
},
},
};
</script>

<style scoped>
@@ -7,3 +7,10 @@ export const GET_LANGUAGES_QUERY = gql`
name
}
}`;

export const GET_FRAMEWORKS_QUERY = gql`
query getFrameworks {
frameworks( where: { Active: true } ) {
Name
}
}`;
@@ -9,6 +9,9 @@
<language :skills="profile.languages"
v-on:add="addLanguage"
v-on:remove="removeLanguage"></language>
<framework :skills="profile.frameworks"
v-on:add="addFramework"
v-on:remove="removeFramework"></framework>
</mdb-col>
</mdb-row>

@@ -33,6 +36,7 @@ import {
mdbBtn,
}
from 'mdbvue';
import Framework from '@/components/profile/Framework.vue';
import Profile from '@/components/profile/Profile.vue';
import Language from '@/components/profile/Language.vue';
import { Auth } from '@/firebase/auth';
@@ -43,6 +47,7 @@ export default {
components: {
Profile,
Language,
Framework,
mdbContainer,
mdbRow,
mdbCol,
@@ -76,10 +81,19 @@ export default {
this.profile.languages.push(lang);
this.saveProfile();
},
addFramework(framework) {
if (this.profile.frameworks === undefined) this.profile.frameworks = [];
this.profile.frameworks.push(framework);
this.saveProfile();
},
removeLanguage(chip) {
this.profile.languages.pop(chip);
this.saveProfile();
},
removeFramework(chip) {
this.profile.frameworks.pop(chip);
this.saveProfile();
},
saveProfile() {
DB.collection('users')
.doc(Auth.currentUser.uid)

0 comments on commit 60f3165

Please sign in to comment.
You can’t perform that action at this time.