flamecrud

    1.0.86 • Public • Published

    Vue CRUD for Yii2 REST

    Новые фичи:

    • Фильтры добавляют параметры в URL после редактирования, и ссылку с фильтрами можно использовать, чтобы получить готовую отфильтрованную страницу!

    Установка

    npm i flamecrud --save
    

    Импортируем компонент:

    import Vue from 'vue';
    import vuecrud from 'flamecrud';
    Vue.use(vuecrud);
    

    Текущая версия так же требует Bootstrap, т.к. в ней сейчас нет дизайна (вообще)

    npm i bootstrap
    

    И в src/main.js объявить:

    import 'bootstrap/dist/css/bootstrap.min.css';
    

    Используем в шаблоне с параметрами:

    <vuecrud host="http://rest" selectedtable = "objects"></vuecrud> 
    
    • host: endpoint для REST сервиса (обязателен)
    • selectedtable таблица по-умолчанию (обязательно на текущий момент)
    • columnsupdated коллбек после получения колонок, до их вставки
    • rowsupdated коллбек после получения записей, перед их вставкой
    • beforeGetRows коллбек позволяет настроить get-запрос перед применением запроса
    • opts - доп параметры
      • canAdd bool - CRUD может добавлять записи
      • canEdit bool - CRUD может редактировать записи
      • canRemove bool - CRUD может удалять записи
      • where obj - предустановленные условия для фильтрации (добавляются к фильтрам автоматически)
      • filterRowMargin int - отступ между строками фильтров (по-вертикали)

    FLAMEREST так же регистрируется и для window

    Быстрая работа с колонками

    Изменение/добавление набора параметров:

    // функция-реплейсер колонок
    columnsupdated: function (cols) {
          
        // Изменить колонку ID
        cols.set('id',{label: 'TRUST ID', editDesc: 'User ID'});
        
        // Удалить колонку name при выводе
        cols.delete('name');
          
        // Добавить новую колонку, которой нет в выдаче
        cols.new('newColumn',{label: 'TRUST ID', editDesc: 'User ID', representedAs: row=> row.name + ' ' + row.nickname, interpolate: true});
        
    }
    

    Формат колонок

    {
        label: 'ЗАГОЛОВОК', 
        field: 'Имя столбца',
        
        // Стандартное значение колонки при вставке нового элемента, если оно не было заполнено
        defaultValue: undefined,
        
        editName: 'Имя элемента при добавлении/редактировании',
        editDesc: 'Описание элемента при добавлении/редактировании',
        
        // Наличие выносного фильтра для колонки
        hasFilter: false, 
        
        // Тип фильтрации для поля, выясняется автоматически на основе типа записи, но может быть переопределён
        // text - поиск через частичное совпадение (LIKE %%)
        // fulltext - поиск через частичное совпадение (FULLTEXT in boolean mode *)
        // number - числовой поиск в диапазоне от - до
        // fixed - точное совпадение
        type: 'text'
        
        // Технические параметры, устанавливать по необходимости
        filter: 'Текстовый фильтр', 
        filterRange: {from: '', to: ''}, // Ренжовый фильтр для значений
    
        // включить фильтр для колонки
        hasFilter: false,
        
        // Минимальное число символов в строке фильтра, после которого будет произведён запрос
        filterMinSymbolsRequest: 0,
    
        
        // Позиция фильтра на странице (автоматическое распределение)
        filterRow: 0,
        filterColumn: 0,
        
        // Тип элемента в попапе
        // string - обычная строка или селектор строк
        // text - text area
        // file - file select
        // image - select image, crop & resize
        popupType: 'string',
        
        // Загружать поле из REST в таблицу (мгновенная загрузка)
        isLoadToTable: true,
        // Загружать поле из REST в попап (ленивая загрузка, если isLoadToTable=false)
        // если isLoadToTable=false и isLoadToPopup=false, поле вообще никогда загружено из базы не будет
        isLoadToPopup: true,
        
        // Связи с другими таблицами
        
        // Справочно: к какой таблице и полю текущее поле прикреплено
        linkedto: {table: 'objects', field: 'id'},
        
        // Справочно: загруженные значения для связанного поля
        selectResults = [],
        
        // Загружать ли связанные поля (foreign keys) в списки select, или оставить просто значение ключа (классический вариант)
        isLoadKeys: false,
        
        // Возможность управлять загрузкой связанных ключей
        loadKeysParams: {
             where: null,
             expand: null,
             fields: null,
             sortfields: null,
             page: 1,
             perPage: 9999
        },
        
        // Функция, которая приводит формат поля связанного списка в select к кастомному
        selectRepresentAs: column => 'Foreign key ' + column.id
        
        // Показывать поле в таблице
        isShow: true,
        
        // Показывать поле при добавлении\редактировании
        isShowOnPopup: true,
        
        // Поле разрешено редактировать
        // Если isEdit=false и isShowOnPopup=true, оно будет выключено, но показано
        isEdit: true,
        
        popupImage: {
            // прогружать ли кнопки
            buttons: false
        }
        
    }
    

    Дополнительные параметры колонок, которые предустановлены из vue-datatable

    // Специфичный формат одной колонки
    representedAs: row=> row.name,
    
    // Преобразовать колонку в html: true
    interpolate: true
    

    Остальные параметры в: https://gerkindev.github.io/vuejs-datatable/classes/column.html

    Шаблоны

    Все примеры на Pug

    Свой Popup

    Можно установить через слот popup

        template(v-slot:popup)
          div(style="width: 100%; min-height:100%; flex-direction:row; flex-grow: 2; background:#FFF; overflow-y:scroll;") Hello
    

    Кастомный шаблон строки таблицы

        template(v-slot:row="binds")
          tr
            td {{binds.row.name}}
            td {{binds.columns[0].name}}
    

    Строка кнопки добавить и сама кнопка

    Слот для поля с кнопками над таблицей

        template(v-slot:Buttons)
    

    Слот кнопки добавления отдельно

        template(v-slot:AddButton)
    

    Ленивая загрузка паджинации

    Нужна, т.к. запрос на Count(*) занимает значительно большее время, нежели SELECT LIMIT, что для ёмких запросов критично

    opts: {
        lazyLoadPagination: true
    }
    

    Keywords

    none

    Install

    npm i flamecrud

    DownloadsWeekly Downloads

    10

    Version

    1.0.86

    License

    MIT

    Unpacked Size

    79 kB

    Total Files

    17

    Last publish

    Collaborators

    • flameart