diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx | 114 |
1 files changed, 73 insertions, 41 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx index 2af9dea71..5180c671c 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx @@ -15,14 +15,14 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { h, VNode } from "preact"; import { MerchantBackend } from "../../../declaration.js"; import { CardTable as CardTableActive } from "./TableActive.js"; -import { useState } from 'preact/hooks'; +import { useState } from "preact/hooks"; import { Translate, useTranslator } from "../../../i18n/index.js"; interface Props { @@ -35,46 +35,78 @@ interface Props { setInstanceName: (s: string) => void; } -export function View({ instances, onCreate, onDelete, onPurge, onUpdate, setInstanceName, selected }: Props): VNode { +export function View({ + instances, + onCreate, + onDelete, + onPurge, + onUpdate, + setInstanceName, + selected, +}: Props): VNode { const [show, setShow] = useState<"active" | "deleted" | null>("active"); - const showIsActive = show === 'active' ? "is-active" : '' - const showIsDeleted = show === 'deleted' ? "is-active" : '' - const showAll = show === null ? "is-active" : '' - const i18n = useTranslator() + const showIsActive = show === "active" ? "is-active" : ""; + const showIsDeleted = show === "deleted" ? "is-active" : ""; + const showAll = show === null ? "is-active" : ""; + const i18n = useTranslator(); - const showingInstances = showIsDeleted ? - instances.filter(i => i.deleted) : (showIsActive ? - instances.filter(i => !i.deleted) : - instances) - - return <div id="app"> + const showingInstances = showIsDeleted + ? instances.filter((i) => i.deleted) + : showIsActive + ? instances.filter((i) => !i.deleted) + : instances; - <section class="section is-main-section"> - <div class="columns"> - <div class="column is-two-thirds"> - <div class="tabs" style={{ overflow: 'inherit' }}> - <ul> - <li class={showIsActive}> - <div class="has-tooltip-right" data-tooltip={i18n`Only show active instances`}> - <a onClick={() => setShow("active")}><Translate>Active</Translate></a> - </div> - </li> - <li class={showIsDeleted}> - <div class="has-tooltip-right" data-tooltip={i18n`Only show deleted instances`}> - <a onClick={() => setShow("deleted")}><Translate>Deleted</Translate></a> - </div> - </li> - <li class={showAll}> - <div class="has-tooltip-right" data-tooltip={i18n`Show all instances`}> - <a onClick={() => setShow(null)}><Translate>All</Translate></a> - </div> - </li> - </ul> + return ( + <div id="app"> + <section class="section is-main-section"> + <div class="columns"> + <div class="column is-two-thirds"> + <div class="tabs" style={{ overflow: "inherit" }}> + <ul> + <li class={showIsActive}> + <div + class="has-tooltip-right" + data-tooltip={i18n`Only show active instances`} + > + <a onClick={() => setShow("active")}> + <Translate>Active</Translate> + </a> + </div> + </li> + <li class={showIsDeleted}> + <div + class="has-tooltip-right" + data-tooltip={i18n`Only show deleted instances`} + > + <a onClick={() => setShow("deleted")}> + <Translate>Deleted</Translate> + </a> + </div> + </li> + <li class={showAll}> + <div + class="has-tooltip-right" + data-tooltip={i18n`Show all instances`} + > + <a onClick={() => setShow(null)}> + <Translate>All</Translate> + </a> + </div> + </li> + </ul> + </div> </div> </div> - </div> - <CardTableActive instances={showingInstances} onDelete={onDelete} onPurge={onPurge} setInstanceName={setInstanceName} onUpdate={onUpdate} selected={selected} onCreate={onCreate} /> - </section> - - </div > + <CardTableActive + instances={showingInstances} + onDelete={onDelete} + onPurge={onPurge} + setInstanceName={setInstanceName} + onUpdate={onUpdate} + selected={selected} + onCreate={onCreate} + /> + </section> + </div> + ); } |