Move to GraphQL

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Category/Create.vue

@@ -1,42 +1,87 @@
 <template>
-  <div>
-    <h3>Create a new category</h3>
-    <v-form>
-      <v-text-field
-        label="Name of the category"
-        v-model="category.title"
-        :counter="100"
-        required
-      ></v-text-field>
-    </v-form>
-    <v-btn color="primary" @click="create">Create category</v-btn>
-  </div>
+  <v-container fluid fill-height>
+    <v-layout align-center justify-center>
+      <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>
+          <v-card-text>
+            <v-form>
+              <v-text-field
+                :label="$gettext('Name of the category')"
+                v-model="title"
+                :counter="100"
+                required
+              ></v-text-field>
+              <v-textarea
+                :label="$gettext('Description')"
+                v-model="description"
+              ></v-textarea>
+              <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
+                <v-img :src="image.url" height="150" v-if="image.url" aspect-ratio="1" contain/>
+                <v-text-field label="Select Image" @click='pickFile' v-model='image.name' prepend-icon='attach_file'></v-text-field>
+                <input
+                  type="file"
+                  style="display: none"
+                  ref="image"
+                  accept="image/*"
+                  @change="onFilePicked"
+                >
+              </v-flex>
+              <v-btn color="primary" @click="create"><translate>Create category</translate></v-btn>
+            </v-form>
+          </v-card-text>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </v-container>
 </template>
 
 <script>
-  import eventFetch from '@/api/eventFetch';
+import { UPLOAD_PICTURE } from '@/graphql/upload';
+import { CREATE_CATEGORY } from '@/graphql/category';
 
-  export default {
-    name: 'create-category',
-    data() {
-      return {
-        category: {
-          title: '',
-        },
-      };
-    },
-    methods: {
-      create() {
-        const router = this.$router;
-        eventFetch('/categories', this.$store, { method: 'POST', body: JSON.stringify({ category: this.category }) })
-          .then(response => response.json())
-          .then(() => {
-            this.loading = false;
-            router.push('/category')
-          });
+export default {
+  name: 'create-category',
+  data() {
+    return {
+      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],
+        }
+      }).then((data) => {
+        console.log(data);
+      }).catch((error) => {
+        console.error(error);
+      });
     },
-  };
+    pickFile () {
+      this.$refs.image.click ()
+    },
+    onFilePicked(e) {
+      const files = e.target.files;
+      if(files[0] === undefined || files[0].name.lastIndexOf('.') <= 0) {
+					console.error("File is incorrect")
+      }
+      this.image.name = files[0].name;
+    },
+  },
+};
 </script>
 
 <style>

js/src/components/Category/List.vue

@@ -1,14 +1,13 @@
 <template>
   <v-container>
     <h1>Category List</h1>
-
-    <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
     <v-container fluid grid-list-md class="grey lighten-4">
-      <v-layout row wrap v-if="!loading">
+      <v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
+      <v-layout row wrap v-else>
         <v-flex xs12 sm6 md3 v-for="category in categories" :key="category.id">
           <v-card>
-            <v-card-media v-if="category.image" :src="'/images/categories/' + category.image.name" height="200px">
-            </v-card-media>
+            <v-img v-if="category.picture.url" :src="HTTP_ENDPOINT + category.picture.url" height="200px">
+            </v-img>
             <v-card-title primary-title>
               <div>
                 <h3 class="headline mb-0">{{ category.title }}</h3>
@@ -16,8 +15,8 @@
               </div>
             </v-card-title>
             <v-card-actions>
-              <v-btn flat class="orange--text">Explore</v-btn>
-              <v-btn flat class="red--text" v-on:click="deleteCategory(category.id)">Delete</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>
@@ -32,40 +31,36 @@
 </template>
 
 <script>
-  import eventFetch from '@/api/eventFetch';
+import { FETCH_CATEGORIES } from '@/graphql/category';
 
-  export default {
-    name: 'Home',
-    data() {
-      return {
-        categories: [],
-        loading: true,
-      };
+// TODO : remove this hardcode
+
+
+export default {
+  name: 'Home',
+  data() {
+    return {
+      categories: [],
+      loading: true,
+      HTTP_ENDPOINT: 'http://localhost:4000',
+    };
+  },
+  apollo: {
+    categories: {
+      query: FETCH_CATEGORIES,
     },
-    created() {
-      this.fetchData();
-    },
-    methods: {
-      fetchData() {
-        eventFetch('/categories', this.$store)
-          .then(response => response.json())
-          .then((response) => {
-            this.loading = false;
-            this.categories = response.data;
-          });
-      },
-      deleteCategory(categoryId) {
-        const router = this.$router;
-        eventFetch('/categories/' + categoryId, this.$store, {method: 'DELETE'})
-          .then(() => {
-          this.categories = this.categories.filter((category) => {
-            return category.id !== categoryId;
-          });
+  },
+  methods: {
+    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');
         });
-      }
     },
-  };
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->