work on planner templates in progress

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>