Approve requests (#10486)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
2026-09-27 03:54:57 +02:00 · 2026-02-04 16:51:02 +05:00
parent 2bdf82d608
commit 773fee05be
45 changed files with 1496 additions and 60 deletions
@@ -0,0 +1,156 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { Card } from '@hcengineering/card'
+  import core, { Doc, FindOptions, SortingOrder } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import { ApproveRequest } from '@hcengineering/process'
+  import { Label, registerFocus, resizeObserver, Section } from '@hcengineering/ui'
+  import view, { Viewlet, ViewletPreference, ViewOptions } from '@hcengineering/view'
+  import {
+    List,
+    ListSelectionProvider,
+    noCategory,
+    SelectDirection,
+    ViewletsSettingButton
+  } from '@hcengineering/view-resources'
+  import { createEventDispatcher } from 'svelte'
+  import process from '../plugin'
+
+  export let card: Card
+
+  const viewletId = process.viewlet.CardRequests
+  const dispatch = createEventDispatcher()
+
+  $: query = {
+    card: card._id
+  }
+
+  const options: FindOptions<ApproveRequest> = {
+    sort: {
+      modifiedOn: SortingOrder.Descending
+    }
+  }
+
+  let list: List
+
+  const listProvider = new ListSelectionProvider(
+    (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
+      if (dir === 'vertical') {
+        // Select next
+        list?.select(offset, of, noScroll)
+      }
+    }
+  )
+  let docs: ApproveRequest[] = []
+  function select () {
+    listProvider.update(docs)
+    listProvider.updateFocus(docs[0])
+    list?.select(0, undefined)
+  }
+  const selection = listProvider.selection
+
+  // Focusable control with index
+  let focused = false
+  export let focusIndex = -1
+  registerFocus(focusIndex, {
+    focus: () => {
+      ;(window.document.activeElement as HTMLElement).blur()
+      focused = true
+      select()
+      return true
+    },
+    isFocus: () => focused
+  })
+
+  const preferenceQuery = createQuery()
+  let preference: ViewletPreference | undefined = undefined
+  preferenceQuery.query(
+    view.class.ViewletPreference,
+    {
+      space: core.space.Workspace,
+      attachedTo: process.viewlet.CardRequests
+    },
+    (res) => {
+      preference = res[0]
+    }
+  )
+
+  let listWidth: number
+
+  let viewlet: Viewlet | undefined
+  let viewOptions: ViewOptions | undefined
+
+  let docsProvided = false
+</script>
+
+<Section icon={process.icon.Process} label={process.string.ApproveRequest} spaceBeforeContent>
+  <svelte:fragment slot="header">
+    <div class="buttons-group xsmall-gap">
+      <ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'tertiary'} bind:viewlet />
+    </div>
+  </svelte:fragment>
+
+  <svelte:fragment slot="content">
+    <div
+      class="antiSection-empty {docsProvided && docs.length === 0 ? 'solid' : 'none-appearance flex-gap-2'}"
+      use:resizeObserver={(evt) => {
+        listWidth = evt.clientWidth
+      }}
+    >
+      {#if viewOptions && viewlet}
+        <List
+          bind:this={list}
+          _class={process.class.ApproveRequest}
+          {viewOptions}
+          baseMenuClass={process.class.ApproveRequest}
+          viewOptionsConfig={viewlet.viewOptions?.other}
+          config={preference?.config ?? viewlet.config}
+          configurations={undefined}
+          {query}
+          {options}
+          compactMode={listWidth <= 600}
+          flatHeaders={true}
+          disableHeader={viewOptions.groupBy?.length === 0 || viewOptions.groupBy[0] === noCategory}
+          {listProvider}
+          selectedObjectIds={$selection ?? []}
+          on:row-focus={(event) => {
+            listProvider.updateFocus(event.detail ?? undefined)
+          }}
+          on:check={(event) => {
+            listProvider.updateSelection(event.detail.docs, event.detail.value)
+          }}
+          on:content={(evt) => {
+            docsProvided = true
+            docs = evt.detail
+            listProvider.update(evt.detail)
+            dispatch('loaded')
+          }}
+        />
+        {#if docsProvided && docs.length === 0}
+          <div class="flex-center content-color empty-content">
+            <Label label={process.string.NoProcesses} />
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </svelte:fragment>
+</Section>
+
+<style lang="scss">
+  .antiSection-empty:has(.empty-content) :global(.list-container) {
+    display: none;
+  }
+</style>