From f7172004c138dfa2b7d4cc0634c4e487caf3e77a Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Sat, 1 Nov 2025 12:24:23 +0500
Subject: [PATCH] Improve office floor editing (#10173)

* Improve office floor editing

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

* Fix

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

---------

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 .../src/components/AddRoomPopup.svelte        | 17 ++++++--
 .../src/components/Floor.svelte               | 36 +++++++++++++----
 .../src/components/FloorConfigure.svelte      | 39 ++++++++++++++-----
 .../love-resources/src/components/Hall.svelte |  1 +
 4 files changed, 74 insertions(+), 19 deletions(-)

diff --git a/plugins/love-resources/src/components/AddRoomPopup.svelte b/plugins/love-resources/src/components/AddRoomPopup.svelte
index 719eacc0c3..f72d230498 100644
--- a/plugins/love-resources/src/components/AddRoomPopup.svelte
+++ b/plugins/love-resources/src/components/AddRoomPopup.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import core, { Class, Data, generateId, Ref } from '@hcengineering/core'
+  import { Floor, getFreePosition, Office, Room, RoomAccess, RoomType } from '@hcengineering/love'
   import { translate } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import { Button, DropdownIntlItem } from '@hcengineering/ui'
-  import { Floor, Office, Room, RoomAccess, RoomType, getFreePosition } from '@hcengineering/love'
-  import love from '../plugin'
-  import { rooms } from '../stores'
   import { createEventDispatcher } from 'svelte'
+  import love from '../plugin'
+  import { rooms, selectedFloor } from '../stores'
 
   export let floor: Ref<Floor>
 
@@ -72,6 +72,14 @@
     await client.createDoc(val._class, core.space.Workspace, data, _id)
     dispatch('close')
   }
+
+  async function createFloor (): Promise<void> {
+    const client = getClient()
+    const name = await translate(love.string.Floor, {})
+    const _id = await client.createDoc(love.class.Floor, core.space.Workspace, { name })
+    selectedFloor.set(_id)
+    dispatch('close')
+  }
 </script>
 
 <div class="antiPopup p-4 flex-gap-2">
@@ -80,6 +88,9 @@
       <Button label={item.label} on:click={() => createRoom(item.id)} />
     </div>
   {/each}
+  <div>
+    <Button label={love.string.Floor} on:click={createFloor} />
+  </div>
 </div>
 
 <style lang="scss">
diff --git a/plugins/love-resources/src/components/Floor.svelte b/plugins/love-resources/src/components/Floor.svelte
index 64765f246f..50cb3e77d2 100644
--- a/plugins/love-resources/src/components/Floor.svelte
+++ b/plugins/love-resources/src/components/Floor.svelte
@@ -13,15 +13,15 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { AccountRole, Ref, getCurrentAccount, hasAccountRole, WithLookup } from '@hcengineering/core'
-  import { Breadcrumb, Header, IconEdit, ModernButton, Component } from '@hcengineering/ui'
+  import { AccountRole, getCurrentAccount, hasAccountRole, Ref, WithLookup } from '@hcengineering/core'
   import { Floor, Room } from '@hcengineering/love'
-  import { createEventDispatcher } from 'svelte'
-  import { ViewletSelector } from '@hcengineering/view-resources'
+  import { Component, DropdownLabels, Header, IconEdit, ModernButton } from '@hcengineering/ui'
   import { Viewlet, ViewletPreference } from '@hcengineering/view'
+  import { ViewletSelector } from '@hcengineering/view-resources'
+  import { createEventDispatcher } from 'svelte'
 
   import lovePlg from '../plugin'
-  import { floors } from '../stores'
+  import { floors, selectedFloor } from '../stores'
 
   export let rooms: Room[] = []
   export let floor: Ref<Floor>
@@ -32,17 +32,39 @@
   let preference: ViewletPreference | undefined
   let loading = false
 
-  $: selectedFloor = $floors.filter((fl) => fl._id === floor)[0]
+  let selected = $floors.filter((fl) => fl._id === floor)[0]
+  $: selected = $floors.filter((fl) => fl._id === floor)[0]
 
   const me = getCurrentAccount()
 
   let editable: boolean = false
   $: editable = hasAccountRole(me, AccountRole.Maintainer)
+
+  let items = $floors.map((p) => {
+    return { id: p._id, label: p.name }
+  })
+  $: items = $floors.map((p) => {
+    return { id: p._id, label: p.name }
+  })
+
+  function changeFloor (event: CustomEvent<Ref<Floor>>) {
+    if (event.detail) {
+      selectedFloor.set(event.detail)
+    }
+  }
 </script>
 
 <div class="hulyComponent">
   <Header adaptive={'disabled'}>
-    <Breadcrumb title={selectedFloor?.name ?? ''} size={'large'} isCurrent />
+    <DropdownLabels
+      {items}
+      selected={selected?._id}
+      size={'large'}
+      kind={'ghost'}
+      enableSearch={false}
+      autoSelect={false}
+      on:selected={changeFloor}
+    />
     <svelte:fragment slot="beforeTitle">
       <ViewletSelector bind:viewlet bind:preference bind:loading viewletQuery={{ attachTo: lovePlg.class.Floor }} />
     </svelte:fragment>
diff --git a/plugins/love-resources/src/components/FloorConfigure.svelte b/plugins/love-resources/src/components/FloorConfigure.svelte
index 41398fbf22..661d6811f0 100644
--- a/plugins/love-resources/src/components/FloorConfigure.svelte
+++ b/plugins/love-resources/src/components/FloorConfigure.svelte
@@ -13,28 +13,28 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { Contact } from '@hcengineering/contact'
   import { DocumentUpdate, Ref } from '@hcengineering/core'
+  import { Floor, GRID_WIDTH, Room, getFreeSpace } from '@hcengineering/love'
   import { getClient } from '@hcengineering/presentation'
   import {
-    Breadcrumb,
     ButtonIcon,
-    ModernButton,
+    DropdownLabels,
     Header,
     IconAdd,
+    ModernButton,
     Scroller,
     eventToHTMLElement,
     showPopup
   } from '@hcengineering/ui'
-  import { Floor, GRID_WIDTH, Room, getFreeSpace } from '@hcengineering/love'
   import { createEventDispatcher } from 'svelte'
-  import { floors, lockedRoom } from '../stores'
+  import lovePlg from '../plugin'
+  import { floors, lockedRoom, selectedFloor } from '../stores'
   import { FloorSize, RGBAColor, ResizeInitParams, RoomSide, shadowError, shadowNormal } from '../types'
   import { calculateFloorSize } from '../utils'
   import AddRoomPopup from './AddRoomPopup.svelte'
   import FloorGrid from './FloorGrid.svelte'
   import RoomConfigure from './RoomConfigure.svelte'
-  import lovePlg from '../plugin'
-  import { Contact } from '@hcengineering/contact'
 
   export let rooms: Room[] = []
   export let floor: Ref<Floor>
@@ -99,7 +99,7 @@
     showPopup(AddRoomPopup, { floor }, eventToHTMLElement(e))
   }
 
-  $: selectedFloor = $floors.filter((fl) => fl._id === floor)[0]
+  $: selected = $floors.filter((fl) => fl._id === floor)[0]
 
   const setShadowColor = (color: RGBAColor): void => {
     const { r, g, b, a } = color
@@ -287,11 +287,32 @@
     lockedID = -1
   }
   $: rows = calculateFloorSize(rooms) + 2
+
+  function changeFloor (event: CustomEvent<Ref<Floor>>) {
+    if (event.detail) {
+      selectedFloor.set(event.detail)
+    }
+  }
+
+  let items = $floors.map((p) => {
+    return { id: p._id, label: p.name }
+  })
+  $: items = $floors.map((p) => {
+    return { id: p._id, label: p.name }
+  })
 </script>
 
 <div class="hulyComponent">
-  <Header allowFullsize adaptive={'disabled'}>
-    <Breadcrumb title={selectedFloor?.name ?? ''} size={'large'} isCurrent />
+  <Header adaptive={'disabled'}>
+    <DropdownLabels
+      {items}
+      selected={selected?._id}
+      size={'large'}
+      kind={'ghost'}
+      enableSearch={false}
+      autoSelect={false}
+      on:selected={changeFloor}
+    />
     <svelte:fragment slot="actions">
       <ButtonIcon icon={IconAdd} size={'small'} on:click={addRoom} />
       <div class="hulyHeader-divider short" />
diff --git a/plugins/love-resources/src/components/Hall.svelte b/plugins/love-resources/src/components/Hall.svelte
index b57f95339e..5f586ffd16 100644
--- a/plugins/love-resources/src/components/Hall.svelte
+++ b/plugins/love-resources/src/components/Hall.svelte
@@ -26,6 +26,7 @@
     return rooms.filter((p) => p.floor === floor)
   }
 
+  let floor = $selectedFloor ?? ($activeFloor === '' ? $floors[0]?._id : $activeFloor)
   $: floor = $selectedFloor ?? ($activeFloor === '' ? $floors[0]?._id : $activeFloor)
   let configure: boolean = false
   let replacedPanel: HTMLElement