FRMDP · bemonee · Oct 20, 2018
diff --git a/tp6-rpereyra/.gitignore b/tp6-rpereyra/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
diff --git a/tp6-rpereyra/README.md b/tp6-rpereyra/README.md
@@ -0,0 +1,26 @@
+# tp5
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
diff --git a/tp6-rpereyra/babel.config.js b/tp6-rpereyra/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/tp6-rpereyra/package-lock.json b/tp6-rpereyra/package-lock.json
diff --git a/tp6-rpereyra/package.json b/tp6-rpereyra/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "tp6",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "material-design-icons-iconfont": "^3.0.3",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.3.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.4",
+    "@vue/cli-plugin-eslint": "^3.0.4",
+    "@vue/cli-service": "^3.0.4",
+    "vue-template-compiler": "^2.5.17"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/tp6-rpereyra/public/assets/bootstrap/bootstrap.min.css b/tp6-rpereyra/public/assets/bootstrap/bootstrap.min.css
diff --git a/tp6-rpereyra/public/favicon.ico b/tp6-rpereyra/public/favicon.ico
diff --git a/tp6-rpereyra/public/index.html b/tp6-rpereyra/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="<%= BASE_URL %>assets/bootstrap/bootstrap.min.css">
+
+    <title>tp6-rpereyra</title>
+  </head>
+  <body class="bg-dark text-white">
+    <noscript>
+      <strong>We're sorry but tp5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/tp6-rpereyra/src/App.vue b/tp6-rpereyra/src/App.vue
@@ -0,0 +1,58 @@
+<template>
+  <main id="app">
+    <v-app id="inspire" dark>
+      <v-navigation-drawer clipped fixed v-model="drawer" app>
+        <v-list dense>
+          <router-link :to="{ name: 'persons' }">
+            <v-list-tile>
+              <v-list-tile-action>
+                <v-icon>group</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-content>
+                <v-list-tile-title>Persons</v-list-tile-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </router-link>
+        </v-list>
+      </v-navigation-drawer>
+      <v-toolbar app fixed clipped-left>
+        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+        <v-toolbar-title>Persons Managment</v-toolbar-title>
+      </v-toolbar>
+      <v-content>
+        <v-container fluid fill-height>
+          <router-view
+            :parentPossibleGenders="possibleGenders"
+          ></router-view>
+        </v-container>
+      </v-content>
+    </v-app>
+  </main>
+</template>
+
+<script>
+import PersonForm from "./components/PersonForm.vue";
+import PersonTable from "./components/PersonTable.vue";
+
+export default {
+  name: "app",
+  components: {
+    PersonForm,
+    PersonTable
+  },
+  data() {
+    return {
+      possibleGenders: ["m", "f"], // "Les disputades" compatibility
+      drawer: true
+    };
+  }
+};
+</script>
+
+<style>
+a,
+a:hover {
+  color: #ffffff !important;
+  text-decoration: none;
+}
+</style>
diff --git a/tp6-rpereyra/src/assets/logo.png b/tp6-rpereyra/src/assets/logo.png
diff --git a/tp6-rpereyra/src/components/GenderFilter.vue b/tp6-rpereyra/src/components/GenderFilter.vue
@@ -0,0 +1,38 @@
+<template lang="html">
+  <v-layout align-end column>
+    <v-flex xs12>
+      <v-btn-toggle v-model="filter" class="my-2 ml-auto">
+        <v-btn flat value="left" @click="clearFilter">
+          All
+        </v-btn>
+        <v-btn v-for="gender in parentPossibleGenders" @click="setFilter(gender)" flat>
+          {{ gender }}
+        </v-btn>
+      </v-btn-toggle>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script lang="js">
+  export default  {
+    name: 'gender-filter',
+    props: {
+      parentPossibleGenders: Array,
+    },
+    data() {
+      return {
+        filter: null
+      }
+    },
+    methods: {
+      setFilter(gender) {
+        this.filter = gender;
+        this.$emit('interface', this.filter);
+      },
+      clearFilter() {
+        this.filter = null;
+        this.$emit('interface', this.filter);
+      }
+    }
+}
+</script>
diff --git a/tp6-rpereyra/src/components/Loader.vue b/tp6-rpereyra/src/components/Loader.vue
@@ -0,0 +1,30 @@
+<template lang="html">
+  <v-dialog
+    v-model="loading"
+    persistent
+    width="300"
+    >
+    <v-card
+      color="pink"
+      dark
+      >
+      <v-card-text>
+        Loading
+        <v-progress-linear
+          indeterminate
+          color="white"
+          class="mb-0"
+          ></v-progress-linear>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="js">
+  export default  {
+    name: 'Loader',
+    props: {
+      loading: Boolean,
+    }
+}
+</script>
diff --git a/tp6-rpereyra/src/components/PersonForm.vue b/tp6-rpereyra/src/components/PersonForm.vue
@@ -0,0 +1,142 @@
+<template lang="html">
+  <v-layout wrap>
+    <v-flex md6 xs12 justify-end>
+      <v-alert v-if="formIsInvalid" :value="true" color="error" icon="error" class="my-3"> {{ validationError }} </v-alert>
+      <v-form ref="form">
+        <v-text-field
+          v-model="person.name"
+          label="Name and Surname"
+          color="pink"
+          ></v-text-field>
+        <v-text-field
+          v-model.number="person.age"
+          :min="ageRange.min" :max="ageRange.max"
+          label="Age"
+          type="number"
+          color="pink"
+          ></v-text-field>
+        <v-radio-group v-model="person.gender" row>
+          <v-radio v-for="gender in parentPossibleGenders" :key="gender" name="genderRadio" :id="gender + 'Radio'"
+            :value="gender" :label="gender" color="pink"></v-radio>
+        </v-radio-group>
+        <v-btn color="pink"
+          @click="onSubmit"
+          >
+          submit
+        </v-btn>
+        <v-btn @click="onClear">clear</v-btn>
+      </v-form>
+      <Loader :loading="loading"></Loader>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script lang="js">
+import PersonService from '@/services/personService'
+import Loader from "./Loader.vue";
+
+export default {
+  name: 'person-form',
+  props: {
+    parentPerson: Object,
+    parentPossibleGenders: Array
+  },
+  components: {
+    Loader
+  },
+  beforeMount() {
+    this.possibleGenders = this.parentPossibleGenders;
+  },
+  data() {
+    return {
+      ageRange: {
+        min: 0,
+        max: 200
+      },
+      person: {
+        name: "",
+        age: "",
+        gender: ""
+      },
+      possibleGenders: [],
+      validationError: "",
+      loading: false
+    }
+  },
+  created() {
+    if(this.$route.params.id) {
+      this.loading = true;
+      PersonService.getOne(this.$route.params.id)
+        .then((person) => {
+          this.person = person;
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    }
+  },
+  methods: {
+    onSubmit() {
+      if (this.validateForm()) {
+        this.loading = true;
+        if(this.$route.params.id) {
+          PersonService.update(this.person)
+            .then((person) => {
+              this.onClear();
+              this.loading = false;
+              this.$router.push({ name: "persons" });
+            })
+            .catch((err) => {
+              this.onClear();
+              this.validationError = err
+              this.loading = false;
+            });
+        } else {
+          PersonService.create(this.person)
+            .then((person) => {
+              this.onClear();
+              this.loading = false;
+              this.$router.push({ name: "persons" });
+            })
+            .catch((err) => {
+              this.onClear();
+              this.validationError = err;
+              this.loading = false;
+            });
+        }
+      }
+    },
+    onClear() {
+        this.$refs.form.reset();
+        this.validationError = "";
+    },
+    validateForm() {
+      if (!this.person.name) {
+        this.validationError = "Name is required.";
+        return false;
+      }
+
+      const ageIsInteger = Number.isInteger(this.person.age);
+      const ageIsInRange = (this.person.age >= this.ageRange.min && this.person.age <= this.ageRange.max);
+      if (!ageIsInteger || !ageIsInRange) {
+        this.validationError = "Age is invalid.";
+        return false;
+      }
+
+      if (this.possibleGenders.indexOf(this.person.gender) === -1) {
+        this.validationError = "Gender is required.";
+        return false;
+      }
+
+      this.validationError = "";
+      return true;
+    }
+  },
+  computed: {
+    formIsInvalid() {
+      return (this.validationError.length > 0);
+    }
+  }
+}
+</script>