This topic contains 4 replies, has 2 voices, and was last updated by Avatar Clintre 3 months, 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #101823
    Avatar
    Clintre
    Participant

    I have been testing out the kanban for use in our project. I have it set to retrieve the data from a backend server script. For the test I have set it up to return data similar to the demo scripts.

    The problem is, while it is pulling everything else, it does not seem to recognize the userId like it does with the demo data from demo.js. Everything else works perfectly. It is setting the status, the text, progress, start and due date. Only the userId is not setting. Maybe I am being blind.

    The data I am returning:

     

    [{“id”:1,”status”:”toDo”,”text”:”Showing cover and title”,”tags”:”initial”,”progress”:71,”userId”:3,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″},{“id”:2,”status”:”inProgress”,”text”:”Visible\/hidden columns”,”tags”:”data”,”progress”:60,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″,”userId”:3},{“id”:3,”status”:”testing”,”text”:”Header”,”tags”:”visual”,”progress”:10,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″,”userId”:3},{“id”:4,”status”:”done”,”text”:”Header”,”tags”:”visual”,”progress”:18,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″,”userId”:3},{“id”:5,”status”:”inProgress”,”text”:”Property validation”,”tags”:”initial”,”progress”:86,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″,”userId”:3}]

    The javascript:

    let response = await fetch('/swc_test/test.php');
    let kbData = await response.json();
    
    window.Smart('#kanban', class {
        get properties() {
            return {
                addNewButton: true,
                collapsible: true,
                dataSource: kbData,
                editable: true,
                taskActions: true,
                taskDue: true,
                taskProgress: true,
                users: [
                    { id: 0, name: 'Andrew', image: '/swc_test/images/people/andrew.png' },
                    { id: 1, name: 'Anne', image: '/swc_test/images/people/anne.png' },
                    { id: 2, name: 'Janet', image: '/swc_test/images/people/janet.png' },
                    { id: 3, name: 'John', image: '/swc_test/images/people/john.png' },
                    { id: 4, name: 'Laura', image: '/swc_test/images/people/laura.png' }
                ],
                columns: [
                    { label: 'To do', dataField: 'toDo' },
                    { label: 'In progress', dataField: 'inProgress' },
                    { label: 'Testing', dataField: 'testing' },
                    { label: 'Done', dataField: 'done', addNewButton: false }
                ]
            };
        }
    });
    #101826
    Avatar
    Yavor Dashev
    Participant

    Hi Clintre,

    Thank you for contacting us!

    The reason for your case is that when you want to assign a task to ‘userId’ you need also to set the userList property to true.

    I have tested the kanban component with the same data that you have and it works as it should.

    Here is the code snippet of the kanban:

    window.Smart('#kanban', class {
        get properties() {
            return {
                collapsible: true,
                dataSource: data,
                addNewButton: true,
                editable: true,
                taskActions: true,
                taskDue: true,
                taskProgress: true,
                userList: true,
                users: [
                    { id: 0, name: 'Andrew' },
                    { id: 1, name: 'Anne' },
                    { id: 2, name: 'Janet' },
                    { id: 3, name: 'John' },
                    { id: 4, name: 'Laura'}
                ],
                columns: [
                    { label: 'To do', dataField: 'toDo' },
                    { label: 'In progress', dataField: 'inProgress' },
                    { label: 'Testing', dataField: 'testing' },
                    { label: 'Done', dataField: 'done' }
                ]
            };
        }
    });
    

    Let me know if that works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team
    https://www.htmlelements.com/

    #101839
    Avatar
    Clintre
    Participant

    The problem is not assigning the user. Essentially I took the “Editable” example and I created a PHP script to generate the data. In the Editable example the¬†window.getKanbanData() is setting the assignment of the user to the task and the Kanban shows that. When I do that same thing sending it via json remotely, it is not setting it properly.

     

    So if I set my javascript as…

    async function fetchData() {
        let response = await fetch('/she_test/test2.php');
    
        console.log(response.status);
    
        if (response.status === 200) {
            let kbData = await response.json();
    
    
            window.Smart('#kanban', class {
                get properties() {
                    return {
                        addNewButton: true,
                        collapsible: true,
                        dataSource: kbData.tasks,
                        editable: true,
                        taskActions: true,
                        taskDue: true,
                        taskProgress: true,
                        userList: true,
                        users: kbData.users,
                        columns: [
                            { label: 'To do', dataField: 'toDo' },
                            { label: 'In progress', dataField: 'inProgress' },
                            { label: 'Testing', dataField: 'testing' },
                            { label: 'Done', dataField: 'done', addNewButton: false }
                        ]
                    };
                }
            });
            return kbData
        }
    }
    fetchData();
    
    
    
    and it is calling a the following php script...
    <?php
    $out = array('tasks'=>array(),'users'=>array());
    
    $out['tasks'][] = array(
        'id' => 0,
        'status' => 'done',
        'text' => 'Task 1',
        'tags' => getTags(0),
        'progress' => 100,
        'userId' => 2
    
    );
    $out['tasks'][] = array(
        'id' => 1,
        'status' => 'done',
        'text' => 'Task 2',
        'tags' => getTags(1),
        'priority' => 'high',
        'progress' => 100,
        'userId' => 3
    );
    $out['tasks'][] = array(
        'id' => 2,
        'status' => 'done',
        'text' => 'Task 4',
        'tags' => getTags(2) .', '. getTags(3),
        'priority' => 'high',
        'progress' => 100,
        'userId' => 2
    );
    $out['tasks'][] = array(
        'id' => 3,
        'status' => 'done',
        'text' => 'Task 5',
        'tags' => getTags(3),
        'userId' => 1
    );
    $out['tasks'][] = array(
        'id' => 4,
        'status' => 'done',
        'text' => 'Task 6',
        'tags' => getTags(1) .', '. getTags(3),
        'progress' => 100,
        'userId' => 0
    );
    $out['tasks'][] = array(
        'id' => 5,
        'status' => 'testing',
        'text' => 'Task 7',
        'tags' => getTags(2),
        'progress' => 90,
        'userId' => 3
    );
    $out['tasks'][] = array(
        'id' => 7,
        'status' => 'Task 8',
        'tags' => getTags(1) .', '. getTags(3),
        'progress' => 100,
        'userId' => 3
    );
    $out['tasks'][] = array(
        'id' => 6,
        'status' => 'testing',
        'text' => 'Task 9',
        'tags' => getTags(4),
        'color' => '#9966CC',
        'userId' => 3
    );
    $out['tasks'][] = array(
        'id' => 8,
        'status' => 'inProgress',
        'text' => 'Task 21',
        'tags' => getTags(4) .', '. getTags(1),
        'progress' => 25,
        'userId' => 0
    );
    $out['tasks'][] = array(
        'id' => 9,
        'status' => 'inProgress',
        'text' => 'Task 22',
        'tags' => getTags(2),
        'priority' => 'high',
        'progress' => 85,
        'color' => 'red',
        'userId' => 1
    );
    $out['tasks'][] = array(
        'id' => 10,
        'status' => 'inProgress',
        'text' => 'Task 23',
        'tags' => getTags(5),
        'userId' => 2
    );
    $out['tasks'][] = array(
        'id' => 11,
        'status' => 'toDo',
        'text' => 'Task 24',
        'tags' => getTags(5),
        'priority' => 'high',
        'progress' => 0
    );
    $out['tasks'][] = array(
        'id' => 12,
        'status' => 'toDo',
        'text' => 'Task 25',
        'tags' => getTags(2)
    );
    $out['tasks'][] = array(
        'id' => 13,
        'status' => 'toDo',
        'text' => 'Task 26',
        'tags' => getTags(2) .', '. getTags(5) .', '. getTags(1),
        'priority' => 'low',
        'userId' => 4
    );
    $out['tasks'][] = array(
        'id' => 14,
        'status' => 'toDo',
        'text' => 'Task 27',
        'userId' => 1
    );
    $out['tasks'][] = array(
        'id' => 15,
        'status' => 'toDo',
        'text' => 'Task 28',
        'tags' => getTags(1)
    );
    
    
    $out['users'][] = array('id'=> 0, 'name'=> 'Andrew', 'image'=> '/she_test/images/people/andrew.png');
    $out['users'][] = array('id'=> 1, 'name'=> 'Anne', 'image'=> '/she_test/images/people/anne.png');
    $out['users'][] = array('id'=> 2, 'name'=> 'Janet', 'image'=> '/she_test/images/people/janet.png');
    $out['users'][] = array('id'=> 3, 'name'=> 'John', 'image'=> '/she_test/images/people/john.png');
    $out['users'][] = array('id'=> 4, 'name'=> 'Laura', 'image'=> '/she_test/images/people/laura.png');
    
    echo json_encode($out);
    exit();
    function getTags($tag=0){
        $tags = array(
            0 => 'initial', 1 => 'data', 2=>'visual', 3=>'property', 4=>'scrolling', 5=>'method');
        return $tags[$tag];
    }
    
    
    It should set the assignment of the tasks be setting the userId in the json data. It is not doing that. I have tried many different ways, just nothing seems to work.
    #101853
    Avatar
    Yavor Dashev
    Participant

    Hi Clintre,

    Thank you for the detailed information and code snippet!

    This way I was able to further test your case and come to a solution for it.

    In order for your use case to work properly you need to bind for DOMContentLoaded event of the ‘document’ like so:

    document.addEventListener('DOMContentLoaded', () => {
      async function fetchData() {
        let response = await fetch('/server.php');
    
        if (response.status === 200) {
            let kbData = await response.json();
    
            window.Smart('#kanban', class {
                get properties() {
                    return {
                        addNewButton: true,
                        collapsible: true,
                        dataSource: kbData.tasks,
                        editable: true,
                        taskActions: true,
                        taskDue: true,
                        taskProgress: true,
                        userList: true,
                        users: kbData.users,
                        columns: [
                            { label: 'To do', dataField: 'toDo' },
                            { label: 'In progress', dataField: 'inProgress' },
                            { label: 'Testing', dataField: 'testing' },
                            { label: 'Done', dataField: 'done', addNewButton: false }
                        ]
                    };
                }
            });
            return kbData
        }
    }
    fetchData();
    })

    Also the same result can be achieved if you move all your scripts in the <head> tag.
    And I strongly recommend you to add the following code in your php script when encoding the data into json like so:

    header('Content-Type: application/json');
    
    echo json_encode($out);

    Let me know if that works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team
    https://www.htmlelements.com/

    #101854
    Avatar
    Clintre
    Participant

    Thanks got it figured out

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.