feat(planner): save accordion state (#5042)

Signed-off-by: Eduard Aksamitov <e@euaaaio.ru>

packages/ui/src/components/AccordionItem.svelte

@@ -12,14 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+
 <script lang="ts">
   import type { Asset, IntlString } from '@hcengineering/platform'
-  import { AnySvelteComponent } from '../types'
-  import { ComponentType } from 'svelte'
-  import Icon from './Icon.svelte'
-  import Label from './Label.svelte'
+  import type { ComponentType } from 'svelte'
+  import type { AnySvelteComponent } from '../types'
+  import { getTreeCollapsed, setTreeCollapsed } from '../location'
   import IconChevronRight from './icons/ChevronRight.svelte'
+  import Label from './Label.svelte'
+  import Icon from './Icon.svelte'
 
+  export let id: string
   export let label: IntlString | undefined = undefined
   export let title: string | undefined = undefined
   export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
@@ -27,13 +30,19 @@
   export let size: 'small' | 'medium' | 'large'
   export let kind: 'default' | 'second' = 'default'
   export let nested: boolean = false
-  export let isOpen: boolean = false
   export let selected: boolean = false
   export let bottomSpace: boolean = true
   export let counter: number | boolean = false
   export let duration: number | boolean = false
   export let fixHeader: boolean = false
   export let background: string | undefined = undefined
+
+  let collapsed: boolean = getTreeCollapsed(id)
+  $: setTreeCollapsed(id, collapsed)
+
+  function handleClick (): void {
+    collapsed = !collapsed
+  }
 </script>
 
 <div class="hulyAccordionItem-container {kind}" class:nested>
@@ -41,13 +50,11 @@
     class="hulyAccordionItem-header {kind} {size}"
     class:bottomSpace
     class:nested
-    class:isOpen
+    class:isOpen={!collapsed}
     class:selected
     class:scroller-header={fixHeader}
     style:background-color={background ?? 'transparent'}
-    on:click={() => {
-      isOpen = !isOpen
-    }}
+    on:click={handleClick}
   >
     <div
       class="hulyAccordionItem-header__label-wrapper {size === 'large' ? 'heading-medium-16' : 'font-medium-12'}"

packages/ui/src/location.ts

@@ -202,5 +202,6 @@ export const getTreeCollapsed = (_id: any): boolean => {
 
 export const setTreeCollapsed = (_id: any, collapsed: boolean): void => {
   if (_id === undefined || _id === 'undefined') return
-  localStorage.setItem(getCollapsedKey(_id), collapsed ? COLLAPSED : '')
+  const key = getCollapsedKey(_id)
+  collapsed ? localStorage.setItem(key, COLLAPSED) : localStorage.removeItem(key)
 }

plugins/time-resources/src/components/ToDoGroup.svelte

@@ -23,7 +23,6 @@
   import ToDoDraggable from './ToDoDraggable.svelte'
   import ToDoDuration from './ToDoDuration.svelte'
   import ToDoElement from './ToDoElement.svelte'
-  import time from '../plugin'
   import { dragging } from '../dragging'
   import ToDoProjectGroup from './ToDoProjectGroup.svelte'
   import { getClient } from '@hcengineering/presentation'
@@ -49,6 +48,8 @@
 
   let groups: Project[] | undefined = undefined
   let withoutProject: boolean = false
+
+  $: id = `group:${title}`
   $: groups = updateGroups(todos, projects)
 
   const updateGroups = (_todos: WithLookup<ToDo>[], _projects: IdMap<Project>): Project[] | undefined => {
@@ -92,12 +93,12 @@
 
 {#if showTitle}
   <AccordionItem
+    {id}
     label={title}
     size={'large'}
     bottomSpace={false}
     counter={todos.length}
     duration={showDuration}
-    isOpen={title !== time.string.Done}
     fixHeader
     background={'var(--theme-navpanel-color)'}
   >

plugins/time-resources/src/components/ToDoProjectGroup.svelte

@@ -44,6 +44,7 @@
 
   let projectId: string | false
 
+  $: id = project === undefined ? groupName : `group:${groupName}_project:${project === false ? 'none' : project?._id}`
   $: icon = project
     ? project.icon === view.ids.IconWithEmoji
       ? IconWithEmoji
@@ -81,7 +82,7 @@
   }
 </script>
 
-<AccordionItem {icon} {iconProps} {title} {label} size={'medium'} isOpen nested>
+<AccordionItem {id} {icon} {iconProps} {title} {label} size={'medium'} nested>
   {#each todos as todo, index}
     <ToDoDraggable {todo} {index} {groupName} {projectId} on:drop={handleDrop}>
       <ToDoElement {todo} size={largeSize ? 'large' : 'small'} planned={mode !== 'unplanned'} />