refactored ProjectEntry and GroupEntry to share common style.

svelte-ui/src/components/GroupEntry.svelte

@@ -1,96 +1,35 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import type { IconName } from "../external/icons";
   import type { GroupResult } from "../models/group";
   import type { ModalData } from "../stores/modal";
-  import Icon from "./Icon.svelte";
   import ItemEntry from "./ItemEntry.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
+  import ParentEntry from "./ParentEntry.svelte";
 
   export let group: GroupResult = null;
   export let showAllOptions: boolean = false;
 
-  let iconName: IconName = "question";
   let mdItemAdd: ModalData;
   let mdGroupEdit: ModalData;
   let mdGroupDelete: ModalData;  
-  let linkHook: HTMLElement;
-  
-  onMount(() => {
-    if (window.location.hash === "#" + group.id) {
-      window.scrollTo({top: linkHook.getBoundingClientRect().top});
-    }
-  });
 
-  $: iconName = group.icon as IconName;
   $: mdItemAdd = {name:"item.add", group};
   $: mdGroupEdit = {name:"group.edit", group};
   $: mdGroupDelete = {name:"group.delete", group};
 </script>
 
-<div class="group">
-  <div class="link-hook" id={group.id} bind:this={linkHook}></div>
-  <div class="icon"><Icon block name={iconName} /></div>
-  <div class="body">
-    <div class="header">
-      <div class="name">{group.name}</div>
-    </div>
-    {#if showAllOptions}
-      <div class="description">
-        <p>{group.description}</p>
-      </div>
-      <OptionRow>
-        <Option open={mdItemAdd}>Add Item</Option>
-        <Option open={mdGroupEdit}>Edit</Option>
-        <Option open={mdGroupDelete}>Delete</Option>
-      </OptionRow>  
-    {/if}
-    <div class="list" class:full={showAllOptions}>
-      {#each group.items as item (item.id)}
-        <ItemEntry item={item} group={group} />
-      {/each}
-    </div>
-  </div>
-</div>
-
-<style>
-  div.link-hook {
-    position: relative;
-    top: -2em;
-  }
-
-  div.group {
-    display: flex;
-    flex-direction: row;
-    padding-bottom: 1em;
-  }
-  div.icon {
-    font-size: 2em;
-    padding: 0 0.5ch;
-    width: 2ch;
-    padding-top: 0.125em;
-    color: #333;
-  }
-  div.body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  div.header {
-    display: flex;
-    flex-direction: row;
-  }
-
-  div.name {
-    font-size: 1em;
-    font-weight: 100;
-    margin: auto 0;
-    vertical-align: middle;
-  }
-
-  div.description > p {
-    padding: 0;
-    margin: 0.25em 0;
-  }
-</style>
+<ParentEntry 
+  full={showAllOptions} 
+  entry={group} 
+>
+  {#if showAllOptions}
+    <OptionRow>
+      <Option open={mdItemAdd}>Add Item</Option>
+      <Option open={mdGroupEdit}>Edit</Option>
+      <Option open={mdGroupDelete}>Delete</Option>
+    </OptionRow>
+    {#each group.items as item (item.id)}
+      <ItemEntry item={item} group={group} />
+    {/each}
+  {/if}
+</ParentEntry>