@things-factory/kpi 9.0.23 → 9.0.24

package/dist-client/pages/kpi-metric-value/kpi-metric-value-editor-page.js

@@ -0,0 +1,736 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/outlined-text-field.js';
+import { CommonButtonStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+import { PageView, store } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, property, 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 { connect } from 'pwa-helpers/connect-mixin';
+import gql from 'graphql-tag';
+let KpiMetricValueEditorPage = class KpiMetricValueEditorPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+    constructor() {
+        super(...arguments);
+        this.group = '';
+        this.startDate = '';
+        this.endDate = '';
+        this.metrics = [];
+        this.dates = [];
+        this.loading = false;
+        this.error = '';
+        this.editingCell = null;
+        this._existingValues = [];
+    }
+    static { this.styles = [
+        CommonHeaderStyles,
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        overflow-x: auto;
+      }
+
+      .header {
+        display: flex;
+        gap: 16px;
+        align-items: center;
+        margin-bottom: 20px;
+        padding: 16px;
+        background: var(--md-sys-color-surface-container);
+        border-radius: 8px;
+      }
+
+      .controls {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+      }
+
+      .table-container {
+        flex: 1;
+        overflow: auto;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 8px;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: max-content;
+      }
+
+      th {
+        background: var(--md-sys-color-surface-container-low);
+        font-weight: 500;
+        padding: 8px 12px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        min-width: 80px;
+        height: 120px;
+        vertical-align: middle;
+      }
+
+      td {
+        padding: 8px 12px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        min-width: 80px;
+        height: 60px;
+        text-align: right;
+        vertical-align: middle;
+      }
+
+      .metric-header {
+        position: sticky;
+        left: 0;
+        top: 0;
+        z-index: 3;
+      }
+
+      .metric-name {
+        position: sticky;
+        left: 0;
+        background: var(--md-sys-color-surface);
+        font-weight: 500;
+        min-width: 200px;
+        text-align: left;
+        z-index: 2;
+      }
+
+      tr:hover {
+        background: var(--md-sys-color-surface-container-high);
+      }
+
+      th.date-header {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        text-align: center;
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface-variant);
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+        min-height: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      td.editable-cell {
+        cursor: pointer;
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+      }
+
+      td.editable-cell:hover {
+        background: var(--md-sys-color-primary-container-high);
+      }
+
+      td.highlighted-cell {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        font-weight: 500;
+      }
+
+      td.highlighted-cell:hover {
+        background: var(--md-sys-color-secondary-container-high);
+      }
+
+      td.disabled-cell {
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: not-allowed;
+      }
+
+      .value-input {
+        width: 100%;
+        text-align: center;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font-size: 12px;
+        padding: 2px;
+      }
+
+      .value-input:focus {
+        outline: 2px solid var(--md-sys-color-primary);
+        border-radius: 4px;
+      }
+
+      .period-type-badge {
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        background: var(--md-sys-color-tertiary-container);
+        color: var(--md-sys-color-on-tertiary-container);
+        margin-left: 8px;
+      }
+
+      .loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 200px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .error {
+        color: var(--md-sys-color-error);
+        padding: 16px;
+        text-align: center;
+      }
+
+      .legend {
+        display: flex;
+        gap: 16px;
+        margin-top: 16px;
+        font-size: 12px;
+      }
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .legend-color {
+        width: 16px;
+        height: 16px;
+        border-radius: 2px;
+      }
+    `
+    ]; }
+    get context() {
+        return {
+            title: i18next.t('title.kpi metric value editor'),
+            actions: [
+                {
+                    title: i18next.t('button.save'),
+                    action: this._saveValues.bind(this),
+                    ...CommonButtonStyles.save
+                },
+                {
+                    title: i18next.t('button.cancel'),
+                    action: this._cancel.bind(this),
+                    ...CommonButtonStyles.cancel
+                }
+            ]
+        };
+    }
+    render() {
+        if (this.loading) {
+            return html `
+        <div class="loading">
+          <md-icon>hourglass_empty</md-icon>
+          <span>데이터를 불러오는 중...</span>
+        </div>
+      `;
+        }
+        if (this.error) {
+            return html `
+        <div class="error">
+          <md-icon>error</md-icon>
+          <span>${this.error}</span>
+        </div>
+      `;
+        }
+        return html `
+      <div class="header">
+        <div class="controls">
+          <md-outlined-text-field
+            label="그룹"
+            .value=${this.group}
+            @input=${(e) => (this.group = e.target.value)}
+            style="width: 150px;"
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="시작일"
+            type="date"
+            .value=${this.startDate}
+            @input=${(e) => (this.startDate = e.target.value)}
+            style="width: 150px;"
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="종료일"
+            type="date"
+            .value=${this.endDate}
+            @input=${(e) => (this.endDate = e.target.value)}
+            style="width: 150px;"
+          ></md-outlined-text-field>
+
+          <md-elevated-button @click=${this._loadData}>
+            <md-icon slot="icon">refresh</md-icon>
+            새로고침
+          </md-elevated-button>
+        </div>
+      </div>
+
+      <div class="table-container">
+        <table style="border-collapse: collapse; width: 100%;">
+          <thead>
+            <tr>
+              <th
+                style="border: 1px solid #ccc; padding: 8px; background: #f5f5f5; min-width: 200px; left: 0; top: 0;"
+                class="metric-header"
+              >
+                Metric명
+              </th>
+              ${this.dates.map(date => html `
+                  <th
+                    style="border: 1px solid #ccc; padding: 8px; background: #f5f5f5; min-width: 80px; position: sticky; top: 0;"
+                  >
+                    ${this._formatDate(date)}
+                  </th>
+                `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.metrics.map(metric => html `
+                <tr>
+                  <td
+                    style="border: 1px solid #ccc; padding: 8px; background: #fff; min-width: 200px;"
+                    class="metric-name"
+                  >
+                    ${metric.metricName}
+                    <span
+                      style="font-size: 10px; padding: 2px 6px; background: #e0e0e0; border-radius: 4px; margin-left: 8px;"
+                      >${metric.periodType}</span
+                    >
+                  </td>
+                  ${this.dates.map(date => html `
+                      <td
+                        style="border: 1px solid #ccc; padding: 8px; background: #e3f2fd; text-align: center; min-width: 80px; cursor: pointer;"
+                        @click=${() => this._startEdit(metric.metricId, date)}
+                      >
+                        ${this._renderCellContent(metric, date)}
+                      </td>
+                    `)}
+                </tr>
+              `)}
+          </tbody>
+        </table>
+      </div>
+
+      <div class="legend">
+        <div class="legend-item">
+          <div class="legend-color" style="background: var(--md-sys-color-primary-container);"></div>
+          <span>편집 가능</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color" style="background: var(--md-sys-color-secondary-container);"></div>
+          <span>하이라이트 (PeriodType에 따라)</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color" style="background: var(--md-sys-color-surface-container);"></div>
+          <span>편집 불가</span>
+        </div>
+      </div>
+    `;
+    }
+    _renderCellContent(metric, date) {
+        const isEditing = this.editingCell?.metricId === metric.metricId && this.editingCell?.date === date;
+        // periodType에 따라 값을 가져오는 방식 결정
+        let value = null;
+        if (metric.periodType === 'DAY') {
+            // DAY인 경우 해당 날짜의 값을 사용
+            value = metric.values[date]?.value;
+        }
+        else if (metric.periodType === 'WEEK') {
+            // WEEK인 경우 해당 주의 월요일의 값을 사용
+            const weekKey = this._getWeekKey(date);
+            value = metric.values[weekKey]?.value;
+        }
+        else if (metric.periodType === 'MONTH') {
+            // MONTH인 경우 해당 월의 값을 사용
+            const monthKey = this._getMonthKey(date);
+            value = metric.values[monthKey]?.value;
+        }
+        else if (metric.periodType === 'QUARTER') {
+            // QUARTER인 경우 해당 분기의 값을 사용
+            const quarterKey = this._getQuarterKey(date);
+            value = metric.values[quarterKey]?.value;
+        }
+        else if (metric.periodType === 'YEAR') {
+            // YEAR인 경우 해당 연도의 값을 사용
+            const yearKey = this._getYearKey(date);
+            value = metric.values[yearKey]?.value;
+        }
+        else {
+            // 기본값: DAY와 동일
+            value = metric.values[date]?.value;
+        }
+        if (isEditing) {
+            console.log('Rendering input for editing, value:', value);
+            return html `
+        <input
+          type="number"
+          step="0.01"
+          .value=${(value || '').toString()}
+          @blur=${(e) => this._finishEdit(metric.metricId, date, parseFloat(e.target.value) || 0)}
+          @keydown=${(e) => e.key === 'Enter' && e.target.blur()}
+          style="width: 100%; text-align: center; border: none; background: transparent;"
+          autofocus
+        />
+      `;
+        }
+        return html `
+      <div style="display: flex; flex-direction: column; gap: 2px;">
+        <span style="font-weight: 500; color: ${value !== null && value !== undefined ? 'inherit' : '#999'};">
+          ${value !== null && value !== undefined ? value.toLocaleString() : '클릭하여 입력'}
+        </span>
+      </div>
+    `;
+    }
+    _formatDate(date) {
+        const d = new Date(date);
+        return d.toLocaleDateString('ko-KR', { month: 'numeric', day: 'numeric' });
+    }
+    _startEdit(metricId, date) {
+        this.editingCell = { metricId, date };
+    }
+    _finishEdit(metricId, date, value) {
+        const metric = this.metrics.find(m => m.metricId === metricId);
+        if (metric) {
+            // periodType에 따라 저장할 키 결정
+            let storageKey = date;
+            if (metric.periodType === 'WEEK') {
+                storageKey = this._getWeekKey(date);
+            }
+            else if (metric.periodType === 'MONTH') {
+                storageKey = this._getMonthKey(date);
+            }
+            else if (metric.periodType === 'QUARTER') {
+                storageKey = this._getQuarterKey(date);
+            }
+            else if (metric.periodType === 'YEAR') {
+                storageKey = this._getYearKey(date);
+            }
+            if (!metric.values[storageKey]) {
+                metric.values[storageKey] = { value: 0, isDirty: false };
+            }
+            // 값이 변경되었는지 확인
+            const originalValue = this._findExistingValue(metricId, storageKey)?.value;
+            const isChanged = originalValue !== value;
+            metric.values[storageKey].value = value;
+            metric.values[storageKey].isDirty = isChanged;
+        }
+        this.editingCell = null;
+    }
+    async _loadData() {
+        if (!this.startDate || !this.endDate) {
+            this.error = '시작일, 종료일을 모두 입력해주세요.';
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            // KPI Metric 목록 조회
+            const metricsResponse = await client.query({
+                query: gql `
+          query ($filters: [Filter!]) {
+            kpiMetrics(filters: $filters) {
+              items {
+                id
+                name
+                periodType
+                active
+              }
+              total
+            }
+          }
+        `,
+                variables: {
+                    filters: [{ name: 'active', operator: 'eq', value: true }]
+                }
+            });
+            // KPI Metric Value 데이터 조회
+            const valuesResponse = await client.query({
+                query: gql `
+          query ($filters: [Filter!]) {
+            kpiMetricValues(filters: $filters) {
+              items {
+                id
+                metricId
+                valueDate
+                value
+                group
+              }
+              total
+            }
+          }
+        `,
+                variables: {
+                    filters: [
+                        ...(this.group ? [{ name: 'group', operator: 'eq', value: this.group }] : []),
+                        { name: 'valueDate', operator: 'between', value: [this.startDate, this.endDate] }
+                    ]
+                }
+            });
+            // 날짜 배열 생성
+            this.dates = this._generateDateArray(this.startDate, this.endDate);
+            // KPI Metric 목록을 기준으로 데이터 구성
+            this.metrics = metricsResponse.data.kpiMetrics.items.map((metric) => ({
+                metricId: metric.id,
+                metricName: metric.name,
+                periodType: metric.periodType,
+                values: {}
+            }));
+            // 기존 KPI Metric Value 데이터 저장
+            this._existingValues = valuesResponse.data.kpiMetricValues.items;
+            // KPI Metric Value 데이터를 해당 Metric에 매핑
+            valuesResponse.data.kpiMetricValues.items.forEach((value) => {
+                const metric = this.metrics.find(m => m.metricId === value.metricId);
+                if (metric) {
+                    metric.values[value.valueDate] = {
+                        value: value.value,
+                        isDirty: false
+                    };
+                }
+            });
+            // KPI Metric Value가 없는 Metric도 빈 값으로 초기화
+            this.metrics.forEach(metric => {
+                this.dates.forEach(date => {
+                    if (!metric.values[date]) {
+                        metric.values[date] = { value: null, isDirty: false };
+                    }
+                });
+            });
+            this.requestUpdate();
+        }
+        catch (error) {
+            console.error('데이터 로드 중 오류:', error);
+            this.error = '데이터를 불러오는 중 오류가 발생했습니다.';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    _generateDateArray(startDate, endDate) {
+        const dates = [];
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+        // 일별로 생성 (기본)
+        for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+            dates.push(d.toLocaleDateString('sv-SE'));
+        }
+        return dates;
+    }
+    async _saveValues() {
+        try {
+            const patches = [];
+            this.metrics.forEach(metric => {
+                Object.entries(metric.values).forEach(([date, data]) => {
+                    // dirty 상태인 데이터만 처리
+                    if (data.isDirty && data.value !== null && data.value !== undefined) {
+                        const existingValue = this._findExistingValue(metric.metricId, date);
+                        if (existingValue) {
+                            patches.push({
+                                id: existingValue.id,
+                                value: data.value,
+                                group: this.group,
+                                cuFlag: 'M'
+                            });
+                        }
+                        else {
+                            console.log('Creating new value for metric:', metric.metricName, 'periodType:', metric.periodType, 'date:', date);
+                            const normalizedDate = this._normalizeDateByPeriodType(date, metric.periodType);
+                            console.log('Normalized date:', normalizedDate);
+                            patches.push({
+                                metricId: metric.metricId,
+                                valueDate: normalizedDate,
+                                value: data.value,
+                                group: this.group,
+                                cuFlag: '+'
+                            });
+                        }
+                    }
+                });
+            });
+            if (patches.length === 0) {
+                notify({ message: '저장할 데이터가 없습니다.' });
+                return;
+            }
+            // 디버깅: patches 내용 확인
+            console.log('Sending patches:', patches);
+            // 단일 mutation으로 생성과 업데이트 처리
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($patches: [KpiMetricValuePatch!]!) {
+            updateMultipleKpiMetricValue(patches: $patches) {
+              id
+              value
+              valueDate
+              metricId
+            }
+          }
+        `,
+                variables: { patches }
+            });
+            if (!response.errors) {
+                // 저장 후 dirty 상태 해제
+                response.data.updateMultipleKpiMetricValue.forEach((savedValue) => {
+                    const metric = this.metrics.find(m => m.metricId === savedValue.metricId);
+                    if (metric && metric.values[savedValue.valueDate]) {
+                        metric.values[savedValue.valueDate].isDirty = false;
+                    }
+                });
+                notify({ message: 'KPI Metric 값이 성공적으로 저장되었습니다.' });
+                this.requestUpdate();
+            }
+        }
+        catch (error) {
+            console.error('저장 중 오류:', error);
+            notify({ message: '저장 중 오류가 발생했습니다.' });
+        }
+    }
+    _findExistingValue(metricId, date) {
+        // 기존 로드된 KPI Metric Value 데이터에서 찾기
+        return this._existingValues?.find((v) => v.metricId === metricId && v.valueDate === date);
+    }
+    _getMonthKey(date) {
+        const dateObj = new Date(date);
+        return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}`;
+    }
+    _getQuarterKey(date) {
+        const dateObj = new Date(date);
+        const quarter = Math.floor(dateObj.getMonth() / 3) + 1;
+        return `${dateObj.getFullYear()}-Q${quarter}`;
+    }
+    _getYearKey(date) {
+        const dateObj = new Date(date);
+        return `${dateObj.getFullYear()}`;
+    }
+    _getWeekKey(date) {
+        const dateObj = new Date(date);
+        const dayOfWeek = dateObj.getDay();
+        const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+        const monday = new Date(dateObj);
+        monday.setDate(dateObj.getDate() - daysToMonday);
+        return monday.toLocaleDateString('sv-SE');
+    }
+    _getMondayOfWeek(date) {
+        const dateObj = new Date(date);
+        const dayOfWeek = dateObj.getDay();
+        const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+        const monday = new Date(dateObj);
+        monday.setDate(dateObj.getDate() - daysToMonday);
+        return monday.toLocaleDateString('sv-SE');
+    }
+    _getFirstDayOfMonth(date) {
+        const dateObj = new Date(date);
+        return new Date(dateObj.getFullYear(), dateObj.getMonth(), 1).toLocaleDateString('sv-SE');
+    }
+    _getFirstDayOfQuarter(date) {
+        const dateObj = new Date(date);
+        const quarter = Math.floor(dateObj.getMonth() / 3);
+        const firstMonthOfQuarter = quarter * 3;
+        return new Date(dateObj.getFullYear(), firstMonthOfQuarter, 1).toLocaleDateString('sv-SE');
+    }
+    _getFirstDayOfYear(date) {
+        const dateObj = new Date(date);
+        return new Date(dateObj.getFullYear(), 0, 1).toLocaleDateString('sv-SE');
+    }
+    _normalizeDateByPeriodType(date, periodType) {
+        console.log('Normalizing date:', date, 'for periodType:', periodType);
+        const dateObj = new Date(date);
+        switch (periodType) {
+            case 'DAY':
+                console.log('DAY - returning original date:', date);
+                return date; // 그대로 사용
+            case 'WEEK':
+                // 해당 주의 월요일로 설정
+                const dayOfWeek = dateObj.getDay();
+                const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 일요일이면 6일 전, 아니면 dayOfWeek - 1
+                const monday = new Date(dateObj);
+                monday.setDate(dateObj.getDate() - daysToMonday);
+                const weeklyDate = monday.toLocaleDateString('sv-SE');
+                console.log('WEEK - returning monday:', weeklyDate);
+                return weeklyDate;
+            case 'MONTH':
+                // 년-월 형식으로 설정 (예: "2025-01")
+                const monthlyDate = `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}`;
+                console.log('MONTH - returning year-month format:', monthlyDate);
+                return monthlyDate;
+            case 'QUARTER':
+                // 분기 형식으로 설정 (예: "2025-Q1")
+                const quarter = Math.floor(dateObj.getMonth() / 3) + 1;
+                const quarterlyDate = `${dateObj.getFullYear()}-Q${quarter}`;
+                console.log('QUARTER - returning quarter format:', quarterlyDate);
+                return quarterlyDate;
+            case 'YEAR':
+                // 년도 형식으로 설정 (예: "2025")
+                const yearlyDate = `${dateObj.getFullYear()}`;
+                console.log('YEAR - returning year format:', yearlyDate);
+                return yearlyDate;
+            default:
+                console.log('DEFAULT - returning original date:', date);
+                return date; // 기본값
+        }
+    }
+    _cancel() {
+        // 편집 취소 로직
+        this.editingCell = null;
+        this._loadData(); // 원본 데이터로 복원
+    }
+    async pageInitialized(lifecycle) {
+        // 기본값 설정 - 지난 1개월
+        if (!this.startDate) {
+            const today = new Date();
+            const oneMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
+            this.startDate = oneMonthAgo.toLocaleDateString('sv-SE');
+        }
+        if (!this.endDate) {
+            const today = new Date();
+            this.endDate = today.toLocaleDateString('sv-SE');
+        }
+        // 페이지 초기화 시 자동으로 데이터 로드
+        await this._loadData();
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiMetricValueEditorPage.prototype, "group", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiMetricValueEditorPage.prototype, "startDate", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiMetricValueEditorPage.prototype, "endDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiMetricValueEditorPage.prototype, "metrics", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiMetricValueEditorPage.prototype, "dates", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], KpiMetricValueEditorPage.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], KpiMetricValueEditorPage.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiMetricValueEditorPage.prototype, "editingCell", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiMetricValueEditorPage.prototype, "_existingValues", void 0);
+KpiMetricValueEditorPage = __decorate([
+    customElement('kpi-metric-value-editor-page')
+], KpiMetricValueEditorPage);
+export { KpiMetricValueEditorPage };
+//# sourceMappingURL=kpi-metric-value-editor-page.js.map