Блог

         <div
          v-bind:key="task.id"
          v-for="task in currenttasks"
          v-bind:class="taskClassComputed"
        >  

 <template @updateParentTasks="updateTasks">
  <div id="todo-app" class="relative overflow-hidden">
    <div id="data-list-list-view">
      <vs-table
        @updateParentTasks="updateTasks"
        ref="tasktable"
        v-model="selected"
        :data="currenttasks"
      >
        <div
          v-bind:key="task.id"
          v-for="task in currenttasks"
          v-bind:class="taskClassComputed"
        >
          <div>
            <div
              id="task-card"
              v-on="$listeners"
              @updateParentTasks="updateTasks"
            >
              <div @updateParentTasks="updateTasks">
                <vs-row vs-w="12">
                  <vs-col
                    class="shape"
                    vs-type="flex"
                    vs-lg="1"
                    vs-sm="1"
                    vs-xs="1"
                    >Testing</vs-col
                  >
                </vs-row>
              </div>
            </div>
          </div>
        </div>
      </vs-table>
    </div>
  </div>
</template> 

<script>
import consts from "@/const.js";

function update_itemsbystate(src, itemstate) {
  const dest = [];
  let i = 0,
    j = 0;
  for (i = 0; i < src.length; i  ) {
    if (src[i].state === itemstate) {
      /*eslint-disable-next-line*/
      console.log(
        "item "   itemstate   ":"   i   " "   j   JSON.stringify(src[i])
      );
      dest[j] = JSON.parse(JSON.stringify(src[i]));
      j  ;
    }
  }
  return dest;
}

function parseByState(tasks, page) {
  let result = "OPEN";
  if (page.showDeleted === true) {
    result = "DELETED";
  } else if (page.showClosed === true) {
    result = "CLOSED";
  }
  return update_itemsbystate(tasks, result);
}

import tasksidebar from "./TaskSidebar";
import QuickTaskPopup from "./QuickTaskPopup";

import { mapGetters } from "vuex";
import taskutils from "../../utils/taskutils";

export default {
  name: "TaskList",
  components: {
    tasksidebar,
    QuickTaskPopup,
    // NewTaskPopup,
  },
  data() {
    return {
      selected: [],
      // tasks: [],
      currenttasks: [],
      isMounted: false,
      showOpen: true,
      showClosed: false,
      showDeleted: false,
      // Filter Sidebar
      isFilterSidebarActive: true,
      clickNotClose: true,
      // Data Sidebar
      addNewDataSidebar: false,
      sidebarData: {},
      isPopupActive: false,
      isNewPopupActive: false,
    };
  },
  computed: {
    ...mapGetters(["alltasks"]),
    currentPage() {
      if (this.isMounted) {
        return this.$refs.tasktable.currentx;
      }
      return 0;
    },
    queriedItems() {
      return this.$refs.tasktable
        ? this.$refs.tasktable.queriedResults.length
        : this.currenttasks.length;
    },
    windowWidth() {
      return this.$store.state.windowWidth;
    },
    taskClassComputed: function () {
      var classType = "task-openTile";
      if (this.state === "CLOSED") {
        classType = "task-closedTile";
      } else if (this.state === "OPEN") {
        if (this.fasttrack != "undefined") {
          classType = "task-tile";
        } else if (this.score >= 2000) {
          classType = "task-fastTrackedTiles";
        }
        classType = "task-tile";
      }
      return classType;
    },
  },
  mounted() {
    this.isMounted = true;
  },
  methods: {
    addNewData() {
      this.sidebarData = {};
      this.toggleDataSidebar(true);
    },
    updateTasks() {
      console.log("updating tasks in task list");
      this.currenttasks = parseByState(this.alltasks, this);
      this.$forceUpdate();
    },
    openTasks() {
      if (this.showOpen === false) {
        this.showOpen = true;
        this.showDeleted = false;
        this.showClosed = false;
        this.updateTasks();
      }
    },
    closedTasks() {
      if (this.showClosed === false) {
        this.showOpen = false;
        this.showDeleted = false;
        this.showClosed = true;
        this.updateTasks();
      }
    },
    deletedTasks() {
      if (this.showDeleted === false) {
        this.showOpen = false;
        this.showDeleted = true;
        this.showClosed = false;
        this.updateTasks();
      }
    },
    editData(data) {
      this.sidebarData = data;
      this.toggleDataSidebar(true);
    },
  },
  beforeMount() {
    this.currenttasks = parseByState(this.alltasks, this);
    console.log("pre-mount");
  },
  created() {
    this.setSidebarWidth();
  },
};
</script>

<style lang="scss">
.task-fastTrackedTile {
  padding: 40 !important;
  overflow: hidden;
  border: 1px solid;
  border-color: red;
  background: rgba(184, 96, 96, 0.07);
  border-left-width: 7px;
  border-left-color: red;
  margin-bottom: 5px;
  border-radius: 0.5rem;
}
.task-closedTile {
  padding: 40 !important;
  //   overflow: hidden;
  border: 1px solid;
  border-color: gray;
  background: rgba(239, 239, 255, 0.07);
  border-left-width: 7px;
  border-left-color: gray;
  margin-bottom: 5px;
  border-radius: 0.5rem;
}
.task-openTile {
  padding: 40 !important;
  //   overflow: hidden;
  border: 1px solid;
  border-color: rgba(203, 203, 218, 0.4);
  border-left-width: 7px;
  border-left-color: rgba(25, 25, 170, 0.4);
  margin-bottom: 5px;
  border-radius: 0.5rem;
}

.taskFasttrackProp {
  //   overflow: hidden;
  //   text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  color: red;
  margin-right: 15px;
}
.taskProp {
  //   overflow: hidden;
  //   text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  color: blue;
  margin-right: 15px;
}
</style>