Практические руководства

Рекомендуем также ознакомиться с Практическими руководствами для File Manager. Так как Document Manager разработан на базе этого виджета, кастомизируется он таким же образом.

Редактирование Excel файлов

Интеграция Document Manager и Spreadsheet расширяет возможности редактирования Excel файлов.

Необходимые файлы

Прежде всего подключите Spreadsheet на страницу:

<!-- spreadsheet js файл -->
<script src="codebase/spreadsheet.js" type="text/javascript"></script>
<!-- spreadsheet css файл -->
<link rel="stylesheet" type="text/css" href="codebase/spreadsheet.css">

Добавление редактора в UI

После того как вы подключили Spreadsheet, создайте новый класс, унаследовав его от класса по умолчанию (docManager.views.excel). Внутри метода config() задайте конфигурацию для Spreadsheet и добавьте редактор в UI.

Добавление Spreadsheet в UI

class Editor extends docManager.views["editor/excel"] {
  config() {
    const ui = super.config();
    ui.rows[1].cols[0] = {
      view: "spreadsheet",
      localId: "editor",
      //...
    };
    return ui;
  }
}

Чтобы отслеживать изменения в редакторе, подпишитесь на событие onChange и вызовите метод ChangeTextState(), передав в него true в качестве аргумента:

Переопределение логики init

class Editor extends docManager.views["editor/excel"] {
  //...
    init() {
    // логика по умолчанию
    super.init();
    // Spreadsheet использует другое событие для отслеживания изменений
    this.on(this.$$("editor"), "onChange", () =>
      this.ChangeTextState(true, this.File.id)
    );
  }
}

После этого не забудьте переопределить класс по умолчанию с помощью свойства override:

Переопределение класса по умолчанию

webix.ui({
  view: "docmanager",
  url: "https://master--docmanager-go--dev.webix.io/",
  // переопределяет исходный класс
  override: new Map([[docManager.views.excel, Editor]])
});

Сохранение файлов

Создайте и опишите метод для сохранения файлов, поместив в него всю необходимую логику:

Пользовательский метод для сохранения

Save(id) {
  if (!id) id = this.File.id;
 
  const editor = this.$$("editor");
  // прекращает редактирование и закрывает редактор
  editor.$$("cells").editStop();
 
  if (this._changed[id]) {
    return webix
      .toExcel(editor, { /* optional export settings */ })
      .then(data => {
        return this.app
          .getService("operations")
          .writeBinary(id, this.File.value, data)
          .then(() => {
            this.ChangeTextState(false, id);
          });
      });
  }
  return webix.promise.resolve();
}

Режим Readonly для Spreadsheet и дополнительная логика сбора ячеек с изменениями

Настройка режима readonly у Spreadsheet работает иначе. Кроме того, Spreadsheet требует другого подхода к сбору изменений. Прежде всего необходимо переопределить метод SetBatch:

переопределить Spreadsheet только для чтения
собрать ячейки с изменениями для каждой открытой таблицы и сохранить их на будущее

SetBatch(batch) {
  this.getRoot()
    .queryView("toolbar")
    .showBatch(batch);
 
  //  Spreadsheet режим "только для чтения"
  this.Editor = webix.ui(
    {
      view: "spreadsheet",
      localId: "editor",
      bottombar: true,
      readonly: true,
    },
    this.$$("editor")
  );
  // добавление прогресс бара
  webix.extend(this.Editor, webix.ProgressBar);
 
  // стилизация изменений в таблице
  this.Editor.attachEvent("onAfterSheetShow", name => {
    if (this.Diffs && this.Diffs[name]) {
      // только для листов, открытых впервые
      if (!this.Diffs[name].diffs) {
        this.Diffs[name].diffs = this.CollectDiffs(
          this.Diffs[name].old,
          this.Diffs[name].new
        );
      }
      this.StyleDiffCells(this.State.diff, name);
    }
  });
}

Как получить текущую версию из истории

В связи с тем, что API стандартного редактора Excel и Spreadsheet отличаются, а также для поддержки версионности нескольких таблиц, вам необходимо переопределить метод ParseVersion.

ParseVersion(v, diff) {
  if (v) {
    this.Editor.showProgress({ type: "top" });  
    const id = this.getSubView("r-side").GetPrevVersion(v);
    this.ResetTotalDiff(id ? false : diff);
 
    if (diff && id) {
      let prevPath = this.app.getService("versions").directLink(id);
      webix.promise
        .all([this.ParseExcel(prevPath), this.ParseExcel(path)])
        .then(res => {
          // хранение данных всех листов
          this.Diffs = this.GetSheetData(res[0], res[1]);           this.Editor.parse(res[1], "excel");         });
    } else {
      this.LoadFile(v);
    }
  }
}

Стилизация изменённых ячеек

Для корректной поддержки множественных таблиц, метод StyleDiffCells также необходимо переопределить:

StyleDiffCells(mode, sheet) {
  if (!sheet) sheet = this.Editor.getActiveSheet();
 
  // получения различий в листах
  const diffs = this.Diffs[sheet].diffs;
  if (diffs && diffs.length) {
    this.Editor.showProgress({ type: "top" });
 
    const method = mode ? "addCellCss" : "removeCellCss";
    const grid = this.Editor.$$("cells");
 
    // добавление CSS класса для изменённых ячеек
    diffs.forEach(d => {
      const colId = grid.columnId(d[1] + 1);
      grid[method](
        grid.getIdByIndex(d[0]),
        colId,
        "webix_docmanager_diff_excel",
        true       );
    });
 
    grid.render();     this.Editor.hideProgress();
  }
}

Как задать текущего пользователя

Модуль Comments позволяет просматривать комментарии к файлам и папкам, а также оставлять комментарии от лица текущего пользователя.

В то же время Golang бэкенд, который прилагается к виджету, не решает вопрос аутентификации пользователя, т.к. у каждой системы свои требования к этому процессу.

Именно поэтому на серверной и клиентской сторонах мы вручную задали текущему пользователю "ID: 1". Чтобы изменить это, необходимы следующие действия:

1. Сперва определите текущего пользователя на сервере ("залогиньте" нового пользователя) и задайте это новое значение в бэкенд коде.

2. После этого передайте новое значение свойству компонента Comments - currentUser. Comments используется в модуле preview/comments:

class Comments extends docManager.views["preview/comments"] {
  config() {
    return super.config().then((ui) => {
      ui.currentUser = 2; // ID нового пользователя
      return ui;
    });
  }
}

3. Чтобы изменения вступили в силу, не забудьте переопределить класс по умолчанию новым классом:

webix.ui({
  view: "docmanager",
  url: "https://docs.webix.com/docmanager-backend/",
  override: new Map([
    [docManager.views["preview/comments"], Comments]
  ]),
});

Наверх