@operato/app 1.5.22 → 1.5.24

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.5.22",
+  "version": "1.5.24",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -24,6 +24,7 @@
     "./grist-editor/ox-grist-renderer-crontab.js": "./dist/src/grist-editor/ox-grist-renderer-crontab.js",
     "./grist-editor/ox-grist-editor-json.js": "./dist/src/grist-editor/ox-grist-editor-json.js",
     "./grist-editor/ox-grist-editor-code.js": "./dist/src/grist-editor/ox-grist-editor-code.js",
+    "./grist-editor/ox-grist-editor-permission.js": "./dist/src/grist-editor/ox-grist-editor-permission.js",
     "./grist-editor/ox-grist-editor-resource-object.js": "./dist/src/grist-editor/ox-grist-editor-resource-object.js",
     "./grist-editor/ox-grist-editor-resource-object-legacy.js": "./dist/src/grist-editor/ox-grist-editor-resource-object-legacy.js",
     "./grist-editor/ox-grist-editor-resource-code.js": "./dist/src/grist-editor/ox-grist-editor-resource-code.js",
@@ -83,6 +84,9 @@
       "grist-editor/ox-grist-editor-code.js": [
         "dist/src/grist-editor/ox-grist-editor-code.d.ts"
       ],
+      "grist-editor/ox-grist-editor-permission.js": [
+        "dist/src/grist-editor/ox-grist-editor-permission.d.ts"
+      ],
       "grist-editor/ox-grist-editor-resource-object.js": [
         "dist/src/grist-editor/ox-grist-editor-resource-object.d.ts"
       ],
@@ -125,15 +129,15 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.5.22",
-    "@operato/data-grist": "^1.5.22",
-    "@operato/font": "^1.5.22",
+    "@operato/attachment": "^1.5.24",
+    "@operato/data-grist": "^1.5.24",
+    "@operato/font": "^1.5.24",
     "@operato/form": "^1.4.77",
     "@operato/graphql": "^1.4.76",
     "@operato/i18n": "^1.5.14",
-    "@operato/input": "^1.5.22",
+    "@operato/input": "^1.5.24",
     "@operato/layout": "^1.5.15",
-    "@operato/property-editor": "^1.5.22",
+    "@operato/property-editor": "^1.5.24",
     "@operato/shell": "^1.4.87",
     "@operato/styles": "^1.4.64",
     "@operato/utils": "^1.4.64",
@@ -178,5 +182,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "dda168c26e7909faefab9a6e21abf96751e59b7d"
+  "gitHead": "840159e3db256c4a8d35fb3461e590729587742e"
 }

package/src/grist-editor/ox-grist-editor-permission.ts

@@ -0,0 +1,61 @@
+import './ox-popup-permission-input.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+@customElement('ox-grist-editor-permission')
+export class OxGristEditorPermission extends OxGristEditor {
+  get editorTemplate() {
+    return html` <div tabindex="0">${this.value || ''}</div> `
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.showEditorPopup()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.showEditorPopup()
+    }
+  }
+
+  showEditorPopup() {
+    var change = (value: string) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: value,
+            column: this.column,
+            record: this.record,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var popup = openPopup(
+      html`
+        <ox-popup-permission-input
+          .value=${this.value}
+          .confirmCallback=${change.bind(this)}
+        ></ox-popup-permission-input>
+      `,
+      {
+        backdrop: true,
+        title: i18next.t('title.edit permission'),
+        size: 'small',
+        help: 'data-grist/grist-editor/permission'
+      }
+    )
+  }
+}

package/src/grist-editor/ox-popup-permission-input.ts

@@ -0,0 +1,100 @@
+import '@operato/input/ox-input-permission.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement, PropertyValueMap } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { ScrollbarStyles } from '@operato/styles'
+import { client } from '@operato/graphql'
+
+@customElement('ox-popup-permission-input')
+export class OxPopupPermissionInput extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-input-permission {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      .button-container {
+        display: flex;
+        flex-direction: row;
+      }
+
+      div[padding] {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: { category: string; privilege: string; owner: boolean; super: boolean } | null
+
+  @property({ type: Object }) confirmCallback!: (newval: any) => void
+
+  @state() privileges: { name: string; category: string; description: string }[] = []
+
+  render() {
+    return html`
+      <ox-input-permission .value=${this.value} .privileges=${this.privileges} @change=${this.onChange.bind(this)}>
+      </ox-input-permission>
+
+      <div class="button-container">
+        <mwc-button @click=${this.onReset.bind(this)}>${i18next.t('button.reset')}</mwc-button>
+        <div padding></div>
+        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
+        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      </div>
+    `
+  }
+
+  async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {
+    const response = await client.query({
+      query: gql`
+        query privileges {
+          privileges {
+            items {
+              name
+              category
+              description
+            }
+            total
+          }
+        }
+      `
+    })
+
+    this.privileges = response.data.privileges.items
+  }
+
+  private onChange(e: CustomEvent) {
+    e.stopPropagation()
+
+    this.value = e.detail
+  }
+
+  private onReset(e: Event) {
+    this.value = null
+  }
+
+  private onCancel(e: Event) {
+    closePopup(this)
+  }
+
+  private onConfirm(e: Event) {
+    this.confirmCallback && this.confirmCallback(this.value)
+    closePopup(this)
+  }
+}