npm - gant-board - Versions diffs - 0.1.0 - Mend

gant-board 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +24 -0
package/babel.config.js +5 -0
package/package.json +44 -0
package/public/favicon.ico +0 -0
package/public/index.html +17 -0
package/src/App.vue +64 -0
package/src/assets/logo.png +0 -0
package/src/components/gant-board.vue +363 -0
package/src/lib.js +6 -0
package/src/main.js +9 -0
package/vue.config.js +5 -0

package/README.md ADDED Viewed

@@ -0,0 +1,24 @@
+# gant-board
+## Project setup
+```
+npm install
+```
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+### Compiles and minifies for production
+```
+npm run build
+```
+### Lints and fixes files
+```
+npm run lint
+```
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/babel.config.js ADDED Viewed

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package/package.json ADDED Viewed

@@ -0,0 +1,44 @@
+{
+  "name": "gant-board",
+  "version": "0.1.0",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "build-lib": "vue-cli-service build --target lib --name VueTimeline src/main.js --mode production",
+    "deploy": "npm publish"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "dayjs": "^1.10.7",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <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><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>

package/src/App.vue ADDED Viewed

@@ -0,0 +1,64 @@
+<template>
+  <div id="app">
+    <gant-board :elements="elements"></gant-board>
+  </div>
+</template>
+<script>
+import GantBoard from './components/gant-board.vue'
+export default {
+  name: 'App',
+  components: {
+    GantBoard
+  },
+  data() {
+    return {
+      elements: [
+        {
+          id: 1,
+          name: "prova 1",
+          start: "2022-02-05",
+          end: "2022-02-18",
+          weigth: 1
+        },
+        {
+          id: 2,
+          name: "prova 2",
+          start: "2022-02-16",
+          end: "2022-02-30",
+          weigth: 2
+        }
+        ,
+        {
+          id: 3,
+          name: "prova 3",
+          start: "2022-02-13",
+          end: "2022-02-25",
+          weigth: 3
+        }
+      ,
+        {
+          id: 4,
+          name: "prova 4",
+          start: "2022-02-03",
+          end: "2022-02-25",
+          weigth: 4
+        }
+      ]
+    }
+  }
+}
+</script>
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/src/assets/logo.png ADDED Viewed

Binary file

package/src/components/gant-board.vue ADDED Viewed

@@ -0,0 +1,363 @@
+<template>
+  <div style="width: 100vw; overflow-x: scroll">
+    <div
+      class="events-container"
+      ref="container_wrapper"
+      @mousemove="moveEvent($event)"
+      @mouseup="endDrag($event)"
+      :style="{ width: options.day_width * days_number + 'px' }"
+    >
+      <div
+        style="width: 100%; display: flex; flex-direction: column; height: 100%"
+      >
+        <div
+          style="
+            display: flex;
+            width: 100%;
+            height: 20px;
+            background-color: #fff;
+          "
+        >
+        <div
+            v-for="m in months"
+            :key="m.index"
+            style="display: inline-block; box-sizing: border-box; font-size:14px"
+            :style="{
+              width: (options.day_width * m.length) + 'px',
+            }"
+          >
+          {{m.name}}
+          </div>
+      </div>
+        <div
+          style="
+            display: flex;
+            width: 100%;
+            height: 20px;
+            background-color: #fff;
+          "
+        >
+          <div
+            v-for="day in days_number"
+            :key="day"
+            style="display: inline-block; box-sizing: border-box; font-size:12px"
+            :style="{
+              'border-left':
+                options.from_start.add(day, 'days').day() == 1
+                  ? '1px solid #d1d1d1'
+                  : 'none',
+              width: options.day_width + 'px',
+              left: day * options.day_width,
+            }"
+          >
+          {{getDay(day).format("ddd")[0]}} {{getDay(day).format("D")}}
+          </div>
+        </div>
+        <div style="display: flex; width: 100%; flex-grow: 1">
+          <div
+            v-for="day in days_number"
+            :key="day"
+            style="
+              display: inline-block;
+              border-left: 1px solid #d1d1d1;
+              box-sizing: border-box;
+            "
+            :style="{
+              width: options.day_width + 'px',
+              left: day * options.day_width,
+              'background-color': options.gray_days.includes(
+                options.from_start.add(day, 'days').day()
+              )
+                ? '#e1e1e1'
+                : 'transparent',
+            }"
+          ></div>
+        </div>
+      </div>
+        <div
+          class="event"
+          v-for="event in render_elements" :key="event.id"
+          :class="{
+            ghost: drag_element != null && event.id == drag_element.id,
+          }"
+          @mousedown="startDrag($event, event)"
+          :style="{
+            width: event.width + 'px',
+            left: event.left + 'px',
+            top: event.top + 40 +  'px',
+          }"
+        >
+          {{ event.name }}  {{ event.weigth }}  {{ event.row }}
+        </div>
+      <div
+        class="event"
+        v-if="drag_element != null"
+        style="z-index: 99; transition: 0s all"
+        :style="{
+          width: drag_element.width + 'px',
+          top: drag_element.top + 'px',
+          left: drag_element.left + 'px',
+        }"
+      >
+        {{ drag_element.name }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import dayjs from "dayjs";
+import "dayjs/locale/it";
+export default {
+  name: "gant-board",
+  props: ["elements"],
+  data() {
+    return {
+      end_calc: true,
+      render_elements: [],
+      drag_element: null,
+      options: {
+        gray_days: [0, 6],
+        day_width: 40,
+        from_start: dayjs().add(-90, "days"),
+        to_start: dayjs().add(90, "days"),
+      },
+    };
+  },
+  computed: {
+    days_number: function () {
+      return this.options.to_start.diff(this.options.from_start, "days");
+    },
+    months: function(){
+      var months = [];
+      var start = this.options.from_start;
+      var end = false;
+      var index = 0;
+      while (!end){
+         var length = start.daysInMonth();
+         if (months.length == 0){
+            length = start.startOf("month").add(1,"months").diff(start,"days");
+         }
+         months.push({ index: index, name : start.format("MMMM"), length : length});
+         start = start.add(1,"months");
+         index++;
+         if (start > this.options.to_start){
+           end = true;
+         }
+      }
+      return months;
+    }
+  },
+  methods: {
+    getDay(index){
+       return this.options.from_start.add(index, "days");
+    },
+    refresh_render() {
+      var ordered = [...this.render_elements].sort(
+        (a, b) => a.weigth - b.weigth
+      );
+      for (let event of ordered) {
+        this.refresh_event(event);
+      }
+    },
+    refresh_event(event) {
+      var near_element = [...this.render_elements]
+        .sort((a, b) => b.weigth - a.weigth)
+        .filter(
+          (x) =>
+            x.weigth <= event.weigth &&
+            x.start < event.end &&
+            x.id != event.id &&
+            event.start < x.end
+        ).map(x => x.row);
+      var row = 0;
+      if (near_element.length > 0) {
+        row = Math.max(...near_element) + 1;
+      }
+      event.row = row;
+      event.top = 40 * row;
+      event.left =
+        event.start.diff(this.options.from_start, "days") *
+        this.options.day_width;
+      event.width =
+        event.end.diff(event.start, "days") * this.options.day_width;
+    },
+    render() {
+      this.render_elements = [];
+      var ordered = this.elements.sort((a, b) => a.weigth - b.weigth);
+      for (var event of ordered) {
+        this.build_event(event);
+      }
+    },
+    build_event(event) {
+      var event_start = dayjs(event.start, "YYYY-MM-DD", true);
+      var event_end = dayjs(event.end, "YYYY-MM-DD", true);
+      var near_element = this.render_elements
+        .sort((a, b) => b.weigth - a.weigth)
+        .filter((x) => x.start < event_end && event_start < x.end).map(x => x.row);
+      var row = 0;
+      if (near_element.length > 0) {
+        row = Math.max(...near_element) + 1;
+      }
+      this.render_elements.push({
+        id: event.id,
+        name: event.name,
+        start: event_start,
+        end: event_end,
+        weigth: event.weigth,
+        row: row,
+        top: 40 * row,
+        left:
+          event_start.diff(this.options.from_start, "days") *
+          this.options.day_width,
+        width: event_end.diff(event_start, "days") * this.options.day_width,
+      });
+    },
+    startDrag(mouseevent, event) {
+      var event_start = dayjs(event.start, "YYYY-MM-DD", true);
+      var event_end = dayjs(event.end, "YYYY-MM-DD", true);
+      let bounds = this.$refs.container_wrapper.getBoundingClientRect();
+      this.drag_element = {
+        id: event.id,
+        name: event.name,
+        start: event_start,
+        end: event_end,
+        top: mouseevent.clientY - mouseevent.offsetY - bounds.top,
+        offset_position_x: mouseevent.offsetX,
+        offset_position_y: mouseevent.offsetY,
+        left:
+          event_start.diff(this.options.from_start, "days") *
+          this.options.day_width,
+        width: event_end.diff(event_start, "days") * this.options.day_width,
+      };
+    },
+    moveEvent(mouseevent) {
+      if (this.drag_element != null) {
+        let bounds = this.$refs.container_wrapper.getBoundingClientRect();
+        this.drag_element.left =
+          mouseevent.clientX -
+          bounds.left -
+          this.drag_element.offset_position_x;
+        this.drag_element.top =
+          mouseevent.clientY - this.drag_element.offset_position_y - (bounds.top);
+        var day = Math.round(
+          (mouseevent.clientX -
+            bounds.left -
+            this.drag_element.offset_position_x) /
+            this.options.day_width
+        );
+        var original_event = this.render_elements.filter(
+          (x) => x.id == this.drag_element.id
+        )[0];
+        var duration = original_event.end.diff(original_event.start, "days");
+        original_event.start = this.options.from_start.add(day, "days");
+        original_event.end = original_event.start.add(duration, "days");
+        var start = original_event.start;
+        var end = original_event.end;
+        var row_position = Math.floor((mouseevent.clientY - bounds.top) / 40);
+        var down_weigth = null;
+        var down_element = null;
+        var element_to_move = null;
+        var element_to_move_weigth = null;
+        down_element = this.render_elements
+          .sort((a, b) => b.weigth - a.weigth)
+          .filter(
+            (x) =>
+              x.start < end &&
+              start < x.end &&
+              original_event.id != x.id &&
+              x.row < row_position
+          );
+        if (down_element.length > 0) {
+          down_weigth = down_element[0].weigth;
+        }
+        element_to_move = this.render_elements
+          .sort((a, b) => a.weigth - b.weigth)
+          .filter(
+            (x) =>
+              x.start < end &&
+              start < x.end &&
+              original_event.id != x.id &&
+              x.row >= row_position
+          );
+        if (element_to_move.length > 0) {
+          element_to_move_weigth = element_to_move[0].weigth;
+        }
+        if (element_to_move_weigth == null) {
+          original_event.weigth = (down_weigth ?? 0) + 1;
+        } else {
+          original_event.weigth =
+            (down_weigth ?? 0) +
+            (element_to_move_weigth - (down_weigth ?? 0)) / 2;
+        }
+        this.refresh_render();
+      }
+    },
+    endDrag() {
+      this.drag_element = null;
+    },
+  },
+  created() {
+    dayjs.locale("it");
+  },
+  mounted() {
+    this.render();
+  },
+};
+</script>
+<style scoped>
+.events-container {
+  background: #ebebeb;
+  height: 200px;
+  position: relative;
+}
+.event.ghost {
+  background-color: #b5a0d8;
+}
+.event {
+  z-index: 1;
+  display: inline-block;
+  background-color: #673ab7;
+  color: #fff;
+  position: absolute;
+  border-radius: 3px;
+  padding: 10px 3px;
+  overflow: hidden;
+  box-sizing: border-box;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+</style>

package/src/lib.js ADDED Viewed

@@ -0,0 +1,6 @@
+import VueTimeLine from './components/gant-board.vue'
+export function install(Vue) {
+    console.log('install');
+    Vue.component('vue-timeline', VueTimeLine);
+}

package/src/main.js ADDED Viewed

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import App from './App.vue'
+Vue.config.productionTip = false
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

package/vue.config.js ADDED Viewed

@@ -0,0 +1,5 @@
+module.exports = {
+    css: {
+      extract: false,
+    },
+}