Giter Club home page Giter Club logo

Comments (7)

marcosrocha85 avatar marcosrocha85 commented on May 20, 2024 7

This is very tricky. We have two approaches according to my knowledge.
🚀 1. Create an array attribute and change it on addElement, addBoards, removeElement and removeBoard calls to keep it even with DOM.
or
🎉 2. Read jKanban DOM and output a JSON.

I would like to vote which you guys think it's better.

from jkanban.

CrashLaker avatar CrashLaker commented on May 20, 2024 2

i think approach 1. could have some potential inconsistency when the user could be frantically draging the boxes here and there.

therefore i consider approach 2 more trustworthy.

this could help

image

 methods: {
        renderJSON(){
            const obj = this.$refs.demo2
            let boards = []
            obj.querySelectorAll('.kanban-board').forEach(el => {
                let items = []
                el.querySelectorAll('.kanban-item').forEach(i => {
                    items.push({
                        title: i.innerHTML,
                    })
                })
                boards.push({
                    id: el.getAttribute('data-id'),
                    title: el.querySelector('.kanban-title-board').innerHTML,
                    items,
                })
            })
            return boards
        }
    },

image

from jkanban.

marcosrocha85 avatar marcosrocha85 commented on May 20, 2024

This is nice. I had to keep jKanban data in a var to save on database. Having a function to export kanban to json will make that simpler.

from jkanban.

ronaklalwanii avatar ronaklalwanii commented on May 20, 2024

Can I look into it?

from jkanban.

marcosrocha85 avatar marcosrocha85 commented on May 20, 2024

Can I look into it?

For sure. Pull requests are always welcome.

from jkanban.

DamienBitrise avatar DamienBitrise commented on May 20, 2024

I think this needs to be updated to return the name of the item not the HTML

methods: {
        renderJSON(){
            const obj = this.$refs.demo2
            let boards = []
            obj.querySelectorAll('.kanban-board').forEach(el => {
                let items = []
                el.querySelectorAll('.kanban-item').forEach(i => {
                    items.push({
                        title: i.childNodes[1].innerHTML,
                    })
                })
                boards.push({
                    id: el.getAttribute('data-id'),
                    title: el.querySelector('.kanban-title-board').innerHTML,
                    items,
                })
            })
            return boards
        }
    },

from jkanban.

luxiusmx avatar luxiusmx commented on May 20, 2024

I hope it helps, with this I rather get the id's since with that I can get everything else from the database

function renderJSON() {
    const obj = document.querySelector('#div_jkanban_id'); // EDIT YOUR DIV ID
    let boards = [];
    obj.querySelectorAll('.kanban-board').forEach(el => {
        let items = [];
        el.querySelectorAll('.kanban-item').forEach(i => {
            items.push({
                element_id: i.getAttribute('data-eid'),
            })
        })
        boards.push({
            board_id: el.getAttribute('data-id'),
            items,
        })
    })
    return JSON.stringify(boards);
}

from jkanban.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.