@things-factory/organization 10.1.26 → 10.1.28

package/dist-client/pages/employee/employee-list-page.js

@@ -1,116 +1,318 @@
 import { __decorate, __metadata } from "tslib";
 import '@operato/data-grist';
+import '@operato/data-tree';
+import '@operato/list-state/ox-empty-note.js';
+import '@operato/list-state/ox-page-state.js';
 import '@things-factory/contact/dist-client';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { OxPrompt } from '@operato/popup';
 import { DataGrist } from '@operato/data-grist';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
 import { PageView } from '@operato/shell';
-import { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { isMobileDevice } from '@operato/utils';
 import { p13n } from '@operato/p13n';
+import { Department } from '../../types/department';
 import { EmployeeImporter } from './employee-importer';
 let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(ScopedElementsMixin(PageView))) {
     constructor() {
         super(...arguments);
         this.mode = isMobileDevice() ? 'CARD' : 'GRID';
+        this.departmentsLoaded = false;
+        this.departmentsError = null;
+        this.railFolded = false;
     }
     static { this.styles = [
+        /* The work surface frame for a list screen (ADR-0060 decision 8). */
+        WorkSurfacePageStyles,
         ScrollbarStyles,
         CommonGristStyles,
         CommonHeaderStyles,
         css `
-      :host {         display: flex;
-
-        width: 100%;
-
+      :host {
         --ox-pfp-size: 40px;
-
         --grid-record-emphasized-background-color: #8b0000;
         --grid-record-emphasized-color: #ff6b6b;
- }
+      }
+
+      .header {
+        grid-template-areas: 'filters';
+      }
+
+      /*
+       * The rail is how you narrow the list to one department; the list is the content
+       * (ADR-0060 decision 8, and the ruling of 2026-09-18 that folded the by-department screen
+       * into this one). It folds away, because a screen looking at everyone does not need it.
+       */
+      [body] {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        min-height: 0;
+      }
+
+      [rail] {
+        display: flex;
+        flex-direction: column;
+        width: 240px;
+        min-width: 240px;
+        border-right: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+        overflow: auto;
+      }
+
+      [rail][folded] {
+        display: none;
+      }
+
+      [rail-head] {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        padding: var(--spacing-medium, 8px) var(--spacing-medium, 8px) 0;
+        font: var(--label-font, inherit);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+
+      /* The word keeps its line. Sharing the row with a filler let it shrink and break in half. */
+      [rail-head] > span {
+        flex: 0 0 auto;
+        white-space: nowrap;
+      }
 
-      ox-grist {         overflow-y: auto;
+      [rail-head] button,
+      /*
+       * Going back to everyone. Picking a department narrows the list, and without this there is no
+       * way out of that except reloading the screen.
+       */
+      button[all-departments] {
+        width: calc(100% - 16px);
+        margin: 4px 8px;
+        padding: 6px 10px;
+        text-align: left;
+        border: 1px solid transparent;
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        background: transparent;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        font: inherit;
+        cursor: pointer;
+      }
+
+      button[all-departments][selected] {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      [rail-toggle] {
+        display: flex;
+        align-items: center;
+        border: none;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        padding: 2px;
+      }
+
+      [rail-toggle] {
+        align-self: flex-start;
+        margin: var(--spacing-medium, 8px) 0 0 var(--spacing-small, 4px);
+      }
+
+      ox-tree {
+        flex: 1;
+        overflow: auto;
+      }
+
+      ox-grist {
         flex: 1;
- }
+        min-width: 0;
+      }
 
-      .header {         grid-template-areas: 'filters';
- }
+      @media screen and (max-width: 780px) {
+        [rail] {
+          display: none;
+        }
+      }
     `
     ]; }
     static get scopedElements() {
-        return { 'employee-importer': EmployeeImporter
-        };
+        return { 'employee-importer': EmployeeImporter };
     }
     get context() {
-        return { title: i18next.t('title.employee list'),
-            search: { handler: (search) => {
+        return {
+            title: i18next.t('title.employee list'),
+            search: {
+                handler: (search) => {
                     this.grist.searchText = search;
                 },
-                value: this.grist?.searchText || '' },
-            filter: { handler: () => {
+                value: this.grist?.searchText || ''
+            },
+            filter: {
+                handler: () => {
                     this.grist.toggleHeadroom();
                 }
             },
             help: 'organization/employee',
             actions: [
-                { icon: 'save',
-                    title: i18next.t('button.save'),
-                    action: this.onUpdateEmployee.bind(this)
-                },
-                { icon: 'delete',
+                { icon: 'save', title: i18next.t('button.save'), action: this.onUpdateEmployee.bind(this) },
+                {
+                    icon: 'delete',
                     title: i18next.t('button.delete'),
                     action: this.onDeleteEmployee.bind(this),
-                    emphasis: { danger: true
-                    }
+                    emphasis: { danger: true }
                 }
             ],
-            exportable: { name: i18next.t('title.employee list'),
-                data: this.exportHandler.bind(this)
-            },
-            importable: { handler: this.importHandler.bind(this)
-            } };
+            exportable: { name: i18next.t('title.employee 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)}
-        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
-      >
-        <div slot="headroom" class="header">
-          <div class="filters">
-            <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
+      <div body class="page-fill">
+        ${this.railFolded
+            ? html `<button
+                rail-toggle
+                title=${i18next.t('title.department list')}
+                @click=${() => (this.railFolded = false)}
+              >
+                <md-icon>account_tree</md-icon>
+              </button>`
+            : html `<aside rail>
+                <div rail-head>
+                  <span>${i18next.t('title.department list')}</span>
+                  <div filler style="flex: 1"></div>
+                  <button title=${i18next.t('label.fold')} @click=${() => (this.railFolded = true)}>
+                    <md-icon>chevron_left</md-icon>
+                  </button>
+                </div>
+                <ox-page-state
+                  .loading=${!this.departmentsLoaded && !this.departmentsError}
+                  .error=${this.departmentsError}
+                  @retry=${() => this.fetchDepartments()}
+                >
+                  ${this.departments?.length
+                ? html `<button
+                            all-departments
+                            ?selected=${!this.selectedDepartment}
+                            @click=${() => this.onSelectDepartment(undefined)}
+                          >
+                            ${i18next.t('text.all departments')}
+                          </button>
+                          <ox-tree
+                            .data=${this.departments}
+                            .selected=${this.selectedDepartment}
+                            @select=${(e) => this.onSelectDepartment(e.detail)}
+                            id-property="controlNo"
+                            label-property="name"
+                          ></ox-tree>`
+                : html `<ox-empty-note
+                          icon="account_tree"
+                          title=${i18next.t('text.no departments yet')}
+                          description=${i18next.t('text.departments are made on the department screen')}
+                        ></ox-empty-note>`}
+                </ox-page-state>
+              </aside>`}
+
+        <ox-grist
+          .mode=${mode}
+          .config=${this.gristConfig}
+          .fetchHandler=${this.fetchHandler.bind(this)}
+          .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+        >
+          <div slot="headroom" class="header">
+            <div class="filters">
+              <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
+            </div>
           </div>
-        </div>
 
-        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
-      </ox-grist>
+          <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+        </ox-grist>
+      </div>
     `;
     }
+    /**
+     * 트리에서 고른 부서가 목록의 부서 조건이다 — 조건은 하나고, 그것을 고르는 자리도 하나다.
+     */
+    onSelectDepartment(department) {
+        this.selectedDepartment = department;
+        this.grist?.fetch();
+        this.updateContext();
+    }
+    /**
+     * The departments the rail draws. departmentRoots answers with a list, and the tree draws from
+     * the first root - a fragment spread straight onto the list is refused by the server.
+     */
+    async fetchDepartments() {
+        this.departmentsError = null;
+        try {
+            const response = await client.query({
+                query: gql `
+          query {
+            responses: departmentRoots {
+              items {
+                ...EmployeeDepartmentFragment
+                children {
+                  ...EmployeeDepartmentFragment
+                  children {
+                    ...EmployeeDepartmentFragment
+                    children {
+                      ...EmployeeDepartmentFragment
+                      children {
+                        ...EmployeeDepartmentFragment
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          fragment EmployeeDepartmentFragment on Department {
+            id
+            controlNo
+            name
+            description
+            active
+          }
+        `
+            });
+            if (response.errors?.length) {
+                throw response.errors[0];
+            }
+            /* Every root department, not just the first - the rail draws an array. */
+            this.departments = response.data.responses?.items;
+            this.departmentsLoaded = true;
+        }
+        catch (error) {
+            this.departmentsError = error;
+        }
+    }
     async pageInitialized(lifecycle) {
-        this.gristConfig = { pagination: { pages: [50, 100, 200] },
-            list: { thumbnail: 'profile',
+        this.gristConfig = {
+            pagination: { pages: [50, 100, 200] },
+            list: {
+                thumbnail: 'profile',
                 fields: ['controlNo', 'name'],
                 details: ['email', 'department', 'hiredOn', 'updatedAt']
             },
             columns: [
                 { type: 'gutter', gutterName: 'sequence', fixed: true },
                 { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },
-                { type: 'gutter',
+                {
+                    type: 'gutter',
                     gutterName: 'button',
                     header: i18next.t('field.register-account'),
                     icon: record => (record.id && !record.user ? 'badge' : ''),
                     iconOnly: false,
                     title: record => (record.id && !record.user ? i18next.t('button.register-account') : ''),
                     width: 80,
-                    handlers: { click: (columns, data, column, record, rowIndex) => {
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
                             if (!record || !record.id || record.user) {
                                 return;
                             }
@@ -118,16 +320,19 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
                         }
                     }
                 },
-                { type: 'image',
+                {
+                    type: 'image',
                     name: 'profile',
                     header: i18next.t('button.edit-contact'),
                     width: 80,
-                    record: { align: 'center',
+                    record: {
+                        align: 'center',
                         renderer: function (value, column, record, rowIndex, field) {
                             return html `<ox-pfp-view .profile=${record.profile} .name=${record.name || '+'}></ox-pfp-view>`;
                         }
                     },
-                    handlers: { click: async (columns, data, column, record, rowIndex) => {
+                    handlers: {
+                        click: async (columns, data, column, record, rowIndex) => {
                             if (record && record.contact) {
                                 this.openContactPopup(record);
                             }
@@ -137,42 +342,43 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
                         }
                     }
                 },
-                { type: 'string',
+                {
+                    type: 'string',
                     name: 'controlNo',
                     fixed: true,
                     header: i18next.t('field.control-no'),
-                    record: { editable: true,
-                        mandatory: true
-                    },
+                    record: { editable: true, mandatory: true },
                     filter: 'search',
                     sortable: true,
                     width: 105
                 },
-                { type: 'string',
+                {
+                    type: 'string',
                     name: 'name',
                     fixed: true,
                     header: i18next.t('field.name'),
-                    record: { editable: true,
-                        mandatory: true
-                    },
+                    record: { editable: true, mandatory: true },
                     filter: 'search',
                     sortable: true,
                     width: 100
                 },
-                { type: 'string',
+                {
+                    type: 'string',
                     name: 'alias',
                     header: i18next.t('label.alias'),
-                    record: { editable: true
-                    },
+                    record: { editable: true },
                     filter: 'search',
                     sortable: false,
                     width: 110
                 },
-                { type: 'resource-object',
+                {
+                    type: 'resource-object',
                     name: 'user',
                     header: i18next.t('field.system-user'),
-                    record: { editable: true,
-                        options: { title: i18next.t('title.lookup system-user'),
+                    record: {
+                        editable: true,
+                        options: {
+                            title: i18next.t('title.lookup system-user'),
                             queryName: 'users',
                             basicArgs: { filters: [{ name: 'userType', operator: 'eq', value: 'user' }] },
                             descriptionField: 'email',
@@ -188,93 +394,82 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
                     filter: 'search',
                     width: 100
                 },
-                { type: 'code',
+                {
+                    type: 'code',
                     name: 'type',
-                    header: i18next.t('field.type'),
+                    header: i18next.t('field.type', { defaultValue: 'type' }),
                     width: 115,
                     sortable: true,
                     filter: true,
-                    record: { editable: true,
-                        codeName: 'EMPLOYEE_TYPE',
-                        selectDispOpt: 'name'
-                    }
+                    record: { editable: true, codeName: 'EMPLOYEE_TYPE', selectDispOpt: 'name' }
                 },
-                { type: 'department-object',
+                {
+                    type: 'department-object',
                     name: 'department',
                     header: i18next.t('field.department'),
-                    record: { editable: true
-                    },
+                    record: { editable: true },
                     sortable: false,
-                    filter: true,
+                    /* The rail narrows by department; a second department field here would be the same condition twice. */
+                    filter: false,
                     width: 130
                 },
-                { type: 'resource-object',
+                {
+                    type: 'resource-object',
                     name: 'supervisor',
                     header: i18next.t('field.supervisor'),
-                    record: { editable: true,
-                        options: { title: i18next.t('title.employee list'),
+                    record: {
+                        editable: true,
+                        options: {
+                            title: i18next.t('title.employee list'),
                             queryName: 'employees',
                             pagination: { pages: [50, 100, 200] },
-                            basicArgs: { filters: [
-                                    { name: 'active',
-                                        operator: 'eq',
-                                        value: true
-                                    }
-                                ]
-                            },
+                            basicArgs: { filters: [{ name: 'active', operator: 'eq', value: true }] },
                             list: { fields: ['controlNo', 'name', 'alias', 'hiredOn'] },
                             columns: [
                                 { name: 'id', hidden: true },
-                                { name: 'controlNo',
+                                {
+                                    name: 'controlNo',
                                     width: 120,
                                     header: { renderer: () => i18next.t('field.control-no') },
                                     filter: 'search',
                                     sortable: true
                                 },
-                                { name: 'name',
+                                {
+                                    name: 'name',
                                     width: 120,
                                     header: { renderer: () => i18next.t('field.name') },
                                     filter: 'search',
                                     sortable: true
                                 },
-                                { name: 'alias',
+                                {
+                                    name: 'alias',
                                     width: 150,
                                     header: { renderer: () => i18next.t('label.alias') },
                                     filter: 'search',
                                     sortable: true
                                 },
-                                { type: 'code',
+                                {
+                                    type: 'code',
                                     name: 'type',
                                     width: 110,
-                                    header: { renderer: () => i18next.t('label.type') },
-                                    record: { editable: false,
-                                        codeName: 'EMPLOYEE_TYPE',
-                                        selectDispOpt: 'name'
-                                    }
+                                    header: { renderer: () => i18next.t('label.type', { defaultValue: 'type' }) },
+                                    record: { editable: false, codeName: 'EMPLOYEE_TYPE', selectDispOpt: 'name' }
                                 },
-                                { type: 'code',
+                                {
+                                    type: 'code',
                                     name: 'jobPosition',
                                     width: 110,
                                     header: { renderer: () => i18next.t('label.job-position') },
-                                    record: { editable: false,
-                                        codeName: 'JOB_POSITION',
-                                        selectDispOpt: 'name'
-                                    }
+                                    record: { editable: false, codeName: 'JOB_POSITION', selectDispOpt: 'name' }
                                 },
-                                { type: 'code',
+                                {
+                                    type: 'code',
                                     name: 'jobResponsibility',
                                     width: 200,
                                     header: { renderer: () => i18next.t('label.job-responsibility') },
-                                    record: { editable: false,
-                                        codeName: 'JOB_RESPONSIBILITY',
-                                        selectDispOpt: 'name'
-                                    }
+                                    record: { editable: false, codeName: 'JOB_RESPONSIBILITY', selectDispOpt: 'name' }
                                 },
-                                { type: 'date',
-                                    name: 'hiredOn',
-                                    header: { renderer: () => i18next.t('field.hired-on') },
-                                    width: 120
-                                }
+                                { type: 'date', name: 'hiredOn', header: { renderer: () => i18next.t('field.hired-on') }, width: 120 }
                             ],
                             valueField: 'id',
                             nameField: 'name',
@@ -284,115 +479,106 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
                     sortable: false,
                     width: 120
                 },
-                { type: 'string',
+                {
+                    type: 'string',
                     name: 'email',
                     header: i18next.t('field.email'),
                     width: 200,
-                    record: { editable: false,
+                    record: {
+                        editable: false,
                         renderer: function (value, column, record, rowIndex, field) {
                             return record.contact ? record.contact.email : '';
                         }
                     },
                     sortable: false
                 },
-                { type: 'string',
+                {
+                    type: 'string',
                     name: 'phone',
                     header: i18next.t('field.phone'),
                     width: 130,
-                    record: { editable: false,
+                    record: {
+                        editable: false,
                         renderer: function (value, column, record, rowIndex, field) {
                             return record.contact ? record.contact.phone : '';
                         }
                     },
                     sortable: false
                 },
-                { type: 'code',
+                {
+                    type: 'code',
                     name: 'jobResponsibility',
                     header: i18next.t('label.job-responsibility'),
                     width: 175,
-                    record: { editable: true,
-                        codeName: 'JOB_RESPONSIBILITY',
-                        selectDispOpt: 'name'
-                    },
+                    record: { editable: true, codeName: 'JOB_RESPONSIBILITY', selectDispOpt: 'name' },
                     filter: true
                 },
-                { type: 'code',
+                {
+                    type: 'code',
                     name: 'jobPosition',
                     header: i18next.t('label.job-position'),
                     width: 100,
-                    record: { editable: true,
-                        codeName: 'JOB_POSITION',
-                        selectDispOpt: 'name'
-                    },
+                    record: { editable: true, codeName: 'JOB_POSITION', selectDispOpt: 'name' },
                     filter: true
                 },
-                { type: 'date',
+                {
+                    type: 'date',
                     name: 'hiredOn',
                     header: i18next.t('field.hired-on'),
                     width: 120,
-                    record: { editable: true
-                    },
+                    record: { editable: true },
                     sortable: true
                 },
-                { type: 'date',
+                {
+                    type: 'date',
                     name: 'retiredOn',
                     header: i18next.t('label.retired-at'),
                     width: 120,
-                    record: { editable: true
-                    }
+                    record: { editable: true }
                 },
-                { type: 'checkbox',
+                {
+                    type: 'checkbox',
                     name: 'active',
                     label: true,
                     header: i18next.t('field.active'),
                     width: 70,
-                    record: { align: 'center',
-                        editable: true
-                    },
+                    record: { align: 'center', editable: true },
                     filter: true,
                     sortable: false
                 },
-                { type: 'string',
+                {
+                    type: 'string',
                     name: 'note',
                     header: i18next.t('field.note'),
                     width: 200,
-                    record: { editable: true
-                    },
+                    record: { editable: true },
                     filter: 'search'
                 },
-                { type: 'resource-object',
-                    name: 'updater',
-                    header: i18next.t('field.updater'),
-                    width: 90,
-                    sortable: false
-                },
-                { type: 'datetime',
-                    name: 'updatedAt',
-                    header: i18next.t('field.updated_at'),
-                    width: 180,
-                    sortable: true
-                },
-                { type: 'resource-object',
-                    name: 'contact',
-                    hidden: true
-                }
+                { type: 'resource-object', name: 'updater', header: i18next.t('field.updater'), width: 90, sortable: false },
+                { type: 'datetime', name: 'updatedAt', header: i18next.t('field.updated_at'), width: 180, sortable: true },
+                { type: 'resource-object', name: 'contact', hidden: true }
             ],
-            rows: { selectable: { multiple: true
-                }
-            },
-            sorters: [
-                { name: 'controlNo'
-                }
-            ]
+            rows: { selectable: { multiple: true } },
+            sorters: [{ name: 'controlNo' }]
         };
+        this.fetchDepartments();
     }
     async pageUpdated(changes, lifecycle) {
-        if (this.active) { // do something here when this page just became as active
+        if (this.active) {
+            // do something here when this page just became as active
         }
     }
     async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
-        const response = await client.query({ query: gql `
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: employees(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id
+        /* The rail's selection is the department condition; nothing else sets one. */
+        if (this.selectedDepartment) {
+            filters = [...filters, { name: 'departmentId', operator: 'eq', value: this.selectedDepartment.id }];
+        }
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: employees(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
               controlNo
               name
               alias
@@ -402,65 +588,66 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
               active
               email
               phone
-              user {                 id
+              user {
+                id
                 name
- }
-              department {                 id
+              }
+              department {
+                id
                 controlNo
                 name
                 description
- }
-              supervisor {                 id
+              }
+              supervisor {
+                id
                 name
                 controlNo
- }
+              }
               note
               hiredOn
               retiredOn
-              contact {                 id
+              contact {
+                id
                 email
                 phone
                 address
- }
-              profile {                 left
+              }
+              profile {
+                left
                 top
                 zoom
                 picture
- }
-              updater {                 id
+              }
+              updater {
+                id
                 name
- }
+              }
               updatedAt
- }
+            }
             total
- }
- }
+          }
+        }
       `,
-            variables: { filters,
-                pagination: { page, limit },
-                sortings
-            }
+            variables: { filters, pagination: { page, limit }, sortings }
         });
         const records = response.data.responses.items;
-        return { total: response.data.responses.total || 0,
-            records
-        };
+        return { total: response.data.responses.total || 0, records };
     }
     async onDeleteEmployee() {
-        if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+        if (await OxPrompt.confirmDelete({ count: this.grist?.selected?.length })) {
             const ids = this.grist.selected.map(record => record.id);
             if (ids && ids.length > 0) {
-                const response = await client.mutate({ mutation: gql `
-            mutation ($ids: [String!]!) {               deleteEmployees(ids: $ids)
- }
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation ($ids: [String!]!) {
+              deleteEmployees(ids: $ids)
+            }
           `,
-                    variables: { ids
-                    }
+                    variables: { ids }
                 });
                 if (!response.errors) {
                     this.grist.fetch();
-                    notify({ message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
-                    });
+                    notify({ message: i18next.t('text.deleted') });
                 }
             }
         }
@@ -477,13 +664,15 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
                 patchField.cuFlag = patch.__dirty__;
                 return patchField;
             });
-            const response = await client.mutate({ mutation: gql `
-          mutation ($patches: [EmployeePatch!]!) {             updateMultipleEmployee(patches: $patches) {               name
- }
- }
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($patches: [EmployeePatch!]!) {
+            updateMultipleEmployee(patches: $patches) {
+              name
+            }
+          }
         `,
-                variables: { patches
-                }
+                variables: { patches }
             });
             if (!response.errors) {
                 this.grist.fetch();
@@ -520,10 +709,7 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
             this.grist.fetch();
         }}
         ></employee-importer>
-      `, { backdrop: true,
-            size: 'large',
-            title: i18next.t('title.import employee')
-        });
+      `, { backdrop: true, size: 'large', title: i18next.t('title.import employee') });
         popup.onclosed = () => {
             this.grist.fetch();
         };
@@ -543,35 +729,32 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
         }}
           detachable
         ></contact-popup>
-      `, { backdrop: true,
-            size: 'large',
-            title: i18next.t('title.contact')
-        });
+      `, { backdrop: true, size: 'large', title: i18next.t('title.contact') });
     }
     async openContactSelector(record) {
         const popup = openPopup(html `
         <contact-selector .confirmCallback=${selected => this.attachContact(record, selected)}></contact-selector>
-      `, { backdrop: true,
-            size: 'large',
-            title: i18next.t('title.contact')
-        });
+      `, { backdrop: true, size: 'large', title: i18next.t('title.contact') });
     }
     async attachContact(record, contact) {
         if (record.id) {
-            const response = await client.mutate({ mutation: gql `
-          mutation ($id: String!, $contactId: String!) {             attachContact(id: $id, contactId: $contactId) {               id
- }
- }
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($id: String!, $contactId: String!) {
+            attachContact(id: $id, contactId: $contactId) {
+              id
+            }
+          }
         `,
-                variables: { id: record.id,
-                    contactId: contact.id
-                }
+                variables: { id: record.id, contactId: contact.id }
             });
             this.grist.fetch();
         }
         else if (contact?.id) {
-            this.grist.addRecord({ name: contact.name,
-                contact: { id: contact.id,
+            this.grist.addRecord({
+                name: contact.name,
+                contact: {
+                    id: contact.id,
                     name: contact.name,
                     email: contact.email,
                     phone: contact.phone,
@@ -585,13 +768,15 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
     }
     async detachContact(record) {
         if (record.id) {
-            const response = await client.mutate({ mutation: gql `
-          mutation ($id: String!) {             detachContact(id: $id) {               id
- }
- }
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($id: String!) {
+            detachContact(id: $id) {
+              id
+            }
+          }
         `,
-                variables: { id: record.id
-                }
+                variables: { id: record.id }
             });
             this.grist.fetch();
         }
@@ -602,12 +787,13 @@ let EmployeeListPage = class EmployeeListPage extends p13n(localize(i18next)(Sco
     }
     async attachSystemUser(record) {
         if (!record.user) {
-            await client.mutate({ mutation: gql `
-          mutation ($employeeId: String!) {             registerEmployeeAsSystemUser(employeeId: $employeeId)
- }
+            await client.mutate({
+                mutation: gql `
+          mutation ($employeeId: String!) {
+            registerEmployeeAsSystemUser(employeeId: $employeeId)
+          }
         `,
-                variables: { employeeId: record.id
-                }
+                variables: { employeeId: record.id }
             });
         }
         this.grist.fetch();
@@ -623,8 +809,30 @@ __decorate([
 ], EmployeeListPage.prototype, "mode", void 0);
 __decorate([
     query('ox-grist'),
-    __metadata("design:type", DataGrist)
+    __metadata("design:type", DataGrist
+    /** The department tree, its selection, and whether the rail is showing. */
+    )
 ], EmployeeListPage.prototype, "grist", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], EmployeeListPage.prototype, "departments", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Department)
+], EmployeeListPage.prototype, "selectedDepartment", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], EmployeeListPage.prototype, "departmentsLoaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], EmployeeListPage.prototype, "departmentsError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], EmployeeListPage.prototype, "railFolded", void 0);
 EmployeeListPage = __decorate([
     customElement('employee-list-page')
 ], EmployeeListPage);