Packages

mavu_list

0.2.3
1.0.24 1.0.23 1.0.22 1.0.21 1.0.20 1.0.19 1.0.15 1.0.14 1.0.13 1.0.12 1.0.11 1.0.10 1.0.9 1.0.8 1.0.7 1.0.6 1.0.5 1.0.4 1.0.3 1.0.2 1.0.1 0.2.10 0.2.9 0.2.8 0.2.7 0.2.6 0.2.5 0.2.3 0.2.2 0.2.1 0.1.11 0.1.10 0.1.9 0.1.8 0.1.7 0.1.6 0.1.5

List helpers used in other upcoming packages under mavuio/*

HexDocs

Current section

Files

Jump to
Readme
37 Versions
11 Dependencies
2 Dependants
Files
Activity
mavu_list assets mavu_list_column_chooser_hook.js
Raw

assets/mavu_list_column_chooser_hook.js 

import Sortable from 'sortablejs';



const defineComponent = () => {

    Alpine.data('mavu_list_column_chooser_component', () => ({

        init() {

            this.setupSortable()

        },

        setupSortable() {

            console.log('#log 3433 setup sortable');

            Sortable.create(this.$refs.items, {

                handle: '.drag-handle',

                animation: 150,

                onUpdate: () => this.syncSortOrder()

            });

        },

        syncSortOrder() {

            let new_order_str = [...this.$refs.items.children]

                .map(item => {

                    let hiddenInput = item.querySelector('input[name$="[name]"]')

                    return hiddenInput ? hiddenInput.value : null

                })

                .filter( item => item!==null )

                .join(',');



            let orderInput = this.$el.querySelector('input[name$="[col_order]"]');

            orderInput.value=new_order_str;



        },

    }));

};

document.addEventListener('alpine:init', defineComponent);





window.addEventListener('phx:update_param_in_url', (e) => {

    const url = new URL(document.location);

    url.searchParams.set(e.detail.name, e.detail.value);

    window.history.pushState({}, '', url);

  });









const MavuListColumnChooserHook = {};

export default MavuListColumnChooserHook;