Initialized the project

NataliaTepluhina · Apr 27, 2019 · 7c474dd · 7c474dd
1 parent baa0e01
commit 7c474dd
Show file tree

Hide file tree

Showing 15 changed files with 8,350 additions and 2 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
diff --git a/.gitignore b/.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/README.md b/README.md
@@ -1,2 +1,29 @@
-# vue-apollo-todo
-Example application managing local state with Apollo built-in state management
+# vue-todo-apollo
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "vue-todo-apollo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.8.1",
+    "apollo-boost": "^0.3.1",
+    "core-js": "^2.6.5",
+    "graphql": "^14.2.1",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "shortid": "^2.2.14",
+    "vue": "^2.6.10",
+    "vue-apollo": "^3.0.0-beta.28"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.6.0",
+    "@vue/cli-service": "^3.6.0",
+    "vue-template-compiler": "^2.5.21"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!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">
+    <title>vue-todo-apollo</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue-todo-apollo 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/src/App.vue b/src/App.vue
@@ -0,0 +1,112 @@
+<template>
+  <div id="app">
+    <h1>ToDo List</h1>
+    <div class="todo-block todo-input">
+      <input type="text" v-model="newItem" @keyup.enter="addItem">
+      <button @click="addItem" :disabled="!newItem">
+        <i class="far fa-plus-square"></i>
+      </button>
+    </div>
+    <div class="todo-block todo-list">
+      <ListItem
+        v-for="(item, index) in todoItems"
+        :key="index"
+        :content="item"
+        @toggleDone="checkItem(item.id)"
+        @delete="deleteItem(item.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ListItem from "./components/ListItem.vue";
+import {
+  todoItemsQuery,
+  checkItemMutation,
+  addItemMutation,
+  deleteItemMutation
+} from "./graphql/queries.js";
+
+export default {
+  name: "app",
+  components: {
+    ListItem
+  },
+  data() {
+    return {
+      newItem: "",
+      todoItems: []
+    };
+  },
+  apollo: {
+    todoItems: {
+      query: todoItemsQuery
+    }
+  },
+  methods: {
+    addItem() {
+      if (this.newItem) {
+        this.$apollo.mutate({
+          mutation: addItemMutation,
+          variables: { text: this.newItem }
+        });
+        this.newItem = "";
+      }
+    },
+    checkItem(id) {
+      this.$apollo.mutate({
+        mutation: checkItemMutation,
+        variables: { id }
+      });
+    },
+    deleteItem(id) {
+      this.$apollo.mutate({
+        mutation: deleteItemMutation,
+        variables: { id }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+#app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-top: 60px;
+}
+
+.todo-block {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  font-size: 24px;
+}
+
+.todo-input {
+  align-items: center;
+}
+
+.todo-list {
+  flex-direction: column;
+}
+
+input {
+  width: 100%;
+  height: 30px;
+  font-size: 22px;
+}
+
+button {
+  border: none;
+  font-size: 40px;
+  outline: none;
+}
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="todo-item">
+    <input type="text" v-if="isEditing">
+    <span v-else :class="{'checked': content.done}">{{content.text}}</span>
+    <div class="actions">
+      <button @click="$emit('toggleDone')">
+        <i class="far fa-check-square" v-if="content.done"></i>
+        <i class="far fa-square" v-else></i>
+      </button>
+      <button @click="$emit('delete')">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ListItem",
+  props: {
+    content: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isEditing: false
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.checked {
+  text-decoration: line-through;
+}
+
+button {
+  background-color: rgb(229, 245, 253);
+}
+
+.todo-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  margin-bottom: 3px;
+  background-color: rgb(229, 245, 253);
+}
+
+.fa-check-square {
+  color: green;
+}
+
+.fa-times {
+  color: red;
+}
+</style>
diff --git a/src/graphql/queries.js b/src/graphql/queries.js
@@ -0,0 +1,29 @@
+import gql from 'graphql-tag';
+
+export const todoItemsQuery = gql`
+  {
+    todoItems @client {
+      id
+      text
+      done
+    }
+  }
+`;
+
+export const checkItemMutation = gql`
+  mutation($id: ID!) {
+    checkItem(id: $id) @client
+  }
+`;
+
+export const addItemMutation = gql`
+  mutation($text: String!) {
+    addItem(text: $text) @client
+  }
+`;
+
+export const deleteItemMutation = gql`
+  mutation($id: ID!) {
+    deleteItem(id: $id) @client
+  }
+`;
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import ApolloClient from 'apollo-boost';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import '@fortawesome/fontawesome-free/css/all.css';
+import VueApollo from 'vue-apollo';
+import App from './App.vue';
+import { typeDefs, resolvers } from './resolvers';
+
+Vue.use(VueApollo);
+
+Vue.config.productionTip = false;
+
+const cache = new InMemoryCache();
+
+const apolloClient = new ApolloClient({
+  cache,
+  resolvers,
+  typeDefs,
+});
+
+cache.writeData({
+  data: {
+    todoItems: [
+      {
+        __typename: 'Item',
+        id: 'dqdBHJGgjgjg',
+        text: 'test',
+        done: true,
+      },
+    ],
+  },
+});
+
+const apolloProvider = new VueApollo({
+  defaultClient: apolloClient,
+});
+
+new Vue({
+  render: h => h(App),
+  apolloProvider,
+}).$mount('#app');
diff --git a/src/resolvers.js b/src/resolvers.js
@@ -0,0 +1,40 @@
+import gql from 'graphql-tag';
+import shortid from 'shortid';
+import { todoItemsQuery } from './graphql/queries';
+
+export const typeDefs = gql`
+  extend type Item {
+    id: ID!
+    text: String!
+    done: Boolean!
+  }
+`;
+
+export const resolvers = {
+  Mutation: {
+    checkItem: (_, { id }, { cache }) => {
+      const data = cache.readQuery({ query: todoItemsQuery });
+      const currentItem = data.todoItems.find(item => item.id === id);
+      currentItem.done = !currentItem.done;
+      cache.writeQuery({ query: todoItemsQuery, data });
+    },
+
+    addItem: (_, { text }, { cache }) => {
+      const data = cache.readQuery({ query: todoItemsQuery });
+      data.todoItems.push({
+        __typename: 'Item',
+        id: shortid.generate(),
+        text,
+        done: false,
+      });
+      cache.writeQuery({ query: todoItemsQuery, data });
+    },
+
+    deleteItem: (_, { id }, { cache }) => {
+      const data = cache.readQuery({ query: todoItemsQuery });
+      const currentItem = data.todoItems.find(item => item.id === id);
+      data.todoItems.splice(data.todoItems.indexOf(currentItem), 1);
+      cache.writeQuery({ query: todoItemsQuery, data });
+    },
+  },
+};