@things-factory/tax-invoice 6.2.84 → 6.2.88

package/client/pages/tax-invoice-send/tax-invoice-send-page.ts

@@ -0,0 +1,580 @@
+import '@operato/data-grist'
+
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@operato/shell'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import gql from 'graphql-tag'
+import { BUSINESS_REGISTRATION_CATEGORY, BusinessRegistrationCategory, Category, INVOICE_TYPE, InvoiceType, Purpose } from '../tax-invoice/tax-invoice-list-page'
+
+const SHORT_INVOICE_TYPE = {
+  TAX_INVOICE: {
+    [InvoiceType.TAX_INVOICE]: '일반',
+    [InvoiceType.SMALL_BUSINESS_TAX_INVOICE]: '영세율',
+    [InvoiceType.CONSIGNMENT_TAX_INVOICE]: '위수탁',
+    [InvoiceType.SMALL_BUSINESS_CONSIGNMENT_TAX_INVOICE]: '위수탁영세율'
+  },
+  INVOICE: {
+    [InvoiceType.INVOICE]: '일반',
+    [InvoiceType.CONSIGNMENT_INVOICE]: '위수탁'
+    // [InvoiceType.IMPORT_INVOICE]: INVOICE_TYPE[IMPORT_INVOICE],
+  }
+}
+
+const SHORT_BUSINESS_REGISTRATION_CATEGORY = {
+  [BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER]: '사업자',
+  [BusinessRegistrationCategory.RESIDENT_REGISTRATION_NUMBER]: '개인',
+  [BusinessRegistrationCategory.FOREIGNER_REGISTRATION_NUMBER]: '외국인'
+}
+
+interface Supplier {
+  supplierBusinessRegistrationNumber: string
+  supplierBranchIdentification?: string
+  supplierBusinessName: string
+  supplierRepresentativeName: string
+  supplierAddress?: string
+  supplierBusinessType?: string
+  supplierIndustryType?: string
+  supplierDepartment?: string
+  supplierContactName?: string
+  supplierContactPhone?: string
+  supplierContactEmail?: string
+  supplierContactCellPhone?: string
+}
+interface Buyer {
+  buyerBusinessRegistrationCategory: BusinessRegistrationCategory
+  buyerBusinessRegistrationNumber: string
+  buyerBranchIdentification?: string
+  buyerBusinessName: string
+  buyerRepresentativeName: string
+  buyerAddress?: string
+  buyerBusinessType?: string
+  buyerIndustryType?: string
+  buyer1stDepartment?: string
+  buyer1stContactName?: string
+  buyer1stContactPhone?: string
+  buyer1stContactEmail?: string
+  buyer1stContactCellPhone?: string
+  buyer2ndDepartment?: string
+  buyer2ndContactName?: string
+  buyer2ndContactPhone?: string
+  buyer2ndContactEmail?: string
+  buyer2ndContactCellPhone?: string
+}
+interface TaxInvoice {
+  category: Category
+  issueNo?: string
+  approvalNo?: string
+  originalApprovalNo?: string
+  issueDate: Date | null
+  signatureDate?: Date
+  invoiceType: InvoiceType
+  purpose: Purpose
+  remark0?: string
+  remark1?: string
+  remark2?: string
+  paymentAmountCash?: number
+  paymentAmountCheck?: number
+  paymentAmountPromissoryNote?: number
+  paymentAmountAccountsReceivable?: number
+  supplyAmount: number
+  taxAmount?: number
+  totalAmount: number
+  taxInvoiceItems?: TaxInvoiceItem[]
+  // revisedReason?: RevisedReason
+}
+interface TaxInvoiceItem {
+  sequence?: number
+  supplyDate: Date
+  itemName: string
+  specification: string
+  quantity: number
+  unitPrice: number
+  supplyPrice: number
+  taxPrice: number
+  remark?: string
+}
+
+@customElement('tax-invoice-send-page')
+export class TaxInvoiceSendPage extends localize(i18next)(ScopedElementsMixin(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        min-width: 850px;
+        margin: 0 40px;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      div.invoice-type {
+        font-size: 18px;
+        margin-top: 15px;
+      }
+
+      table {
+        border: solid;
+        border-width: 2px 0;
+        border-collapse: collapse;
+        border-spacing: 0;
+
+        input[type='text'] {
+          height: 14px;
+          margin: 0;
+          padding: 4px 5px 5px;
+          line-height: 14px;
+          border: 1px solid #bbb;
+          background: #fff;
+          letter-spacing: 0.5px;
+        }
+      }
+
+      .title table {
+        border-color: #d3dbe5;
+        width: 100%;
+        height: 33px;
+        margin-top: 10px;
+        font-size: 12px;
+
+        th {
+          font-size: 13px;
+          background-color: #e9edf6;
+          min-width: 140px;
+        }
+        td {
+          width: 50%;
+          padding-left: 10px;
+
+          & > * {
+            vertical-align: middle;
+          }
+          & > input {
+            margin: 0 5px 0 1px;
+          }
+        }
+      }
+
+      div.body {
+        margin-top: 15px;
+        font-size: 14px;
+
+        div.data {
+          display: flex;
+          margin-top: 5px;
+
+          table {
+            flex: 1;
+
+            td,
+            th {
+              padding: 5px;
+            }
+            th.target {
+              width: 25px;
+              writing-mode: vertical-rl;
+            }
+
+            &.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;
+          }
+        }
+      }
+    `
+  ]
+
+  @query('form[name="tax-invoice-form"]') private taxInvoiceForm!: HTMLFormElement
+
+  @state() supplier: Supplier = {
+    supplierBusinessRegistrationNumber: '',
+    supplierBusinessName: '',
+    supplierRepresentativeName: ''
+  }
+  @property() buyer: Buyer = {
+    buyerBusinessRegistrationCategory: BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER,
+    buyerBusinessRegistrationNumber: '',
+    buyerBusinessName: '',
+    buyerRepresentativeName: ''
+  }
+  @property() taxInvoice: TaxInvoice = {
+    invoiceType: InvoiceType.TAX_INVOICE,
+    category: Category.EXPORT,
+    issueDate: null,
+    purpose: Purpose.RECEIPT,
+    supplyAmount: 0,
+    totalAmount: 0
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.tax invoice send'),
+      help: 'tax-invoice-send/tax-invoice-send',
+      actions: [
+        {
+          title: i18next.t('button.tax invoice send'),
+          action: this._sendTaxInvoice.bind(this),
+          ...CommonButtonStyles.add
+        }
+      ]
+    }
+  }
+
+  render() {
+    return html`
+      <div class="invoice-type">
+        * ${INVOICE_TYPE[this.taxInvoice?.invoiceType]} (${SHORT_BUSINESS_REGISTRATION_CATEGORY[this.buyer.buyerBusinessRegistrationCategory]})
+      </div>
+
+      <div class="title">
+        <table>
+          <tr>
+            <th>${i18next.t('field.short invoice type')}</th>
+            <td>
+              ${Object.keys(SHORT_INVOICE_TYPE['TAX_INVOICE']).map(key => {
+                const disabled: boolean = key !== InvoiceType.TAX_INVOICE
+                const checked: boolean = key === InvoiceType.TAX_INVOICE
+                return html`
+                  <label for="${'tax_' + key}">${SHORT_INVOICE_TYPE['TAX_INVOICE'][key]}</label>
+                  <input type="radio" id="${'tax_' + key}" value="${key}" name="taxInvoice" ?checked=${checked} ?disabled=${disabled} />
+                `
+              })}
+            </td>
+            <th>${i18next.t('field.tax invoice buyer registration category')}</th>
+            <td>
+              ${Object.keys(BUSINESS_REGISTRATION_CATEGORY).map(key => {
+                const disabled: boolean = key !== BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER
+                const checked: boolean = key === BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER
+                return html`
+                  <label for="${'tax_' + key}">${BUSINESS_REGISTRATION_CATEGORY[key]}</label>
+                  <input type="radio" id="${'tax_' + key}" value="${key}" name="buyerBusinessRegistrationCategory" ?checked=${checked} ?disabled=${disabled} />
+                `
+              })}
+            </td>
+          </tr>
+        </table>
+      </div>
+
+      <div class="body">
+        <form id="tax-invoice-form">
+          <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><input type="text" name="supplierBusinessRegistrationNumber" .value=${this.supplier?.supplierBusinessRegistrationNumber || ''} readonly /></td>
+                <th>${i18next.t('field.short branch identification')}</th>
+                <td><input type="text" name="supplierBranchIdentification" .value=${this.supplier?.supplierBranchIdentification || ''} readonly /></td>
+              </tr>
+              <tr>
+                <th>${i18next.t('field.short tax invoice business name')}</th>
+                <td><input type="text" name="supplierBusinessName" .value=${this.supplier?.supplierBusinessName || ''} @input=${this._onInputTaxInvoice} /></td>
+                <th>${i18next.t('field.short representative name')}</th>
+                <td>${this.supplier?.supplierRepresentativeName}</td>
+              </tr>
+              <tr>
+                <th>${i18next.t('field.address')}</th>
+                <td colspan="3">${this.supplier?.supplierAddress}</td>
+              </tr>
+              <tr>
+                <th>${i18next.t('field.business type')}</th>
+                <td>${this.supplier?.supplierBusinessType}</td>
+                <th>${i18next.t('field.industry type')}</th>
+                <td>${this.supplier?.supplierIndustryType}</td>
+              </tr>
+              <tr>
+                <th rowspan="2">${i18next.t('field.email')}</th>
+                <td rowspan="2" colspan="3">${this.supplier?.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.buyer?.buyerBusinessRegistrationNumber}</td>
+                <th>${i18next.t('field.short branch identification')}</th>
+                <td>${this.buyer?.buyerBranchIdentification}</td>
+              </tr>
+              <tr>
+                <th>${i18next.t('field.short tax invoice business name')}</th>
+                <td>${this.buyer?.buyerBusinessName}</td>
+                <th>${i18next.t('field.short representative name')}</th>
+                <td>${this.buyer?.buyerRepresentativeName}</td>
+              </tr>
+              <tr>
+                <th>${i18next.t('field.address')}</th>
+                <td colspan="3">${this.buyer?.buyerAddress}</td>
+              </tr>
+              <tr>
+                <th>${i18next.t('field.business type')}</th>
+                <td>${this.buyer?.buyerBusinessType}</td>
+                <th>${i18next.t('field.industry type')}</th>
+                <td>${this.buyer?.buyerIndustryType}</td>
+              </tr>
+              <tr>
+                <th>${i18next.t('field.email')}</th>
+                <td colspan="3">${this.buyer?.buyer1stContactEmail}</td>
+              </tr>
+              <tr>
+                <th>${i18next.t('field.email')}</th>
+                <td colspan="3">${this.buyer?.buyer2ndContactEmail}</td>
+              </tr>
+            </table>
+          </div>
+
+          <div class="info">
+            <table>
+              <colgroup>
+                <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.remark0')}</th>
+              </tr>
+              <tr>
+                <td>${this.taxInvoice?.issueDate}</td>
+                <td>${this._numberFormat(this.taxInvoice?.supplyAmount)}</td>
+                <td>${this._numberFormat(this.taxInvoice?.taxAmount)}</td>
+                <td>${this.taxInvoice?.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.taxInvoice?.taxInvoiceItems?.map(
+                item =>
+                  html`
+                    <tr>
+                      <td>${item.supplyDate}</td>
+                      <td>${item.supplyDate}</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.taxInvoice?.totalAmount)}</td>
+                <td>${this._numberFormat(this.taxInvoice?.paymentAmountCash)}</td>
+                <td>${this._numberFormat(this.taxInvoice?.paymentAmountCheck)}</td>
+                <td>${this._numberFormat(this.taxInvoice?.paymentAmountPromissoryNote)}</td>
+                <td>${this._numberFormat(this.taxInvoice?.paymentAmountAccountsReceivable)}</td>
+              </tr>
+            </table>
+            <div>${i18next.t('text.tax invoice description payment', { value: i18next.t(`text.tax invoice description purpose ${this.taxInvoice?.purpose}`) })}</div>
+          </div>
+        </form>
+      </div>
+    `
+  }
+
+  async pageInitialized(lifecycle: any) {
+    this._fetchSupplier()
+  }
+
+  async _fetchSupplier() {
+    const response = await client.query({
+      query: gql`
+        query TaxInvoiceApi() {
+          taxInvoiceApi() {
+            businessRegistrationNumber
+            branchIdentification
+            businessName
+            representativeName
+            address
+            businessType
+            industryType
+            department
+            contactName
+            contactPhone
+            contactEmail
+            contactCellPhone
+          }
+        }
+      `
+    })
+
+    console.log('response.data.responses : ', response.data.responses)
+
+    this.supplier = response.data.responses
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      // do something here when this page just became as active
+    }
+  }
+
+  async _sendTaxInvoice(num: string) {
+    console.log(this.taxInvoiceForm)
+    console.log(this.supplier)
+
+    return
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation SendTaxInvoiceByApi($taxInvoice: NewTaxInvoice!, $taxInvoiceItems: [NewTaxInvoiceItem!]!) {
+          sendTaxInvoiceByApi(taxInvoice: $taxInvoice, taxInvoiceItems: $taxInvoiceItems) {
+            id
+          }
+        }
+      `,
+      variables: {
+        // taxInvoice,
+        // taxInvoiceItems
+      }
+    })
+
+    if (!response.errors) {
+      notify({
+        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+      })
+    }
+  }
+
+  private _numberFormat(value: number | undefined): string {
+    return !value ? '' : new Intl.NumberFormat('en-US').format(value)
+  }
+
+  // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+  private _onInputTaxInvoice(event: InputEvent) {
+    const target = event.target as HTMLInputElement
+    this.supplier[target.name] = target.value
+  }
+}

package/client/route.ts

@@ -1,13 +1,13 @@
 export default function route(page: string) {
   switch (page) {
-    case 'tax-invoice-main':
-      import('./pages/main')
-      return page
-
     case 'tax-invoice-list':
       import('./pages/tax-invoice/tax-invoice-list-page')
       return page
 
+    case 'tax-invoice-send':
+      // import('./pages/tax-invoice-send/tax-invoice-send-page')
+      return page
+
     case 'tax-invoice-company-list':
       import('./pages/tax-invoice-company/tax-invoice-company-list-page')
       return page