@dssp/dkpi 1.0.0-alpha.9 → 1.0.0-alpha.91

package/dist-client/pages/project-complete-tabs/pc-tab4-monthly.js

@@ -0,0 +1,635 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { gql } from '@apollo/client';
+import { notify } from '@operato/layout';
+import { OxPrompt } from '@operato/popup';
+import { hasPrivilege } from '@things-factory/auth-base/dist-client';
+import moment from 'moment-timezone';
+import { tenantHeaders } from '@dssp/project/dist-client/shared/domain-context';
+/**
+ * 프로젝트 완공 처리 탭 4 — 월별 KPI 데이터 그리드.
+ *
+ * 데이터 source = `KpiMetric` (periodType=MONTH) + `KpiMetricValue` (그 metric 의
+ * 월별 값들). 이전 버전 (DataSet/DataSample) 폐기. KpiMetricValue 의 unique
+ * 인덱스 (domain, metric, valueDate, org) 가 (도메인, 프로젝트, 메트릭, 월) 단일 row
+ * 정책을 보장.
+ *
+ * 단방향 흐름:
+ *   - 탭1/탭2 의 metric 저장 (valueDate=YYYY-MM-01) → 그 월 row 가 여기 자동 노출
+ *   - 여기서 cell 수정 → 그 metric × 그 월 row 만 update (탭1/탭2 의 "현재값" 영향 없음 —
+ *     탭1/탭2 는 KpiMetricValueProvider 가 latest 또는 valueDate-based lookup 으로 동작)
+ */
+/** rating 셀렉트로 표시할 metric 인지 판단 — 이름에 '평가' 또는 '이탈' 포함되면 1~5 rating. */
+function isRating(metricName) {
+    return /평가|이탈/.test(metricName || '');
+}
+let SvProjectCompleteTab4Monthly = class SvProjectCompleteTab4Monthly extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.project = {};
+        /** 월별 metric 목록 (periodType=MONTH). KpiMetric admin 에 등록된 것 기준. */
+        this.monthlyMetrics = [];
+        /** monthRows: { workDate:'YYYY-MM', values:{[metricId]:value}, originalValues, dirty }[] */
+        this.monthRows = [];
+        this.addYear = new Date().getFullYear();
+        this.addMonth = new Date().getMonth() + 1;
+        /** kpi:input — Step4 월별 데이터 저장 권한 (cumulative 와 같은 권한) */
+        this.canSave = false;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.canSave = await hasPrivilege({
+            category: 'kpi',
+            privilege: 'input',
+            domainOwnerGranted: true,
+            superUserGranted: true
+        });
+    }
+    render() {
+        const years = this._getYearRange();
+        return html `
+      <div class="title">
+        프로젝트 수행 기간 동안의 월별 데이터를 입력합니다.<br />
+        공정률, 감리자 정성 평가(1~5) 등의 항목을 월 단위로 기록하여 성과 추세 분석에 활용합니다.
+      </div>
+
+      <div class="toolbar">
+        <select
+          .value=${String(this.addYear)}
+          @change=${(e) => (this.addYear = Number(e.target.value))}
+        >
+          ${years.map(y => html `<option value=${y} ?selected=${y === this.addYear}>${y}년</option>`)}
+        </select>
+        <select
+          .value=${String(this.addMonth)}
+          @change=${(e) => (this.addMonth = Number(e.target.value))}
+        >
+          ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(m => html `<option value=${m} ?selected=${m === this.addMonth}>${m}월</option>`)}
+        </select>
+        <div class="add-btn" @click=${this._addMonth}>+ 월 추가</div>
+      </div>
+
+      ${this.monthlyMetrics.length === 0
+            ? html `<div class="empty-msg">
+            월별 metric (periodType=MONTH) 이 등록되어 있지 않습니다. KPI 관리자에서 먼저 등록해주세요.
+          </div>`
+            : this.monthRows.length === 0
+                ? html `<div class="empty-msg">등록된 월별 데이터가 없습니다. 위에서 월을 추가해주세요.</div>`
+                : html `
+              <div class="grid-wrapper">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>월</th>
+                      ${this.monthlyMetrics.map(m => html `
+                          <th
+                            class=${this._isMetricNeverEntered(m.id) ? 'pending' : ''}
+                            title=${this._isMetricNeverEntered(m.id) ? '한 번도 입력된 적 없는 metric' : ''}
+                          >
+                            ${m.name}${m.unit ? ` (${m.unit})` : ''}
+                          </th>
+                        `)}
+                      <th>상태</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${this.monthRows.map((row, rowIdx) => html `
+                        <tr>
+                          <td class="month-cell ${this._isCurrentMonth(row.workDate) ? 'current' : ''}">${row.workDate}</td>
+                          ${this.monthlyMetrics.map(m => {
+                    var _a, _b;
+                    const pending = this._isCellPending(row, m.id);
+                    return isRating(m.name)
+                        ? html `
+                                  <td class=${pending ? 'pending' : ''}>
+                                    <select
+                                      class="rating-select"
+                                      .value=${String((_a = row.values[m.id]) !== null && _a !== void 0 ? _a : '')}
+                                      @change=${(e) => this._onCellChange(rowIdx, m.id, e.target.value)}
+                                    >
+                                      <option value="">-</option>
+                                      ${[1, 2, 3, 4, 5].map(v => html `<option value=${v} ?selected=${Number(row.values[m.id]) === v}>${v}</option>`)}
+                                    </select>
+                                  </td>
+                                `
+                        : html `
+                                  <td class=${pending ? 'pending' : ''}>
+                                    <input
+                                      type="number"
+                                      .value=${(_b = row.values[m.id]) !== null && _b !== void 0 ? _b : ''}
+                                      @input=${(e) => this._onCellChange(rowIdx, m.id, e.target.value)}
+                                    />
+                                  </td>
+                                `;
+                })}
+                          <td>
+                            ${row.dirty
+                    ? html `<span class="status-unsaved">수정됨</span>`
+                    : row.isAuto
+                        ? html `<span class="status-pending">미입력</span>`
+                        : row.isNew
+                            ? html `<span class="status-new">신규</span>`
+                            : html `<span class="status-saved">저장됨</span>`}
+                          </td>
+                          <td>
+                            <span class="delete-btn" title="삭제" @click=${() => this._removeMonth(rowIdx)}>✕</span>
+                          </td>
+                        </tr>
+                      `)}
+                  </tbody>
+                </table>
+              </div>
+            `}
+
+      <div class="button-line">
+        <div class="ghost-btn" @click=${this._reset}>초기화</div>
+        <div
+          class="ghost-btn secondary ${this.canSave ? '' : 'disabled'}"
+          title=${this.canSave ? '' : 'kpi:input 권한 필요'}
+          @click=${() => this.canSave && this._save()}
+        >
+          저장
+        </div>
+      </div>
+    `;
+    }
+    willUpdate(changedProperties) {
+        var _a;
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('project') && ((_a = this.project) === null || _a === void 0 ? void 0 : _a.id)) {
+            this._loadData();
+        }
+    }
+    _getYearRange() {
+        var _a, _b;
+        const startYear = ((_a = this.project) === null || _a === void 0 ? void 0 : _a.startDate) ? new Date(this.project.startDate).getFullYear() : new Date().getFullYear() - 2;
+        const endYear = ((_b = this.project) === null || _b === void 0 ? void 0 : _b.endDate) ? new Date(this.project.endDate).getFullYear() + 1 : new Date().getFullYear() + 1;
+        const years = [];
+        for (let y = startYear; y <= endYear; y++)
+            years.push(y);
+        return years;
+    }
+    _isCurrentMonth(workDate) {
+        return workDate === moment().tz('Asia/Seoul').format('YYYY-MM');
+    }
+    /**
+     * 월별 metric 정의 + 그 프로젝트의 월별 KpiMetricValue 들을 조회해 그리드 row 구성.
+     *
+     *   1) KpiMetric where periodType=MONTH → monthlyMetrics
+     *   2) KpiMetricValue where org=projectId → 월별로 그룹핑하여 monthRows
+     */
+    async _loadData() {
+        var _a, _b, _c, _d, _e, _f;
+        try {
+            // 1) 월별 metric 목록
+            const metricsResp = await client.query({
+                query: gql `
+          query KpiMetrics {
+            kpiMetrics {
+              items {
+                id
+                name
+                unit
+                periodType
+              }
+            }
+          }
+        `,
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
+            });
+            const all = ((_c = (_b = metricsResp.data) === null || _b === void 0 ? void 0 : _b.kpiMetrics) === null || _c === void 0 ? void 0 : _c.items) || [];
+            this.monthlyMetrics = all.filter((m) => m.periodType === 'MONTH');
+            if (this.monthlyMetrics.length === 0) {
+                this.monthRows = [];
+                return;
+            }
+            // 2) 프로젝트의 KpiMetricValue 들 (org=projectId). 월별 metric 만 client 측에서 필터.
+            const monthlyMetricIds = new Set(this.monthlyMetrics.map((m) => m.id));
+            const valuesResp = await client.query({
+                query: gql `
+          query KpiMetricValues($filters: [Filter!]) {
+            kpiMetricValues(filters: $filters) {
+              items {
+                id
+                value
+                unit
+                periodType
+                valueDate
+                metricId
+              }
+            }
+          }
+        `,
+                variables: { filters: [{ name: 'org', operator: 'eq', value: this.project.id }] },
+                context: { headers: tenantHeaders((_d = this.project) === null || _d === void 0 ? void 0 : _d.code) }
+            });
+            const allValues = ((_f = (_e = valuesResp.data) === null || _e === void 0 ? void 0 : _e.kpiMetricValues) === null || _f === void 0 ? void 0 : _f.items) || [];
+            // periodType='MONTH' 만 그리드에 — 비월별 row 가 valueDate prefix 로 잘못 묶이지 않도록.
+            const monthlyValues = allValues.filter((v) => monthlyMetricIds.has(v.metricId) && v.periodType === 'MONTH');
+            // 월별 그룹핑 — valueDate YYYY-MM-DD 의 앞 7자리. id 도 보존 (삭제 시 사용).
+            // 현재월(=this month) row 는 운영 원칙상 표시 대상 아님 → 아예 bucket 제외.
+            const currentYm = moment().tz('Asia/Seoul').format('YYYY-MM');
+            const byMonth = new Map();
+            for (const v of monthlyValues) {
+                const ym = (v.valueDate || '').slice(0, 7);
+                if (!ym)
+                    continue;
+                if (ym === currentYm)
+                    continue; // 현재월 record 무시 (DB 에 우연히 있더라도)
+                if (!byMonth.has(ym))
+                    byMonth.set(ym, { workDate: ym, values: {}, originalValues: {}, valueIds: {}, dirty: false });
+                const row = byMonth.get(ym);
+                row.values[v.metricId] = v.value;
+                row.originalValues[v.metricId] = v.value;
+                row.valueIds[v.metricId] = v.id;
+            }
+            // project.startDate ~ 현재월 사이 누락된 월 placeholder row 자동 추가.
+            // 사용자가 값을 입력하지 않으면 dirty 가 안 되므로 저장 시 무시되어 spurious patch 없음.
+            for (const ym of this._generateExpectedMonths()) {
+                if (!byMonth.has(ym)) {
+                    byMonth.set(ym, {
+                        workDate: ym,
+                        values: {},
+                        originalValues: {},
+                        valueIds: {},
+                        dirty: false,
+                        isAuto: true
+                    });
+                }
+            }
+            this.monthRows = Array.from(byMonth.values()).sort((a, b) => b.workDate.localeCompare(a.workDate));
+        }
+        catch (e) {
+            console.error('Failed to load monthly data:', e);
+            this.monthRows = [];
+        }
+    }
+    /** project.startDate (YYYY-MM) ~ **전월** (YYYY-MM) 까지 매월 문자열 배열.
+     *  현재월은 의도적으로 제외 — 운영 원칙상 "이번달 데이터는 아직 입력 대상이 아님". */
+    _generateExpectedMonths() {
+        var _a;
+        const startStr = (((_a = this.project) === null || _a === void 0 ? void 0 : _a.startDate) || '').slice(0, 7);
+        if (!startStr || !/^\d{4}-\d{2}$/.test(startStr))
+            return [];
+        const tz = 'Asia/Seoul';
+        let cur = moment.tz(startStr, 'YYYY-MM', tz);
+        const end = moment.tz(moment().tz(tz).subtract(1, 'month').format('YYYY-MM'), 'YYYY-MM', tz);
+        if (!cur.isValid() || cur.isAfter(end))
+            return [];
+        const months = [];
+        while (cur.isSameOrBefore(end)) {
+            months.push(cur.format('YYYY-MM'));
+            cur = cur.add(1, 'month');
+        }
+        return months;
+    }
+    /** 셀 미입력 여부 — 값 없음 AND 그 월이 **전월** (직전 한 달) 인 경우만 pending.
+     *  과월 전체가 아니라 전월 한 달에 한해서만 강조 — 사용자 입력 흐름(이번 달에 지난달 데이터)과 일치. */
+    _isCellPending(row, metricId) {
+        var _a;
+        const v = (_a = row.values) === null || _a === void 0 ? void 0 : _a[metricId];
+        if (v !== undefined && v !== null && v !== '')
+            return false;
+        const lastMonth = moment().tz('Asia/Seoul').subtract(1, 'month').format('YYYY-MM');
+        return row.workDate === lastMonth;
+    }
+    /** metric 컬럼이 전 row 통틀어 한 번도 값이 없으면 헤더 강조. */
+    _isMetricNeverEntered(metricId) {
+        return !this.monthRows.some(r => {
+            var _a;
+            const v = (_a = r.values) === null || _a === void 0 ? void 0 : _a[metricId];
+            return v !== undefined && v !== null && v !== '';
+        });
+    }
+    _addMonth() {
+        const workDate = `${this.addYear}-${String(this.addMonth).padStart(2, '0')}`;
+        // 현재월 row 는 추가 금지 — 운영 원칙상 이번달 데이터는 입력 대상 아님.
+        const currentYm = moment().tz('Asia/Seoul').format('YYYY-MM');
+        if (workDate === currentYm) {
+            notify({ message: '현재월(이번 달) 데이터는 입력 대상이 아닙니다.' });
+            return;
+        }
+        // 미래월도 차단
+        if (workDate > currentYm) {
+            notify({ message: '미래월은 입력 대상이 아닙니다.' });
+            return;
+        }
+        if (this.monthRows.some(r => r.workDate === workDate)) {
+            notify({ message: `${workDate}은 이미 존재합니다.` });
+            return;
+        }
+        const newRow = { workDate, values: {}, originalValues: {}, valueIds: {}, dirty: true, isNew: true };
+        const rows = [...this.monthRows, newRow];
+        rows.sort((a, b) => b.workDate.localeCompare(a.workDate));
+        this.monthRows = rows;
+    }
+    async _removeMonth(rowIdx) {
+        var _a;
+        const row = this.monthRows[rowIdx];
+        // 신규 row (DB 미반영) — 메모리에서만 제거
+        if (row.isNew) {
+            this.monthRows = this.monthRows.filter((_, i) => i !== rowIdx);
+            return;
+        }
+        // 저장된 row — 그 월의 모든 KpiMetricValue id 들을 한 번에 삭제.
+        // 권한: things-factory 의 deleteKpiMetricValues 는 category="kpi", privilege="mutation"
+        // (superUser/도메인 owner 자동 통과, 일반 사용자는 별도 grant 필요).
+        const ids = Object.values(row.valueIds || {}).filter(Boolean);
+        if (ids.length === 0) {
+            this.monthRows = this.monthRows.filter((_, i) => i !== rowIdx);
+            return;
+        }
+        const ok = await OxPrompt.open({
+            title: `${row.workDate} 의 월별 데이터를 삭제하시겠습니까?`,
+            confirmButton: { text: '삭제' },
+            cancelButton: { text: '취소' }
+        });
+        if (!ok)
+            return;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation DeleteKpiMetricValues($ids: [String!]!) {
+            deleteKpiMetricValues(ids: $ids)
+          }
+        `,
+                variables: { ids },
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
+            });
+            if (response.errors) {
+                throw new Error(response.errors.map((e) => e.message).join('\n'));
+            }
+            notify({ message: `${row.workDate} 월별 데이터 ${ids.length}건 삭제되었습니다.` });
+            await this._loadData();
+        }
+        catch (e) {
+            console.error('Failed to delete monthly values:', e);
+            notify({ message: '삭제 중 오류가 발생했습니다. 권한을 확인해주세요.' });
+        }
+    }
+    _onCellChange(rowIdx, metricId, rawValue) {
+        const value = rawValue === '' ? null : Number(rawValue);
+        this.monthRows = this.monthRows.map((row, i) => {
+            if (i !== rowIdx)
+                return row;
+            return Object.assign(Object.assign({}, row), { values: Object.assign(Object.assign({}, row.values), { [metricId]: value }), dirty: true });
+        });
+    }
+    /**
+     * 저장 — dirty row 들 안의 변경된 cell 들을 KpiMetricValuePatch 로 모아
+     * updateKpiMetricValuesCumulative 한 번 호출 (backend upsert 가 unique 조합 처리).
+     */
+    async _save() {
+        var _a;
+        const patches = [];
+        for (const row of this.monthRows) {
+            if (!row.dirty)
+                continue;
+            for (const m of this.monthlyMetrics) {
+                const value = row.values[m.id];
+                const original = row.originalValues[m.id];
+                if (value === undefined || value === null)
+                    continue; // 빈 값은 skip (기존 유지)
+                if (value === original)
+                    continue; // 변화 없으면 skip
+                patches.push({
+                    metricId: m.id,
+                    value,
+                    unit: m.unit || '',
+                    org: this.project.id,
+                    periodType: 'MONTH',
+                    valueDate: `${row.workDate}-01`
+                });
+            }
+        }
+        if (patches.length === 0) {
+            notify({ message: '변경된 데이터가 없습니다.' });
+            return;
+        }
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation UpdateKpiMetricValuesCumulative($patches: [KpiMetricValuePatch!]!) {
+            updateKpiMetricValuesCumulative(patches: $patches) {
+              id
+            }
+          }
+        `,
+                variables: { patches },
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
+            });
+            if (response.errors) {
+                throw new Error(response.errors.map((e) => e.message).join('\n'));
+            }
+            notify({ message: `${patches.length}건 저장되었습니다.` });
+            await this._loadData();
+        }
+        catch (e) {
+            console.error('Failed to save monthly values:', e);
+            notify({ message: '저장 중 오류가 발생했습니다.' });
+        }
+    }
+    _reset() {
+        this._loadData();
+    }
+};
+SvProjectCompleteTab4Monthly.styles = [
+    css `
+      :host {
+        display: block;
+      }
+      .title {
+        color: #212529;
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 24px;
+        text-align: center;
+        margin-bottom: 8px;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        margin-bottom: 12px;
+      }
+      .toolbar select {
+        padding: 5px 8px;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: 5px;
+        font-size: 14px;
+        color: #212529;
+      }
+      .toolbar .add-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 5px 10px;
+        background: #35618e;
+        color: #fff;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 13px;
+      }
+
+      .grid-wrapper {
+        overflow-x: auto;
+        padding: 0 6px;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 13px;
+      }
+      thead th {
+        background: #f3f3fa;
+        border-top: 2px solid #0c4da2;
+        color: #212529;
+        text-align: center;
+        padding: 8px 6px;
+        white-space: nowrap;
+        font-weight: 500;
+      }
+      tbody td {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        text-align: center;
+        padding: 6px 4px;
+        vertical-align: middle;
+      }
+      tbody tr:hover {
+        background: #f8fafc;
+      }
+      .month-cell {
+        color: #35618e;
+        font-weight: 600;
+        white-space: nowrap;
+      }
+      .month-cell.current {
+        color: #16a085;
+      }
+
+      input[type='number'] {
+        width: 70px;
+        padding: 4px 6px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+        border-radius: 4px;
+        text-align: center;
+        font-size: 13px;
+      }
+      input[type='number']:focus {
+        outline: none;
+        border-color: #35618e;
+      }
+
+      .rating-select {
+        padding: 4px 6px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+        border-radius: 4px;
+        font-size: 13px;
+        text-align: center;
+      }
+
+      .status-saved {
+        color: #16a085;
+        font-size: 12px;
+      }
+      .status-unsaved {
+        color: #e67e22;
+        font-size: 12px;
+      }
+      .status-new {
+        color: #3498db;
+        font-size: 12px;
+      }
+      .status-pending {
+        color: #e74c3c;
+        font-size: 12px;
+        font-weight: 600;
+      }
+
+      /* 미입력 셀 — 과월/현재월 row 에서 값이 비어있을 때 강조 */
+      td.pending input[type='number'],
+      td.pending .rating-select {
+        border-color: #e74c3c;
+        background-color: #fff5f5;
+      }
+      /* 한 번도 입력된 적 없는 metric 컬럼 — 헤더 강조 */
+      th.pending {
+        background: #fdecec;
+        color: #c0392b;
+      }
+
+      .button-line {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        margin-top: 16px;
+      }
+      .ghost-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        background: #35618e;
+        color: #ffffff;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+      .ghost-btn.secondary {
+        background: #24be7b;
+      }
+      .ghost-btn.disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+      }
+
+      .delete-btn {
+        cursor: pointer;
+        color: #999;
+        font-size: 18px;
+      }
+      .delete-btn:hover {
+        color: #e74c3c;
+      }
+
+      .empty-msg {
+        text-align: center;
+        color: #999;
+        padding: 40px 0;
+        font-size: 14px;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab4Monthly.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectCompleteTab4Monthly.prototype, "monthlyMetrics", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectCompleteTab4Monthly.prototype, "monthRows", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], SvProjectCompleteTab4Monthly.prototype, "addYear", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], SvProjectCompleteTab4Monthly.prototype, "addMonth", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab4Monthly.prototype, "canSave", void 0);
+SvProjectCompleteTab4Monthly = __decorate([
+    customElement('sv-pc-tab4-monthly')
+], SvProjectCompleteTab4Monthly);
+export { SvProjectCompleteTab4Monthly };
+//# sourceMappingURL=pc-tab4-monthly.js.map