feature/event-form: add form

README.md

@@ -1,5 +1,14 @@
 # recepybook
 
+## Team
+- Osiris
+- Simon
+- ~~Jessy~~
+- ~~Seppe~~
+
+## Directus URL
+http://phpstack-266425-1191335.cloudwaysapps.com/admin
+
 ## Project setup
 ```
 npm install

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@braid/vue-formulate": "^2.2.8",
     "@directus/sdk-js": "^6.0.5",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5"
@@ -14,8 +15,21 @@
   "devDependencies": {
     "@vue/cli-plugin-router": "~4.2.0",
     "@vue/cli-service": "~4.2.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^2.0.5",
     "vue-template-compiler": "^2.6.11"
   },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "plugin:vue/essential",
+      "plugin:prettier/recommended",
+      "eslint:recommended"
+    ]
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions"

src/App.vue

@@ -1,45 +1,44 @@
 <template>
-    <div id="app">
-        <div id="mySidenav" class="sidenav">
-            <a href="javascript:void(0)" class="closebtn">SCOUTS</a>
-            <router-link to="/">Home</router-link>
-            <router-link to="/events">Events</router-link>
-            <router-link to="/recipes">Recipes</router-link>
-            <router-link to="/create">Create</router-link>
-        </div>
-        <div v-if="!loggedIn">Loading...</div>
-        <router-view v-if="loggedIn" />
-
-        <!-- <router-view :directusClient="directusClient" :loggedIn="loggedIn" /> -->
+  <div id="app">
+    <div id="mySidenav" class="sidenav">
+      <a href="javascript:void(0)" class="closebtn">SCOUTS</a>
+      <router-link to="/">Home</router-link>
+      <router-link to="/events">Events</router-link>
+      <router-link to="/recipes">Recipes</router-link>
+      <router-link to="/create">Create</router-link>
     </div>
+    <div v-if="!loggedIn">Loading...</div>
+    <main>
+      <router-view v-if="loggedIn" />
+    </main>
+    <!-- <router-view :directusClient="directusClient" :loggedIn="loggedIn" /> -->
+  </div>
 </template>
 
 <script>
-import DirectusSDK from '@directus/sdk-js';
+import DirectusSDK from "@directus/sdk-js";
 
 export default {
-    name: 'App',
-    created() {
-        const client = new DirectusSDK();
+  name: "App",
+  created() {
+    const client = new DirectusSDK();
 
-        client
-            .login({
-                url: 'http://phpstack-266425-1191335.cloudwaysapps.com/',
-                project: 'recipe-book',
-                email: 'admin@admin.com',
-                password: 'admin3',
-            })
-            .then(() => {
-                this.$root.directusClient = client;
-                this.loggedIn = true;
-            });
-    },
-    data() {
-        return {
-            loggedIn: false,
-        };
-    },
+    client
+      .login({
+        url: "http://phpstack-266425-1191335.cloudwaysapps.com/",
+        project: "recipe-book",
+        email: "admin@admin.com",
+        password: "admin3",
+      })
+      .then(() => {
+        this.$root.directusClient = client;
+        this.loggedIn = true;
+      });
+  },
+  data() {
+    return {
+      loggedIn: false,
+    };
+  },
 };
 </script>
-
-<style></style>

src/assets/styles/main.css

@@ -11,6 +11,10 @@ body {
     color: #2c3e50;
 }
 
+main {
+    padding-left: 10rem;
+}
+
 .main-container {
     display: flex;
     justify-content: space-between;
@@ -29,7 +33,7 @@ body {
 
 .sidenav {
     height: 100%;
-    width: 17%;
+    width: 10rem;
     position: fixed;
     z-index: 1;
     top: 0;
@@ -91,7 +95,7 @@ body {
 }
 
 strong {
-    font-weight: bold; 
+    font-weight: bold;
 }
 
 
@@ -101,7 +105,7 @@ table {
     margin: 30px auto;
     text-align: left;
     width: 100%;
-}   
+}
 
 th {
     background-color: #999;
@@ -124,3 +128,4 @@ tr:nth-child(even) {
 tr:nth-child(odd) {
     background-color: #fff;
 }
+

src/main.js

@@ -1,16 +1,19 @@
-import Vue from 'vue';
-import App from './App.vue';
-import router from './router';
-import './assets/styles/main.css';
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import "../node_modules/@braid/vue-formulate/dist/snow.min.css";
+import "./assets/styles/main.css";
+import VueFormulate from "@braid/vue-formulate";
 
 Vue.config.productionTip = false;
+Vue.use(VueFormulate);
 
 new Vue({
-    router,
-    render: function(h) {
-        return h(App);
-    },
-    data: {
-        directusClient: false,
-    },
-}).$mount('#app');
+  router,
+  render: function (h) {
+    return h(App);
+  },
+  data: {
+    directusClient: false,
+  },
+}).$mount("#app");

src/router/index.js

@@ -4,92 +4,82 @@ import VueRouter from 'vue-router';
 Vue.use(VueRouter);
 
 const routes = [
-	{
-		path: '/',
-		name: 'Home',
-		component: function() {
-			return import('../views/Home.vue');
-		}
-	},
-	{
-		path: '/recipes',
-		name: 'Recipes',
+    {
+        path: '/',
+        name: 'Home',
+        component: function () {
+            return import('../views/Home.vue');
+        }
+    },
+    {
+        path: '/recipes',
+        name: 'Recipes',
 
-		component: function() {
-			return import('../views/Recipes.vue');
-		}
-	},
-	{
-		path: '/events',
-		name: 'Events',
+        component: function () {
+            return import('../views/Recipes.vue');
+        }
+    },
+    {
+        path: '/events',
+        name: 'Events',
 
-		component: function() {
-			return import('../views/Events.vue');
-		}
-	},
-	{
-		path: '/create',
-		name: 'Create',
+        component: function () {
+            return import('../views/Events.vue');
+        }
+    },
+    {
+        path: '/create',
+        name: 'Create',
 
-		component: function() {
-			return import('../views/Create.vue');
-		},
+        component: function () {
+            return import('../views/Create.vue');
+        },
 
-		children: [
-			{
-				path: 'recipe',
-				name: 'Newrecipe',
-				component: function() {
-					return import('../views/create/NewRecipe');
-				}
-			},
-			{
-				path: 'event',
-				name: 'NewEvent',
-				component: function() {
-					return import('../views/create/NewEvent');
-				}
-			},
-			{
-				path: 'review',
-				name: 'NewReview',
-				component: function() {
-					return import('../views/create/NewReview');
-				}
-			}
-		]
-	},
-	{
-		path: '/edit',
-		name: 'Edit',
+        children: [
+            {
+                path: 'recipe',
+                name: 'Newrecipe',
+                component: function () {
+                    return import('../views/create/NewRecipe');
+                }
+            },
+            {
+                path: 'event',
+                name: 'NewEvent',
+                component: function () {
+                    return import('../views/create/NewEvent');
+                }
+            },
+            {
+                path: 'review',
+                name: 'NewReview',
+                component: function () {
+                    return import('../views/create/NewReview');
+                }
+            }
+        ]
+    },
+    {
+        path: '/edit/recipe/:id',
+        name: 'EditRecipe',
+        component: function () {
+            return import('../views/edit/EditRecipe');
+        }
+    },
+    {
+        path: '/edit/event/:id',
+        name: 'EditEvent',
+        component: function () {
+            return import('../views/edit/EditEvent');
+        }
+    }
 
-		component: function() {
-			return import('../views/Edit.vue');
-		},
-
-		children: [
-			{
-				path: 'recipe',
-				name: 'EditRecipe',
-				component: function() {
-					return import('../views/edit/EditRecipe');
-				}
-			},
-			{
-				path: 'event',
-				name: 'EditEvent',
-				component: function() {
-					return import('../views/edit/EditEvent');
-				}
-			}
-		]
-	}
 ];
 
 const router = new VueRouter({
-	mode: 'history',
-	base: process.env.BASE_URL,
-	routes
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
 });
 
 export default router;

src/views/Events.vue

@@ -10,7 +10,7 @@
                     <div>
                         <table>
                             <thead>
-                                <tr>               
+                                <tr>
                                     <th>ID</th>
                                     <th>Name</th>
                                     <th>Creation date</th>
@@ -27,7 +27,7 @@
                                 <td>{{events.start_dt}}</td>
                                 <td>{{events.end_dt}}</td>
                                 <td>{{events.description}}</td>
-                                <td><router-link :to="'/edit/EditEvent/' + events.id">Edit this event!</router-link></td>
+                                <td><router-link :to="'/edit/event/' + events.id">Edit this event!</router-link></td>
                                 <td><router-link :to="'/create/review/' + events.id">Add a review!</router-link></td>
                             </tr>
                             </tbody>
@@ -88,4 +88,4 @@ export default {
     font-weight: bold;
     color: #2c3e50;
 }
-</style>
+</style>

src/views/edit/EditEvent.vue

@@ -1,19 +1,82 @@
 <template>
-  <div>
-    <hr />
-    <h1>Edit an Event</h1>
-    <label for="e-name" class="name">Select Event</label>
-    <input list="events" />
-    <datalist id="events">
-      <option value="events"></option>
-    </datalist>
-    <br />
-    <label for class="start-dt">Start date</label>
-    <input type="date" name="start-dt" id />
-    <br />
-    <label for="end-dt" class="end-dt">End date</label>
-    <input type="date" name="end-dt" id />
-    <br />
-    <h2>recipes</h2>
+  <div class="edit-event-page">
+    <FormulateForm v-model="event" @submit="saveEvent">
+      <FormulateInput type="hidden" name="id" />
+      <FormulateInput
+        label="Created On"
+        type="text"
+        name="created_on"
+        disabled="true"
+      />
+      <FormulateInput
+        label="Name"
+        type="text"
+        name="name"
+        validation="required|max:50"
+      />
+      <FormulateInput
+        label="Description"
+        type="textarea"
+        name="description"
+        validation="required|max:500"
+      />
+      <FormulateInput
+        label="Start Date"
+        type="date"
+        name="start_dt"
+        validation="required"
+      />
+      <FormulateInput
+        label="End Date"
+        type="date"
+        name="end_dt"
+        :validation="`required|after:${event.start_dt}`"
+      />
+      <FormulateInput type="submit" label="Save" />
+    </FormulateForm>
   </div>
 </template>
+
+<script>
+export default {
+  name: "EditEvent",
+  created() {
+    this.$root.directusClient
+      .getItems("events", {
+        filter: {
+          id: {
+            eq: this.$route.params.id,
+          },
+        },
+        fields: "*.*",
+      })
+      .then(
+        function (result) {
+          if (!result.data) {
+            throw new Error("Could not find event");
+          }
+          this.event = result.data[0];
+        }.bind(this) // if this is not bound you can not access this in the callback (you could also use an arrow function
+      )
+      .catch(function (error) {
+        console.error(error);
+      });
+  },
+  data() {
+    return {
+      event: {},
+    };
+  },
+  methods: {
+    saveEvent(data) {
+      this.$root.directusClient.updateItem("events", data.id, data);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.edit-event-page {
+  padding: 2rem 4rem;
+}
+</style>