work on planner templates in progress

web/vue/src/App.vue

@@ -1,30 +1,53 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-    <p>{{ items }}</p>
+    <section class="section has-background-primary" id="heading">
+      <Heading msg="Cook-Assistant"/>
+    </section>
+    <section class="section" id="recipes-view">
+      <p v-if="is_loading">Loading...</p>
+      <h2 v-else class="subtitle">Livre de recettes</h2>
+      <div class="container">
+        <keep-alive>
+        <RecipeDetails v-if="active_view > -1"
+          v-bind:item="items[active_view]"
+          v-on:close="closeActiveView" />
+        <RecipeList v-else
+          v-bind:items="items"
+          v-on:open-details="setActiveView" />
+        </keep-alive>
+      </div>
+    </section>
+    <section class="section has-background-grey-lighter" id="planner-view">
+      <h2 class="subtitle">Planning</h2>
+    </section>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import 'bulma/css/bulma.css'
+import Heading from './components/Heading.vue'
 import RecipeDetails from './components/RecipeDetails.vue'
+import RecipeList from './components/RecipeList.vue'
+
+
 
 export default {
   name: 'app',
   components: {
-    HelloWorld,
-    RecipeDetails
+    Heading,
+    RecipeDetails,
+    RecipeList,
   },
-  data() {
+  data () {
     return {
-      items: []
+      is_loading: true,
+      items: [],
+      // Index of the item
+      // activated for details view
+      active_view: -1,
     }
   },
   methods: {
-    setActiveCategory: function(id) {
-      this.active_category = id;
-    },
     setActiveView: function(idx) {
       this.active_view = idx;
     },
@@ -47,19 +70,15 @@ export default {
     fetchRecipesList: function() {
       fetch("http://localhost:8000/api/list")
         .then((res) => res.json())
-        .then((data) => this.items = data)
+        .then((data) => {
+          this.items = data;
+          this.is_loading = false;
+        })
         .catch(function(err) {
           console.error(err);
         });
     }
   },
-  computed: {
-    displayed: function() {
-        return this.items.filter(
-          rec => rec.category == this.active_category
-        );
-    }
-  },
   mounted () {
     this.fetchRecipesList();
   }

web/vue/src/components/Heading.vue

@@ -0,0 +1,16 @@
+<template>
+    <h1 class="title">{{ msg }}</h1>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

web/vue/src/components/HelloWorld.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

web/vue/src/components/RecipeDetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box">
+  <div class="container box">
   <button @click="$emit('close')" class="button is-pulled-right">X close</button>
     <h4 class="title">{{ item.title }}</h4>
     <h6 class="subtitle">{{ categories[item.category].name }}</h6>
@@ -15,8 +15,21 @@
 </template>
 
 <script>
-
 export default {
   name: 'RecipeDetails',
-  props: ['item'],
+  props: {
+    item: {
+      type: Object,
+      required: true,
+      default () {
+        return {id: 0, title: "", category: 0, ingredients: ""};
+      },
+    }
+  },
+  data () {
+    return {
+      categories: ["test", "test", "test"],
+    }
+  }
 }
+</script>

web/vue/src/components/RecipeList.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div v-if="active_category == -1" class="columns">
+      <div v-for="c in categories" :key="c.id" class="column">
+        <button @click="setActiveCategory(c.id)" class="button is-large is-primary has-text-dark">{{ c.name }}</button>
+      </div>
+    </div>
+    <div v-else class="box">
+      <button @click="setActiveCategory(-1)" class="button is-pulled-left"><< back</button>
+      <h2 class="subtitle">{{ categories[active_category].name }}</h2>
+      <ul>
+        <li v-for="item in displayed" :key="item.id">
+          <a href=""
+             @click.prevent="$emit(
+               'open-details',
+               items.findIndex((i) => i.id ==item.id))">
+          {{ item.title }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export const categories = [
+  {id: 0, name: "Petit-déjeuner"},
+  {id: 1, name: "Entrée"},
+  {id: 2, name: "Plat principal"},
+  {id: 3, name: "Dessert"}
+];
+
+export default {
+  name: 'RecipeList',
+  props: ["items"],
+  data () {
+    return {
+      active_category: -1,
+      categories,
+    }
+  },
+  methods: {
+    setActiveCategory: function(id) {
+      this.active_category = id;
+    },
+  },
+  computed: {
+    displayed: function() {
+        return this.items.filter(
+          rec => rec.category == this.active_category
+        );
+    }
+  },
+}
+</script>