ng2-dragula не совместим с ngb-tabset - PullRequest
Новая
       29

ng2-dragula не совместим с ngb-tabset

0 голосов
/ 30 апреля 2018

Я разрабатываю систему, в которой я использую систему вкладок для отображения содержимого внутри SPA. На некоторых страницах, однако, я должен использовать ng2-dragula для реализации системы drag-n-drop, как вы можете видеть в коде ниже. 

<div class="row">
                    <div class="col-4">
                        <div class="card border">
                            <div class="card-body">
                                <h4 class="card-title">BNCC</h4>
                                <div class="card-text">
                                    <small class="text-muted font-italic font-weight-light">Selecione o ano/faixa, a disciplina e arraste para o mês, ou meses, que deseja aplicar.</small><br>

                                    <label for="exampleInputEmail1" class="mt-2">Ano/faixa</label>
                                    <select class="custom-select" id="exampleInputEmail1">
                                        <option value="1" selected>1º</option>
                                        <option value="2">2º</option>
                                        <option value="3">3º</option>
                                        <option value="4">4º</option>
                                    </select>

                                    <label for="exampleInputEmail1" class="mt-2">Disciplina</label>
                                    <select class="custom-select" id="exampleInputEmail1">
                                        <option value="matematica" selected>Matemática</option>
                                        <option value="portugues">Português</option>
                                        <option value="fisica">Física</option>
                                        <option value="ingles">Inglês</option>
                                    </select>

                                    <table class="table table-hover mt-3">
                                        <tbody [dragula]="'bagtwo'" [dragulaModel]="listaBncc">
                                            <tr *ngFor="let habilidade of listaBncc"> 
                                                <td style="cursor: move;">{{habilidade.habilidadeDesc}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-text">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th scope="col"><span class="h4">Janeiro</span>
                                                <button class="float-right btn btn-outline-success" placement="left" ngbTooltip="Adicionar item personalizado para este mês"><i aria-hidden="true" class="fa fa-plus"></i></button></th>
                                            </tr>
                                        </thead>
                                        <tbody [dragula]="'bagtwo'" [dragulaModel]="programacaoBnccJan">
                                            <tr *ngFor="let planoJan of programacaoBnccJan"> 
                                                <td>{{planoJan.habilidadeDesc}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <table *ngIf="!programacaoBnccJan.length">
                                        <tbody [dragula]="'bagtwo'" [dragulaModel]="programacaoBnccJan">
                                            <tr> 
                                                <td class="text-muted font-italic">Você ainda não criou nenhuma pergunta.</td>
                                            </tr>
                                        </tbody>
                                    </table>

(игнорировать закрывающие теги, я не вставил их для оптимизации чтения, но они присутствуют в коде)

Проблема, с которой я сталкиваюсь, заключается в том, что перетаскиваемые объекты будут невидимы, пока я не наведу на внешнюю вкладку , что наводит меня на мысль, что Драгула не будет отображаться дважды в одном и том же виде или, по крайней мере, когда он разделен на «два» представления. Теоретически, при наведении курсора на внешнюю вкладку отображается текущая вкладка (в которую я перетащил элемент).

Я попытался установить <ngb-tabset [destroyOnHide]="true"> безрезультатно.

Проверьте страницу .ts ниже. 

import { Component,ChangeDetectionStrategy,ViewChild,TemplateRef,OnInit } from '@angular/core';
import { DragulaService, DragulaDirective } from 'ng2-dragula';
import { startOfDay,endOfDay,subDays,addDays,endOfMonth,isSameDay,isSameMonth,addHours } from 'date-fns';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Subject } from 'rxjs/Subject';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { multi } from '../data';
import { CalendarEvent,CalendarDateFormatter,DAYS_OF_WEEK,CalendarEventAction,CalendarEventTimesChangedEvent } from 'angular-calendar';
import { CustomDateFormatter } from '../custom-date-formatter.provider';
import {CreateNewAutocompleteGroup, SelectedAutocompleteItem, NgAutocompleteComponent} from "ng-auto-complete";

@Component({
  selector: 'pedagogica',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './pedagogica.html',
  styleUrls: ['./pedagogica.css', '../../node_modules/dragula/dist/dragula.css']
})

export class pedagogica {
  single = [{"name": "Pergunta 1","value": 15},{"name": "Pergunta 2","value": 33},{"name": "Pergunta 3","value": 9},{"name": "Pergunta 4","value": 18},{"name": "Pergunta 5","value": 29}];

  @ViewChild('modalContent') modalContent: TemplateRef<any>;

  multi: any[];
  questoesDisp = [
    {pergunta: 'O que significa o verbo \'to be\'?', id: '1', materia: 'Inglês', dificuldade: '1º ano'},
    {pergunta: 'O que é que cede a energia a uma célula?', id: '2', materia: 'Biologia', dificuldade: '1º ano'},
    {pergunta: 'Para que serve a série triboelétrica?', id: '3', materia: 'Física', dificuldade: '3º ano'}
  ]
  questoesSelec = [];
  programacaoBnccJan = []; /* questões BNCC para janeiro */
  programacaoBnccFev = []; /* questões BNCC para fevereiro */
  programacaoBnccMar = []; /* questões BNCC para março */
  programacaoBnccAbr = []; /* questões BNCC para abril */
  programacaoBnccMai = []; /* questões BNCC para maio */
  programacaoBnccJun = []; /* questões BNCC para junho */
  programacaoBnccJul = []; /* questões BNCC para julho */
  programacaoBnccAgo = []; /* questões BNCC para agosto */
  programacaoBnccSet = []; /* questões BNCC para setembro */
  programacaoBnccOut = []; /* questões BNCC para outubro */
  programacaoBnccNov = []; /* questões BNCC para novembro */
  programacaoBnccDez = []; /* questões BNCC para dezembro */
  questoesPerson = [{pergunta: 'What are irregular verbs?', id: '1', materia: 'Inglês', dificuldade: '2º ano'}];
  historicoDesafios = [{data: '25/04/18', quantidade: '5', turma: 'Turma 101 - 1º ano Fundamental Tarde'}];
  listaBncc = [
    {"habilidadeDesc": "(EF01MA01) Utilizar números naturais como indicador de quantidade ou de ordem em diferentes situações cotidianas e reconhecer situações em que os números não indicam contagem nem ordem, mas sim código de identificação."},
    {"habilidadeDesc": "(EF01MA02) Contar de maneira exata ou aproximada, utilizando diferentes estratégias como o pareamento e outros agrupamentos."},
    {"habilidadeDesc": "(EF01MA03) Estimar e comparar quantidades de objetos de dois conjuntos (em torno de 20 elementos), por estimativa e/ou por correspondência (um a um, dois a dois) para indicar “tem mais”, “tem menos” ou “tem a mesma quantidade”."}
  ];

  constructor(private dragulaService: DragulaService, private modalService: NgbModal) {
    this.dragulaService.setOptions('bagtwo', {
      copy: true
    });
  }

  openSm(content) {
    this.modalService.open(content, { size: 'sm' });
  }
  openLg(content) {
    this.modalService.open(content, { size: 'lg' });
  }

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  colorScheme = 'fire';
  showYAxisLabel = true;
  yAxisLabel = 'Population';
  // line, area
  autoScale = true;
}

Любая помощь будет принята с благодарностью. Спасибо за ваше время.

1 Ответ

0 голосов
/ 30 апреля 2018

Я понял, что вы должны обновить представление, чтобы показать несколько обновлений, выполненных в SPA. «Наведение внешней вкладки» сработало только потому, что я установил ngb-tooltip, который создал новый div при наведении курсора, и уничтожил его после перемещения курсора.

Итак, я реализовал компонент тоста , такой как этот, для Angular 4 , который обновил представление, сообщая об успешном изменении (как в «Вы переместили элемент! Уау!»), Так что это был победа / победа.

Возможно, это не самое элегантное решение, но в любом случае это решение. Я надеюсь, что это может помочь кому-то еще.

...