loyal-fox-2019 · Trayand · Jan 25, 2020
diff --git a/client/.gitignore b/client/.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/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "bootstrap": "^4.4.1",
+    "bootstrap-vue": "^2.3.0",
+    "core-js": "^3.4.4",
+    "firebase": "^7.7.0",
+    "vue": "^2.6.10",
+    "vuedraggable": "^2.23.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,24 @@
+<!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="shortcut icon" href="https://dewey.tailorbrands.com/production/brand_version_mockup_image/676/2581469676_2aaaa093-83ed-469c-a8d7-95a3c60cb40d.png?cb=1579867812" type="image/x-icon">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
+  <title>KamvaN</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but client 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/client/src/App.vue b/client/src/App.vue
@@ -0,0 +1,161 @@
+<template>
+  <div id="app">
+    <div id="nav">
+      <img src="https://dewey.tailorbrands.com/production/brand_version_mockup_image/676/2581469676_2aaaa093-83ed-469c-a8d7-95a3c60cb40d.png?cb=1579867812" alt="">
+      <button v-b-modal.newTask>New Task</button>
+      <b-modal id="newTask" title="New Task" size="lg" hide-footer>
+        <div>
+          <b-form @submit.prevent="addNewTask">
+            <b-form-group id="input-group-1" label="Title" label-for="input-1">
+              <b-form-input
+                id="input-1"
+                v-model="form.Title"
+                type="text"
+                required
+                placeholder="Task Title"
+                maxlength="15"
+              ></b-form-input>
+            </b-form-group>
+
+            <b-form-group id="input-group-2" label="Description" label-for="input-2">
+              <b-form-textarea
+                id="input-2"
+                v-model="form.Desc"
+                type="text"
+                placeholder="Task Short Description"
+                style="resize: vertical; max-height: 250px;"
+                maxlength="120"
+              ></b-form-textarea>
+            </b-form-group>
+
+            <b-form-group id="input-group-3" label="Point" label-for="input-3">
+              <b-form-input id="input-3" v-model="form.Point" type="number" placeholder="0" max="120" min="0"></b-form-input>
+            </b-form-group>
+
+            <b-form-group id="input-group-4" label="Assigned To" label-for="input-4">
+              <b-form-input
+                id="input-4"
+                v-model="form['Assigned to']"
+                type="text"
+                placeholder="Assigned to"
+                maxlength="15"
+              ></b-form-input>
+            </b-form-group>
+
+            <b-button type="submit" variant="primary">Submit</b-button>
+            <b-button type="reset" variant="danger">Reset</b-button>
+          </b-form>
+        </div>
+      </b-modal>
+    </div>
+    <div id="item_handler">
+      <Table :bindData="['Back Log','danger', backLog]" />
+      <Table :bindData="['To Do', 'warning', toDo]" />
+      <Table :bindData="['Doing', 'primary', doing]" />
+      <Table :bindData="['Done', 'success', done]" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Table from "./components/Table.vue";
+import db from "./firebase.js";
+export default {
+  name: "app",
+  components: {
+    Table
+  },
+  data() {
+    return {
+      showModal: false,
+      backLog: [],
+      toDo: [],
+      doing: [],
+      done: [],
+      form: {
+        Title: "",
+        Desc: "",
+        Point: 0,
+        "Assigned to": null,
+        Status: "Back Log"
+      }
+    };
+  },
+  methods: {
+    addNewTask() {
+      this.$bvModal.hide("newTask");
+      db.collection("kanban")
+        .add(this.form)
+        .then(function(docRef) {
+          console.log("Document written with ID: ", docRef.id);
+        })
+        .catch(function(error) {
+          console.error("Error adding document: ", error);
+        });
+    }
+  },
+  created() {
+    db.collection("kanban").onSnapshot(querySnapshot => {
+      this.backLog = [];
+      this.toDo = [];
+      this.doing = [];
+      this.done = [];
+      querySnapshot.forEach(doc => {
+        let dataObj = {};
+        for (const index in doc.data()) {
+          // console.log(index);
+          dataObj[index] = doc.data()[index];
+        }
+        dataObj.id = doc.id;
+        // console.log(dataObj);
+        switch (dataObj.Status) {
+          case "Back Log":
+            this.backLog.push(dataObj);
+            // console.log(dataObj);
+            break;
+          case "To Do":
+            this.toDo.push(dataObj);
+            break;
+          case "Doing":
+            this.doing.push(dataObj);
+            break;
+          case "Done":
+            this.done.push(dataObj);
+            break;
+        }
+      });
+    });
+  }
+};
+</script>
+
+<style>
+#app {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+#item_handler {
+  text-align: center;
+  color: #2c3e50;
+  width: 100vw;
+  display: flex;
+  justify-content: space-around;
+}
+#nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 90vw;
+  padding: 0px 10px 0px 30px;
+  margin: 10px 0px;
+}
+button {
+  width: 100px;
+  height: 40px;
+  background-color: rgb(0, 119, 255);
+  color: antiquewhite;
+  border: none;
+  border-radius: 10px;
+}
+</style>
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/components/Card.vue b/client/src/components/Card.vue
@@ -0,0 +1,134 @@
+<template>
+  <div id="container">
+    <p style="align-self: center;">{{cardData.Title}}</p>
+    <hr />
+    <br />
+    <p>Point: {{cardData.Point}}</p>
+    <br />
+    <p>Assigned To: {{cardData['Assigned to']}}</p>
+    <br />
+    <div>
+      <b-button variant="outline-primary" id="showDetail" v-b-modal="cardData.id">Show Detail</b-button>
+      <b-modal :id="cardData.id" :title="cardData.Title" size="lg" hide-footer>
+        <div class="divInModal">
+          <label>Task Description :</label>
+          <p class="my-4">{{cardData.Desc}}</p>
+        </div>
+        <div class="divInModal">
+          <label>Point :</label>
+          <p class="my-4">{{cardData.Point}}</p>
+        </div>
+        <div class="divInModal">
+          <label>Assigned To :</label>
+          <p class="my-4">{{cardData["Assigned to"]}}</p>
+        </div>
+        <div class="divInModal">
+          <label>Status :</label>
+          <p class="my-4">{{cardData.Status}}</p>
+        </div>
+        <hr />
+        <div class="buttonInModal" v-if="cardData.Status === 'Back Log'">
+          <b-button disable variant="disable"></b-button>
+          <b-button variant="outline-danger" @click="deleteTask">Delete</b-button>
+          <b-button variant="warning" @click="toUpdate('To Do')">To Do</b-button>
+        </div>
+        <div class="buttonInModal" v-if="cardData.Status === 'To Do'">
+          <b-button variant="danger" @click="toUpdate('Back Log')">Back Log</b-button>
+          <b-button variant="outline-danger" @click="deleteTask">Delete</b-button>
+          <b-button variant="primary" @click="toUpdate('Doing')">Doing</b-button>
+        </div>
+        <div class="buttonInModal" v-if="cardData.Status === 'Doing'">
+          <b-button variant="warning" @click="toUpdate('To Do')">To do</b-button>
+          <b-button variant="outline-danger" @click="deleteTask">Delete</b-button>
+          <b-button variant="success" @click="toUpdate('Done')">Done</b-button>
+        </div>
+        <div class="buttonInModal" v-if="cardData.Status === 'Done'">
+          <b-button variant="primary" @click="toUpdate('Doing')">Doing</b-button>
+          <b-button variant="outline-danger" @click="deleteTask">Delete</b-button>
+          <b-button disable variant="disable"></b-button>
+        </div>
+      </b-modal>
+    </div>
+  </div>
+</template>
+
+<script>
+import db from "../firebase";
+export default {
+  name: "Card",
+  components: {},
+  props: ["cardData"],
+  data() {
+    return {
+      angka: 0
+    };
+  },
+  methods: {
+    deleteTask() {
+      this.$bvModal.hide(this.cardData.id);
+      db.collection("kanban")
+        .doc(this.cardData.id)
+        .delete()
+        .then(function() {
+          console.log("Document successfully deleted!");
+        })
+        .catch(function(error) {
+          console.error("Error removing document: ", error);
+        });
+    },
+    toUpdate(status) {
+      this.$bvModal.hide(this.cardData.id);
+      db.collection("kanban")
+        .doc(this.cardData.id)
+        .update({ Status: `${status}` });
+    }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+
+<style scoped>
+#container {
+  display: flex;
+  border: 0.1px solid lightgray;
+  flex-flow: column wrap;
+  border-radius: 10px;
+  background-color: white;
+  margin: 5px 0px;
+  /* justify-content: flex-start; */
+  align-items: flex-start;
+  padding: 0.8rem;
+}
+hr {
+  display: block;
+  width: 100%;
+  margin-top: -0.7em;
+  margin-bottom: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
+  border-style: inset;
+  border-width: 1px;
+}
+#showDetail {
+  width: 100%;
+  font-size: 0.8rem;
+  border-radius: 5px;
+}
+.divInModal {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  height: auto;
+  flex-flow: column wrap;
+}
+.divInModal label {
+  margin-bottom: -15px;
+}
+.buttonInModal {
+  display: flex;
+  justify-content: space-between;
+  padding: auto 15px;
+}
+</style>