@things-factory/work-shift 8.0.0-beta.9 → 8.0.0

package/client/bootstrap.ts

@@ -0,0 +1 @@
+export default function bootstrap() {}

package/client/pages/work-shift.ts

@@ -0,0 +1,108 @@
+import '@operato/input/ox-input-work-shift.js'
+import '@operato/context/ox-context-page-toolbar.js'
+
+import { css, html } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+import gql from 'graphql-tag'
+
+import { OxFormField } from '@operato/input'
+import { PageView, store } from '@operato/shell'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { client } from '@operato/graphql'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+import { i18next } from '@operato/i18n'
+
+@customElement('work-shift')
+class WorkShift extends connect(store)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
+        overflow: auto;
+      }
+
+      ox-input-work-shift {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
+
+  @state() private workShifts: any[] = []
+
+  @query('ox-input-work-shift') private input!: OxFormField
+
+  get context() {
+    return {
+      title: i18next.t('title.work-shift'),
+      actions: [
+        {
+          title: i18next.t('button.update'),
+          action: this.updateWorkShift.bind(this),
+          icon: 'save'
+        }
+      ],
+      help: 'page/work-shift',
+      toolbar: false
+    }
+  }
+
+  render() {
+    return html`
+      <div class="header">
+        <div class="title">${i18next.t('title.work-shift')}</div>
+
+        <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
+      </div>
+
+      <ox-input-work-shift .value=${this.workShifts}></ox-input-work-shift>
+    `
+  }
+
+  async pageUpdated(changes, after, before) {
+    /* refresh always page revisited */
+    if (this.active) {
+      const response = await client.query({
+        query: gql`
+          query {
+            workShifts(sortings: [{ name: "fromDate" }, { name: "fromTime" }]) {
+              items {
+                name
+                fromDate
+                fromTime
+                toDate
+                toTime
+              }
+            }
+          }
+        `
+      })
+
+      this.workShifts = response.data.workShifts.items
+    }
+  }
+
+  private async updateWorkShift() {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($patches: [WorkShiftPatch!]!) {
+          updateMultipleWorkShift(patches: $patches) {
+            name
+            fromDate
+            fromTime
+            toDate
+            toTime
+          }
+        }
+      `,
+      variables: {
+        patches: this.input.value
+      }
+    })
+
+    this.workShifts = response.data.updateMultipleWorkShift
+  }
+}

package/client/route.ts

@@ -0,0 +1,7 @@
+export default function route(page) {
+  switch (page) {
+    case 'work-shift':
+      import('./pages/work-shift')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}