vue-kanban icon indicating copy to clipboard operation
vue-kanban copied to clipboard

How to off auto sorting after dropping an item from one column to another?

Open vasiliypekhterev opened this issue 6 years ago • 8 comments

I want to avoid auto sorting, but can't find the way. Could you help me with this issue?

Thank you in advance, Vasyl

vasiliypekhterev avatar Apr 07 '18 08:04 vasiliypekhterev

Hey Vasyl,

Sorry for the delay, its been a busy couple of weeks. What do you mean by auto sorting? What would be the desired outcome?

Cheers Brock

BrockReece avatar Apr 23 '18 07:04 BrockReece

@BrockReece Once you drag and drop it auto sorts it based on id. Not considering where it was actually dropped. I believe that's what @vasiliypekhterev meant

deep0410 avatar Jul 31 '18 13:07 deep0410

@BrockReece same question here. How do we disable it so when the block is placed somewhere it stays there instead of being sorted by it's id? Can we reverse the ordering to desc instead? Or is there a way to specify the block property that should be used for ordering the block when dropped?

reppair avatar Sep 11 '18 21:09 reppair

Hmm, yeah I see. I think this is because the parent is passing the blocks array back into the component after the change without any kind of sorting.

Is this a cosmetic issue or is it a functional issue (ie do we need to keep track of the order of the kanban blocks for prioritising?)

If this is a cosmetic issue, we could clone the blocks array in the parent component and pass that through as the prop so that when the initial blocks array is updated, Vue's reactivity won't trigger a reordering of the blocks.

https://codesandbox.io/s/9yy4vx132r

If it is a functional issue, I may have to have a bit more of a think about it.

BrockReece avatar Sep 12 '18 07:09 BrockReece

Personally I think it will be best to have an option that specifies the default ordering if possible. In my case I use it for listing ordered products in different manufacturing processes.. It works fine this way too so more of a cosmetic issue in my case .. but it will be really cool if we can somehow tell the component to order the blocks by different prop of the blocks not the id..

reppair avatar Sep 12 '18 13:09 reppair

I had the same issue and forked the project to make it look more like what I needed: https://github.com/j4kim/vue-kanban Demo and readme up to date with my implementation. Maybe it can help

j4kim avatar Nov 28 '18 18:11 j4kim

I 100% agree with @reppair. I have the same problem too and very need to make the items default order list by date for example. @BrockReece do you have plan to resolve this issue? Please, do it if you can.

Valdas-Stonkus avatar Mar 17 '19 16:03 Valdas-Stonkus

Finaly I made it byself. I sorted my items by activity data.

Change vue-kanban source code "node_modules/vuekanban/src/components/Kanban.vue": 57 line method to that

// MrStonkus personal change for sorting by activityDate methods: { getBlocks(status) { const dateNow = new Date();

  let dealsUntilNow = this.localBlocks.filter(
    deal => deal.status === status && new Date(deal.activityDate) < dateNow
  );

  let dealsWithoutActivityDate = this.localBlocks.filter(
    deal => deal.status === status && !deal.activityDate
  );

  let dealsAfterNow = this.localBlocks.filter(
    deal => deal.status === status && new Date(deal.activityDate) > dateNow
  );

  const deals = [
    ...dealsUntilNow,
    ...dealsWithoutActivityDate,
    ...dealsAfterNow
  ];

  return deals.sort(function(a, b) {
    return (
      Number(new Date(a.activityDate)) - Number(new Date(b.activityDate))
    );
  });
}

},

my data deals: [ { id: 3, status: "Įvesta", title: "Antras", activityDate: "2016-03-17T16:00:00.957Z", isActivityDateAllDay: false }, { id: 2, status: "Įvesta", title: "Pirmas", activityDate: "2015-03-17T08:58:09.957Z", isActivityDateAllDay: false }]

Valdas-Stonkus avatar Mar 17 '19 19:03 Valdas-Stonkus