saby-customizer 0.0.0-pre.30 → 0.0.0-pre.31

package/features/git-branch.js

@@ -182,6 +182,17 @@ export class GitBranchCardData {
     }
   }
 
+  /**
+   * Удаление карточки задачи из истории
+   *
+   * @param {number} primaryKey Ид записи в истории
+   */
+  async removeFromHistory(primaryKey) {
+    const gitBranchHistory = db.table('gitBranchHistory')
+
+    await gitBranchHistory.delete(primaryKey)
+  }
+
 }
 
 /** Карточка со сведениями о задаче для копирования ветки */
@@ -208,6 +219,10 @@ class GitBranchCard extends oom.extends(HTMLElement) {
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     },
+    '.history-info': {
+      fontSize: '13px',
+      fontStyle: 'italic'
+    },
     '.link': {
       fontSize: '14px',
       color: 'var(--mdc-theme-primary, #6200ee)'
@@ -265,6 +280,10 @@ class GitBranchCard extends oom.extends(HTMLElement) {
     '.description-textarea': {
       width: '100%'
     },
+    '.icon_16': {
+      '--mdc-icon-size': '16px',
+      '--mdc-icon-button-size': '24px'
+    },
     '.icon_18': {
       '--mdc-icon-size': '18px',
       '--mdc-icon-button-size': '24px'
@@ -427,8 +446,32 @@ class GitBranchCard extends oom.extends(HTMLElement) {
 
     this.updateBranchNamePart().catch(console.error)
 
-    return oom.div({ class: 'mdc-card' }, oom
-      .div({ class: 'title' }, this.elements.cardTitle)
+    const cardElement = oom.div({ class: 'mdc-card' }, oom
+      .div({ class: 'title' }, this.elements.cardTitle))
+
+    if (this.options.pk) {
+      // Добавим элементы для карточки задачи из истории
+      const useDate = this.options.useDate.toLocaleString()
+
+      cardElement(oom.div(oom
+        .span({ class: 'history-info' }, `Скопировано: ${useDate}`)
+        .mwcIconButton({
+          title: 'Удалить из истории',
+          class: 'icon_16',
+          innerHTML: octicons.x.toSVG({ width: 16 }),
+          onclick: () => {
+            /** @type {GitBranchCardList} */// @ts-ignore
+            const cardList = this.parentElement.parentElement
+
+            this.remove()
+            this.data.removeFromHistory(this.options.pk)
+              .then(() => cardList.buildHistoryList())
+              .catch(console.error)
+          }
+        })))
+    }
+
+    return cardElement(oom
       .div(oom
         .a({ class: 'link' }, this.data.url, {
           target: '_blank',
@@ -531,8 +574,26 @@ class GitBranchCardList extends oom.extends(HTMLElement) {
       textAlign: 'center'
     },
     '.content': {
-      overflow: 'auto',
-      maxHeight: 'calc(var(--mdc-dialog-max-height) - 100px)'
+      flexGrow: '1',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      maxHeight: 'calc(var(--mdc-dialog-max-height) - 100px)',
+      background: 'var(--mdc-theme-background)'
+    },
+    '.hide': {
+      display: 'none'
+    },
+    '.nav-buttons': {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: '4px 4px 0px'
+    },
+    '.nav-buttons-space': {
+      width: '64px'
+    },
+    '.nav-buttons-page-label': {
+      userSelect: 'none'
     }
   })
 
@@ -542,16 +603,38 @@ class GitBranchCardList extends oom.extends(HTMLElement) {
       // .mwcTab({ label: 'Список задач' })
       .mwcTab({ label: 'История задач' }))
 
-  list = oom.div({ class: 'content' })
+  openTaskList = oom.div({ class: 'content' }, oom.div({ class: 'empty' }, 'Загрузка ...'))
+  historyTaskList = oom.div({ class: 'content hide' })
+
+  // Параметры навигации по истории
+  historyListPage = 0
+  historyListLimit = 3
 
   template = async () => {
     // if (this.openTaskList.length === 0) {
     //   this.tabs({ activeindex: '1' })
     // }
-    oom(this, this.tabs, this.list)
-    oom(this.list, oom.div({ class: 'empty' }, 'Загрузка ...'))
+    oom(this, this.tabs, this.openTaskList, this.historyTaskList)
+
+    this.tabs.dom.addEventListener('MDCTabBar:activated', (/** @type {CustomEvent<import('@material/mwc-list/mwc-list-foundation').ActionDetail>} */event) => {
+      switch (event.detail.index) {
+        case 0:
+          this.historyTaskList({ innerHTML: '' })
+          this.historyTaskList.dom.classList.add('hide')
+          this.openTaskList.dom.classList.remove('hide')
+          break
+        case 1:
+          this.historyTaskList({ innerHTML: '' }, oom.div({ class: 'empty' }, 'Загрузка ...'))
+          this.openTaskList.dom.classList.add('hide')
+          this.historyTaskList.dom.classList.remove('hide')
+          this.historyListPage = 0
+          this.historyListLimit = 3
+          this.buildHistoryList().catch(console.error)
+          break
+      }
+    })
 
-    this.list({ innerHTML: '' }, await this.buildTaskList())
+    this.openTaskList({ innerHTML: '' }, await this.buildTaskList())
   }
 
   /** @returns {Promise<HTMLElement|DocumentFragment>} Вернет готовый список задач с учетом аинхронной загрузки данных */
@@ -573,6 +656,52 @@ class GitBranchCardList extends oom.extends(HTMLElement) {
     return taskTist.dom
   }
 
+  /** Строит компонент списка истории задач */
+  async buildHistoryList() {
+    const offset = this.historyListPage * this.historyListLimit
+    const navButtons = oom.div({ class: 'nav-buttons' })
+    const gitBranchHistory = db.table('gitBranchHistory')
+    const historyData = await gitBranchHistory
+      .orderBy('useDate')
+      .reverse()
+      .offset(offset)
+      .limit(this.historyListLimit + 1)
+      .toArray()
+
+    if (historyData.length > 0) {
+      if (this.historyListPage > 0) {
+        navButtons(oom.mwcButton({
+          innerHTML: octicons['arrow-left'].toSVG({ width: 24 }),
+          onclick: () => {
+            --this.historyListPage
+            this.buildHistoryList().catch(console.error)
+          }
+        }))
+      } else {
+        navButtons(oom.span({ class: 'nav-buttons-space' }))
+      }
+      navButtons(oom.span(`${offset + 1} - ${offset + this.historyListLimit}`, {
+        class: 'nav-buttons-page-label'
+      }))
+      if (historyData.length > this.historyListLimit) {
+        historyData.pop()
+        navButtons(oom.mwcButton({
+          innerHTML: octicons['arrow-right'].toSVG({ width: 24 }),
+          onclick: () => {
+            ++this.historyListPage
+            this.buildHistoryList().catch(console.error)
+          }
+        }))
+      } else {
+        navButtons(oom.span({ class: 'nav-buttons-space' }))
+      }
+
+      this.historyTaskList({ innerHTML: '' }, navButtons, ...historyData.map(card => new GitBranchCard(card)))
+    } else {
+      this.historyTaskList({ innerHTML: '' }, oom.div({ class: 'empty' }, 'Задач в истории не найдено'))
+    }
+  }
+
 }
 
 

package/lib/popup-dialog.js

@@ -47,7 +47,8 @@ export class PopupDialog extends oom.extends(HTMLElement, PopupDialogDefaults) {
     'mwc-dialog': {
       '--mdc-dialog-z-index': '10000',
       '--mdc-dialog-max-width': '700px',
-      '--mdc-dialog-max-height': '600px'
+      '--mdc-dialog-min-width': '500px',
+      '--mdc-dialog-max-height': '700px'
     },
     'header': {
       margin: '-20px -24px 0px -24px',
@@ -61,25 +62,31 @@ export class PopupDialog extends oom.extends(HTMLElement, PopupDialogDefaults) {
       overflow: 'hidden'
     },
     'main': {
+      display: 'flex',
+      flexDirection: 'column',
       margin: '0px -24px -20px -24px',
       overflow: 'auto',
       maxHeight: 'calc(var(--mdc-dialog-max-height) - 52px)'
     }
   })
 
+  // Фиксированный минимальный размер диалога по содержимому
+  contentMinWidth = 0
+  contentMinHeight = 0
+
   key = this.options.key
   content = typeof this.options.Element === 'string' ? this.options.Element : new this.options.Element()
+  main = oom.main(this.content)
+  header = oom.header(oom
+    .span(this.options.title)
+    .mwcIconButton({ icon: 'close', onclick: () => this.close() }))
 
   template = async () => {
     // Открытый диалог может быть только один
     this.id = 'sc-popup-dialog'
     /** @type {import('@material/mwc-dialog').Dialog} */// @ts-ignore
     this.dialog = oom
-      .mwcDialog({ hideActions: true }, oom
-        .header(oom
-          .span(this.options.title)
-          .mwcIconButton({ icon: 'close', onclick: () => this.close() }))
-        .main(this.content))
+      .mwcDialog({ hideActions: true }, this.header, this.main)
       .dom
 
     oom(this, this.dialog)
@@ -87,6 +94,10 @@ export class PopupDialog extends oom.extends(HTMLElement, PopupDialogDefaults) {
     this.dialog.addEventListener('closed', event => this.closed(event))
 
     await this.open()
+
+    this.fixMinimumSize()
+    this.observer = new MutationObserver(() => this.fixMinimumSize())
+    this.observer.observe(this, { childList: true, subtree: true })
   }
 
   /** Функция открытия диалога с асинхронной задержкой, что бы успело построиться дерево компонента */
@@ -115,6 +126,24 @@ export class PopupDialog extends oom.extends(HTMLElement, PopupDialogDefaults) {
     }
   }
 
+  /** Фиксирует минимальный размер диалога по содержимому, чтобы избежать дальнейших скачков размера окна */
+  fixMinimumSize() {
+    const width = Math.max(this.contentMinWidth, this.main.dom.clientWidth)
+    const height = Math.max(this.contentMinHeight, this.main.dom.clientHeight)
+
+    if (this.contentMinWidth !== width || this.contentMinHeight !== height) {
+      this.contentMinWidth = width
+      this.contentMinHeight = height
+
+      this.main({
+        style: {
+          minWidth: `${this.contentMinWidth}px`,
+          minHeight: `${this.contentMinHeight}px`
+        }
+      })
+    }
+  }
+
 }
 
 oom.define(PopupDialog)

package/package.json

@@ -9,7 +9,7 @@
   },
   "repository": "github:saby-customizer/saby-customizer.github.io",
   "license": "Unlicense",
-  "version": "0.0.0-pre.30",
+  "version": "0.0.0-pre.31",
   "type": "module",
   "main": "./userscript.js",
   "exports": {