saby-customizer 0.0.0-pre.27 → 0.0.0-pre.28

package/features/git-branch.js

@@ -3,6 +3,187 @@ import { keysMapping, toolbar, PopupDialog, getListOfOpenCards, snackbar, contex
 import { octicons } from 'saby-customizer/octicons.js'
 
 
+/** Класс для управления данными карточки задачи */
+class GitBranchCardData {
+
+  /**
+   * @typedef GitCardData
+   * @property {string} [branchSubName] Имя ветки указанное пользователем
+   */
+  /** @param {import('saby-customizer/lib.js').CardData & GitCardData} data Данные о задаче */
+  constructor(data) {
+    /** @type {import('saby-customizer/lib.js').CardData & GitCardData} Данные о задаче */
+    this.raw = {
+      id: data.id,
+      number: data.number,
+      branchSubName: data.branchSubName || data.number,
+      date: data.date,
+      name: data.name,
+      uuid: data.uuid,
+      url: data.url,
+      author: data.author,
+      milestones: data.milestones,
+      version: data.version,
+      description: data.description
+    }
+  }
+
+  /** @returns {string} Название регламента Задача/Ошибка и т.д. */
+  get name() {
+    return this.raw.name
+  }
+
+  /** @returns {string} Заголовок для описания задачи */
+  get branchTitle() {
+    const { name } = this.raw
+    const docNumber = ' № ' + this.raw.number
+    const version = ' веха ' + this.raw.version
+    const date = ' от ' + this.raw.date
+    const author = ' ' + this.raw.author
+
+    return name + docNumber + version + date + author
+  }
+
+  /** @returns {string} Версия задачи (веха), выбранная пользователем */
+  get version() {
+    return this.raw.version
+  }
+
+  /**
+   * Обновление выбранной версии и обновление карточки задачи
+   *
+   * @param {string} value Версия
+   */
+  set version(value) {
+    if (this.raw.milestones && this.raw.milestones.includes(value)) {
+      this.raw.version = value
+    }
+  }
+
+  /** @returns {string} Часть имени ветки, зависящая от регламента задачи */
+  get branchType() {
+    return this.raw.name === 'Ошибка' ? 'bugfix' : 'feature'
+  }
+
+  /** @returns {string} Часть имени ветки, определяемая пользователем */
+  get branchSubName() {
+    return this.raw.branchSubName
+  }
+
+  /**
+   * Обновление доп. имени ветки и обновление карточки задачи
+   *
+   * @param {string} value Доп. имя ветки
+   */
+  set branchSubName(value) {
+    this.raw.branchSubName = value || this.raw.number
+  }
+
+  /** @returns {string} Краткое описание задачи */
+  get description() {
+    return this.raw.description
+  }
+
+  /**
+   * Обновление краткого описания и карточки задачи
+   *
+   * @param {string} value Доп. имя ветки
+   */
+  set description(value) {
+    this.raw.description = value || ''
+  }
+
+  /** @returns {string[]} Список доступных вех (версий) */
+  get milestones() {
+    return this.raw.milestones
+  }
+
+  /** @returns {string} Ссылка на документ в отдельной вкладке */
+  get url() {
+    return this.raw.url
+  }
+
+  /**
+   * Получение имени ветки с учетом выбора вехи и доп. имени ветки
+   *
+   * @returns {Promise<string>} Имя ветки
+   */
+  async getBranchName() {
+    const userLogin = await context.userLogin
+
+    return `${this.version}/${this.branchType}/${userLogin}/${this.branchSubName}`
+  }
+
+  /** Копирование ссылки на задачу */
+  copyLink() {
+    navigator.clipboard.writeText(this.raw.url)
+    snackbar.show(`Скопирована ссылка: ${this.raw.url}`)
+  }
+
+  /** Копирование имени ветки */
+  async copyBranchName() {
+    const branchName = await this.getBranchName()
+
+    navigator.clipboard.writeText(branchName)
+    snackbar.show(`Скопировано имя ветки: ${branchName}`)
+
+    await this.saveToHistory()
+  }
+
+  /** Копирование описания для git commit */
+  async copyDescription() {
+    const description = this.branchTitle + '\n' +
+      this.raw.url + '\n' +
+      this.raw.description
+
+    navigator.clipboard.writeText(description)
+    snackbar.show(`Скопировано описание для git commit:\n${description}`)
+
+    await this.saveToHistory()
+  }
+
+  /** Сохраняет данные в историю по карточкам для которых копировали имя ветки или описание */
+  async saveToHistory() {
+    const branchName = await this.getBranchName()
+    const gitBranchHistory = db.table('gitBranchHistory')
+    const historyOldData = await gitBranchHistory.get({
+      id: this.raw.id,
+      branch: branchName
+    })
+    const historyData = {
+      id: this.raw.id,
+      branch: branchName,
+      version: this.version,
+      useDate: new Date(),
+      data: this.raw
+    }
+
+    if (historyOldData) {
+      await gitBranchHistory.update(historyOldData.pk, historyData)
+    } else {
+      await gitBranchHistory.add(historyData)
+    }
+  }
+
+  /** Восстановление из истории последнего сохраненного состояния карточки */
+  async restoreFromHistory() {
+    const gitBranchHistory = db.table('gitBranchHistory')
+    const historyData = await gitBranchHistory
+      .where({ id: this.raw.id })
+      .reverse()
+      .sortBy('useDate')
+
+    if (historyData && historyData.length > 0) {
+      const [{ data: { version, branchSubName, description } }] = historyData
+
+      this.version = version
+      this.branchSubName = branchSubName
+      this.description = description
+    }
+  }
+
+}
+
 /** Карточка со сведениями о задаче для копирования ветки */
 class GitBranchCard extends oom.extends(HTMLElement) {
 
@@ -105,28 +286,11 @@ class GitBranchCard extends oom.extends(HTMLElement) {
     return String(Math.min(Math.max(1, rows), 5))
   }
 
-  /**
-   * @typedef GitCardData
-   * @property {string} [branchSubName] Имя ветки указанное пользователем
-   */
-  /** @type {import('saby-customizer/lib.js').CardData & GitCardData} Данные о задаче */
-  data = {
-    id: this.options.data.id,
-    number: this.options.data.number,
-    branchSubName: this.options.data.branchSubName || this.options.data.number,
-    date: this.options.data.date,
-    name: this.options.data.name,
-    uuid: this.options.data.uuid,
-    url: this.options.data.url,
-    author: this.options.data.author,
-    milestones: this.options.data.milestones,
-    version: this.options.data.version,
-    description: this.options.data.description
-  }
+  data = new GitBranchCardData(this.options.data)
 
   elements = {
     /** @type {HTMLSpanElement} */
-    cardTitle: oom.span(this.branchTitle, { title: this.branchTitle }).dom,
+    cardTitle: oom.span(this.data.branchTitle, { title: this.data.branchTitle }).dom,
     /** @type {import('@material/mwc-icon-button').IconButton} */// @ts-ignore
     copyLinkButton: oom.mwcIconButton({
       title: 'Скопировать ссылку',
@@ -167,7 +331,7 @@ class GitBranchCard extends oom.extends(HTMLElement) {
     /** @type {HTMLSpanElement} */
     branchNamePart: oom.span({
       class: 'branch-part'
-    }, `/${this.branchType}/***/`).dom,
+    }, `/${this.data.branchType}/***/`).dom,
     /** @type {HTMLSpanElement} */
     branchSubName: oom.span({
       title: this.data.branchSubName,
@@ -199,17 +363,6 @@ class GitBranchCard extends oom.extends(HTMLElement) {
     }).dom
   }
 
-  /** @returns {string} Заголовок для описания задачи */
-  get branchTitle() {
-    const { name } = this.data
-    const docNumber = ' № ' + this.data.number
-    const version = ' веха ' + this.version
-    const date = ' от ' + this.data.date
-    const author = ' ' + this.data.author
-
-    return name + docNumber + version + date + author
-  }
-
   /** @returns {string} Версия задачи (веха), выбранная пользователем */
   get version() {
     return this.data.version
@@ -221,18 +374,13 @@ class GitBranchCard extends oom.extends(HTMLElement) {
    * @param {string} value Версия
    */
   set version(value) {
-    if (this.data.milestones && this.data.milestones.includes(value)) {
-      this.data.version = value
+    this.data.version = value
+    if (this.data.version === value) {
       this.elements.branchButton.textContent = this.data.version
-      this.elements.cardTitle.textContent = this.branchTitle
+      this.elements.cardTitle.textContent = this.data.branchTitle
     }
   }
 
-  /** @returns {string} Часть имени ветки, зависящая от регламента задачи */
-  get branchType() {
-    return this.data.name === 'Ошибка' ? 'bugfix' : 'feature'
-  }
-
   /** @returns {string} Часть имени ветки, определяемая пользователем */
   get branchSubName() {
     return this.data.branchSubName
@@ -244,7 +392,7 @@ class GitBranchCard extends oom.extends(HTMLElement) {
    * @param {string} value Доп. имя ветки
    */
   set branchSubName(value) {
-    this.data.branchSubName = value || this.data.number
+    this.data.branchSubName = value
     oom(this.elements.branchSubName, { innerHTML: '', title: this.data.branchSubName }, this.data.branchSubName)
     if (this.elements.branchSubNameTextfield.value !== this.data.branchSubName) {
       this.elements.branchSubNameTextfield.value = this.data.branchSubName
@@ -262,7 +410,7 @@ class GitBranchCard extends oom.extends(HTMLElement) {
    * @param {string} value Доп. имя ветки
    */
   set description(value) {
-    this.data.description = value || ''
+    this.data.description = value
     this.elements.description.title = this.data.description
     this.elements.description.textContent = this.data.description
     if (this.elements.descriptionTextarea.value !== this.data.description) {
@@ -305,7 +453,7 @@ class GitBranchCard extends oom.extends(HTMLElement) {
   async updateBranchNamePart() {
     const userLogin = await context.userLogin
 
-    this.elements.branchNamePart.textContent = `/${this.branchType}/${userLogin}/`
+    this.elements.branchNamePart.textContent = `/${this.data.branchType}/${userLogin}/`
   }
 
   /** Открывает форму редактирования редактирование описания для коммита */
@@ -344,85 +492,29 @@ class GitBranchCard extends oom.extends(HTMLElement) {
     }
   }
 
-  /**
-   * Получение имени ветки с учетом выбора вехи и доп. имени ветки
-   *
-   * @returns {Promise<string>} Имя ветки
-   */
-  async getBranchName() {
-    const userLogin = await context.userLogin
-
-    return `${this.version}/${this.branchType}/${userLogin}/${this.branchSubName}`
-  }
-
   /** Копирование ссылки на задачу */
   copyLink() {
-    navigator.clipboard.writeText(this.data.url)
-    snackbar.show(`Скопирована ссылка: ${this.data.url}`)
+    this.data.copyLink()
   }
 
   /** Копирование имени ветки */
   async copyBranchName() {
     if (this.elements.branchSubNameTextfield.checkValidity()) {
-      const branchName = await this.getBranchName()
-
-      navigator.clipboard.writeText(branchName)
-      snackbar.show(`Скопировано имя ветки: ${branchName}`)
-
-      await this.saveToHistory()
+      await this.data.copyBranchName()
     }
   }
 
   /** Копирование описания для git commit */
   async copyDescription() {
-    const description = this.branchTitle + '\n' +
-      this.data.url + '\n' +
-      this.description
-
-    navigator.clipboard.writeText(description)
-    snackbar.show(`Скопировано описание для git commit:\n${description}`)
-
-    await this.saveToHistory()
-  }
-
-  /** Сохраняет данные в историю по карточкам для которых копировали имя ветки или описание */
-  async saveToHistory() {
-    const branchName = await this.getBranchName()
-    const gitBranchHistory = db.table('gitBranchHistory')
-    const historyOldData = await gitBranchHistory.get({
-      id: this.data.id,
-      branch: branchName
-    })
-    const historyData = {
-      id: this.data.id,
-      branch: branchName,
-      version: this.version,
-      useDate: new Date(),
-      data: this.data
-    }
-
-    if (historyOldData) {
-      await gitBranchHistory.update(historyOldData.pk, historyData)
-    } else {
-      await gitBranchHistory.add(historyData)
-    }
+    await this.data.copyDescription()
   }
 
   /** Восстановление из истории последнего сохраненного состояния карточки */
   async restoreFromHistory() {
-    const gitBranchHistory = db.table('gitBranchHistory')
-    const historyData = await gitBranchHistory
-      .where({ id: this.options.data.id })
-      .reverse()
-      .sortBy('useDate')
-
-    if (historyData && historyData.length > 0) {
-      const [{ data: { version, branchSubName, description } }] = historyData
-
-      this.version = version
-      this.branchSubName = branchSubName
-      this.description = description
-    }
+    await this.data.restoreFromHistory()
+    this.version = this.data.version
+    this.branchSubName = this.data.branchSubName
+    this.description = this.data.description
   }
 
 }
@@ -493,7 +585,33 @@ keysMapping['alt-KeyB'] = () => PopupDialog.toggle({
 })
 
 toolbar.addButton({
+  position: 'right',
   title: 'Ветки для Git',
   iconSVG: octicons['git-branch'].toSVG({ width: 24 }),
   onclick: keysMapping['alt-KeyB']
 })
+
+toolbar.addButton({
+  position: 'top',
+  title: 'Скопировать имя ветки для Git',
+  iconSVG: octicons['git-branch'].toSVG({ width: 24 }),
+  onclick: card => {
+    const gitCard = new GitBranchCardData(card.data)
+
+    gitCard.restoreFromHistory()
+      .then(() => gitCard.copyBranchName().catch(console.error))
+      .catch(console.error)
+  }
+})
+toolbar.addButton({
+  position: 'top',
+  title: 'Скопировать описание для Git коммита',
+  iconSVG: octicons['git-commit'].toSVG({ width: 24 }),
+  onclick: card => {
+    const gitCard = new GitBranchCardData(card.data)
+
+    gitCard.restoreFromHistory()
+      .then(() => gitCard.copyDescription().catch(console.error))
+      .catch(console.error)
+  }
+})

package/lib/saby-lib/edo.js

@@ -79,9 +79,15 @@ function parseRichEditorJSON(json) {
  * @property {string} version Ближайшая версия
  * @property {string} description Краткий текст описания задачи
  */
+/**
+ * @typedef Card Экземпляр карточки документа
+ * @property {HTMLElement} element DOM элемент карточки
+ * @property {CardData} data Данные карточки
+ */
 /**
  * @typedef OpenCardsFilter Фильтры для выборки документов
  * @property {Array<string>} [names] Фильтр по названию документа
+ * @property {string} [id] Идентификатор документа
  * @property {boolean} [hasVersion] Документ включен хотя бы в 1 веху
  * @property {boolean} [duplicates] Показать/скрыть из ответа документы которые открыты дважды
  */
@@ -89,7 +95,7 @@ function parseRichEditorJSON(json) {
  * Собирает из верстки страницы список открытых в данный момент карточек документов ЭДО
  *
  * @param {OpenCardsFilter} [filter] Параметры фильтрации документов
- * @returns {Array<{element:HTMLElement, data:CardData}>} Список открытых карточке документов
+ * @returns {Array<Card>} Список открытых карточке документов
  */
 export function getListOfOpenCards(filter = {}) {
   const cardNodes = document.querySelectorAll('.edo3-Dialog')
@@ -118,6 +124,10 @@ export function getListOfOpenCards(filter = {}) {
         description: ''
       }
 
+      if (filter.id && filter.id !== data.id) {
+        continue
+      }
+
       if (data && (filter.duplicates || !exists.includes(data.id))) {
         const milestonesRS = record.get('РП.ВехаДокумента') || []
 

package/lib/saby-lib/toolbar.js

@@ -2,26 +2,48 @@ import { oom } from '@notml/core'
 import { getListOfOpenCards } from './edo.js'
 
 const { MutationObserver } = window
-
-
-/** Класс контейнера для расширения правой панели сайта дополнительными кнопками */
-class ToolbarContainer extends oom.extends(HTMLElement, { global: false }) {
+/**
+ * @typedef ToolbarContainerOptions Опции по умолчанию для панели
+ * @property {boolean} global Признак глобальной панели
+ * @property {import('saby-customizer/lib.js').Card} [card] Ссылка на экземпляр карточки задачи
+ * @property {string} [position='right'] Положение панели на сайте right|top
+ */
+/** @type {ToolbarContainerOptions} */
+const optionsDefaults = { global: false, card: null, position: 'right' }
+
+/** Класс контейнера для расширения панели сайта дополнительными кнопками */
+class ToolbarContainer extends oom.extends(HTMLElement, optionsDefaults) {
 
   static tagName = 'saby-customizer-toolbar'
   static style = oom.style({
-    'saby-customizer-toolbar': {
-      marginBottom: '12px'
+    'display': 'flex',
+    'alignItems': 'center',
+    'saby-customizer-toolbar.right': {
+      flexDirection: 'column',
+      marginBottom: '6px'
+    },
+    'saby-customizer-toolbar.top': {
+      marginRight: '8px'
     },
     '.button': {
+      padding: '4px',
       color: 'var(--secondary_icon-color)',
       fill: 'var(--secondary_icon-color)',
       cursor: 'pointer',
-      height: '32px',
-      width: '32px',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
     },
+    'saby-customizer-toolbar.right .button': {
+      height: '32px',
+      width: '32px',
+      marginBottom: '4px'
+    },
+    'saby-customizer-toolbar.top .button': {
+      height: '20px',
+      width: '20px',
+      marginRight: '4px'
+    },
     '.button:hover': {
       color: 'var(--link_hover_text-color)',
       fill: 'var(--link_hover_text-color)',
@@ -34,6 +56,7 @@ class ToolbarContainer extends oom.extends(HTMLElement, { global: false }) {
 
   /**
    * @typedef ButtonOptions
+   * @property {string} [position='right'] Позиция панели в которой отображается кнопка
    * @property {string} title Всплывающая подсказка на кнопке
    * @property {string} iconSVG Верстка иконки в формате SVG
    * @property {Function} onclick Обработчик клика на иконку
@@ -51,11 +74,12 @@ class ToolbarContainer extends oom.extends(HTMLElement, { global: false }) {
   static observer = null
 
   /**
-   * Регистрирует новую общую кнопку в правой панели сайта
+   * Регистрирует новую общую кнопку в панели сайта
    *
    * @param {ButtonOptions} options Опции кнопки
    */
   static addButton(options) {
+    options = Object.assign({ position: 'right' }, options)
     this.buttons.push(options)
 
     this.containers.forEach(container => container.addButton(options))
@@ -70,7 +94,7 @@ class ToolbarContainer extends oom.extends(HTMLElement, { global: false }) {
   }
 
   /**
-   * Добавляет в вертску сайта глобальный контейнер в правой панели для добавления кнопок
+   * Добавляет в вертску сайта глобальный контейнер в панели для добавления кнопок
    */
   static addGlobalContainer() {
     const sabyPageRightPanel = document.querySelector('.sabyPage-MainLayout__rightPanel .sabyPage-MainLayout__wrapper')
@@ -81,7 +105,7 @@ class ToolbarContainer extends oom.extends(HTMLElement, { global: false }) {
     }
   }
 
-  /** Регистрирует обработчик для поиска открытых задач и добавления в них правой панели */
+  /** Регистрирует обработчик для поиска открытых задач и добавления в них панели */
   static registerTaskPanelWatcher() {
     const popupContainer = document.getElementById('popup')
 
@@ -95,10 +119,11 @@ class ToolbarContainer extends oom.extends(HTMLElement, { global: false }) {
   static addTaskPanelContainer() {
     const openTaskList = getListOfOpenCards({ duplicates: true })
 
-    openTaskList.forEach(({ element }) => {
-      const rightPanel = element.querySelector('.controls-StackTemplate__rightPanel .sabyPage-MainLayout__wrapper') ||
+    openTaskList.forEach(card => {
+      const rightPanel = card.element.querySelector('.controls-StackTemplate__rightPanel .sabyPage-MainLayout__wrapper') ||
         // Кнопки для всплывающий панелей в карточке открытой в отдельной вкладке
-        element.querySelector('.controls-StackTemplate__rightPanel .sabyPage-widgets__wrapper')
+        card.element.querySelector('.controls-StackTemplate__rightPanel .sabyPage-widgets__wrapper')
+      const topPanel = card.element.querySelector('.edo3-Dialog__head-firstLine-buttons')
 
       if (rightPanel) {
         const rightSidebar = rightPanel.querySelector('saby-customizer-toolbar')
@@ -107,6 +132,13 @@ class ToolbarContainer extends oom.extends(HTMLElement, { global: false }) {
           rightPanel.prepend(new ToolbarContainer())
         }
       }
+      if (topPanel) {
+        const topSidebar = topPanel.querySelector('saby-customizer-toolbar')
+
+        if (!topSidebar) {
+          topPanel.prepend(new ToolbarContainer({ card, position: 'top' }))
+        }
+      }
     })
   }
 
@@ -114,10 +146,12 @@ class ToolbarContainer extends oom.extends(HTMLElement, { global: false }) {
     // Атрибуты для игнорирования контейнера платформой wasaby
     this.setAttribute('data-vdomignore', 'true')
     this.setAttribute('contenteditable', 'true')
+    this.classList.add(this.options.position)
   }
 
   /** Будем запоминать все контейнеры для синхронизации кнопок */
   connectedCallback() {
+    super.connectedCallback()
     ToolbarContainer.containers.add(this)
     ToolbarContainer.buttons.forEach(options => this.addButton(options))
   }
@@ -133,22 +167,30 @@ class ToolbarContainer extends oom.extends(HTMLElement, { global: false }) {
   }
 
   /**
-   * Добавляет новую общую кнопку в текущий контейнер правой панели
+   * Добавляет новую общую кнопку в текущий контейнер панели
    *
    * @param {ButtonOptions} options Опции кнопки
    */
   addButton(options) {
-    const button = oom.div({
-      class: 'button',
-      title: options.title,
-      onclick: options.onclick
-    })
+    if (this.options.position === options.position) {
+      const button = oom.div({
+        class: 'button',
+        title: options.title,
+        onclick: () => {
+          const [card] = this.options.card
+            ? getListOfOpenCards({ id: this.options.card.data.id })
+            : [null]
+
+          options.onclick(card)
+        }
+      })
 
-    if (options.iconSVG) {
-      button({ innerHTML: options.iconSVG })
-    }
+      if (options.iconSVG) {
+        button({ innerHTML: options.iconSVG })
+      }
 
-    oom(this, button)
+      oom(this, button)
+    }
   }
 
 }