@things-factory/ops-master 10.1.45 → 10.1.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,7 @@
1
1
  import { LitElement } from 'lit';
2
+ import '@material/web/button/filled-button.js';
3
+ import '@material/web/button/text-button.js';
4
+ import '@operato/popup/ox-popup-actions.js';
2
5
  import { CLAIMED_FIELDS } from './assignment-fields.js';
3
6
  /**
4
7
  * **언제부터 그러한가를 묻는 자리.**
@@ -1,6 +1,9 @@
1
1
  import { __decorate, __metadata } from "tslib";
2
2
  import { LitElement, css, html } from 'lit';
3
3
  import { customElement, property, state } from 'lit/decorators.js';
4
+ import '@material/web/button/filled-button.js';
5
+ import '@material/web/button/text-button.js';
6
+ import '@operato/popup/ox-popup-actions.js';
4
7
  import { i18next } from '@operato/i18n';
5
8
  import { CLAIMED_FIELDS } from './assignment-fields.js';
6
9
  let AppliedWhenDialog = class AppliedWhenDialog extends LitElement {
@@ -29,12 +32,6 @@ let AppliedWhenDialog = class AppliedWhenDialog extends LitElement {
29
32
  color: var(--md-sys-color-on-surface-variant);
30
33
  margin-top: var(--spacing-small, 8px);
31
34
  }
32
- .buttons {
33
- display: flex;
34
- justify-content: flex-end;
35
- gap: var(--spacing-small, 8px);
36
- margin-top: var(--spacing-medium, 12px);
37
- }
38
35
  `; }
39
36
  /** 안 적으면 지금부터다 — 그 기본값이 곧 「지금부터」라는 주장이다. */
40
37
  get when() {
@@ -89,9 +86,10 @@ let AppliedWhenDialog = class AppliedWhenDialog extends LitElement {
89
86
  : ''}
90
87
  ${this.future ? html `<div class="note">${i18next.t('text.change-is-scheduled')}</div>` : ''}
91
88
 
92
- <div class="buttons">
93
- <button @click=${() => this.onCancel?.()}>${i18next.t('button.cancel')}</button>
94
- <button
89
+ <ox-popup-actions>
90
+ <md-text-button slot="cancel" @click=${() => this.onCancel?.()}>${i18next.t('button.cancel')}</md-text-button>
91
+ <md-filled-button
92
+ slot="confirm"
95
93
  @click=${() => this.onAnswer?.({
96
94
  ...(this.at ? { at: new Date(this.at).toISOString() } : {}),
97
95
  ...(this.past ? { kind: this.kind } : {}),
@@ -99,8 +97,8 @@ let AppliedWhenDialog = class AppliedWhenDialog extends LitElement {
99
97
  })}
100
98
  >
101
99
  ${i18next.t('button.save')}
102
- </button>
103
- </div>
100
+ </md-filled-button>
101
+ </ox-popup-actions>
104
102
  `;
105
103
  }
106
104
  };
@@ -1 +1 @@
1
- {"version":3,"file":"applied-when-dialog.js","sourceRoot":"","sources":["../../../client/pages/master/applied-when-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\n\nimport { CLAIMED_FIELDS } from './assignment-fields.js'\n\n/**\n * **언제부터 그러한가를 묻는 자리.**\n *\n * ── 왜 날짜 칸 하나가 아닌가 ───────────────────────────────────────────────\n * 그리드에 날짜 열을 하나 더하면 사람은 그것을 **또 하나의 값**으로 읽는다. 이 셋(자리 배정 · 근무조\n * 선언 · 부모 관계)은 값이 아니라 **언제부터 그렇게 볼 것인가**를 함께 정하는 일이고, 과거를 적으면\n * **지연 기록인지 정정인지**까지 갈라야 한다. 그래서 저장 직전에 한 번 묻는다.\n *\n * ```\n * 바뀌기 전 → 바뀐 뒤\n * 적용 시작 기본값 「지금부터」\n * 과거 시각이면 지연 기록인가 이미 적은 것의 정정인가\n * 미래 시각이면 지금 값은 그대로이고 변경이 예약된다고 알린다\n * ```\n *\n * ⚠ **기록 시각은 안 묻는다.** 사람이 넣으면 「언제 알았나」를 사람이 정하게 된다 — 서버가 붙인다.\n */\nexport interface AppliedAnswer {\n at?: string\n kind?: 'change' | 'correction'\n until?: string\n}\n\nexport interface AssignmentChange {\n rowName: string\n field: string\n before: string\n after: string\n}\n\n@customElement('applied-when-dialog')\nexport class AppliedWhenDialog extends LitElement {\n static styles = css`\n :host {\n display: block;\n padding: var(--spacing-medium, 12px);\n }\n .what {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: var(--spacing-tiny, 4px) var(--spacing-small, 8px);\n margin-bottom: var(--spacing-medium, 12px);\n }\n .what span {\n color: var(--md-sys-color-on-surface-variant);\n }\n .note {\n color: var(--md-sys-color-on-surface-variant);\n margin-top: var(--spacing-small, 8px);\n }\n .buttons {\n display: flex;\n justify-content: flex-end;\n gap: var(--spacing-small, 8px);\n margin-top: var(--spacing-medium, 12px);\n }\n `\n\n @property({ type: Array }) changes: AssignmentChange[] = []\n @property({ type: Object }) onAnswer?: (answer: AppliedAnswer) => void\n @property({ type: Object }) onCancel?: () => void\n\n @state() private at = ''\n @state() private kind: 'change' | 'correction' = 'change'\n @state() private until = ''\n\n /** 안 적으면 지금부터다 — 그 기본값이 곧 「지금부터」라는 주장이다. */\n private get when(): number {\n return this.at ? new Date(this.at).getTime() : Date.now()\n }\n\n private get past(): boolean {\n return this.when < Date.now() - 60000\n }\n\n private get future(): boolean {\n return this.when > Date.now() + 60000\n }\n\n render() {\n return html`\n <div class=\"what\">\n ${this.changes.map(\n one => html`\n <span>${one.rowName} · ${labelOf(one.field)}</span>\n <div>${one.before || i18next.t('text.none')} → <b>${one.after || i18next.t('text.none')}</b></div>\n `\n )}\n </div>\n\n <label>\n ${i18next.t('label.applied-from')}\n <input\n type=\"datetime-local\"\n .value=${this.at}\n @change=${(e: Event) => (this.at = (e.target as HTMLInputElement).value)}\n placeholder=${i18next.t('text.from-now')}\n />\n </label>\n\n ${this.past\n ? html`\n <div>\n <label>\n <input type=\"radio\" name=\"kind\" ?checked=${this.kind === 'change'} @change=${() => (this.kind = 'change')} />\n ${i18next.t('label.late-record')}\n </label>\n <label>\n <input type=\"radio\" name=\"kind\" ?checked=${this.kind === 'correction'} @change=${() => (this.kind = 'correction')} />\n ${i18next.t('label.correct-what-was-recorded')}\n </label>\n ${this.kind === 'correction'\n ? html`\n <label>\n ${i18next.t('label.applied-until')}\n <input type=\"datetime-local\" .value=${this.until} @change=${(e: Event) => (this.until = (e.target as HTMLInputElement).value)} />\n </label>\n `\n : ''}\n </div>\n `\n : ''}\n ${this.future ? html`<div class=\"note\">${i18next.t('text.change-is-scheduled')}</div>` : ''}\n\n <div class=\"buttons\">\n <button @click=${() => this.onCancel?.()}>${i18next.t('button.cancel')}</button>\n <button\n @click=${() =>\n this.onAnswer?.({\n ...(this.at ? { at: new Date(this.at).toISOString() } : {}),\n ...(this.past ? { kind: this.kind } : {}),\n ...(this.past && this.kind === 'correction' && this.until ? { until: new Date(this.until).toISOString() } : {})\n })}\n >\n ${i18next.t('button.save')}\n </button>\n </div>\n `\n }\n}\n\nfunction labelOf(field: string): string {\n return i18next.t(`field.${field}`, { defaultValue: field })\n}\n\nexport { CLAIMED_FIELDS }\n"]}
1
+ {"version":3,"file":"applied-when-dialog.js","sourceRoot":"","sources":["../../../client/pages/master/applied-when-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/popup/ox-popup-actions.js'\nimport { i18next } from '@operato/i18n'\n\nimport { CLAIMED_FIELDS } from './assignment-fields.js'\n\n/**\n * **언제부터 그러한가를 묻는 자리.**\n *\n * ── 왜 날짜 칸 하나가 아닌가 ───────────────────────────────────────────────\n * 그리드에 날짜 열을 하나 더하면 사람은 그것을 **또 하나의 값**으로 읽는다. 이 셋(자리 배정 · 근무조\n * 선언 · 부모 관계)은 값이 아니라 **언제부터 그렇게 볼 것인가**를 함께 정하는 일이고, 과거를 적으면\n * **지연 기록인지 정정인지**까지 갈라야 한다. 그래서 저장 직전에 한 번 묻는다.\n *\n * ```\n * 바뀌기 전 → 바뀐 뒤\n * 적용 시작 기본값 「지금부터」\n * 과거 시각이면 지연 기록인가 이미 적은 것의 정정인가\n * 미래 시각이면 지금 값은 그대로이고 변경이 예약된다고 알린다\n * ```\n *\n * ⚠ **기록 시각은 안 묻는다.** 사람이 넣으면 「언제 알았나」를 사람이 정하게 된다 — 서버가 붙인다.\n */\nexport interface AppliedAnswer {\n at?: string\n kind?: 'change' | 'correction'\n until?: string\n}\n\nexport interface AssignmentChange {\n rowName: string\n field: string\n before: string\n after: string\n}\n\n@customElement('applied-when-dialog')\nexport class AppliedWhenDialog extends LitElement {\n static styles = css`\n :host {\n display: block;\n padding: var(--spacing-medium, 12px);\n }\n .what {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: var(--spacing-tiny, 4px) var(--spacing-small, 8px);\n margin-bottom: var(--spacing-medium, 12px);\n }\n .what span {\n color: var(--md-sys-color-on-surface-variant);\n }\n .note {\n color: var(--md-sys-color-on-surface-variant);\n margin-top: var(--spacing-small, 8px);\n }\n `\n\n @property({ type: Array }) changes: AssignmentChange[] = []\n @property({ type: Object }) onAnswer?: (answer: AppliedAnswer) => void\n @property({ type: Object }) onCancel?: () => void\n\n @state() private at = ''\n @state() private kind: 'change' | 'correction' = 'change'\n @state() private until = ''\n\n /** 안 적으면 지금부터다 — 그 기본값이 곧 「지금부터」라는 주장이다. */\n private get when(): number {\n return this.at ? new Date(this.at).getTime() : Date.now()\n }\n\n private get past(): boolean {\n return this.when < Date.now() - 60000\n }\n\n private get future(): boolean {\n return this.when > Date.now() + 60000\n }\n\n render() {\n return html`\n <div class=\"what\">\n ${this.changes.map(\n one => html`\n <span>${one.rowName} · ${labelOf(one.field)}</span>\n <div>${one.before || i18next.t('text.none')} → <b>${one.after || i18next.t('text.none')}</b></div>\n `\n )}\n </div>\n\n <label>\n ${i18next.t('label.applied-from')}\n <input\n type=\"datetime-local\"\n .value=${this.at}\n @change=${(e: Event) => (this.at = (e.target as HTMLInputElement).value)}\n placeholder=${i18next.t('text.from-now')}\n />\n </label>\n\n ${this.past\n ? html`\n <div>\n <label>\n <input type=\"radio\" name=\"kind\" ?checked=${this.kind === 'change'} @change=${() => (this.kind = 'change')} />\n ${i18next.t('label.late-record')}\n </label>\n <label>\n <input type=\"radio\" name=\"kind\" ?checked=${this.kind === 'correction'} @change=${() => (this.kind = 'correction')} />\n ${i18next.t('label.correct-what-was-recorded')}\n </label>\n ${this.kind === 'correction'\n ? html`\n <label>\n ${i18next.t('label.applied-until')}\n <input type=\"datetime-local\" .value=${this.until} @change=${(e: Event) => (this.until = (e.target as HTMLInputElement).value)} />\n </label>\n `\n : ''}\n </div>\n `\n : ''}\n ${this.future ? html`<div class=\"note\">${i18next.t('text.change-is-scheduled')}</div>` : ''}\n\n <ox-popup-actions>\n <md-text-button slot=\"cancel\" @click=${() => this.onCancel?.()}>${i18next.t('button.cancel')}</md-text-button>\n <md-filled-button\n slot=\"confirm\"\n @click=${() =>\n this.onAnswer?.({\n ...(this.at ? { at: new Date(this.at).toISOString() } : {}),\n ...(this.past ? { kind: this.kind } : {}),\n ...(this.past && this.kind === 'correction' && this.until ? { until: new Date(this.until).toISOString() } : {})\n })}\n >\n ${i18next.t('button.save')}\n </md-filled-button>\n </ox-popup-actions>\n `\n }\n}\n\nfunction labelOf(field: string): string {\n return i18next.t(`field.${field}`, { defaultValue: field })\n}\n\nexport { CLAIMED_FIELDS }\n"]}