@operato/app 8.0.0-beta.0 → 8.0.0-beta.2

package/src/selector/ox-selector-resource-object.ts

@@ -1,300 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/data-grist'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import {
-  DataGrist,
-  FetchHandler,
-  GristData,
-  GristEventHandler,
-  GristRecord,
-  ZERO_DATA,
-  InheritedValueType
-} from '@operato/data-grist'
-import { client, gqlContext } from '@operato/graphql'
-import { i18next } from '@operato/i18n'
-import { closePopup } from '@operato/popup'
-import { adjustFilters, isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
-
-@customElement('ox-selector-resource-object')
-export class OxSelectorResourceObject extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-grist {
-        flex: 1;
-      }
-
-      .header {
-        grid-template-areas: 'filters actions';
-      }
-
-      [filler] {
-        margin-left: auto;
-      }
-    `
-  ]
-
-  @property({ type: String }) value?: string
-  @property({ type: Object }) config: any
-  @property({ type: Object }) data: GristData = ZERO_DATA
-  @property({ type: String }) queryName!: string
-  @property({ type: Object }) basicArgs: any
-  @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include
-  @property({ type: Object }) confirmCallback?: (record?: Partial<GristRecord>) => void
-  @property({ type: Array }) selectedRecords: GristRecord[] = []
-
-  @property({ type: Array }) searchFields: any
-  @property({ type: Array }) columns: {
-    type: string
-    name: string
-    header: string
-    subFields?: string[]
-    hidden: boolean
-    queryName: string
-    width: number
-  }[] = []
-  @property({ type: Object }) pagination?: {
-    limit: number
-    pages: number[]
-  }
-  @property({ type: Object }) list: any
-  @property({ type: String }) valueField: string | ((item: any) => any) = 'id'
-
-  @query('ox-grist') grist!: DataGrist
-
-  render() {
-    return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .data=${this.data}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        .selectedRecords=${this.selectedRecords}
-      >
-        <div class="header" slot="headroom">
-          <div class="filters">
-            <ox-filters-form autofocus without-search></ox-filters-form>
-          </div>
-        </div>
-      </ox-grist>
-
-      <div class="footer">
-        <button @click=${this.onEmpty.bind(this)}>
-          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
-        </button>
-
-        <div filler></div>
-
-        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
-      </div>
-    `
-  }
-
-  searchText(value: string) {
-    this.grist.searchText = value
-  }
-
-  toggleFilter() {
-    this.grist.toggleHeadroom()
-  }
-
-  onEmpty() {
-    this.confirmCallback && this.confirmCallback()
-    closePopup(this)
-  }
-
-  onCancel() {
-    closePopup(this)
-  }
-
-  onConfirm() {
-    this.confirmCallback && this.confirmCallback(this.selected)
-    closePopup(this)
-  }
-
-  fetchHandler: FetchHandler = async ({ filters = [], page, limit, sortings = [], inherited }) => {
-    if (this.basicArgs?.filters) {
-      filters = adjustFilters(filters, this.basicArgs.filters)
-    }
-    const pagination = { page, limit }
-
-    const response = await client.query({
-      query: gql`
-        query($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited: InheritedValueType) {
-          fetch: ${
-            this.queryName
-          } (filters: $filters, pagination: $pagination, sortings: $sortings, inherited: $inherited) {
-            ${this.getQueryFields()}
-          }
-        }
-      `,
-      variables: {
-        filters,
-        pagination,
-        sortings,
-        inherited: inherited || this.inherited
-      },
-      context: gqlContext()
-    })
-
-    if (!response.errors) {
-      const records = response.data.fetch.items.map((item: any) => {
-        let rowValue
-
-        if (this.valueField && typeof this.valueField === 'function') {
-          rowValue = this.valueField(item)
-        } else if (this.valueField) {
-          rowValue = item[this.valueField]
-        } else {
-          rowValue = item.id
-        }
-
-        if (this.value && this.value === rowValue) {
-          this.selectedRecords = [item]
-          item['__selected__'] = true
-        }
-
-        return item
-      })
-      const total = response.data.fetch.total
-
-      return {
-        records,
-        total,
-        limit,
-        page
-      }
-    }
-  }
-
-  async firstUpdated() {
-    const config = {
-      list: this.list,
-      columns: [
-        {
-          type: 'gutter',
-          gutterName: 'sequence'
-        },
-        {
-          type: 'gutter',
-          gutterName: 'row-selector',
-          multiple: false
-        }
-      ],
-      rows: {
-        selectable: {
-          multiple: false
-        },
-        handlers: {
-          click: 'select-row',
-          dblclick: ((columns, data, column, record, rowIndex, field) => {
-            this.onConfirm()
-          }) as GristEventHandler
-        },
-        appendable: false
-      },
-      pagination: this.pagination
-    }
-
-    const columns = this.columns || [
-      {
-        type: 'string',
-        name: 'id',
-        header: i18next.t('field.id'),
-        hidden: true
-      },
-      {
-        type: 'string',
-        name: 'name',
-        header: i18next.t('field.name'),
-        record: {
-          align: 'left'
-        },
-        sortable: true,
-        filter: 'search',
-        width: 160
-      },
-      {
-        type: 'string',
-        name: 'description',
-        header: i18next.t('field.description'),
-        record: {
-          align: 'left'
-        },
-        sortable: true,
-        filter: 'search',
-        width: 300
-      }
-    ]
-
-    this.config = {
-      ...config,
-      columns: [
-        ...config.columns,
-        ...columns.map(selectField => {
-          return {
-            ...selectField,
-            type: selectField.type || 'string',
-            width: selectField.width || 160,
-            header: selectField.header || i18next.t(`field.${selectField.name}`)
-          }
-        })
-      ]
-    }
-
-    requestAnimationFrame(() => {
-      /* start with hidden headroom */
-      this.grist.hideHeadroom()
-    })
-  }
-
-  getQueryFields() {
-    if (this.columns && this.columns.length > 0) {
-      return `items {
-        ${this.columns.map(selectField => {
-          return selectField.type === 'object'
-            ? `${selectField.name} { ${
-                selectField.subFields && selectField.subFields.length > 0
-                  ? selectField.subFields.join(' ')
-                  : `id name description`
-              } }`
-            : `${selectField.name}`
-        })}
-      }
-      total`
-    } else {
-      return `
-        items {
-          id
-          name
-          description
-        }
-        total
-      `
-    }
-  }
-
-  get selected() {
-    var grist = this.renderRoot.querySelector('ox-grist') as DataGrist
-
-    var selected = grist.selected
-
-    return selected && selected.length > 0 ? selected[0] : undefined
-  }
-}

package/stories/graphql-client.stories.ts

@@ -1,73 +0,0 @@
-import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'
-import '@operato/graphql/graphql-client.js'
-import '../src/input/ox-input-graphql.js'
-
-// TODO cm6-graphql에서 사용하는 nullthrows 관련 모듈 오류로 스토리북 테스트가 안됨.
-
-import { html, TemplateResult } from 'lit'
-
-setClientLink(
-  createMockLink({
-    request: {
-      query: ''
-    },
-    result: {
-      data: {
-        viewer: null
-      }
-    }
-  })
-)
-
-export default {
-  title: 'graphql-client',
-  component: 'graphql-client',
-  argTypes: {
-    value: { control: 'text' },
-    name: { control: 'text' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: string
-}
-
-const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => html`
-  <style>
-    body {
-    }
-  </style>
-
-  <ox-input-graphql
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-  >
-  </ox-input-graphql>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'code',
-  value: `
-query privileges {
-  privileges {
-    items {
-      privilege
-      category
-      description
-    }
-    total
-  }
-}
-`
-}

package/stories/ox-input-graphql.stories.ts

@@ -1,70 +0,0 @@
-import '../src/input/ox-input-graphql.js'
-
-import { html, TemplateResult } from 'lit'
-
-export default {
-  title: 'ox-input-graphql',
-  component: 'ox-input-graphql',
-  argTypes: {
-    value: { control: 'text' },
-    name: { control: 'text' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: string
-}
-
-const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    body {
-    }
-  </style>
-
-  <ox-input-graphql
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-  >
-  </ox-input-graphql>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'code',
-  value: `
-query privileges {
-  privileges {
-    items {
-      privilege
-      category
-      description
-    }
-    total
-  }
-}
-`
-}

package/stories/ox-selector-resource-object.stories.ts

@@ -1,98 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'
-import '../src/selector/ox-selector-resource-object'
-
-setClientLink(
-  createMockLink({
-    request: {
-      query: ''
-    },
-    result: {
-      data: {
-        viewer: null
-      }
-    }
-  })
-)
-
-export default {
-  title: 'ox-selector-resource-object',
-  component: 'ox-selector-resource-object',
-  argTypes: {
-    queryName: { control: 'string' },
-    value: { control: 'string' },
-    valueField: { control: 'string' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  queryName: string
-  value?: string
-  valueField?: string
-}
-
-const Template: Story<ArgTypes> = ({ value = '', queryName, valueField }: ArgTypes) => html`
-  <style>
-    body {
-    }
-  </style>
-
-  <script>
-    const select = ['name', 'description']
-  </script>
-
-  <ox-selector-resource-object
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    value=${ifDefined(value)}
-    valueField=${ifDefined(valueField)}
-    .queryName=${queryName}
-    .confirmCallback=${(record: any) => console.log('confirm', record)}
-    .columns=${[
-      {
-        type: 'string',
-        name: 'id',
-        header: 'id',
-        hidden: true,
-        width: 100,
-        queryName: ''
-      },
-      {
-        type: 'string',
-        name: 'name',
-        header: 'name',
-        hidden: false,
-        width: 150,
-        queryName: ''
-      },
-      {
-        type: 'string',
-        name: 'description',
-        header: 'description',
-        hidden: false,
-        width: 150,
-        queryName: ''
-      }
-    ]}
-    .list=${['name', 'description']}
-    .basicArgs=${''}
-  >
-  </ox-selector-resource-object>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  value: '',
-  queryName: 'entity',
-  valueField: 'id'
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});