@things-factory/tax-invoice 8.0.0 → 9.0.0-beta.3

package/client/pages/tax-invoice/tax-invoice-detail-popup.ts

@@ -1,454 +0,0 @@
-import '@operato/data-grist'
-
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import gql from 'graphql-tag'
-import { INVOICE_TYPE } from './tax-invoice-list-page'
-
-@customElement('tax-invoice-detail-popup')
-export class TaxInvoiceDetailPopup extends localize(i18next)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--md-sys-color-background);
-        width: 100%;
-        padding: 15px;
-        font-size: 14px;
-        overflow-y: scroll;
-      }
-
-      input {
-        border: var(--border-dim-color);
-        padding: var(--spacing-small) var(--spacing-medium);
-        max-width: 100px;
-        font: var(--input-font);
-      }
-
-      table {
-        border: solid;
-        border-width: 2px 0;
-        border-collapse: collapse;
-        border-spacing: 0;
-      }
-
-      .title table {
-        border-color: #d3dbe5;
-        width: 100%;
-        height: 33px;
-
-        th {
-          background-color: #e9edf6;
-        }
-        td {
-          padding-left: 10px;
-        }
-      }
-
-      div.body {
-        margin-top: 15px;
-        font-size: 14px;
-
-        div.data {
-          display: flex;
-          margin-top: 5px;
-
-          table {
-            flex: 1;
-
-            td,
-            th {
-              padding: 5px;
-              min-width: 60px;
-            }
-            td {
-              padding-left: 8px;
-            }
-            th.target {
-              width: 25px;
-              writing-mode: vertical-rl;
-              min-width: unset;
-            }
-
-            &.supplier {
-              border-color: #f64843;
-
-              td,
-              th {
-                background-color: #fef5f7;
-                border: solid 1.5px #f5b1b1;
-              }
-              th.target {
-                background-color: #fedbde;
-              }
-            }
-            &.buyer {
-              border-color: #007ed9;
-
-              td,
-              th {
-                background-color: #f7f7ff;
-                border: solid 1.5px #a7bcff;
-              }
-              th.target {
-                background-color: #c6daf6;
-              }
-            }
-          }
-        }
-
-        div.items,
-        div.info,
-        div.summary {
-          margin-top: 15px;
-
-          table {
-            width: 100%;
-            border-color: #000;
-            border-width: 2px 0px 0px 0px;
-
-            th {
-              background-color: #e9edf5;
-            }
-            th,
-            td {
-              border: solid 1.5px #c4d2ff;
-              padding: 5px;
-              text-align: center;
-            }
-          }
-        }
-
-        div.summary {
-          display: flex;
-
-          & > table {
-            flex: 6.7;
-          }
-          & > div {
-            flex: 3.2;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border: 1.5px solid #c4d2ff;
-            border-top: 2px solid #000;
-          }
-        }
-      }
-    `
-  ]
-
-  @property({ type: String }) taxInvoiceId: string = ''
-  @state() detail: any = {}
-
-  render() {
-    return html`
-      <div class="title">
-        <table>
-          <tr>
-            <th>${i18next.t('field.approval no')}</th>
-            <td>${this.detail?.approvalNo?.replace(/(\S{8})(\S{8})(\S{8})/g, '$1-$2-$3')}</td>
-          </tr>
-        </table>
-      </div>
-
-      <div class="body">
-        <div class="invoice-type">* ${INVOICE_TYPE[this.detail.invoiceType]}</div>
-        <div class="data">
-          <table class="supplier">
-            <colgroup>
-              <col width="150px" />
-              <col width="18%" />
-              <col width="32%" />
-              <col width="18%" />
-              <col width="32%" />
-            </colgroup>
-            <tr>
-              <th rowspan="6" class="target">${i18next.t('field.tax invoice supplier')}</th>
-              <th>${i18next.t('field.short business registration number')}</th>
-              <td>${this.detail?.supplierBusinessRegistrationNumber?.replace(/(\d{3})(\d{2})(\d{5})/g, '$1-$2-$3')}</td>
-              <th>${i18next.t('field.short branch identification')}</th>
-              <td>${this.detail.supplierBranchIdentification}</td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.short tax invoice business name')}</th>
-              <td>${this.detail.supplierBusinessName}</td>
-              <th>${i18next.t('field.short representative name')}</th>
-              <td>${this.detail.supplierRepresentativeName}</td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.address')}</th>
-              <td colspan="3">${this.detail.supplierAddress}</td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.business type')}</th>
-              <td>${this.detail.supplierBusinessType}</td>
-              <th>${i18next.t('field.industry type')}</th>
-              <td>${this.detail.supplierIndustryType}</td>
-            </tr>
-            <tr>
-              <th rowspan="2">${i18next.t('field.email')}</th>
-              <td rowspan="2" colspan="3">${this.detail.supplierContactEmail}</td>
-            </tr>
-            <tr></tr>
-          </table>
-
-          <table class="buyer">
-            <colgroup>
-              <col width="150px" />
-              <col width="18%" />
-              <col width="32%" />
-              <col width="18%" />
-              <col width="32%" />
-            </colgroup>
-            <tr>
-              <th rowspan="6" class="target">${i18next.t('field.tax invoice buyer')}</th>
-              <th>${i18next.t('field.short business registration number')}</th>
-              <td>${this.detail?.buyerBusinessRegistrationNumber?.replace(/(\d{3})(\d{2})(\d{5})/g, '$1-$2-$3')}</td>
-              <th>${i18next.t('field.short branch identification')}</th>
-              <td>${this.detail.buyerBranchIdentification}</td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.short tax invoice business name')}</th>
-              <td>${this.detail.buyerBusinessName}</td>
-              <th>${i18next.t('field.short representative name')}</th>
-              <td>${this.detail.buyerRepresentativeName}</td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.address')}</th>
-              <td colspan="3">${this.detail.buyerAddress}</td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.business type')}</th>
-              <td>${this.detail.buyerBusinessType}</td>
-              <th>${i18next.t('field.industry type')}</th>
-              <td>${this.detail.buyerIndustryType}</td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.email')}</th>
-              <td colspan="3">${this.detail.buyer1stContactEmail}</td>
-            </tr>
-            <tr>
-              <th>${i18next.t('field.email')}</th>
-              <td colspan="3">${this.detail.buyer2ndContactEmail}</td>
-            </tr>
-          </table>
-        </div>
-
-        <div class="info">
-          <table>
-            <colgroup>
-              <col width="15%" />
-              <col width="15%" />
-              <col width="15%" />
-              <col width="15%" />
-              <col width="40%" />
-            </colgroup>
-            <tr>
-              <th>${i18next.t('field.issue date')}</th>
-              <th>${i18next.t('field.supply amount')}</th>
-              <th>${i18next.t('field.tax amount')}</th>
-              <th>${i18next.t('field.modification reason')}</th>
-              <th>${i18next.t('field.remark0')}</th>
-            </tr>
-            <tr>
-              <td>${this.detail.issueDate?.split('T')[0]}</td>
-              <td>${this._numberFormat(this.detail.supplyAmount)}</td>
-              <td>${this._numberFormat(this.detail.taxAmount)}</td>
-              <td>${this.detail.modificationReason}</td>
-              <td>${this.detail.remark0}</td>
-            </tr>
-          </table>
-        </div>
-
-        <div class="items">
-          <table>
-            <colgroup>
-              <col width="4%" />
-              <col width="4%" />
-              <col width="15%" />
-              <col width="9%" />
-              <col width="9%" />
-              <col width="13%" />
-              <col width="13%" />
-              <col width="13%" />
-              <col width="20%" />
-            </colgroup>
-            <tr>
-              <th>${i18next.t('field.tax invoice month')}</th>
-              <th>${i18next.t('field.tax invoice day')}</th>
-              <th>${i18next.t('field.tax invoice item name')}</th>
-              <th>${i18next.t('field.tax invoice ea')}</th>
-              <th>${i18next.t('field.tax invoice quantity')}</th>
-              <th>${i18next.t('field.tax invoice price')}</th>
-              <th>${i18next.t('field.supply amount')}</th>
-              <th>${i18next.t('field.tax amount')}</th>
-              <th>${i18next.t('field.remark0')}</th>
-            </tr>
-
-            ${this.detail.taxInvoiceItems?.map(
-              item => html`
-                <tr>
-                  <td>${item.supplyDate.split('-')[1]}</td>
-                  <td>${item.supplyDate.split('-')[2]?.split('T')[0]}</td>
-                  <td>${item.itemName}</td>
-                  <td>${item.specification}</td>
-                  <td>${item.quantity}</td>
-                  <td>${this._numberFormat(item.unitPrice)}</td>
-                  <td>${this._numberFormat(item.supplyPrice)}</td>
-                  <td>${this._numberFormat(item.taxPrice)}</td>
-                  <td>${item.remark}</td>
-                </tr>
-              `
-            )}
-          </table>
-        </div>
-
-        <div class="summary">
-          <table>
-            <colgroup>
-              <col width="20%" />
-              <col width="20%" />
-              <col width="20%" />
-              <col width="20%" />
-              <col width="20%" />
-            </colgroup>
-            <tr>
-              <th>${i18next.t('field.total amount')}</th>
-              <th>${i18next.t('field.tax invoice payment cash')}</th>
-              <th>${i18next.t('field.tax invoice payment check')}</th>
-              <th>${i18next.t('field.tax invoice payment promissory note')}</th>
-              <th>${i18next.t('field.tax invoice payment accounts receivable')}</th>
-            </tr>
-            <tr>
-              <td>${this._numberFormat(this.detail.totalAmount)}</td>
-              <td>${this._numberFormat(this.detail.paymentAmountCash)}</td>
-              <td>${this._numberFormat(this.detail.paymentAmountCheck)}</td>
-              <td>${this._numberFormat(this.detail.paymentAmountPromissoryNote)}</td>
-              <td>${this._numberFormat(this.detail.paymentAmountAccountsReceivable)}</td>
-            </tr>
-          </table>
-          <div>
-            ${i18next.t('text.tax invoice description payment', {
-              value: i18next.t(`text.tax invoice description purpose ${this.detail.purpose}`)
-            })}
-          </div>
-        </div>
-      </div>
-    `
-  }
-
-  async updated(changed) {
-    if (changed.has('taxInvoiceId')) {
-      this.detail = await this.getTaxInvoiceDetailById(this.taxInvoiceId)
-    }
-  }
-
-  private async getTaxInvoiceDetailById(id: string) {
-    if (!id) return {}
-
-    const response = await client.query({
-      query: gql`
-        query ($id: String!) {
-          responses: taxInvoice(id: $id) {
-            id
-            category
-            approvalNo
-            originalApprovalNo
-            issueDate
-            signatureDate
-            invoiceType
-            purpose
-            revisedReason
-            remark0
-            remark1
-            remark2
-            supplierBusinessRegistrationCategory
-            supplierBusinessRegistrationNumber
-            supplierBranchIdentification
-            supplierBusinessName
-            supplierRepresentativeName
-            supplierAddress
-            supplierBusinessType
-            supplierIndustryType
-            supplierDepartment
-            supplierContactName
-            supplierContactPhone
-            supplierContactEmail
-            supplierContactCellPhone
-            buyerBusinessRegistrationCategory
-            buyerBusinessRegistrationNumber
-            buyerBranchIdentification
-            buyerBusinessName
-            buyerRepresentativeName
-            buyerAddress
-            buyerBusinessType
-            buyerIndustryType
-            buyer1stDepartment
-            buyer1stContactName
-            buyer1stContactPhone
-            buyer1stContactEmail
-            buyer1stContactCellPhone
-            buyer2ndDepartment
-            buyer2ndContactName
-            buyer2ndContactPhone
-            buyer2ndContactEmail
-            buyer2ndContactCellPhone
-            agentBusinessRegistrationCategory
-            agentBusinessRegistrationNumber
-            agentBranchIdentification
-            agentBusinessName
-            agentRepresentativeName
-            agentAddress
-            agentBusinessType
-            agentIndustryType
-            agentDepartment
-            agentContactName
-            agentContactPhone
-            agentContactEmail
-            agentContactCellPhone
-            paymentAmountCash
-            paymentAmountCheck
-            paymentAmountPromissoryNote
-            paymentAmountAccountsReceivable
-            supplyAmount
-            taxAmount
-            totalAmount
-            createdAt
-            updater {
-              id
-              name
-            }
-            updatedAt
-
-            taxInvoiceItems {
-              id
-              sequence
-              supplyDate
-              itemName
-              specification
-              quantity
-              unitPrice
-              supplyPrice
-              taxPrice
-              remark
-            }
-          }
-        }
-      `,
-      variables: { id }
-    })
-
-    return response.data.responses || {}
-  }
-
-  private _numberFormat(value: number): string {
-    return !value ? '' : new Intl.NumberFormat('en-US').format(value)
-  }
-}