Versão inicial do exemplo

fatec-taquaritinga · Sep 28, 2016 · fd122f2 · fd122f2
1 parent 67d2382
commit fd122f2
Show file tree

Hide file tree

Showing 21 changed files with 1,151 additions and 36 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}
diff --git a/.gitignore b/.gitignore
@@ -1,37 +1,6 @@
-# Logs
-logs
+.DS_Store
+node_modules/
+dist/
+.npm
 *.log
 npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
diff --git a/README.md b/README.md
@@ -1,2 +1,18 @@
 # exemplo-crud
-Projeto Vue.js para exemplo de CRUD com backend fictício simulado com Promises
+
+> Projeto criado com Vue.js para exemplo de CRUD com backend fictício, simulado através de Promises.
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Respostas</title>
+  </head>
+  <body>
+    <app></app>
+    <script src="dist/build.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "exemplo-crud",
+  "description": "Projeto criado com Vue.js para exemplo de CRUD com backend fictício, simulado através de Promises.",
+  "author": "Erick Eduardo Petrucelli <[email protected]>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "babel-runtime": "^6.0.0",
+    "vue": "^1.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.0.0",
+    "cross-env": "^1.0.6",
+    "css-loader": "^0.23.0",
+    "file-loader": "^0.8.4",
+    "json-loader": "^0.5.4",
+    "node-uuid": "^1.4.7",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^2.3.1",
+    "url-loader": "^0.5.7",
+    "vue-hot-reload-api": "^1.2.0",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^8.2.1",
+    "vue-resource": "^1.0.3",
+    "vue-router": "^0.7.13",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.0"
+  }
+}
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,56 @@
+<script>
+import Toaster from './components/Toaster.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Toaster
+  },
+  data() {
+    return {
+      notification: {
+        show: false,
+        timeout: null,
+        type: 'info',
+        text: ''
+      }
+    }
+  },
+  events: {
+    toast(text, type) {
+      if (this.notification.timeout)
+        clearTimeout(this.notification.timeout)
+
+      this.notification.type = type || 'info'
+      this.notification.text = text
+      this.notification.show = true
+
+      this.notification.timeout = setTimeout(() => {
+        this.notification.timeout = null
+        this.notification.show = false
+      }, 2000)
+    },
+    navigate(path, delay = 500) {
+      setTimeout(() => this.$route.router.go(path), delay)
+    }
+  }
+}
+</script>
+
+<template>
+  <div id="app">
+    <toaster :show="notification.show" :text="notification.text" :type="notification.type"></toaster>
+
+    <nav class="top-menu">
+      <a v-link="{ path: '/', exact: true }">Principal</a>
+      <a v-link="{ path: '/sites' }">Cadastro de Sites</a>
+      <a v-link="{ path: '/jogos' }">Cadastro de Jogos</a>
+    </nav>
+
+    <router-view></router-view>
+  </div>
+</template>
+
+<style lang="stylus">
+@import './stylus/app.styl'
+</style>
diff --git a/src/components/Grid.vue b/src/components/Grid.vue
@@ -0,0 +1,131 @@
+<script>
+export default {
+  name: 'Grid',
+  props: {
+    items: Array,
+    columns: Array,
+    selection: {
+      type: String,
+      twoway: true
+    }
+  },
+  data() {
+    return {
+      sort: this.columns.length ? { key: this.columns[0].key, direction: 1 } : null
+    }
+  },
+  methods: {
+    selectionChanged(id) {
+      this.selection = this.selection === id ? null : id
+    },
+    sortBy(key) {
+      if (this.sort === null || this.sort.key !== key)
+        this.sort = { key: key, direction: 1 }
+      else
+        this.sort = { key: key, direction: this.sort.direction === 1 ? -1 : 1 }
+
+      this.selection = null
+    }
+  }
+}
+</script>
+
+<template>
+  <table v-if="items.length">
+    <thead>
+      <tr>
+        <th v-for="column of columns"
+          class="sortable"
+          :class="{
+            ascending: sort.key === column.key && sort.direction === 1,
+            descending: sort.key === column.key && sort.direction === -1 }"
+          :style="{ width: `${100 / columns.length}%` }"
+          @click="sortBy(column.key)">
+          {{ column.text }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="item of items | orderBy sort.key sort.direction"
+        :class="{ selected: item.id === selection }"
+        @click="selectionChanged(item.id)">
+        <td v-for="column of columns">{{ item[column.key] }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="stylus" scoped>
+@import '../stylus/variables.styl'
+
+table
+  width 100%
+  max-width 100%
+  border 1px solid alpha(#000, .12)
+  border-collapse collapse
+  background-color #fff
+  box-shadow 0 1px 1.5px 0 alpha(#000, .12), 0 1px 1px 0 alpha(#000, .24)
+  @media (min-width $breakpoint-medium)
+    width 84%
+    margin 0 8%
+
+  @media (min-width $breakpoint-large)
+    width 76%
+    margin 0 12%
+
+tbody tr
+  transition background-color .28s cubic-bezier(.4, 0, .2, 1)
+  cursor pointer
+  &:hover
+    background-color alpha(#9e9e9e, .2)
+  &.selected
+    background-color $color-secondary
+    color #fff
+    &:hover
+      background-color darken($color-secondary, 15%)
+
+th
+  vertical-align bottom
+  text-overflow ellipsis
+  font-weight 700
+  letter-spacing 0
+  font-size .75em
+  color alpha(#000, .54)
+  padding 1.125rem 18px .5rem
+  text-align left
+  &.sortable
+    cursor pointer
+    transition background-color .28s cubic-bezier(.4, 0, .2, 1)
+    &:hover
+      background-color alpha(#9e9e9e, .2)
+    &::after
+      content ''
+      position relative
+      display inline-block
+      vertical-align middle
+      width 0
+      height 0
+      margin -3px 0 0 5px
+      opacity .66
+    &.ascending::after
+      border-left 4px solid transparent
+      border-right 4px solid transparent
+      border-top 4px solid @color
+    &.descending::after
+      border-left 4px solid transparent
+      border-right 4px solid transparent
+      border-bottom 4px solid @color
+
+td
+  border-top 1px solid alpha(#000, .12)
+  font-size .9375em
+  padding .75rem 18px
+  white-space normal
+  text-align left
+
+th:first-of-type, td:first-of-type
+  padding-left 1.5rem
+
+th:last-of-type, td:last-of-type
+  padding-right 1.5rem
+</style>