WIP PWA for Grain
feat: add delete gallery functionality with action dialog
+74
-1
+74
-1
src/components/pages/grain-gallery-detail.js
+74
-1
src/components/pages/grain-gallery-detail.js
···
1
1
import { LitElement, html, css } from 'lit';
2
2
import { router } from '../../router.js';
3
3
import { grainApi } from '../../services/grain-api.js';
4
+
import { auth } from '../../services/auth.js';
4
5
import '../templates/grain-feed-layout.js';
5
6
import '../molecules/grain-author-chip.js';
6
7
import '../organisms/grain-image-carousel.js';
···
8
9
import '../organisms/grain-comment-list.js';
9
10
import '../atoms/grain-spinner.js';
10
11
import '../atoms/grain-icon.js';
12
+
import '../organisms/grain-action-dialog.js';
13
+
14
+
const DELETE_GALLERY_MUTATION = `
15
+
mutation DeleteGallery($rkey: String!) {
16
+
deleteSocialGrainGallery(rkey: $rkey) {
17
+
uri
18
+
}
19
+
}
20
+
`;
11
21
12
22
export class GrainGalleryDetail extends LitElement {
13
23
static properties = {
···
15
25
rkey: { type: String },
16
26
_gallery: { state: true },
17
27
_loading: { state: true },
18
-
_error: { state: true }
28
+
_error: { state: true },
29
+
_menuOpen: { state: true },
30
+
_deleting: { state: true }
19
31
};
20
32
21
33
static styles = css`
···
66
78
text-align: center;
67
79
color: var(--color-error);
68
80
}
81
+
.header-spacer {
82
+
flex: 1;
83
+
}
84
+
.menu-button {
85
+
display: flex;
86
+
align-items: center;
87
+
justify-content: center;
88
+
background: none;
89
+
border: none;
90
+
padding: var(--space-sm);
91
+
margin-right: calc(-1 * var(--space-sm));
92
+
cursor: pointer;
93
+
color: var(--color-text-primary);
94
+
}
69
95
`;
70
96
71
97
constructor() {
···
73
99
this._gallery = null;
74
100
this._loading = true;
75
101
this._error = null;
102
+
this._menuOpen = false;
103
+
this._deleting = false;
76
104
}
77
105
78
106
connectedCallback() {
···
120
148
});
121
149
}
122
150
151
+
get #isOwner() {
152
+
return auth.user?.handle === this.handle;
153
+
}
154
+
155
+
#handleMenuOpen() {
156
+
this._menuOpen = true;
157
+
}
158
+
159
+
#handleMenuClose() {
160
+
this._menuOpen = false;
161
+
}
162
+
163
+
async #handleAction(e) {
164
+
if (e.detail.action === 'delete') {
165
+
await this.#handleDelete();
166
+
}
167
+
}
168
+
169
+
async #handleDelete() {
170
+
this._deleting = true;
171
+
try {
172
+
const client = auth.getClient();
173
+
await client.mutate(DELETE_GALLERY_MUTATION, { rkey: this.rkey });
174
+
router.push(`/profile/${this.handle}`);
175
+
} catch (err) {
176
+
console.error('Failed to delete gallery:', err);
177
+
this._error = 'Failed to delete gallery. Please try again.';
178
+
} finally {
179
+
this._deleting = false;
180
+
}
181
+
}
182
+
123
183
render() {
124
184
return html`
125
185
<grain-feed-layout>
···
127
187
<button class="back-button" @click=${this.#handleBack}>
128
188
<grain-icon name="back" size="20"></grain-icon>
129
189
</button>
190
+
<div class="header-spacer"></div>
191
+
${this.#isOwner ? html`
192
+
<button class="menu-button" @click=${this.#handleMenuOpen}>
193
+
<grain-icon name="ellipsis" size="20"></grain-icon>
194
+
</button>
195
+
` : ''}
130
196
</div>
131
197
132
198
${this._loading ? html`<grain-spinner></grain-spinner>` : ''}
···
166
232
totalCount=${this._gallery.commentCount}
167
233
></grain-comment-list>
168
234
` : ''}
235
+
236
+
<grain-action-dialog
237
+
?open=${this._menuOpen}
238
+
.actions=${[{ label: this._deleting ? 'Deleting...' : 'Delete', action: 'delete', danger: true }]}
239
+
@action=${this.#handleAction}
240
+
@close=${this.#handleMenuClose}
241
+
></grain-action-dialog>
169
242
</grain-feed-layout>
170
243
`;
171
244
}