@dssp/project 0.0.2 → 0.0.6

package/client/pages/resource/resource-list-page.ts

@@ -1,355 +0,0 @@
-import '@operato/data-grist'
-
-import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
-import { PageView, store } 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 {
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl
-} from '@operato/data-grist'
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { notify, openPopup } from '@operato/layout'
-import { OxPopup, OxPrompt } from '@operato/popup'
-import { isMobileDevice } from '@operato/utils'
-
-import { connect } from 'pwa-helpers/connect-mixin'
-import gql from 'graphql-tag'
-
-import { ResourceImporter } from './resource-importer'
-
-@customElement('resource-list-page')
-export class ResourceListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
-  static styles = [
-    ScrollbarStyles,
-    CommonGristStyles,
-    css`
-      :host {
-        display: flex;
-
-        width: 100%;
-
-        --grid-record-emphasized-background-color: red;
-        --grid-record-emphasized-color: yellow;
-      }
-    `
-  ]
-
-  static get scopedElements() {
-    return {
-      'resource-importer': ResourceImporter
-    }
-  }
-
-  @state() private gristConfig: any
-  @state() private mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
-
-  @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
-
-  get context() {
-    return {
-      title: i18next.t('title.resource list'),
-      search: {
-        handler: (search: string) => {
-          this.grist.searchText = search
-        },
-        value: this.grist.searchText
-      },
-      filter: {
-        handler: () => {
-          this.grist.toggleHeadroom()
-        }
-      },
-      help: 'project/resource',
-      actions: [
-        {
-          title: i18next.t('button.save'),
-          action: this.updateResource.bind(this),
-          ...CommonButtonStyles.save
-        },
-        {
-          title: i18next.t('button.delete'),
-          action: this.deleteResource.bind(this),
-          ...CommonButtonStyles.delete
-        }
-      ],
-      exportable: {
-        name: i18next.t('title.resource list'),
-        data: this.exportHandler.bind(this)
-      },
-      importable: {
-        handler: this.importHandler.bind(this)
-      }
-    }
-  }
-
-  render() {
-    const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
-
-    return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      >
-        <div slot="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus></ox-filters-form>
-          </div>
-
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.sortersControl.open({
-                  right: 0,
-                  top: target.offsetTop + target.offsetHeight
-                })
-              }}
-              >expand_more</mwc-icon
-            >
-            <ox-popup id="sorter-control">
-              <ox-sorters-control> </ox-sorters-control>
-            </ox-popup>
-          </div>
-
-          <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
-          </div>
-        </div>
-      </ox-grist>
-    `
-  }
-
-  async pageInitialized(lifecycle: any) {
-    this.gristConfig = {
-      list: {
-        fields: ['name', 'description'],
-        details: ['active', 'updatedAt']
-      },
-      columns: [
-        { type: 'gutter', gutterName: 'sequence' },
-        { type: 'gutter', gutterName: 'row-selector', multiple: true },
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          record: {
-            editable: true
-          },
-          filter: 'search',
-          sortable: true,
-          width: 150
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: {
-            editable: true
-          },
-          filter: 'search',
-          width: 200
-        },
-        {
-          type: 'checkbox',
-          name: 'active',
-          label: true,
-          header: i18next.t('field.active'),
-          record: {
-            editable: true
-          },
-          filter: true,
-          sortable: true,
-          width: 60
-        },
-        {
-          type: 'resource-object',
-          name: 'updater',
-          header: i18next.t('field.updater'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          width: 120
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          header: i18next.t('field.updated_at'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          width: 180
-        }
-      ],
-      rows: {
-        selectable: {
-          multiple: true
-        }
-      },
-      sorters: [
-        {
-          name: 'name'
-        }
-      ]
-    }
-  }
-
-  async pageUpdated(changes: any, lifecycle: any) {
-    if (this.active) {
-      // do something here when this page just became as active
-    }
-  }
-
-  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
-    const response = await client.query({
-      query: gql`
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: resources(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
-              name
-              description
-              active
-              updater {
-                id
-                name
-              }
-              updatedAt
-            }
-            total
-          }
-        }
-      `,
-      variables: {
-        filters,
-        pagination: { page, limit },
-        sortings
-      }
-    })
-
-    return {
-      total: response.data.responses.total || 0,
-      records: response.data.responses.items || []
-    }
-  }
-
-  private async deleteResource() {
-    if (
-      await OxPrompt.open({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),
-        confirmButton: { text: i18next.t('button.confirm') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-    ) {
-      const ids = this.grist.selected.map(record => record.id)
-      if (ids && ids.length > 0) {
-        const response = await client.mutate({
-          mutation: gql`
-            mutation ($ids: [String!]!) {
-              deleteResources(ids: $ids)
-            }
-          `,
-          variables: {
-            ids
-          }
-        })
-
-        if (!response.errors) {
-          this.grist.fetch()
-          notify({
-            message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
-          })
-        }
-      }
-    }
-  }
-
-  private async updateResource() {
-    let patches = this.grist.dirtyRecords
-    if (patches && patches.length) {
-      patches = patches.map(patch => {
-        let patchField: any = patch.id ? { id: patch.id } : {}
-        const dirtyFields = patch.__dirtyfields__
-        for (let key in dirtyFields) {
-          patchField[key] = dirtyFields[key].after
-        }
-        patchField.cuFlag = patch.__dirty__
-
-        return patchField
-      })
-
-      const response = await client.mutate({
-        mutation: gql`
-          mutation ($patches: [ResourcePatch!]!) {
-            updateMultipleResource(patches: $patches) {
-              name
-            }
-          }
-        `,
-        variables: {
-          patches
-        }
-      })
-
-      if (!response.errors) {
-        this.grist.fetch()
-      }
-    }
-  }
-
-  private async exportHandler() {
-    const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'name',
-      'description',
-      'active'
-    ])
-
-    return exportTargets.map(resource => {
-      let tempObj = {}
-      for (const field of targetFieldSet) {
-        tempObj[field] = resource[field]
-      }
-
-      return tempObj
-    })
-  }
-
-  private async importHandler(records) {
-    const popup = openPopup(
-      html`
-        <resource-importer
-          .resources=${records}
-          @imported=${() => {
-            history.back()
-            this.grist.fetch()
-          }}
-        ></resource-importer>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.import resource')
-      }
-    )
-    
-    popup.onclosed = () => {
-      this.grist.fetch()
-    }
-  }
-}
-

package/dist-client/pages/project/ox-progress-circle.d.ts

@@ -1,41 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { PropertyValues, LitElement } from 'lit';
-/**
-WEB Component for code-mirror code editor.
-
-Example:
-  <ox-progress-circle
-    .value=${70}
-    titleText="전체"
-    suffix="%"
-    fontSize="29px"
-    fontColor="#4E5055"
-    borderStyle="none"
-    innerCircleSize="28%"
-    circleColor="#0595E5"
-    shadow="#00000026 4px 4px 4px"
-    background="#eaf5fd"
-  ></ox-progress-circle>
-*/
-export declare class OxProgressCircle extends LitElement {
-    static styles: import("lit").CSSResult[];
-    value: number;
-    suffix: string;
-    titleText: string;
-    fontSize: string;
-    fontColor: string;
-    borderStyle: string;
-    innerCircleSize: string;
-    shadow: string;
-    circleColor: string;
-    background: string;
-    circle: HTMLDivElement;
-    innerCircle: HTMLDivElement;
-    progressTitle?: HTMLSpanElement;
-    firstUpdated(): void;
-    updated(changes: PropertyValues<this>): void;
-    updateCircleBackground(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist-client/pages/project/ox-progress-circle.js

@@ -1,182 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate, __metadata } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { ScrollbarStyles } from '@operato/styles';
-/**
-WEB Component for code-mirror code editor.
-
-Example:
-  <ox-progress-circle
-    .value=${70}
-    titleText="전체"
-    suffix="%"
-    fontSize="29px"
-    fontColor="#4E5055"
-    borderStyle="none"
-    innerCircleSize="28%"
-    circleColor="#0595E5"
-    shadow="#00000026 4px 4px 4px"
-    background="#eaf5fd"
-  ></ox-progress-circle>
-*/
-let OxProgressCircle = class OxProgressCircle extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = 0;
-        this.suffix = '';
-        this.titleText = '';
-        this.fontSize = '10px';
-        this.fontColor = '';
-        this.borderStyle = '';
-        this.innerCircleSize = '10%';
-        this.shadow = '';
-        this.circleColor = 'yellowgreen';
-        this.background = '';
-    }
-    firstUpdated() {
-        if (this.fontSize) {
-            this.circle.style.fontSize = this.fontSize;
-        }
-        if (this.fontColor) {
-            this.innerCircle.style.color = this.fontColor;
-        }
-        if (this.borderStyle) {
-            this.circle.style.border = this.borderStyle;
-        }
-        if (this.innerCircleSize) {
-            this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`;
-        }
-        if (this.shadow) {
-            this.circle.style.boxShadow = this.shadow;
-        }
-        if (this.background) {
-            this.innerCircle.style.background = this.background;
-        }
-        if (this.progressTitle && this.circleColor) {
-            this.progressTitle.style.color = this.circleColor;
-        }
-    }
-    updated(changes) {
-        if (changes.has('value')) {
-            this.updateCircleBackground();
-        }
-    }
-    updateCircleBackground() {
-        const position = this.value * 3.6; // 360 = 100%
-        this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`;
-    }
-    render() {
-        return html `
-      <div circle>
-        <div inner-circle>
-          ${this.titleText ? html `<span progress-title>${this.titleText}</span>` : ''}
-          <span>${this.value}${this.suffix}</span>
-        </div>
-      </div>
-    `;
-    }
-};
-OxProgressCircle.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-      }
-
-      div[circle] {
-        font-size: 29px;
-        font-weight: bold;
-        width: 100%;
-        aspect-ratio: 1;
-        display: flex;
-        border-radius: 50%;
-        border: 1px solid #353b48;
-        position: relative;
-        background: conic-gradient(yellowgreen 0deg, white 0deg);
-        box-shadow: #00000026 5px 5px 5px;
-      }
-      div[inner-circle] {
-        width: 90%;
-        aspect-ratio: 1;
-        border-radius: inherit;
-        background-color: #353b48;
-        margin: auto;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        color: white;
-        justify-content: center;
-        box-shadow: inset #00000026 -2px 2px 8px;
-      }
-
-      div[inner-circle] span {
-        display: flex;
-        align-items: center;
-      }
-
-      span[progress-title] {
-        font-size: 0.65em;
-        margin-bottom: -5%;
-      }
-    `
-];
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
-], OxProgressCircle.prototype, "value", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], OxProgressCircle.prototype, "suffix", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], OxProgressCircle.prototype, "titleText", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], OxProgressCircle.prototype, "fontSize", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], OxProgressCircle.prototype, "fontColor", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], OxProgressCircle.prototype, "borderStyle", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], OxProgressCircle.prototype, "innerCircleSize", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], OxProgressCircle.prototype, "shadow", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], OxProgressCircle.prototype, "circleColor", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], OxProgressCircle.prototype, "background", void 0);
-__decorate([
-    query('div[circle]'),
-    __metadata("design:type", HTMLDivElement)
-], OxProgressCircle.prototype, "circle", void 0);
-__decorate([
-    query('div[inner-circle]'),
-    __metadata("design:type", HTMLDivElement)
-], OxProgressCircle.prototype, "innerCircle", void 0);
-__decorate([
-    query('span[progress-title]'),
-    __metadata("design:type", HTMLSpanElement)
-], OxProgressCircle.prototype, "progressTitle", void 0);
-OxProgressCircle = __decorate([
-    customElement('ox-progress-circle')
-], OxProgressCircle);
-export { OxProgressCircle };
-//# sourceMappingURL=ox-progress-circle.js.map

package/dist-client/pages/project/ox-progress-circle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-progress-circle.js","sourceRoot":"","sources":["../../../client/pages/project/ox-progress-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { PropertyValues, LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n  <ox-progress-circle\n    .value=${70}\n    titleText=\"전체\"\n    suffix=\"%\"\n    fontSize=\"29px\"\n    fontColor=\"#4E5055\"\n    borderStyle=\"none\"\n    innerCircleSize=\"28%\"\n    circleColor=\"#0595E5\"\n    shadow=\"#00000026 4px 4px 4px\"\n    background=\"#eaf5fd\"\n  ></ox-progress-circle>\n*/\n@customElement('ox-progress-circle')\nexport class OxProgressCircle extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      div[circle] {\n        font-size: 29px;\n        font-weight: bold;\n        width: 100%;\n        aspect-ratio: 1;\n        display: flex;\n        border-radius: 50%;\n        border: 1px solid #353b48;\n        position: relative;\n        background: conic-gradient(yellowgreen 0deg, white 0deg);\n        box-shadow: #00000026 5px 5px 5px;\n      }\n      div[inner-circle] {\n        width: 90%;\n        aspect-ratio: 1;\n        border-radius: inherit;\n        background-color: #353b48;\n        margin: auto;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        color: white;\n        justify-content: center;\n        box-shadow: inset #00000026 -2px 2px 8px;\n      }\n\n      div[inner-circle] span {\n        display: flex;\n        align-items: center;\n      }\n\n      span[progress-title] {\n        font-size: 0.65em;\n        margin-bottom: -5%;\n      }\n    `\n  ]\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: String }) suffix: string = ''\n  @property({ type: String }) titleText: string = ''\n  @property({ type: String }) fontSize: string = '10px'\n  @property({ type: String }) fontColor: string = ''\n  @property({ type: String }) borderStyle: string = ''\n  @property({ type: String }) innerCircleSize: string = '10%'\n  @property({ type: String }) shadow: string = ''\n  @property({ type: String }) circleColor: string = 'yellowgreen'\n  @property({ type: String }) background: string = ''\n\n  @query('div[circle]') circle!: HTMLDivElement\n  @query('div[inner-circle]') innerCircle!: HTMLDivElement\n  @query('span[progress-title]') progressTitle?: HTMLSpanElement\n\n  firstUpdated() {\n    if (this.fontSize) {\n      this.circle.style.fontSize = this.fontSize\n    }\n    if (this.fontColor) {\n      this.innerCircle.style.color = this.fontColor\n    }\n    if (this.borderStyle) {\n      this.circle.style.border = this.borderStyle\n    }\n    if (this.innerCircleSize) {\n      this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`\n    }\n    if (this.shadow) {\n      this.circle.style.boxShadow = this.shadow\n    }\n    if (this.background) {\n      this.innerCircle.style.background = this.background\n    }\n    if (this.progressTitle && this.circleColor) {\n      this.progressTitle.style.color = this.circleColor\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.updateCircleBackground()\n    }\n  }\n\n  updateCircleBackground() {\n    const position = this.value * 3.6 // 360 = 100%\n    this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`\n  }\n\n  render() {\n    return html`\n      <div circle>\n        <div inner-circle>\n          ${this.titleText ? html`<span progress-title>${this.titleText}</span>` : ''}\n          <span>${this.value}${this.suffix}</span>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/project/project-create-popup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"project-create-popup.js","sourceRoot":"","sources":["../../../client/pages/project/project-create-popup.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,gDAAgD,CAAA;AACvD,OAAO,yCAAyC,CAAA;AAGzC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA9D;;QAmEY,gBAAW,GAAW,EAAE,CAAA;IAsE3C,CAAC;IAnEC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;qBAQM,IAAI,CAAC,WAAW;qBAChB,IAAI,CAAC,cAAc;;;;;;uCAMD,IAAI,CAAC,cAAc;;;uCAGnB,IAAI,CAAC,MAAM;;;KAG7C,CAAA;IACH,CAAC;IAED,UAAU;IACF,KAAK,CAAC,cAAc;QAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,EAAE,CAAC,CAAA;YACxD,OAAM;SACP;QAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,OAAO,EAAE;oBACP,IAAI,EAAE,IAAI,CAAC,WAAW;iBACvB;aACF;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACpB,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA;SAChC;QAED,kBAAkB;QAClB,IAAI,CAAC,SAAS,EAAE,CAAA;QAEhB,mBAAmB;QACnB,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAEO,MAAM;QACZ,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAED,gCAAgC;IACxB,cAAc,CAAC,KAAiB;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAA;QAC/C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IACjC,CAAC;;AAvIM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;CACF,CAAA;AAED;IAAC,KAAK,EAAE;;uDAAiC;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;8BAAqB,QAAQ;qDAAA;AApE/C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAyI9B;SAzIY,kBAAkB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport gql from 'graphql-tag'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/elevated-button.js'\n\n@customElement('project-create-popup')\nexport class ProjectCreatePopup extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: #fff;\n        width: 100%;\n      }\n\n      div[body] {\n        flex: 1;\n\n        label {\n          color: #4e5055;\n          font-size: 16px;\n        }\n\n        div[input-container] {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          margin-top: 22px;\n\n          md-outlined-text-field {\n            width: 60%;\n            margin-left: 15px;\n\n            --md-outlined-text-field-container-shape: 9px;\n            --md-sys-color-primary: #586878;\n            --md-sys-color-surface-container-highest: transparent;\n            --md-outlined-text-field-label-text-color: #999999;\n            --md-outlined-text-field-input-text-line-height: 20px;\n            --md-outlined-text-field-input-text-size: 16px;\n            --md-outlined-field-bottom-space: 10px;\n            --md-outlined-field-top-space: 10px;\n          }\n        }\n\n        div[button-container] {\n          margin-top: 50px;\n          margin-bottom: 20px;\n          text-align: center;\n\n          md-elevated-button {\n            margin: 0px 5px;\n\n            --md-elevated-button-container-height: 40px;\n            --md-elevated-button-container-color: #fff;\n            --md-elevated-button-label-text-size: 16px;\n          }\n          md-elevated-button:first-child {\n            --md-elevated-button-container-color: #0595e5;\n            --md-elevated-button-label-text-color: #fff;\n            --md-elevated-button-hover-label-text-color: #fff;\n            --md-elevated-button-pressed-label-text-color: #fff;\n            --md-elevated-button-focus-label-text-color: #fff;\n            --md-elevated-button-icon-color: #fff;\n            --md-elevated-button-hover-icon-color: #fff;\n            --md-elevated-button-pressed-icon-color: #fff;\n            --md-elevated-button-focus-icon-color: #fff;\n          }\n        }\n      }\n    `\n  ]\n\n  @state() private projectName: string = ''\n  @property({ type: Function }) private refreshFn!: Function\n\n  render() {\n    return html`\n      <div body>\n        <div input-container>\n          <label>프로젝트 이름</label>\n          <md-outlined-text-field\n            name=\"projectName\"\n            type=\"text\"\n            placeholder=\"신규 프로젝트명\"\n            .value=${this.projectName}\n            @input=${this._onInputChange}\n          >\n          </md-outlined-text-field>\n        </div>\n\n        <div button-container>\n          <md-elevated-button @click=${this._createProject}>\n            <md-icon slot=\"icon\">add</md-icon>프로젝트 생성\n          </md-elevated-button>\n          <md-elevated-button @click=${this._close}> <md-icon slot=\"icon\">close</md-icon>취소 </md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n\n  // 프로젝트 생성\n  private async _createProject() {\n    if (!this.projectName) {\n      notify({ level: 'warn', message: '프로젝트 이름은 필수 값 입니다.' })\n      return\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation CreateProject($project: NewProject!) {\n          response: createProject(project: $project) {\n            id\n          }\n        }\n      `,\n      variables: {\n        project: {\n          name: this.projectName\n        }\n      }\n    })\n\n    if (!response.errors) {\n      notify({ message: '저장되었습니다.' })\n    }\n\n    // 설정 정보 리스트 다시 조회\n    this.refreshFn()\n\n    // 팝업 템플릿을 닫기 위한 동작\n    history.back()\n  }\n\n  private _close() {\n    history.back()\n  }\n\n  // Input 요소의 값이 변경될 때 호출되는 콜백 함수\n  private _onInputChange(event: InputEvent) {\n    const target = event.target as HTMLInputElement\n    this.projectName = target.value\n  }\n}\n"]}

package/dist-client/pages/resource/resource-importer.d.ts

@@ -1,9 +0,0 @@
-import '@operato/data-grist';
-import { LitElement } from 'lit';
-export declare class ResourceImporter extends LitElement {
-    static styles: import("lit").CSSResult[];
-    private resources;
-    private columns;
-    render(): import("lit-html").TemplateResult<1>;
-    private save;
-}