completed app

jivan99 · Aug 22, 2020 · 6303745 · 6303745
1 parent 886e571
commit 6303745
Show file tree

Hide file tree

Showing 25 changed files with 1,651 additions and 0 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}
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,35 @@
+{
+  "name": "trello-clone",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.15",
+    "@fortawesome/free-solid-svg-icons": "^5.7.2",
+    "@fortawesome/vue-fontawesome": "^0.1.5",
+    "vue": "^2.6.6",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^1.1.0",
+    "@ky-is/vue-cli-plugin-tailwind": "^1.6.0",
+    "@vue/cli-plugin-babel": "^3.5.0",
+    "@vue/cli-plugin-eslint": "^3.5.0",
+    "@vue/cli-service": "^3.5.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "postcss-preset-env": "^6.3.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "tailwindcss": "^0.7.0",
+    "vue-cli-plugin-fontawesome": "^0.2.0",
+    "vue-template-compiler": "^2.5.21"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,31 @@
+const IN_PRODUCTION = process.env.NODE_ENV === 'production'
+
+class TailwindVueExtractor {
+  static extract (content) {
+    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
+    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_:/]+/g) || []
+  }
+}
+
+const extensionsUsingCSS = [ 'vue', 'html' ]
+const extensionsOfCSS = [ 'css', 'less', 'pcss', 'postcss', 'sass', 'scss', 'styl' ]
+
+module.exports = {
+  plugins: [
+    require('postcss-preset-env')({ stage: 2 }),
+    require('tailwindcss')('./tailwind.config.js'),
+    IN_PRODUCTION && require('@fullhuman/postcss-purgecss')({
+      content: [ `./@(public|src)/**/*.@(${extensionsUsingCSS.join('|')})` ],
+      css: [ `./src/**/*.@(${extensionsOfCSS.join('|')})` ],
+      extractors: [
+        {
+          extractor: TailwindVueExtractor,
+          extensions: extensionsUsingCSS,
+        },
+      ],
+      whitelist: [],
+      whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/ ],
+    }),
+    require('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>watch-us-build-trello</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but watch-us-build-trello 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,26 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style>
+@import 'assets/styles/tailwind.postcss';
+
+body, html {
+  height: 100%;
+}
+
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  height: 100%;
+}
+
+.container {
+  @apply mx-auto;
+}
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/styles/tailwind.postcss b/src/assets/styles/tailwind.postcss
@@ -0,0 +1,36 @@
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ *
+ * You can see the styles here:
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ */
+@import '~tailwindcss/preflight.css';
+
+/**
+ * This injects any component classes registered by plugins.
+ */
+@import '~tailwindcss/components.css';
+
+/**
+ * Here you would add any of your custom component classes; stuff that you'd
+ * want loaded *before* the utilities so that the utilities could still
+ * override them.
+ *
+ * Example:
+ * @import 'components/buttons';
+ */
+
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ */
+@import '~tailwindcss/utilities.css';
+
+/**
+ * Here you would add any custom utilities you need that don't come out of the
+ * box with Tailwind.
+ *
+ * Example:
+ * @import 'utilities/background-patterns';
+ */
diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
@@ -0,0 +1,31 @@
+<template>
+  <button type="button" class="button" :class="typeClasses">
+    <slot/>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String
+    }
+  },
+  computed: {
+    typeClasses () {
+      switch (this.type) {
+        case 'danger':
+          return 'bg-red'
+        default:
+          return 'bg-teal'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.button {
+  @apply inline-flex px-4 py-2 text-white font-bold rounded items-center;
+}
+</style>
diff --git a/src/components/AppDrag.vue b/src/components/AppDrag.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    draggable
+    @dragstart.self="onDrag"
+    @dragover.prevent
+    @dragenter.prevent
+  >
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    transferData: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    onDrag (e) {
+      e.dataTransfer.effectAllowed = 'move'
+      e.dataTransfer.dropEffect = 'move'
+
+      e.dataTransfer.setData('payload', JSON.stringify(this.transferData))
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/src/components/AppDrop.vue b/src/components/AppDrop.vue
@@ -0,0 +1,24 @@
+<template>
+  <div
+    @drop.stop="onDrop"
+    @dragover.prevent
+    @dragenter.prevent
+  >
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    onDrop (e) {
+      const transferData = JSON.parse(e.dataTransfer.getData('payload'))
+
+      this.$emit('drop', transferData)
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/src/components/BoardColumn.vue b/src/components/BoardColumn.vue
@@ -0,0 +1,74 @@
+<template>
+  <AppDrop
+    @drop="moveTaskOrColumn"
+  >
+    <AppDrag
+      class="column"
+      :transferData="{
+        type: 'column',
+        fromColumnIndex: columnIndex
+      }"
+    >
+      <div class="flex items-center mb-2 font-bold">
+        {{ column.name }}
+      </div>
+      <div class="list-reset">
+        <ColumnTask
+          v-for="(task, $taskIndex) of column.tasks"
+          :key="$taskIndex"
+          :task="task"
+          :taskIndex="$taskIndex"
+          :column="column"
+          :columnIndex="columnIndex"
+          :board="board"
+        />
+
+        <input
+          type="text"
+          class="block p-2 w-full bg-transparent"
+          placeholder="+ Enter new task"
+          @keyup.enter="createTask($event, column.tasks)"
+        />
+      </div>
+    </AppDrag>
+  </AppDrop>
+</template>
+
+<script>
+import ColumnTask from './ColumnTask'
+import AppDrag from './AppDrag'
+import AppDrop from './AppDrop'
+import movingTasksAndColumnsMixin from '@/mixins/movingTasksAndColumnsMixin'
+
+export default {
+  components: {
+    ColumnTask,
+    AppDrag,
+    AppDrop
+  },
+  mixins: [movingTasksAndColumnsMixin],
+  methods: {
+    pickupColumn (e, fromColumnIndex) {
+      e.dataTransfer.effectAllowed = 'move'
+      e.dataTransfer.dropEffect = 'move'
+
+      e.dataTransfer.setData('from-column-index', fromColumnIndex)
+      e.dataTransfer.setData('type', 'column')
+    },
+    createTask (e, tasks) {
+      this.$store.commit('CREATE_TASK', {
+        tasks,
+        name: e.target.value
+      })
+      e.target.value = ''
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.column {
+  @apply bg-grey-light p-2 mr-4 text-left shadow rounded;
+  min-width: 350px;
+}
+</style>