hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

All components now use typescript

Browse Source
This commit is contained in:
Chocobozzz
2018-12-21 17:10:39 +01:00
parent b409a5583d
commit b1aa589bc7
30 changed files with 1347 additions and 2247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
js/src/components/Category/Create.vue
View File

@@ -4,7 +4,9 @@
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title><translate>Create a new category</translate></v-toolbar-title>
<v-toolbar-title>
<translate>Create a new category</translate>
</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-form>
@@ -29,7 +31,9 @@
@change="onFilePicked"
>
</v-flex>
<v-btn color="primary" @click="create"><translate>Create category</translate></v-btn>
<v-btn color="primary" @click="create">
<translate>Create category</translate>
</v-btn>
</v-form>
</v-card-text>
</v-card>
@@ -38,50 +42,48 @@
</v-container>
</template>
<script>
import { UPLOAD_PICTURE } from '@/graphql/upload';
import { CREATE_CATEGORY } from '@/graphql/category';
<script lang="ts">
import { CREATE_CATEGORY } from '@/graphql/category';
import { Component, Vue } from 'vue-property-decorator';
export default {
name: 'create-category',
data() {
return {
title: '',
description: '',
image: {
url: '',
name: '',
file: '',
},
@Component
export default class CreateCategory extends Vue {
title = '';
description = '';
image = {
url: '',
name: '',
file: '',
};
},
methods: {
create() {
this.$apollo.mutate({
mutation: CREATE_CATEGORY,
variables: {
title: this.title,
description: this.description,
picture: this.$refs.image.files[0],
}
picture: (this.$refs['image'] as any).files[ 0 ],
},
}).then((data) => {
console.log(data);
}).catch((error) => {
console.error(error);
});
},
pickFile () {
this.$refs.image.click ()
},
}
pickFile() {
(this.$refs['image'] as any).click();
}
onFilePicked(e) {
const files = e.target.files;
if(files[0] === undefined || files[0].name.lastIndexOf('.') <= 0) {
console.error("File is incorrect")
if (files[ 0 ] === undefined || files[ 0 ].name.lastIndexOf('.') <= 0) {
console.error('File is incorrect');
}
this.image.name = files[0].name;
},
},
};
this.image.name = files[ 0 ].name;
}
};
</script>
<style>

57
js/src/components/Category/List.vue
View File

@@ -15,8 +15,12 @@
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text"><translate>Explore</translate></v-btn>
<v-btn flat class="red--text" v-on:click="deleteCategory(category.id)"><translate>Delete</translate></v-btn>
<v-btn flat class="orange--text">
<translate>Explore</translate>
</v-btn>
<v-btn flat class="red--text" v-on:click="deleteCategory(category.id)">
<translate>Delete</translate>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
@@ -30,37 +34,34 @@
</v-container>
</template>
<script>
import { FETCH_CATEGORIES } from '@/graphql/category';
<script lang="ts">
import { FETCH_CATEGORIES } from '@/graphql/category';
import { Component, Vue } from 'vue-property-decorator';
// TODO : remove this hardcode
// TODO : remove this hardcode
export default {
name: 'Home',
data() {
return {
categories: [],
loading: true,
HTTP_ENDPOINT: 'http://localhost:4000',
};
},
apollo: {
categories: {
query: FETCH_CATEGORIES,
@Component({
apollo: {
categories: {
query: FETCH_CATEGORIES,
},
},
},
methods: {
})
export default class List extends Vue {
categories = [];
loading = true;
HTTP_ENDPOINT = 'http://localhost:4000';
deleteCategory(categoryId) {
const router = this.$router;
eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
.then(() => {
this.categories = this.categories.filter(category => category.id !== categoryId);
router.push('/category');
});
},
},
};
// FIXME: remove eventFetch
// eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
// .then(() => {
// this.categories = this.categories.filter(category => category.id !== categoryId);
// router.push('/category');
// });
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->