From da844e0a0803cdcbeebe08a42db5289fac44dc85 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Sun, 11 Mar 2018 12:45:52 +0100
Subject: [PATCH] Cleaner separation in components

---
 cuizin/js_src/components/EditForm.vue         | 160 +++++++++++++
 cuizin/js_src/components/ImportForm.vue       |  75 ++++++
 cuizin/js_src/components/New.vue              | 223 ------------------
 cuizin/js_src/router/index.js                 |   6 +-
 cuizin/js_src/rules.js                        |  13 +
 cuizin/js_src/{components => views}/Home.vue  |   0
 cuizin/js_src/views/New.vue                   |  39 +++
 .../js_src/{components => views}/Recipe.vue   |   0
 8 files changed, 290 insertions(+), 226 deletions(-)
 create mode 100644 cuizin/js_src/components/EditForm.vue
 create mode 100644 cuizin/js_src/components/ImportForm.vue
 delete mode 100644 cuizin/js_src/components/New.vue
 create mode 100644 cuizin/js_src/rules.js
 rename cuizin/js_src/{components => views}/Home.vue (100%)
 create mode 100644 cuizin/js_src/views/New.vue
 rename cuizin/js_src/{components => views}/Recipe.vue (100%)

diff --git a/cuizin/js_src/components/EditForm.vue b/cuizin/js_src/components/EditForm.vue
new file mode 100644
index 0000000..3dce31f
--- /dev/null
+++ b/cuizin/js_src/components/EditForm.vue
@@ -0,0 +1,160 @@
+<template>
+    <v-flex xs12>
+        <h2>{{ $t('new.add_manually') }}</h2>
+        <v-form v-model="isValidAdd">
+            <v-text-field
+                :label="$t('new.title')"
+                v-model="title"
+                required
+                :rules="[v => !!v || $t('new.title_is_required')]"
+                ></v-text-field>
+            <v-text-field
+                :label="$t('new.picture_url')"
+                v-model="picture_url"
+                :rules="urlRules"
+                ></v-text-field>
+            <v-text-field
+                :label="$t('new.short_description')"
+                v-model="short_description"
+                textarea
+                ></v-text-field>
+            <v-layout row wrap>
+                <v-flex xs12 md5>
+                    <v-text-field
+                        :label="$t('new.preparation_time')"
+                        v-model="preparation_time"
+                        type="number"
+                        :suffix="$t('new.mins')"
+                        ></v-text-field>
+                </v-flex>
+                <v-flex xs12 md5 offset-md2>
+                    <v-text-field
+                        :label="$t('new.cooking_time')"
+                        v-model="cooking_time"
+                        type="number"
+                        :suffix="$t('new.mins')"
+                        ></v-text-field>
+                </v-flex>
+            </v-layout>
+            <v-text-field
+                :label="$t('new.nb_persons')"
+                v-model="nb_person"
+                ></v-text-field>
+            <v-layout row>
+                <v-flex xs12 class="text-xs-left">
+                    <h3>{{ $t('new.ingredients') }}</h3>
+                    <v-list v-if="ingredients.length" class="transparent">
+                        <v-list-tile v-for="ingredient in ingredients" :key="ingredient">
+                            <v-list-tile-action>
+                                <v-btn flat icon color="red" v-on:click="() => removeIngredient(ingredient)">
+                                    <v-icon>delete</v-icon>
+                                </v-btn>
+                            </v-list-tile-action>
+                            <v-list-tile-content>
+                                <v-list-tile-title>{{ ingredient }}</v-list-tile-title>
+                            </v-list-tile-content>
+                        </v-list-tile>
+                    </v-list>
+                    <p class="ml-5 my-3" v-else>{{ $t('new.none') }}</p>
+                    <v-text-field
+                        :label="$t('new.add_ingredient')"
+                        v-model="new_ingredient"
+                        @keyup.enter.native="addIngredient"
+                        ></v-text-field>
+                </v-flex>
+            </v-layout>
+            <v-text-field
+                :label="$t('new.instructions')"
+                v-model="instructions"
+                :rules="[v => !!v || $t('new.instructions_are_required')]"
+                textarea
+                required
+                ></v-text-field>
+
+            <v-btn
+                @click="submitAdd"
+                :disabled="!isValidAdd || isImporting"
+                >
+                {{ $t('new.add') }}
+            </v-btn>
+        </v-form>
+    </v-flex>
+</template>
+
+<script>
+import * as api from '@/api';
+import * as rules from '@/rules';
+
+export default {
+    props: {
+        value: Boolean,
+    },
+    computed: {
+        isImporting: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit('input', val);
+            },
+        },
+    },
+    data() {
+        return {
+            url: null,
+            isValidAdd: false,
+            title: null,
+            picture_url: null,
+            short_description: null,
+            nb_person: null,
+            preparation_time: null,
+            cooking_time: null,
+            new_ingredient: null,
+            ingredients: [],
+            instructions: null,
+            urlRules: rules.url,
+        };
+    },
+    methods: {
+        addIngredient() {
+            this.ingredients.push(this.new_ingredient);
+            this.new_ingredient = null;
+        },
+        removeIngredient(ingredient) {
+            const index = this.ingredients.indexOf(ingredient);
+            if (index !== -1) {
+                this.ingredients.splice(index, 1);
+            }
+        },
+        submitAdd() {
+            this.isImporting = true;
+            api.postRecipeManually({
+                title: this.title,
+                picture_url: this.picture_url,
+                short_description: this.short_description,
+                preparation_time: this.preparation_time,
+                cooking_time: this.cooking_time,
+                nb_person: this.nb_person,
+                ingredients: this.ingredients,
+                instructions: this.instructions,
+            })
+                .then(response => this.$router.push({
+                    name: 'Recipe',
+                    params: {
+                        recipeId: response.recipes[0].id,
+                    },
+                }))
+                .catch((error) => {
+                    this.isImporting = false;
+                    this.error = error;
+                });
+        },
+    },
+};
+</script>
+
+<style scoped>
+.transparent {
+    background: transparent;
+}
+</style>
diff --git a/cuizin/js_src/components/ImportForm.vue b/cuizin/js_src/components/ImportForm.vue
new file mode 100644
index 0000000..ea173ea
--- /dev/null
+++ b/cuizin/js_src/components/ImportForm.vue
@@ -0,0 +1,75 @@
+<template>
+    <v-flex xs12>
+        <ErrorDialog v-model="error" :description="$t('error.unable_import_recipe')" />
+
+        <h2>{{ $t('new.import_from_url') }}</h2>
+        <v-form v-model="isValidImport">
+            <v-text-field
+                label="URL"
+                v-model="url"
+                required
+                :rules="requiredUrlRules"
+                ></v-text-field>
+            <v-btn
+                @click="submitImport"
+                :disabled="!isValidImport || isImporting"
+                >
+                {{ $t('new.import') }}
+            </v-btn>
+        </v-form>
+    </v-flex>
+</template>
+
+<script>
+import * as api from '@/api';
+import * as rules from '@/rules';
+
+import ErrorDialog from '@/components/ErrorDialog';
+
+export default {
+    props: {
+        value: Boolean,
+    },
+    computed: {
+        isImporting: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit('input', val);
+            },
+        },
+    },
+    components: {
+        ErrorDialog,
+    },
+    data() {
+        return {
+            error: null,
+            url: null,
+            isValidImport: false,
+            requiredUrlRules: Array.concat(
+                [],
+                [v => !!v || this.$t('new.url_is_required')],
+                rules.url,
+            ),
+        };
+    },
+    methods: {
+        submitImport() {
+            this.isImporting = true;
+            api.postRecipeByUrl({ url: this.url })
+                .then(response => this.$router.push({
+                    name: 'Recipe',
+                    params: {
+                        recipeId: response.recipes[0].id,
+                    },
+                }))
+                .catch((error) => {
+                    this.isImporting = false;
+                    this.error = error;
+                });
+        },
+    },
+};
+</script>
diff --git a/cuizin/js_src/components/New.vue b/cuizin/js_src/components/New.vue
deleted file mode 100644
index a0a7a09..0000000
--- a/cuizin/js_src/components/New.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<template>
-    <v-container text-xs-center v-if="isImporting">
-        <v-layout row wrap>
-            <Loader></Loader>
-
-            <v-flex xs12>
-                <p>{{ $t('new.importing') }}</p>
-            </v-flex>
-        </v-layout>
-    </v-container>
-    <v-container text-xs-center v-else class="panel">
-        <v-layout row wrap>
-            <ErrorDialog v-model="error" :description="$t('error.unable_import_recipe')" />
-
-            <v-flex xs12>
-                <h2>{{ $t('new.import_from_url') }}</h2>
-                <v-form v-model="isValidImport">
-                    <v-text-field
-                        label="URL"
-                        v-model="url"
-                        required
-                        :rules="requiredUrlRules"
-                        ></v-text-field>
-                    <v-btn
-                        @click="submitImport"
-                        :disabled="!isValidImport || isImporting"
-                        >
-                        {{ $t('new.import') }}
-                    </v-btn>
-                </v-form>
-            </v-flex>
-        </v-layout>
-        <v-layout row wrap mt-5>
-            <v-flex xs12>
-                <h2>{{ $t('new.add_manually') }}</h2>
-                <v-form v-model="isValidAdd">
-                    <v-text-field
-                        :label="$t('new.title')"
-                        v-model="title"
-                        required
-                        :rules="[v => !!v || $t('new.title_is_required')]"
-                        ></v-text-field>
-                    <v-text-field
-                        :label="$t('new.picture_url')"
-                        v-model="picture_url"
-                        :rules="urlRules"
-                        ></v-text-field>
-                    <v-text-field
-                        :label="$t('new.short_description')"
-                        v-model="short_description"
-                        textarea
-                        ></v-text-field>
-                    <v-layout row wrap>
-                        <v-flex xs12 md5>
-                            <v-text-field
-                                :label="$t('new.preparation_time')"
-                                v-model="preparation_time"
-                                type="number"
-                                :suffix="$t('new.mins')"
-                                ></v-text-field>
-                        </v-flex>
-                        <v-flex xs12 md5 offset-md2>
-                            <v-text-field
-                                :label="$t('new.cooking_time')"
-                                v-model="cooking_time"
-                                type="number"
-                                :suffix="$t('new.mins')"
-                                ></v-text-field>
-                        </v-flex>
-                    </v-layout>
-                    <v-text-field
-                        :label="$t('new.nb_persons')"
-                        v-model="nb_person"
-                        ></v-text-field>
-                    <v-layout row>
-                        <v-flex xs12 class="text-xs-left">
-                            <h3>{{ $t('new.ingredients') }}</h3>
-                            <v-list v-if="ingredients.length" class="transparent">
-                                <v-list-tile v-for="ingredient in ingredients" :key="ingredient">
-                                    <v-list-tile-action>
-                                        <v-btn flat icon color="red" v-on:click="() => removeIngredient(ingredient)">
-                                            <v-icon>delete</v-icon>
-                                        </v-btn>
-                                    </v-list-tile-action>
-                                    <v-list-tile-content>
-                                        <v-list-tile-title>{{ ingredient }}</v-list-tile-title>
-                                    </v-list-tile-content>
-                                </v-list-tile>
-                            </v-list>
-                            <p class="ml-5 my-3" v-else>{{ $t('new.none') }}</p>
-                            <v-text-field
-                                :label="$t('new.add_ingredient')"
-                                v-model="new_ingredient"
-                                @keyup.enter.native="addIngredient"
-                                ></v-text-field>
-                        </v-flex>
-                    </v-layout>
-                    <v-text-field
-                        :label="$t('new.instructions')"
-                        v-model="instructions"
-                        :rules="[v => !!v || $t('new.instructions_are_required')]"
-                        textarea
-                        required
-                        ></v-text-field>
-
-                    <v-btn
-                        @click="submitAdd"
-                        :disabled="!isValidAdd || isImporting"
-                        >
-                        {{ $t('new.add') }}
-                    </v-btn>
-                </v-form>
-            </v-flex>
-        </v-layout>
-    </v-container>
-</template>
-
-<script>
-import * as api from '@/api';
-
-import ErrorDialog from '@/components/ErrorDialog';
-import Loader from '@/components/Loader';
-
-
-export default {
-    components: {
-        ErrorDialog,
-        Loader,
-    },
-    data() {
-        const urlRules = [
-            (v) => {
-                if (!v) {
-                    return true;
-                }
-                try {
-                    new URL(v);  // eslint-disable-line no-new
-                    return true;
-                } catch (e) {
-                    return this.$t('new.url_must_be_valid');
-                }
-            },
-        ];
-        return {
-            error: null,
-            url: null,
-            isValidImport: false,
-            isImporting: false,
-            isValidAdd: false,
-            title: null,
-            picture_url: null,
-            short_description: null,
-            nb_person: null,
-            preparation_time: null,
-            cooking_time: null,
-            new_ingredient: null,
-            ingredients: [],
-            instructions: null,
-            requiredUrlRules: Array.concat(
-                [],
-                [v => !!v || this.$t('new.url_is_required')],
-                urlRules,
-            ),
-            urlRules,
-        };
-    },
-    methods: {
-        addIngredient() {
-            this.ingredients.push(this.new_ingredient);
-            this.new_ingredient = null;
-        },
-        removeIngredient(ingredient) {
-            const index = this.ingredients.indexOf(ingredient);
-            if (index !== -1) {
-                this.ingredients.splice(index, 1);
-            }
-        },
-        submitImport() {
-            this.isImporting = true;
-            api.postRecipeByUrl({ url: this.url })
-                .then(response => this.$router.push({
-                    name: 'Recipe',
-                    params: {
-                        recipeId: response.recipes[0].id,
-                    },
-                }))
-                .catch((error) => {
-                    this.isImporting = false;
-                    this.error = error;
-                });
-        },
-        submitAdd() {
-            this.isImporting = true;
-            api.postRecipeManually({
-                title: this.title,
-                picture_url: this.picture_url,
-                short_description: this.short_description,
-                preparation_time: this.preparation_time,
-                cooking_time: this.cooking_time,
-                nb_person: this.nb_person,
-                ingredients: this.ingredients,
-                instructions: this.instructions,
-            })
-                .then(response => this.$router.push({
-                    name: 'Recipe',
-                    params: {
-                        recipeId: response.recipes[0].id,
-                    },
-                }))
-                .catch((error) => {
-                    this.isImporting = false;
-                    this.error = error;
-                });
-        },
-    },
-};
-</script>
-
-<style scoped>
-.transparent {
-    background: transparent;
-}
-</style>
diff --git a/cuizin/js_src/router/index.js b/cuizin/js_src/router/index.js
index a9daf15..4cf7255 100644
--- a/cuizin/js_src/router/index.js
+++ b/cuizin/js_src/router/index.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import Home from '@/components/Home';
-import New from '@/components/New';
-import Recipe from '@/components/Recipe';
+import Home from '@/views/Home';
+import New from '@/views/New';
+import Recipe from '@/views/Recipe';
 
 Vue.use(Router);
 
diff --git a/cuizin/js_src/rules.js b/cuizin/js_src/rules.js
new file mode 100644
index 0000000..060549f
--- /dev/null
+++ b/cuizin/js_src/rules.js
@@ -0,0 +1,13 @@
+export const url = [
+    (v) => {
+        if (!v) {
+            return true;
+        }
+        try {
+            new URL(v);  // eslint-disable-line no-new
+            return true;
+        } catch (e) {
+            return this.$t('new.url_must_be_valid');
+        }
+    },
+];
diff --git a/cuizin/js_src/components/Home.vue b/cuizin/js_src/views/Home.vue
similarity index 100%
rename from cuizin/js_src/components/Home.vue
rename to cuizin/js_src/views/Home.vue
diff --git a/cuizin/js_src/views/New.vue b/cuizin/js_src/views/New.vue
new file mode 100644
index 0000000..9788408
--- /dev/null
+++ b/cuizin/js_src/views/New.vue
@@ -0,0 +1,39 @@
+<template>
+    <v-container text-xs-center v-if="isImporting">
+        <v-layout row wrap>
+            <Loader></Loader>
+
+            <v-flex xs12>
+                <p>{{ $t('new.importing') }}</p>
+            </v-flex>
+        </v-layout>
+    </v-container>
+    <v-container text-xs-center v-else class="panel">
+        <v-layout row wrap>
+            <ImportForm v-model="isImporting"></ImportForm>
+        </v-layout>
+        <v-layout row wrap mt-5>
+            <EditForm v-model="isImporting"></EditForm>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+import EditForm from '@/components/EditForm';
+import ImportForm from '@/components/ImportForm';
+import Loader from '@/components/Loader';
+
+
+export default {
+    components: {
+        EditForm,
+        ImportForm,
+        Loader,
+    },
+    data() {
+        return {
+            isImporting: false,
+        };
+    },
+};
+</script>
diff --git a/cuizin/js_src/components/Recipe.vue b/cuizin/js_src/views/Recipe.vue
similarity index 100%
rename from cuizin/js_src/components/Recipe.vue
rename to cuizin/js_src/views/Recipe.vue