2021-05-10 23:28:54 +12:00
|
|
|
<script>
|
2021-12-09 23:10:16 +13:00
|
|
|
import {
|
|
|
|
Heading,
|
|
|
|
Button,
|
|
|
|
Icon,
|
|
|
|
ActionMenu,
|
|
|
|
MenuItem,
|
|
|
|
StatusLight,
|
|
|
|
} from "@budibase/bbui"
|
|
|
|
import { processStringSync } from "@budibase/string-templates"
|
2021-12-10 00:52:47 +13:00
|
|
|
|
2021-05-10 23:28:54 +12:00
|
|
|
export let app
|
|
|
|
export let exportApp
|
2021-05-21 21:32:16 +12:00
|
|
|
export let viewApp
|
|
|
|
export let editApp
|
2021-07-28 03:34:18 +12:00
|
|
|
export let updateApp
|
2021-05-10 23:28:54 +12:00
|
|
|
export let deleteApp
|
2021-05-21 21:32:16 +12:00
|
|
|
export let unpublishApp
|
2021-05-14 01:04:03 +12:00
|
|
|
export let releaseLock
|
2021-12-09 07:51:24 +13:00
|
|
|
export let editIcon
|
2021-05-10 23:28:54 +12:00
|
|
|
</script>
|
|
|
|
|
2021-05-21 21:37:19 +12:00
|
|
|
<div class="title">
|
2021-12-09 07:51:24 +13:00
|
|
|
<div style="display: flex;">
|
2021-12-15 04:30:20 +13:00
|
|
|
<div style="color: {app.icon?.color || ''}">
|
|
|
|
<Icon size="XL" name={app.icon?.name || "Apps"} />
|
2021-12-09 07:51:24 +13:00
|
|
|
</div>
|
|
|
|
<div class="name" on:click={() => editApp(app)}>
|
|
|
|
<Heading size="XS">
|
|
|
|
{app.name}
|
|
|
|
</Heading>
|
|
|
|
</div>
|
2021-05-19 01:39:26 +12:00
|
|
|
</div>
|
2021-05-10 23:28:54 +12:00
|
|
|
</div>
|
2021-12-09 23:10:16 +13:00
|
|
|
<div class="desktop">
|
|
|
|
{#if app.updatedAt}
|
|
|
|
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
|
|
|
|
time: new Date().getTime() - new Date(app.updatedAt).getTime(),
|
|
|
|
})}
|
|
|
|
{:else}
|
|
|
|
Never updated
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
<div class="desktop">
|
|
|
|
<StatusLight
|
|
|
|
positive={!app.lockedYou && !app.lockedOther}
|
|
|
|
notice={app.lockedYou}
|
|
|
|
negative={app.lockedOther}
|
|
|
|
>
|
|
|
|
{#if app.lockedYou}
|
|
|
|
Locked by you
|
|
|
|
{:else if app.lockedOther}
|
|
|
|
Locked by {app.lockedBy.email}
|
|
|
|
{:else}
|
|
|
|
Open
|
|
|
|
{/if}
|
|
|
|
</StatusLight>
|
|
|
|
</div>
|
|
|
|
<div class="desktop">
|
|
|
|
<StatusLight active={app.deployed} neutral={!app.deployed}>
|
|
|
|
{#if app.deployed}Published{:else}Unpublished{/if}
|
|
|
|
</StatusLight>
|
|
|
|
</div>
|
2022-03-29 11:21:38 +13:00
|
|
|
<div data-cy={`row_actions_${app.appId}`}>
|
2021-12-16 05:09:40 +13:00
|
|
|
<Button
|
|
|
|
size="S"
|
|
|
|
disabled={app.lockedOther}
|
|
|
|
on:click={() => editApp(app)}
|
|
|
|
secondary
|
2021-05-21 21:32:16 +12:00
|
|
|
>
|
2021-12-16 05:09:40 +13:00
|
|
|
Open
|
|
|
|
</Button>
|
2021-05-10 23:28:54 +12:00
|
|
|
<ActionMenu align="right">
|
|
|
|
<Icon hoverable slot="control" name="More" />
|
2021-05-21 21:32:16 +12:00
|
|
|
{#if app.deployed}
|
|
|
|
<MenuItem on:click={() => viewApp(app)} icon="GlobeOutline">
|
|
|
|
View published app
|
|
|
|
</MenuItem>
|
2021-05-14 04:24:32 +12:00
|
|
|
{/if}
|
2021-05-21 22:49:23 +12:00
|
|
|
{#if app.lockedYou}
|
2021-05-21 21:32:16 +12:00
|
|
|
<MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
|
|
|
|
Release lock
|
2021-05-14 01:04:03 +12:00
|
|
|
</MenuItem>
|
|
|
|
{/if}
|
2021-05-21 21:37:19 +12:00
|
|
|
<MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem>
|
|
|
|
{#if app.deployed}
|
|
|
|
<MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
|
|
|
|
Unpublish
|
|
|
|
</MenuItem>
|
|
|
|
{/if}
|
2021-05-21 21:32:16 +12:00
|
|
|
{#if !app.deployed}
|
2021-08-25 23:42:28 +12:00
|
|
|
<MenuItem on:click={() => updateApp(app)} icon="Edit">Edit</MenuItem>
|
2021-05-21 21:32:16 +12:00
|
|
|
<MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
|
|
|
|
{/if}
|
2021-12-16 04:54:33 +13:00
|
|
|
<MenuItem on:click={() => editIcon(app)} icon="Brush">Edit icon</MenuItem>
|
2021-05-10 23:28:54 +12:00
|
|
|
</ActionMenu>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
2021-05-19 01:39:26 +12:00
|
|
|
.name {
|
2021-05-10 23:28:54 +12:00
|
|
|
text-decoration: none;
|
2021-05-21 21:32:16 +12:00
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.name :global(.spectrum-Heading) {
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
2021-12-09 07:51:24 +13:00
|
|
|
margin-left: calc(1.5 * var(--spacing-xl));
|
2021-05-10 23:28:54 +12:00
|
|
|
}
|
|
|
|
.title :global(h1:hover) {
|
|
|
|
color: var(--spectrum-global-color-blue-600);
|
|
|
|
cursor: pointer;
|
|
|
|
transition: color 130ms ease;
|
|
|
|
}
|
2021-09-15 03:21:30 +12:00
|
|
|
|
|
|
|
@media (max-width: 640px) {
|
|
|
|
.desktop {
|
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
}
|
2021-05-10 23:28:54 +12:00
|
|
|
</style>
|