@things-factory/compliance 10.1.256 → 10.1.257

package/dist-client/components/training-attendance-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"training-attendance-form.js","sourceRoot":"","sources":["../../client/components/training-attendance-form.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAC9C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,iCAAiC,CAAA;AAExC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAEvG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAIvC,oFAAoF;AACpF,MAAM,UAAU,0BAA0B,CAAC,OAA+E;IACxH,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,IAAI,GAAG,KAAK,CAAA;QAChB,MAAM,MAAM,GAAQ,SAAS,CAC3B,IAAI,CAAA,sCAAsC,OAAO,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,8BAA8B,EACjK,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,2BAA2B,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE,CAC1G,CAAA;QACD,MAAM,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACvC,CAAC,CAAC,CAAA;AACJ,CAAC;AAED;;;GAGG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAlE;;QAoDY,WAAM,GAAa,EAAE,CAAA;QACrB,WAAM,GAAa,EAAE,CAAA;QACrB,gBAAW,GAAG,EAAE,CAAA;QAChB,YAAO,GAAG,KAAK,CAAA;QACf,YAAO,GAAG,EAAE,CAAA;IA2E/B,CAAC;aAlIQ,WAAM,GAAG;QACd,iBAAiB;QACjB,eAAe;QACf,eAAe;QACf,gBAAgB;QAChB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;KACF,AA/CY,CA+CZ;IAUD,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAA;QAC/D,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;OAMT;YACD,WAAW,EAAE,UAAU;SACxB,CAAC,CAAA;QACF,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,MAAM,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;IACpK,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAA;QACxE,OAAO,IAAI,CAAA;;wBAES,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC;;;kBAGjD,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC;sCACpB,IAAI,CAAC,WAAW,QAAQ,IAAI,CAAC,OAAO,CAAC,QAAQ,WAAW,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;kBAI3H,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM;;cAEhE,IAAI,CAAC,MAAM,CAAC,GAAG,CACf,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;mBACL,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC,EAAE,OAAO,IAAI,EAAE;qCACtC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;gBACrH,CACH;;wCAE2B,CAAC,CAAc,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;iCACzF,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC;2DACb,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,qBAAqB,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,OAAO,QAAQ,CAAC;;0BAE3G,IAAI,CAAC,OAAO;;;;;+CAKS,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;qDAC1E,IAAI,CAAC,OAAO,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC;;KAE5I,CAAA;IACH,CAAC;IAEO,KAAK,CAAC,MAAM;QAClB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;gBACnC,QAAQ,EAAE,GAAG,CAAA;;;;SAIZ;gBACD,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;aAC3G,CAAC,CAAA;YACF,IAAK,QAAgB,CAAC,MAAM,EAAE,MAAM;gBAAE,MAAM,QAAQ,CAAA;YACpD,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,mCAAmC,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,wBAAwB,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAA;YAC7H,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAA;QACjD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;QACjC,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,CAAC;IACH,CAAC;;AAhF2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAiF;AAE3F;IAAhB,KAAK,EAAE;;sDAA8B;AACrB;IAAhB,KAAK,EAAE;;sDAA8B;AACrB;IAAhB,KAAK,EAAE;;2DAAyB;AAChB;IAAhB,KAAK,EAAE;;uDAAwB;AACf;IAAhB,KAAK,EAAE;;uDAAqB;AAxDlB,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAmIlC","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-actions.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'\n\nimport { failureOf } from '../words.js'\n\ntype Choice = { value: string; display: string }\n\n/** Opens the form for a session; resolves true when the attendance was recorded. */\nexport function openTrainingAttendanceForm(session: { id: string; name: string; startsOn: string; endsOn?: string | null }): Promise<boolean> {\n  return new Promise(resolve => {\n    let done = false\n    const handle: any = openPopup(\n      html`<training-attendance-form .session=${session} @close=${() => handle.close()} @recorded=${() => ((done = true), handle.close())}></training-attendance-form>`,\n      { backdrop: true, size: 'medium', title: i18next.t('title.training-attendance', { name: session.name }) }\n    )\n    handle.onclosed = () => resolve(done)\n  })\n}\n\n/**\n * 출석 기록 (ADR-0187 decision 17) - the people who attended a session, recorded at once as completed. Someone done\n * already for the kind and year is left as they are.\n */\n@customElement('training-attendance-form')\nexport class TrainingAttendanceForm extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonPopupStyles,\n    PopupBodyStyles,\n    FormFieldStyles,\n    PopupFieldStyles,\n    css`\n      [invalid] {\n        color: var(--ui-crit, var(--md-sys-color-error));\n        font-size: var(--ui-t-small, 11.5px);\n      }\n      [invalid]:empty {\n        display: none;\n      }\n      [guide] p {\n        margin: 0;\n        color: var(--ui-muted);\n        line-height: var(--popup-line-height);\n      }\n      ox-select {\n        width: 100%;\n      }\n      .chosen {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-small, 4px);\n      }\n      .chip {\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        padding: 2px 4px 2px 8px;\n        border-radius: 999px;\n        background: var(--md-sys-color-secondary-container);\n        color: var(--md-sys-color-on-secondary-container);\n      }\n      .chip button {\n        border: 0;\n        background: none;\n        cursor: pointer;\n        color: inherit;\n        display: inline-flex;\n        padding: 0;\n      }\n      .chip md-icon {\n        --md-icon-size: 16px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) session!: { id: string; name: string; startsOn: string; endsOn?: string | null }\n\n  @state() private people: Choice[] = []\n  @state() private chosen: string[] = []\n  @state() private completedOn = ''\n  @state() private working = false\n  @state() private message = ''\n\n  async connectedCallback() {\n    super.connectedCallback()\n    this.completedOn = this.session.endsOn || this.session.startsOn\n    const response = await client.query({\n      query: gql`\n        query {\n          employees(filters: [{ name: \"retiredOn\", operator: \"is_null\" }], pagination: { page: 1, limit: 500 }, sortings: [{ name: \"name\" }]) {\n            items { id name controlNo }\n          }\n        }\n      `,\n      fetchPolicy: 'no-cache'\n    })\n    this.people = (response.data?.employees?.items ?? []).map((one: any) => ({ value: one.id, display: one.controlNo ? `${one.name} · ${one.controlNo}` : one.name }))\n  }\n\n  render() {\n    const left = this.people.filter(one => !this.chosen.includes(one.value))\n    return html`\n      <div class=\"body\">\n        <div guide><p>${i18next.t('text.training-attendance-guide')}</p></div>\n\n        <label class=\"field\">\n          <span>${i18next.t('field.training-completed-on')}</span>\n          <input type=\"date\" .value=${this.completedOn} min=${this.session.startsOn} @input=${(e: any) => (this.completedOn = e.target.value)} />\n        </label>\n\n        <div class=\"field\">\n          <span>${i18next.t('field.training-attendees')} (${this.chosen.length})</span>\n          <div class=\"chosen\">\n            ${this.chosen.map(\n              id => html`<span class=\"chip\"\n                >${this.people.find(one => one.value === id)?.display ?? id}\n                <button aria-label=${i18next.t('button.delete')} @click=${() => (this.chosen = this.chosen.filter(one => one !== id))}><md-icon>close</md-icon></button></span\n              >`\n            )}\n          </div>\n          <ox-select value=\"\" @change=${(e: CustomEvent) => e.detail && (this.chosen = [...this.chosen, String(e.detail)])}>\n            <span slot=\"label\">${i18next.t('text.training-attendee-add')}</span>\n            <ox-popup-list align-left nowrap with-search>${left.map(one => html`<div option value=${one.value}>${one.display}</div>`)}</ox-popup-list>\n          </ox-select>\n          <span invalid>${this.message}</span>\n        </div>\n      </div>\n\n      <ox-popup-actions>\n        <md-text-button slot=\"cancel\" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" ?disabled=${this.working} @click=${() => this.record()}>${i18next.t('button.training-attendance-record')}</md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  private async record() {\n    this.message = ''\n    this.working = true\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ($sessionId: String!, $employeeIds: [String!]!, $completedOn: String) {\n            recordTrainingAttendance(sessionId: $sessionId, employeeIds: $employeeIds, completedOn: $completedOn) { id }\n          }\n        `,\n        variables: { sessionId: this.session.id, employeeIds: this.chosen, completedOn: this.completedOn || null }\n      })\n      if ((response as any).errors?.length) throw response\n      notify({ message: i18next.t('text.training-attendance-recorded', { count: response.data.recordTrainingAttendance.length }) })\n      this.dispatchEvent(new CustomEvent('recorded'))\n    } catch (error) {\n      this.message = failureOf(error)\n    } finally {\n      this.working = false\n    }\n  }\n}\n"]}
+{"version":3,"file":"training-attendance-form.js","sourceRoot":"","sources":["../../client/components/training-attendance-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-actions.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { MutationController, QueryController } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'\n\nimport { failureOf } from '../words.js'\n\ntype Choice = { value: string; display: string }\n\n/** Opens the form for a session; resolves true when the attendance was recorded. */\nexport function openTrainingAttendanceForm(session: { id: string; name: string; startsOn: string; endsOn?: string | null }): Promise<boolean> {\n  return new Promise(resolve => {\n    let done = false\n    const handle: any = openPopup(\n      html`<training-attendance-form .session=${session} @close=${() => handle.close()} @recorded=${() => ((done = true), handle.close())}></training-attendance-form>`,\n      { backdrop: true, size: 'medium', title: i18next.t('title.training-attendance', { name: session.name }) }\n    )\n    handle.onclosed = () => resolve(done)\n  })\n}\n\n/**\n * 출석 기록 (ADR-0187 decision 17) - the people who attended a session, recorded at once as completed. Someone done\n * already for the kind and year is left as they are.\n */\n@customElement('training-attendance-form')\nexport class TrainingAttendanceForm extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonPopupStyles,\n    PopupBodyStyles,\n    FormFieldStyles,\n    PopupFieldStyles,\n    css`\n      [invalid] {\n        color: var(--ui-crit, var(--md-sys-color-error));\n        font-size: var(--ui-t-small, 11.5px);\n      }\n      [invalid]:empty {\n        display: none;\n      }\n      [guide] p {\n        margin: 0;\n        color: var(--ui-muted);\n        line-height: var(--popup-line-height);\n      }\n      ox-select {\n        width: 100%;\n      }\n      .chosen {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-small, 4px);\n      }\n      .chip {\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        padding: 2px 4px 2px 8px;\n        border-radius: 999px;\n        background: var(--md-sys-color-secondary-container);\n        color: var(--md-sys-color-on-secondary-container);\n      }\n      .chip button {\n        border: 0;\n        background: none;\n        cursor: pointer;\n        color: inherit;\n        display: inline-flex;\n        padding: 0;\n      }\n      .chip md-icon {\n        --md-icon-size: 16px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) session!: { id: string; name: string; startsOn: string; endsOn?: string | null }\n\n  @state() private chosen: string[] = []\n  @state() private completedOn = ''\n\n  /* The employees who may have attended (ADR-0190). */\n  private employees = new QueryController(\n    this,\n    gql`\n      query {\n        employees(filters: [{ name: \"retiredOn\", operator: \"is_null\" }], pagination: { page: 1, limit: 500 }, sortings: [{ name: \"name\" }]) {\n          items { id name controlNo }\n        }\n      }\n    `\n  )\n\n  /* Its failure is drawn under the attendees, beside the form. */\n  private recording = new MutationController(\n    this,\n    gql`\n      mutation ($sessionId: String!, $employeeIds: [String!]!, $completedOn: String) {\n        recordTrainingAttendance(sessionId: $sessionId, employeeIds: $employeeIds, completedOn: $completedOn) { id }\n      }\n    `,\n    { showsError: true }\n  )\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.completedOn = this.session.endsOn || this.session.startsOn\n  }\n\n  private get people(): Choice[] {\n    return (this.employees.data?.employees?.items ?? []).map((one: any) => ({ value: one.id, display: one.controlNo ? `${one.name} · ${one.controlNo}` : one.name }))\n  }\n\n  private get working() {\n    return this.recording.pending\n  }\n\n  private get message() {\n    return this.recording.error ? failureOf(this.recording.error) : ''\n  }\n\n  render() {\n    const left = this.people.filter(one => !this.chosen.includes(one.value))\n    return html`\n      <div class=\"body\">\n        <div guide><p>${i18next.t('text.training-attendance-guide')}</p></div>\n\n        <label class=\"field\">\n          <span>${i18next.t('field.training-completed-on')}</span>\n          <input type=\"date\" .value=${this.completedOn} min=${this.session.startsOn} @input=${(e: any) => (this.completedOn = e.target.value)} />\n        </label>\n\n        <div class=\"field\">\n          <span>${i18next.t('field.training-attendees')} (${this.chosen.length})</span>\n          <div class=\"chosen\">\n            ${this.chosen.map(\n              id => html`<span class=\"chip\"\n                >${this.people.find(one => one.value === id)?.display ?? id}\n                <button aria-label=${i18next.t('button.delete')} @click=${() => (this.chosen = this.chosen.filter(one => one !== id))}><md-icon>close</md-icon></button></span\n              >`\n            )}\n          </div>\n          <ox-select value=\"\" @change=${(e: CustomEvent) => e.detail && (this.chosen = [...this.chosen, String(e.detail)])}>\n            <span slot=\"label\">${i18next.t('text.training-attendee-add')}</span>\n            <ox-popup-list align-left nowrap with-search>${left.map(one => html`<div option value=${one.value}>${one.display}</div>`)}</ox-popup-list>\n          </ox-select>\n          <span invalid>${this.message}</span>\n        </div>\n      </div>\n\n      <ox-popup-actions>\n        <md-text-button slot=\"cancel\" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" ?disabled=${this.working} @click=${() => this.record()}>${i18next.t('button.training-attendance-record')}</md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  private async record() {\n    const done = await this.recording.run({ sessionId: this.session.id, employeeIds: this.chosen, completedOn: this.completedOn || null })\n    if (!done) return\n    notify({ message: i18next.t('text.training-attendance-recorded', { count: done.recordTrainingAttendance.length }) })\n    this.dispatchEvent(new CustomEvent('recorded'))\n  }\n}\n"]}

package/dist-client/pages/regulation-detail.d.ts

@@ -11,14 +11,17 @@ declare const RegulationDetail_base: (new (...args: any[]) => import("lit").LitE
  */
 export declare class RegulationDetail extends RegulationDetail_base {
     static styles: import("lit").CSSResult[];
-    private view;
-    private failure;
+    private ruleId;
     private chosen;
-    private draft;
-    private employees;
-    private procedure;
     private files;
     private originals;
+    private rule;
+    private draft;
+    private procedure;
+    private saves;
+    private change;
+    private get view();
+    private get busy();
     get context(): {
         title: any;
         frame: string;
@@ -30,15 +33,21 @@ export declare class RegulationDetail extends RegulationDetail_base {
     private renderInForce;
     private renderProcedureForm;
     pageUpdated(changes: any, lifecycle: any): Promise<void>;
-    private fetch;
     private choose;
+    get addressDirty(): boolean;
+    get addressDiscardText(): string;
+    discardAddressEdits(change?: any): void;
+    private mayLeave;
+    private switchTo;
     private call;
     private patchOf;
+    private saveDraft;
     private saveVersion;
     private submit;
     private registerInForce;
     private withdraw;
     private newVersion;
+    /** The revision asked about is the one deleted: if the screen shows another once confirmed, nothing is deleted. */
     private deleteVersion;
     private recordProcedure;
     private deleteProcedure;

package/dist-client/pages/regulation-detail.js

@@ -5,14 +5,14 @@ import '@operato/list-state/ox-page-state.js';
 import gql from 'graphql-tag';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { client, uploadContext } from '@operato/graphql';
+import { MutationController, QueryController, uploadContext } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify } from '@operato/layout';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
-import { navigate, PageView } from '@operato/shell';
+import { navigate, PageView, DraftController } from '@operato/shell';
 import { CommonButtonStyles, DocumentPageStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
 import { VERSION_VIEW } from '../regulation/regulation-fragments.js';
-import { failureOf, PROCEDURE_KINDS, PROCEDURE_METHODS, wordOf } from '../words.js';
+import { failureOf, PROCEDURE_METHODS, wordOf } from '../words.js';
 /**
  * 규정 한 건 (ADR-0187 decisions 2-6) - its versions, and of the one chosen: its text, the day it takes effect, what
  * changed, whether it is against the workers, the procedure with its papers, its approval and whether the employees were
@@ -22,14 +22,47 @@ import { failureOf, PROCEDURE_KINDS, PROCEDURE_METHODS, wordOf } from '../words.
 let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
-        this.view = null;
-        this.failure = '';
+        this.ruleId = '';
         this.chosen = '';
-        this.draft = {};
-        this.employees = null;
-        this.procedure = { kind: 'OPINION', day: '', method: '', workersCount: '', consentCount: '', notes: '' };
         this.files = [];
         this.originals = [];
+        /* The rule and its versions, read for the rule the address names (ADR-0190). */
+        this.rule = new QueryController(this, gql `
+      query ($id: String) {
+        companyRegulation(id: $id) {
+          regulation { id code name kind topics }
+          versions {
+            ...RegulationVersionViewFields
+            procedures { id kind day method workersCount consentCount notes files }
+            originals
+          }
+        }
+      }
+      ${VERSION_VIEW}
+    `, { variables: () => (this.ruleId ? { id: this.ruleId } : undefined) });
+        /* What is typed belongs to the version it was typed on: the text edits over the version read, and the procedure being
+           recorded. Another version drops both, so none of it lands there. */
+        this.draft = new DraftController(this, { read: () => this.current?.version, key: () => this.current?.version.id });
+        this.procedure = new DraftController(this, { read: () => ({ day: '', notes: '' }), key: () => this.current?.version.id });
+        /* Every change reads the rule again once it is done. */
+        this.saves = {
+            draft: this.change(gql `mutation ($id: String!, $patch: RegulationVersionPatch!) { updateRegulationVersion(id: $id, patch: $patch) { id } }`),
+            submit: this.change(gql `mutation ($id: String!) { submitRegulationVersion(id: $id) { id status } }`),
+            inForce: this.change(gql `
+      mutation ($id: String!, $files: [Upload!]!) {
+        registerRegulationInForce(id: $id, files: $files) { id status }
+      }
+    `),
+            withdraw: this.change(gql `mutation ($id: String!) { withdrawRegulationVersion(id: $id) { id } }`),
+            newVersion: this.change(gql `mutation ($id: String!) { newRegulationVersion(regulationId: $id) { id } }`),
+            deleteVersion: this.change(gql `mutation ($id: String!) { deleteRegulationVersion(id: $id) }`),
+            procedure: this.change(gql `
+      mutation ($procedure: NewRegulationProcedure!, $files: [Upload!]) {
+        recordRegulationProcedure(procedure: $procedure, files: $files) { id }
+      }
+    `),
+            deleteProcedure: this.change(gql `mutation ($id: String!) { deleteRegulationProcedure(id: $id) }`)
+        };
     }
     static { this.styles = [
         DocumentPageStyles,
@@ -84,6 +117,17 @@ let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView
       }
     `
     ]; }
+    change(mutation) {
+        return new MutationController(this, mutation, { refetch: () => [this.rule] });
+    }
+    get view() {
+        return this.rule.data?.companyRegulation ?? null;
+    }
+    /* A save, a submission or a procedure on its way: nothing is typed, switched or sent again until it is back, so what
+       is sent is what the screen shows and no answer lands on input typed after it. */
+    get busy() {
+        return Object.values(this.saves).some(save => save.pending);
+    }
     get context() {
         const version = this.current?.version;
         const actions = [];
@@ -103,8 +147,8 @@ let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView
         return versions.find((one) => one.version.id === this.chosen) ?? versions[0];
     }
     render() {
-        if (this.failure)
-            return html `<ox-page-state state="error" .message=${this.failure}></ox-page-state>`;
+        if (this.rule.error)
+            return html `<ox-page-state state="error" .message=${failureOf(this.rule.error)}></ox-page-state>`;
         if (!this.view)
             return html `<ox-page-state state="loading"></ox-page-state>`;
         const current = this.current;
@@ -116,9 +160,10 @@ let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView
           <div class="page-section-actions"><button @click=${() => navigate('regulation-list')}>${i18next.t('button.regulation-all')}</button></div>
         </header>
         <ox-input-select-buttons
+          ?disabled=${this.busy}
           .value=${current.version.id}
           .options=${this.view.versions.map((one) => ({ value: one.version.id, display: `${i18next.t('text.regulation-version-of', { version: one.version.version })} · ${wordOf('regulation-period', one.period)}` }))}
-          @change=${(e) => e.detail && this.choose(e.detail)}
+          @change=${(e) => e.detail && this.switchTo(e.detail)}
         ></ox-input-select-buttons>
       </section>
       ${current ? this.renderVersion(current) : nothing}
@@ -127,11 +172,12 @@ let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView
     renderVersion(view) {
         const { version } = view;
         const writing = version.status === 'DRAFT';
-        const value = (name) => this.draft[name] ?? version[name] ?? '';
-        const set = (name, given) => (this.draft = { ...this.draft, [name]: given });
+        const locked = !writing || this.busy;
+        const value = (name) => this.draft.value(name) ?? '';
+        const set = (name, given) => !this.busy && this.draft.set(name, given);
         const words = { ADDED: i18next.t('text.regulation-change-added'), CHANGED: i18next.t('text.regulation-change-changed'), REMOVED: i18next.t('text.regulation-change-removed') };
         const filing = this.view.regulation.kind === 'WORK_RULES' || this.view.regulation.kind === 'WORK_RULES_ANNEX';
-        const kinds = version.status === 'ADOPTED' ? ['FILING'] : writing ? PROCEDURE_KINDS : [];
+        const kinds = !filing ? [] : version.status === 'ADOPTED' ? ['FILING'] : writing ? [value('unfavourable') === true ? 'CONSENT' : 'OPINION'] : [];
         return html `<section class="page-section">
         <header class="page-section-header"><h3>${i18next.t('text.regulation-version-of', { version: version.version })} · ${wordOf('regulation-period', view.period)}</h3></header>
         ${version.adoptionNote ? html `<p class="page-section-note note">${version.adoptionNote}</p>` : nothing}
@@ -140,29 +186,29 @@ let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView
         <div class="form">
           <label class="field">
             <span>${i18next.t('field.regulation-effective-on')}</span>
-            <input type="date" ?disabled=${!writing} .value=${value('effectiveOn')} @input=${(e) => set('effectiveOn', e.target.value)} />
+            <input type="date" ?disabled=${locked} .value=${value('effectiveOn')} @input=${(e) => set('effectiveOn', e.target.value)} />
             <span>${i18next.t('text.regulation-effective-hint')}</span>
           </label>
-          <div class="field">
+          ${filing ? html `<div class="field">
             <span>${i18next.t('field.regulation-unfavourable')}</span>
             <ox-input-select-buttons
-              ?disabled=${!writing}
+              ?disabled=${locked}
               .value=${value('unfavourable') === '' ? '' : String(value('unfavourable'))}
               .options=${[{ value: 'true', display: i18next.t('text.regulation-unfavourable-yes') }, { value: 'false', display: i18next.t('text.regulation-unfavourable-no') }]}
               @change=${(e) => writing && e.detail && set('unfavourable', e.detail === 'true')}
             ></ox-input-select-buttons>
             <span>${i18next.t('text.regulation-unfavourable-hint')}</span>
-          </div>
+          </div>` : nothing}
           <label class="field">
             <span>${i18next.t('field.regulation-change-summary')}</span>
-            <input ?disabled=${!writing} .value=${value('changeSummary')} @input=${(e) => set('changeSummary', e.target.value)} />
+            <input ?disabled=${locked} .value=${value('changeSummary')} @input=${(e) => set('changeSummary', e.target.value)} />
           </label>
         </div>
       </section>
       <section class="page-section">
         <header class="page-section-header"><h3>${i18next.t('field.regulation-body')}</h3></header>
         <p class="page-section-note muted">${i18next.t('text.regulation-body-hint')}</p>
-        <textarea class="body" ?disabled=${!writing} .value=${value('body')} @input=${(e) => set('body', e.target.value)}></textarea>
+        <textarea class="body" ?disabled=${locked} .value=${value('body')} @input=${(e) => set('body', e.target.value)}></textarea>
       </section>
       ${view.changes.length
             ? html `<section class="page-section">
@@ -172,21 +218,21 @@ let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView
             </table>
           </section>`
             : nothing}
-      <section class="page-section">
+      ${filing || view.procedures?.length ? html `<section class="page-section">
         <header class="page-section-header"><h3>${i18next.t('text.regulation-procedures')}</h3></header>
         <p class="page-section-note muted">${i18next.t(filing ? 'text.regulation-procedures-hint' : 'text.regulation-procedures-none-asked')}</p>
         <table>
           ${(view.procedures ?? []).map((one) => html `<tr>
                 <td>${wordOf('regulation-procedure-kind', one.kind)}</td>
                 <td>${one.day}</td>
-                <td>${one.method ? wordOf('regulation-procedure-method', one.method) : ''}</td>
-                <td>${one.kind === 'CONSENT' ? i18next.t('text.regulation-consent-count', { consented: one.consentCount, workers: one.workersCount }) : ''}</td>
+                <td>${one.method && Object.values(PROCEDURE_METHODS).some(methods => methods.includes(one.method)) ? wordOf('regulation-procedure-method', one.method) : ''}</td>
+                <td>${one.kind === 'CONSENT' && one.workersCount != null && one.consentCount != null ? i18next.t('text.regulation-consent-count', { consented: one.consentCount, workers: one.workersCount }) : ''}</td>
                 <td>${i18next.t('text.regulation-files', { count: one.files })}</td>
-                <td>${writing ? html `<button class="danger" @click=${() => this.deleteProcedure(one.id)}>${i18next.t('button.delete')}</button>` : nothing}</td>
+                <td>${writing ? html `<button class="danger" ?disabled=${this.busy} @click=${() => this.deleteProcedure(one.id)}>${i18next.t('button.delete')}</button>` : nothing}</td>
               </tr>`)}
         </table>
         ${kinds.length ? this.renderProcedureForm(kinds) : nothing}
-      </section>
+      </section>` : nothing}
       ${writing && !this.view.versions.some((one) => one.version.status !== 'DRAFT') ? this.renderInForce() : nothing}`;
     }
     /* A rule in force before the system - its first version registered from its own day with its original (ADR-0187 amendment 2). */
@@ -197,115 +243,112 @@ let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView
       <div class="procedure-form">
         <div class="field">
           <span>${i18next.t('field.regulation-original')}</span>
-          <ox-input-file multiple .value=${this.originals} @change=${(e) => (this.originals = e.detail ?? [])}></ox-input-file>
+          <ox-input-file multiple ?disabled=${this.busy} .value=${this.originals} @change=${(e) => !this.busy && (this.originals = e.detail ?? [])}></ox-input-file>
         </div>
-        <button @click=${() => this.registerInForce()}>${i18next.t('button.regulation-register-in-force')}</button>
+        <button ?disabled=${this.busy} @click=${() => this.registerInForce()}>${i18next.t('button.regulation-register-in-force')}</button>
       </div>
     </section>`;
     }
     renderProcedureForm(kinds) {
-        const kind = kinds.includes(this.procedure.kind) ? this.procedure.kind : kinds[0];
-        const set = (name, given) => (this.procedure = { ...this.procedure, kind, [name]: given });
+        const kind = kinds[0];
+        const set = (name, given) => !this.busy && this.procedure.set(name, given);
         return html `<div class="procedure-form">
       <div class="field">
         <span>${i18next.t('field.regulation-procedure-kind')}</span>
-        <ox-input-select-buttons .value=${kind} .options=${kinds.map(code => ({ value: code, display: wordOf('regulation-procedure-kind', code) }))} @change=${(e) => e.detail && set('kind', e.detail)}></ox-input-select-buttons>
+        <span>${wordOf('regulation-procedure-kind', kind)}</span>
       </div>
-      <label class="field"><span>${i18next.t('field.regulation-procedure-day')}</span><input type="date" .value=${this.procedure.day} @input=${(e) => set('day', e.target.value)} /></label>
-      <div class="field">
-        <span>${i18next.t('field.regulation-procedure-method')}</span>
-        <ox-input-select-buttons .value=${this.procedure.method} .options=${PROCEDURE_METHODS[kind].map(code => ({ value: code, display: wordOf('regulation-procedure-method', code) }))} @change=${(e) => set('method', e.detail ?? '')}></ox-input-select-buttons>
-      </div>
-      ${kind === 'CONSENT'
-            ? html `<label class="field">
-              <span>${i18next.t('field.regulation-workers-count')}</span>
-              <input type="number" min="1" .value=${this.procedure.workersCount} @input=${(e) => set('workersCount', e.target.value)} />
-              ${this.employees !== null ? html `<span>${i18next.t('text.regulation-active-employees', { count: this.employees })}</span>` : nothing}
-            </label>
-            <label class="field"><span>${i18next.t('field.regulation-consent-count')}</span><input type="number" min="0" .value=${this.procedure.consentCount} @input=${(e) => set('consentCount', e.target.value)} /></label>`
-            : nothing}
-      <label class="field"><span>${i18next.t('field.regulation-procedure-notes')}</span><input .value=${this.procedure.notes} @input=${(e) => set('notes', e.target.value)} /></label>
+      <label class="field"><span>${i18next.t('field.regulation-procedure-day')}</span><input type="date" ?disabled=${this.busy} .value=${this.procedure.value('day')} @input=${(e) => set('day', e.target.value)} /></label>
+      <label class="field"><span>${i18next.t('field.regulation-procedure-notes')}</span><input ?disabled=${this.busy} .value=${this.procedure.value('notes')} @input=${(e) => set('notes', e.target.value)} /></label>
       <div class="field">
         <span>${i18next.t('field.regulation-procedure-files')}</span>
-        <ox-input-file multiple .value=${this.files} @change=${(e) => (this.files = e.detail ?? [])}></ox-input-file>
+        <ox-input-file multiple ?disabled=${this.busy} .value=${this.files} @change=${(e) => !this.busy && (this.files = e.detail ?? [])}></ox-input-file>
       </div>
-      <button @click=${() => this.recordProcedure(kind)}>${i18next.t('button.regulation-procedure-record')}</button>
+      <button ?disabled=${this.busy} @click=${() => this.recordProcedure(kind)}>${i18next.t('button.regulation-procedure-record')}</button>
     </div>`;
     }
     async pageUpdated(changes, lifecycle) {
         if (!this.active)
             return;
         const params = new URLSearchParams(location.search);
-        this.chosen = params.get('version') ?? this.chosen;
-        await this.fetch(params.get('id') ?? lifecycle?.params?.id);
-    }
-    async fetch(id = this.view?.regulation?.id) {
-        if (!id)
-            return;
-        try {
-            const response = await client.query({
-                query: gql `
-          query ($id: String) {
-            companyRegulation(id: $id) {
-              regulation { id code name kind topics }
-              versions {
-                ...RegulationVersionViewFields
-                procedures { id kind day method workersCount consentCount notes files }
-                originals
-              }
-            }
-            activeEmployeeCount
-          }
-          ${VERSION_VIEW}
-        `,
-                variables: { id },
-                fetchPolicy: 'no-cache'
-            });
-            if (response.errors?.length)
-                throw response;
-            this.view = response.data.companyRegulation;
-            this.employees = response.data.activeEmployeeCount;
-            this.failure = '';
-            this.updateContext();
-        }
-        catch (error) {
-            this.failure = failureOf(error);
-        }
+        const id = params.get('id') ?? lifecycle?.params?.id;
+        const version = params.get('version');
+        /* Another rule, or another version asked by the address: the shell asked about what was typed (addressDirty) and
+           dropped it before the address changed; this page only moves to it. */
+        const another = !!this.view && !!id && id !== this.view.regulation.id;
+        if (another || (version && version !== this.chosen))
+            this.choose(version ?? '');
+        if (id)
+            this.ruleId = id;
     }
+    /* The files picked belong to the version they were picked on, as the drafts do: switching drops them. */
     choose(id) {
         this.chosen = id;
-        this.draft = {};
+        this.files = [];
+        this.originals = [];
         this.updateContext();
     }
-    async call(mutation, variables, done = 'text.regulation-saved', context) {
-        try {
-            const response = await client.mutate({ mutation, variables, ...(context ? { context } : {}) });
-            if (response.errors?.length)
-                throw response;
-            notify({ message: i18next.t(done) });
-            this.draft = {};
-            await this.fetch();
-            return response.data;
-        }
-        catch (error) {
-            notify({ level: 'error', message: failureOf(error) });
-            return null;
+    /*
+     * PageView reads the drafts; the files picked are the page's own unsaved state too. The shell asks about them before
+     * any move - 「규정 목록」, the menu, another rule's address, closing the tab - and drops them once the move is agreed.
+     */
+    get addressDirty() {
+        return super.addressDirty || this.files.length > 0 || this.originals.length > 0;
+    }
+    get addressDiscardText() {
+        return i18next.t('text.regulation-leave-unsaved');
+    }
+    discardAddressEdits(change) {
+        super.discardAddressEdits(change);
+        this.choose(this.chosen);
+    }
+    /* A version switch stays on the page, so the page asks the shell's question itself. */
+    async mayLeave() {
+        return await this.canDeactivate();
+    }
+    async switchTo(id) {
+        if (this.busy || id === this.current?.version.id) {
+            const buttons = this.renderRoot.querySelector('ox-input-select-buttons');
+            if (buttons)
+                buttons.value = this.current?.version.id;
+            return;
         }
+        if (await this.mayLeave())
+            return this.choose(id);
+        /* Staying: the buttons already show the version clicked - put them back on the one still open. */
+        const buttons = this.renderRoot.querySelector('ox-input-select-buttons');
+        if (buttons)
+            buttons.value = this.current?.version.id;
     }
-    patchOf() {
-        const patch = { ...this.draft };
+    async call(save, variables, done = 'text.regulation-saved', context) {
+        if (this.busy)
+            return undefined;
+        const data = await save.run(variables, { context });
+        if (data)
+            notify({ message: i18next.t(done) });
+        return data;
+    }
+    patchOf(sent) {
+        const patch = { ...sent };
         if (patch.effectiveOn === '')
             patch.effectiveOn = null;
         return patch;
     }
+    /* Saves the text edits of the version chosen - the one door that clears them. */
+    async saveDraft(done = 'text.regulation-saved') {
+        const on = this.current.version.id;
+        return await this.draft.submit(sent => this.call(this.saves.draft, { id: on, patch: this.patchOf(sent) }, done));
+    }
     async saveVersion() {
-        if (!Object.keys(this.draft).length)
+        if (!this.draft.dirty)
             return;
-        await this.call(gql `mutation ($id: String!, $patch: RegulationVersionPatch!) { updateRegulationVersion(id: $id, patch: $patch) { id } }`, { id: this.current.version.id, patch: this.patchOf() });
+        await this.saveDraft();
     }
     async submit() {
         const id = this.current.version.id;
-        if (Object.keys(this.draft).length && !(await this.call(gql `mutation ($id: String!, $patch: RegulationVersionPatch!) { updateRegulationVersion(id: $id, patch: $patch) { id } }`, { id, patch: this.patchOf() })))
+        if (this.draft.dirty && !(await this.saveDraft()))
+            return;
+        /* Only what the screen shows is put up: anything not saved yet stops the submission. */
+        if (this.draft.dirty || this.current?.version.id !== id)
             return;
         const confirmed = await OxPrompt.open({
             title: i18next.t('button.regulation-submit'),
@@ -314,12 +357,15 @@ let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView
             cancelButton: { text: i18next.t('button.cancel') }
         });
         if (confirmed)
-            await this.call(gql `mutation ($id: String!) { submitRegulationVersion(id: $id) { id status } }`, { id }, 'text.regulation-submitted');
+            await this.call(this.saves.submit, { id }, 'text.regulation-submitted');
     }
     async registerInForce() {
         const id = this.current.version.id;
-        if (Object.keys(this.draft).length && !(await this.call(gql `mutation ($id: String!, $patch: RegulationVersionPatch!) { updateRegulationVersion(id: $id, patch: $patch) { id } }`, { id, patch: this.patchOf() })))
+        if (this.draft.dirty && !(await this.saveDraft()))
             return;
+        if (this.draft.dirty || this.current?.version.id !== id)
+            return;
+        const originals = this.originals;
         const confirmed = await OxPrompt.open({
             title: i18next.t('button.regulation-register-in-force'),
             text: i18next.t('text.regulation-in-force-confirm', { version: this.current.version.version, day: this.current.version.effectiveOn ?? '' }),
@@ -328,75 +374,56 @@ let RegulationDetail = class RegulationDetail extends localize(i18next)(PageView
         });
         if (!confirmed)
             return;
-        const done = await this.call(gql `
-        mutation ($id: String!, $files: [Upload!]!) {
-          registerRegulationInForce(id: $id, files: $files) { id status }
-        }
-      `, { id, files: this.originals }, 'text.regulation-registered-in-force', this.originals.length ? uploadContext(() => { }) : undefined);
-        if (done)
+        const done = await this.call(this.saves.inForce, { id, files: originals }, 'text.regulation-registered-in-force', originals.length ? uploadContext(() => { }) : undefined);
+        if (done && this.originals === originals)
             this.originals = [];
     }
     async withdraw() {
-        await this.call(gql `mutation ($id: String!) { withdrawRegulationVersion(id: $id) { id } }`, { id: this.current.version.id });
+        await this.call(this.saves.withdraw, { id: this.current.version.id });
     }
     async newVersion() {
-        const data = await this.call(gql `mutation ($id: String!) { newRegulationVersion(regulationId: $id) { id } }`, { id: this.view.regulation.id });
+        const data = await this.call(this.saves.newVersion, { id: this.view.regulation.id });
         if (data)
             this.choose(data.newRegulationVersion.id);
     }
+    /** The revision asked about is the one deleted: if the screen shows another once confirmed, nothing is deleted. */
     async deleteVersion() {
+        const id = this.current?.version.id;
+        if (!id)
+            return;
         const confirmed = await OxPrompt.open({
             title: i18next.t('button.regulation-version-delete'),
             text: i18next.t('text.regulation-version-delete-confirm'),
             confirmButton: { text: i18next.t('button.delete'), destructive: true },
             cancelButton: { text: i18next.t('button.cancel') }
         });
-        if (confirmed && (await this.call(gql `mutation ($id: String!) { deleteRegulationVersion(id: $id) }`, { id: this.current.version.id })))
-            this.chosen = '';
+        if (!confirmed || this.current?.version.id !== id)
+            return;
+        if (await this.call(this.saves.deleteVersion, { id }))
+            this.choose('');
     }
     async recordProcedure(kind) {
-        const { day, method, workersCount, consentCount, notes } = this.procedure;
-        const done = await this.call(gql `
-        mutation ($procedure: NewRegulationProcedure!, $files: [Upload!]) {
-          recordRegulationProcedure(procedure: $procedure, files: $files) { id }
-        }
-      `, {
-            procedure: { versionId: this.current.version.id, kind, day, method: method || null, workersCount: workersCount === '' ? null : Number(workersCount), consentCount: consentCount === '' ? null : Number(consentCount), notes: notes || null },
-            files: this.files
-        }, 'text.regulation-saved', this.files.length ? uploadContext(() => { }) : undefined);
-        if (done) {
-            this.procedure = { kind: 'OPINION', day: '', method: '', workersCount: '', consentCount: '', notes: '' };
+        const files = this.files;
+        const done = await this.procedure.submit(sent => this.call(this.saves.procedure, {
+            procedure: { versionId: this.current.version.id, kind, day: sent.day ?? '', notes: sent.notes || null },
+            files
+        }, 'text.regulation-saved', files.length ? uploadContext(() => { }) : undefined));
+        /* Only what was sent is done - a file picked since stays. */
+        if (done && this.files === files)
             this.files = [];
-        }
     }
     async deleteProcedure(id) {
-        await this.call(gql `mutation ($id: String!) { deleteRegulationProcedure(id: $id) }`, { id });
+        await this.call(this.saves.deleteProcedure, { id });
     }
 };
 __decorate([
     state(),
     __metadata("design:type", Object)
-], RegulationDetail.prototype, "view", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], RegulationDetail.prototype, "failure", void 0);
+], RegulationDetail.prototype, "ruleId", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], RegulationDetail.prototype, "chosen", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], RegulationDetail.prototype, "draft", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], RegulationDetail.prototype, "employees", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], RegulationDetail.prototype, "procedure", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)