Skip to content

Commit badf752

Browse files
ItzNotABugItzNotABug
authored
Merge pull request #2079 from appwrite/remove-col-on-attribute
Minor patch for column selection and bottom promo modal
2 parents ffd5862 + daf8e0d commit badf752

File tree

3 files changed

+49
-57
lines changed

3 files changed

+49
-57
lines changed

‎src/lib/components/bottomModalAlert.svelte

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { hideNotification, shouldShowNotification } from '$lib/helpers/notifications';
44
import { app } from '$lib/stores/app';
55
import {
6-
type BottomModalAlertAction,
76
type BottomModalAlertItem,
87
bottomModalAlertsConfig,
98
dismissBottomModalAlert,
@@ -20,18 +19,18 @@
2019
import { goto } from '$app/navigation';
2120
import { Typography } from '@appwrite.io/pink-svelte';
2221
23-
let currentIndex = 0;
24-
let openModalOnMobile = false;
22+
let currentIndex = $state(0);
23+
let openModalOnMobile = $state(false);
2524
26-
function getPageScope(pathname: string) {
27-
const isProjectPage = pathname.includes('project-[region]-[project]');
28-
const isOrganizationPage = pathname.includes('organization-[organization]');
25+
function getPageScope(route: string) {
26+
const isProjectPage = route.includes('project-[region]-[project]');
27+
const isOrganizationPage = route.includes('organization-[organization]');
2928
3029
return { isProjectPage, isOrganizationPage };
3130
}
3231
33-
function filterModalAlerts(alerts: BottomModalAlertItem[], pathname: string) {
34-
const { isProjectPage, isOrganizationPage } = getPageScope(pathname);
32+
function filterModalAlerts(alerts: BottomModalAlertItem[], route: string) {
33+
const { isProjectPage, isOrganizationPage } = getPageScope(route);
3534
3635
return alerts
3736
.sort((a, b) => b.importance - a.importance)
@@ -51,19 +50,32 @@
5150
});
5251
}
5352
54-
$: filteredModalAlerts = filterModalAlerts($bottomModalAlertsConfig.alerts, page.route.id);
53+
const bottomModalAlerts = $derived($bottomModalAlertsConfig.alerts);
5554
56-
$: currentModalAlert = filteredModalAlerts[currentIndex] as BottomModalAlertItem;
55+
const filteredModalAlerts = $derived(filterModalAlerts(bottomModalAlerts, page.route.id));
5756
58-
$: hasOnlyPrimaryCta = typeof currentModalAlert?.learnMore === 'undefined';
57+
const currentModalAlert = $derived(filteredModalAlerts[currentIndex] as BottomModalAlertItem);
5958
60-
function handleClose() {
61-
filteredModalAlerts.forEach((alert) => {
59+
const hasOnlyPrimaryCta = $derived(typeof currentModalAlert?.learnMore === 'undefined');
60+
61+
const isOnOnboarding = $derived(page.route.id.includes('(console)/onboarding'));
62+
63+
function handleClose(id: string | null = null) {
64+
const alerts = !id
65+
? filteredModalAlerts
66+
: filteredModalAlerts.filter((alert) => alert.id === id);
67+
68+
alerts.forEach((alert) => {
6269
const modalAlert = alert;
6370
dismissBottomModalAlert(modalAlert.id);
6471
hideNotification(modalAlert.id, { coolOffPeriod: 24 * 365 });
6572
if (modalAlert.closed) modalAlert.closed();
6673
});
74+
75+
// reset `currentIndex` if we removed the last item
76+
if (currentIndex >= filteredModalAlerts.length - 1) {
77+
currentIndex = Math.max(0, filteredModalAlerts.length - 2);
78+
}
6779
}
6880
6981
function showNext() {
@@ -114,8 +126,13 @@
114126
}
115127
116128
// the button component cannot have both href and on:click!
117-
function triggerWindowLink(alertAction: BottomModalAlertAction, event?: string) {
129+
function triggerWindowLink(alert: BottomModalAlertItem, event?: string) {
130+
const alertAction = alert.cta;
118131
const shouldShowUpgrade = showUpgrade();
132+
133+
// for correct event tracking after removal
134+
const currentModalId = currentModalAlert.id;
135+
119136
const url = shouldShowUpgrade
120137
? $upgradeURL
121138
: alertAction.link({
@@ -130,14 +147,12 @@
130147
}
131148
132149
if (alertAction?.hideOnClick === true) {
133-
// be careful of this one.
134-
// once clicked, its gone!
135-
handleClose();
150+
handleClose(alert.id); // gone!
136151
}
137152
138153
trackEvent(Click.PromoClick, {
139-
promo: currentModalAlert.id,
140-
type: shouldShowUpgrade ? 'upgrade' : (event ?? `cta_click_${currentModalAlert.id}`)
154+
promo: currentModalId,
155+
type: shouldShowUpgrade ? 'upgrade' : (event ?? `cta_click_${currentModalId}`)
141156
});
142157
}
143158
@@ -156,12 +171,10 @@
156171
}
157172
}
158173
159-
onMount(() => {
160-
addBottomModalAlerts();
161-
});
174+
onMount(addBottomModalAlerts);
162175
</script>
163176

164-
{#if filteredModalAlerts.length > 0 && currentModalAlert && !page.url.pathname.includes('console/onboarding')}
177+
{#if !isOnOnboarding && filteredModalAlerts.length > 0 && currentModalAlert}
165178
{@const shouldShowUpgrade = showUpgrade()}
166179
<div class="main-alert-wrapper is-not-mobile">
167180
<div class="alert-container">
@@ -170,7 +183,7 @@
170183
<button
171184
aria-label="Close modal"
172185
class="icon-inline-tag"
173-
on:click={() => handleClose()}>
186+
onclick={() => handleClose()}>
174187
<svg
175188
xmlns="http://www.w3.org/2000/svg"
176189
width="20"
@@ -209,14 +222,14 @@
209222
aria-label="Previous"
210223
class="icon-cheveron-left"
211224
style:cursor={currentIndex !== 0 ? 'pointer' : undefined}
212-
on:click={showPrevious}
225+
onclick={showPrevious}
213226
disabled={currentIndex === 0}
214227
class:active={currentIndex > 0}></button>
215228

216229
<button
217230
aria-label="Next"
218231
class="icon-cheveron-right"
219-
on:click={showNext}
232+
onclick={showNext}
220233
style:cursor={currentIndex !==
221234
filteredModalAlerts.length - 1
222235
? 'pointer'
@@ -248,7 +261,7 @@
248261
fullWidthMobile
249262
secondary={!hasOnlyPrimaryCta}
250263
class={`${hasOnlyPrimaryCta ? 'only-primary-cta' : ''}`}
251-
on:click={() => triggerWindowLink(currentModalAlert.cta)}>
264+
on:click={() => triggerWindowLink(currentModalAlert)}>
252265
{currentModalAlert.cta.text}
253266
</Button>
254267

@@ -281,7 +294,7 @@
281294
<button
282295
aria-label="Close modal"
283296
class="icon-inline-tag"
284-
on:click={() => handleClose()}>
297+
onclick={() => handleClose()}>
285298
<svg
286299
xmlns="http://www.w3.org/2000/svg"
287300
width="20"
@@ -322,14 +335,14 @@
322335
style:cursor={currentIndex !== 0
323336
? 'pointer'
324337
: undefined}
325-
on:click={showPrevious}
338+
onclick={showPrevious}
326339
disabled={currentIndex === 0}
327340
class:active={currentIndex > 0}></button>
328341

329342
<button
330343
aria-label="Next"
331344
class="icon-cheveron-right"
332-
on:click={showNext}
345+
onclick={showNext}
333346
style:cursor={currentIndex !==
334347
filteredModalAlerts.length - 1
335348
? 'pointer'
@@ -364,7 +377,7 @@
364377
fullWidthMobile
365378
on:click={() => {
366379
openModalOnMobile = false;
367-
triggerWindowLink(currentModalAlert.cta);
380+
triggerWindowLink(currentModalAlert);
368381
}}>
369382
{shouldShowUpgrade
370383
? 'Upgrade plan'
@@ -394,13 +407,13 @@
394407
{:else}
395408
{@const mobileConfig = getMobileWindowConfig()}
396409
<!-- we don't need keydown because we show this only on mobile -->
397-
<!-- svelte-ignore a11y-click-events-have-key-events -->
410+
<!-- svelte-ignore a11y_click_events_have_key_events -->
398411
<div
399412
tabindex="0"
400413
role="button"
401414
class:showing={!openModalOnMobile}
402415
class="card notification-card u-width-full-line"
403-
on:click={() => {
416+
onclick={() => {
404417
if (mobileConfig.cta) {
405418
// navigate manually!
406419
triggerMobileWindowLink();
@@ -413,7 +426,7 @@
413426
<Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
414427
{currentModalAlert.title}
415428
</Typography.Text>
416-
<button on:click={hideAllModalAlerts} aria-label="Close">
429+
<button onclick={hideAllModalAlerts} aria-label="Close">
417430
<span class="icon-x"></span>
418431
</button>
419432
</div>

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
<script lang="ts">
2-
import { goto, invalidate } from '$app/navigation';
2+
import { goto } from '$app/navigation';
33
import { base } from '$app/paths';
44
import { page } from '$app/state';
55
import { InputChoice } from '$lib/elements/forms';
66
import { addNotification } from '$lib/stores/notifications';
77
import { collection } from '../store';
88
import type { Attributes } from '../store';
99
import { sdk } from '$lib/stores/sdk';
10-
import { Dependencies } from '$lib/constants';
1110
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
1211
import { isRelationship } from '../document-[document]/attributes/store';
1312
import Confirm from '$lib/components/confirm.svelte';
14-
import { preferences } from '$lib/stores/preferences';
1513
1614
export let showDelete = false;
1715
export let selectedAttribute: Attributes;
@@ -20,23 +18,12 @@
2018
let error: string;
2119
let checked = false;
2220
23-
async function updateCollectionColumns() {
24-
const selectedColumns = preferences
25-
.getCustomCollectionColumns($collection.$id)
26-
.filter((attribute) => attribute != selectedAttribute.key);
27-
28-
await preferences.setCustomCollectionColumns($collection.$id, selectedColumns);
29-
await invalidate(Dependencies.COLLECTION);
30-
}
31-
3221
async function handleDelete() {
3322
try {
3423
await sdk
3524
.forProject(page.params.region, page.params.project)
3625
.databases.deleteAttribute(databaseId, $collection.$id, selectedAttribute.key);
3726
38-
await updateCollectionColumns();
39-
4027
showDelete = false;
4128
addNotification({
4229
type: 'success',

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
import { base } from '$app/paths';
1010
import type { Attributes } from './store';
1111
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
12-
import { preferences } from '$lib/stores/preferences';
1312
1413
export let showCreate = false;
1514
export let selectedOption: Option['name'] = null;
@@ -24,17 +23,10 @@
2423
};
2524
let error: string;
2625
27-
async function updateCollectionColumns() {
28-
const selectedColumns = preferences.getCustomCollectionColumns(collectionId);
29-
selectedColumns.push(key ?? data?.key);
30-
await preferences.setCustomCollectionColumns(collectionId, selectedColumns);
31-
await invalidate(Dependencies.COLLECTION);
32-
}
33-
3426
async function submit() {
3527
try {
3628
await $option.create(databaseId, collectionId, key, data);
37-
await updateCollectionColumns();
29+
await invalidate(Dependencies.COLLECTION);
3830
3931
if (!page.url.pathname.includes('attributes')) {
4032
await goto(

0 commit comments

Comments
 (0)