Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Extract issue state filter button
Rūdolfs Ošiņš committed 1 year ago
commit a010c04ab12372fc80ccf2df60ff13c867d83e5c
parent c83fa99c9657383c2f73b7684fc296678fcee9ce
2 files changed +84 -60
modified src/components/IssueSecondColumn.svelte
@@ -1,40 +1,35 @@
<script lang="ts">

  import type { Issue } from "@bindings/cob/issue/Issue";
- 
  import type { RepoInfo } from "@bindings/repo/RepoInfo";

  import type { IssueStatus } from "@app/views/repo/router";
+ 
  import type { RepoInfo } from "@bindings/repo/RepoInfo";
- 
  import capitalize from "lodash/capitalize";

  import fuzzysort from "fuzzysort";



  import * as router from "@app/lib/router";
- 
  import { issueStatusColor, modifierKey } from "@app/lib/utils";
+ 
  import { modifierKey } from "@app/lib/utils";



  import Border from "./Border.svelte";
- 
  import DropdownList from "./DropdownList.svelte";
- 
  import DropdownListItem from "./DropdownListItem.svelte";

  import Icon from "./Icon.svelte";
+ 
  import IssueStateFilterButton from "./IssueStateFilterButton.svelte";

  import IssueTeaser from "@app/components/IssueTeaser.svelte";

  import Link from "./Link.svelte";

  import NakedButton from "./NakedButton.svelte";

  import OutlineButton from "./OutlineButton.svelte";
- 
  import Popover, { closeFocused } from "./Popover.svelte";

  import TextInput from "./TextInput.svelte";



  const activeRouteStore = router.activeRouteStore;



  interface Props {
+ 
    changeFilter: (status: IssueStatus) => void;
+ 
    issues: Issue[];

    repo: RepoInfo;

    selectedIssueId?: string;
- 
    issues: Issue[];

    status: IssueStatus;

    title: string;
- 
    changeFilter: (status: IssueStatus) => void;

  }
- 
  /* eslint-disable prefer-const */
- 
  let { repo, selectedIssueId, issues, status, title, changeFilter }: Props =
+ 
  const { changeFilter, issues, repo, selectedIssueId, status, title }: Props =

    $props();
- 
  /* eslint-enable prefer-const */



  const project = $derived(repo.payloads["xyz.radicle.project"]!);
@@ -81,24 +76,6 @@
  }

</style>
- 
{#snippet icons(status: IssueStatus)}
- 
  <div
- 
    class="icon"
- 
    style:color={status === "all" ? undefined : issueStatusColor[status]}>
- 
    <Icon name={status === "closed" ? "issue-closed" : "issue"} />
- 
  </div>
- 
{/snippet}
-
- 
{#snippet counters(status: IssueStatus)}
- 
  <div style:margin-left="auto" style:padding-left="0.25rem">
- 
    {#if status === "all"}
- 
      {project.meta.issues.open + project.meta.issues.closed}
- 
    {:else}
- 
      {project.meta.issues[status]}
- 
    {/if}
- 
  </div>
- 
{/snippet}
- 


<div class="container">

  <div

    class="txt-medium global-flex"
@@ -157,37 +134,10 @@


{#if showFilters}

  <div class="global-flex" style:margin="1rem 0">
- 
    <Popover popoverPositionLeft="0" popoverPositionTop="3rem">
- 
      {#snippet toggle(onclick)}
- 
        <OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">
- 
          {@render icons(status)}
- 
          {capitalize(status)}
- 
          {@render counters(status)}
- 
          <Icon name="chevron-down" />
- 
        </OutlineButton>
- 
      {/snippet}
-
- 
      {#snippet popover()}
- 
        <Border variant="ghost">
- 
          <DropdownList items={["all", "open", "closed"] as IssueStatus[]}>
- 
            {#snippet item(state)}
- 
              <DropdownListItem
- 
                styleGap="0.5rem"
- 
                styleMinHeight="2.5rem"
- 
                selected={status === state}
- 
                onclick={() => {
- 
                  changeFilter(state);
- 
                  closeFocused();
- 
                }}>
- 
                {@render icons(state)}
- 
                {capitalize(state)}
- 
                {@render counters(state)}
- 
              </DropdownListItem>
- 
            {/snippet}
- 
          </DropdownList>
- 
        </Border>
- 
      {/snippet}
- 
    </Popover>
+ 
    <IssueStateFilterButton
+ 
      {status}
+ 
      counters={project.meta.issues}
+ 
      {changeFilter} />

    <TextInput

      onSubmit={async () => {

        if (searchResults.length === 1) {
added src/components/IssueStateFilterButton.svelte
@@ -0,0 +1,74 @@
+ 
<script lang="ts">
+ 
  import type { IssueStatus } from "@app/views/repo/router";
+ 
  import type { ProjectPayloadMeta } from "@bindings/repo/ProjectPayloadMeta";
+
+ 
  import { closeFocused } from "./Popover.svelte";
+
+ 
  import capitalize from "lodash/capitalize";
+ 
  import { issueStatusColor } from "@app/lib/utils";
+
+ 
  import Border from "./Border.svelte";
+ 
  import DropdownList from "./DropdownList.svelte";
+ 
  import DropdownListItem from "./DropdownListItem.svelte";
+ 
  import Icon from "./Icon.svelte";
+ 
  import OutlineButton from "./OutlineButton.svelte";
+ 
  import Popover from "./Popover.svelte";
+
+ 
  interface Props {
+ 
    changeFilter: (status: IssueStatus) => void;
+ 
    status: IssueStatus;
+ 
    counters: ProjectPayloadMeta["issues"];
+ 
  }
+
+ 
  const { changeFilter, counters, status }: Props = $props();
+ 
</script>
+
+ 
{#snippet iconSnippet(status: IssueStatus)}
+ 
  <div
+ 
    class="icon"
+ 
    style:color={status === "all" ? undefined : issueStatusColor[status]}>
+ 
    <Icon name={status === "closed" ? "issue-closed" : "issue"} />
+ 
  </div>
+ 
{/snippet}
+
+ 
{#snippet counterSnippet(status: IssueStatus)}
+ 
  <div style:margin-left="auto" style:padding-left="0.25rem">
+ 
    {#if status === "all"}
+ 
      {counters.open + counters.closed}
+ 
    {:else}
+ 
      {counters[status]}
+ 
    {/if}
+ 
  </div>
+ 
{/snippet}
+
+ 
<Popover popoverPositionLeft="0" popoverPositionTop="3rem">
+ 
  {#snippet toggle(onclick)}
+ 
    <OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">
+ 
      {@render iconSnippet(status)}
+ 
      {capitalize(status)}
+ 
      {@render counterSnippet(status)}
+ 
      <Icon name="chevron-down" />
+ 
    </OutlineButton>
+ 
  {/snippet}
+
+ 
  {#snippet popover()}
+ 
    <Border variant="ghost">
+ 
      <DropdownList items={["all", "open", "closed"] as IssueStatus[]}>
+ 
        {#snippet item(state)}
+ 
          <DropdownListItem
+ 
            styleGap="0.5rem"
+ 
            styleMinHeight="2.5rem"
+ 
            selected={status === state}
+ 
            onclick={() => {
+ 
              changeFilter(state);
+ 
              closeFocused();
+ 
            }}>
+ 
            {@render iconSnippet(state)}
+ 
            {capitalize(state)}
+ 
            {@render counterSnippet(state)}
+ 
          </DropdownListItem>
+ 
        {/snippet}
+ 
      </DropdownList>
+ 
    </Border>
+ 
  {/snippet}
+ 
</Popover>