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>

Author: BykhovDenis

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">

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>

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" />

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