gant-board 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gant-board",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/App.vue

@@ -1,64 +0,0 @@
-<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/components/gant-board.vue

@@ -1,363 +0,0 @@
-<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

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

package/src/main.js

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