Skip to content

Commit 6fb72c4

Browse files
soundproofbootsoundproofboot
committed
docs(vue): add context to code blocks and small changes to surrounding text
1 parent 3635891 commit 6fb72c4

File tree

1 file changed

+133
-31
lines changed

1 file changed

+133
-31
lines changed

‎docs/vue/your-first-app/7-live-reload.md‎

Lines changed: 133 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,18 @@ $ ionic cap run android -l --external
2525
The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device.
2626

2727
## Deleting Photos
28+
With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo.
2829

29-
With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2Page.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
30+
Open `Tab2Page.vue` and add `actionSheetController` to the imports from `@ionic/vue`. We also need to add a reference to the `deletePhoto` method, which we'll create soon in `usePhotoGallery()`:
31+
```html
32+
<template>
33+
<!-- template code -->
34+
</template>
3035

31-
```tsx
36+
<script setup lang="ts">
37+
import { camera, trash, close } from 'ionicons/icons';
3238
import {
39+
// CHANGE: Add the `actionSheetController` import.
3340
actionSheetController,
3441
IonPage,
3542
IonHeader,
@@ -44,24 +51,80 @@ import {
4451
IonRow,
4552
IonCol,
4653
} from '@ionic/vue';
47-
// other imports
48-
```
54+
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
4955
50-
Next, reference the `deletePhoto` function, which we'll create soon:
51-
52-
```tsx
56+
// CHANGE: Add reference to the `deletePhoto` method.
5357
const { photos, takePhoto, deletePhoto } = usePhotoGallery();
58+
</script>
5459
```
5560

5661
When a user clicks/taps on an image, we will show the action sheet. Add a click handler to the `<ion-img>` element:
5762

5863
```html
59-
<ion-img :src="photo.webviewPath" @click="showActionSheet(photo)"></ion-img>
64+
<template>
65+
<ion-page>
66+
<ion-header>
67+
<ion-toolbar>
68+
<ion-title>Photo Gallery</ion-title>
69+
</ion-toolbar>
70+
</ion-header>
71+
<ion-content :fullscreen="true">
72+
<ion-header collapse="condense">
73+
<ion-toolbar>
74+
<ion-title size="large">Photo Gallery</ion-title>
75+
</ion-toolbar>
76+
</ion-header>
77+
<ion-grid>
78+
<ion-row>
79+
<ion-col size="6" :key="photo.filepath" v-for="photo in photos">
80+
<!-- CHANGE: Add a click event listener to each image. -->
81+
<ion-img :src="photo.webviewPath" @click="showActionSheet(photo)"></ion-img>
82+
</ion-col>
83+
</ion-row>
84+
</ion-grid>
85+
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
86+
<ion-fab-button @click="takePhoto()">
87+
<ion-icon :icon="camera"></ion-icon>
88+
</ion-fab-button>
89+
</ion-fab>
90+
</ion-content>
91+
</ion-page>
92+
</template>
93+
94+
<script setup lang="ts">
95+
// script setup code
96+
</script>
6097
```
6198

62-
Next, within `script setup`, call the `create` function to open a dialog with the option to either delete the selected photo or cancel (close) the dialog:
99+
Next, within `script setup`, create a new function called `showActionSheet`. `showActionSheet` will call the `create` method on the `actionSheetController` to open a dialog with the option to either delete the selected photo or cancel (close) the dialog:
63100

64-
```tsx
101+
```html
102+
<template>
103+
<!-- template code -->
104+
</template>
105+
106+
<script setup lang="ts">
107+
import { camera, trash, close } from 'ionicons/icons';
108+
import {
109+
actionSheetController,
110+
IonPage,
111+
IonHeader,
112+
IonFab,
113+
IonFabButton,
114+
IonIcon,
115+
IonToolbar,
116+
IonTitle,
117+
IonContent,
118+
IonGrid,
119+
IonRow,
120+
IonCol,
121+
IonImg,
122+
} from '@ionic/vue';
123+
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
124+
125+
const { photos, takePhoto, deletePhoto } = usePhotoGallery();
126+
127+
// CHANGE: Add the `showActionSheet` function.
65128
const showActionSheet = async (photo: UserPhoto) => {
66129
const actionSheet = await actionSheetController.create({
67130
header: 'Photos',
@@ -86,22 +149,71 @@ const showActionSheet = async (photo: UserPhoto) => {
86149
});
87150
await actionSheet.present();
88151
};
152+
</script>
89153
```
90154

91-
Next, we need to implement the `deletePhoto` method in the `usePhotoGallery` function. Open the file then add:
155+
Next, open `usePhotoGallery.ts`. We need to implement the `deletePhoto` method in the `usePhotoGallery` function. We also need to update the return statement to include `deletePhoto`:
92156

93157
```tsx
94-
const deletePhoto = async (photo: UserPhoto) => {
95-
// Remove this photo from the Photos reference data array
96-
photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
97-
98-
// delete photo file from filesystem
99-
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
100-
await Filesystem.deleteFile({
101-
path: filename,
102-
directory: Directory.Data,
103-
});
158+
import { ref, onMounted, watch } from 'vue';
159+
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
160+
import { Filesystem, Directory } from '@capacitor/filesystem';
161+
import { Preferences } from '@capacitor/preferences';
162+
import { isPlatform } from '@ionic/vue';
163+
import { Capacitor } from '@capacitor/core';
164+
165+
export const usePhotoGallery = () => {
166+
const PHOTO_STORAGE = 'photos';
167+
const photos = ref<UserPhoto[]>([]);
168+
169+
const takePhoto = async () => {
170+
// Same old code from before.
171+
};
172+
173+
const convertBlobToBase64 = (blob: Blob) => {
174+
// Same old code from before.
175+
};
176+
177+
const cachePhotos = () => {
178+
// Same old code from before.
179+
};
180+
181+
const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
182+
// Same old code from before.
183+
};
184+
185+
const loadSaved = async () => {
186+
// Same old code from before.
187+
};
188+
189+
// CHANGE: Add the `deletePhoto` method.
190+
const deletePhoto = async (photo: UserPhoto) => {
191+
// Remove this photo from the Photos reference data array
192+
photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
193+
194+
// delete photo file from filesystem
195+
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
196+
await Filesystem.deleteFile({
197+
path: filename,
198+
directory: Directory.Data,
199+
});
200+
};
201+
202+
onMounted(loadSaved);
203+
watch(photos, cachePhotos);
204+
205+
// CHANGE: Add `deletePhoto` to the return statement.
206+
return {
207+
photos,
208+
takePhoto,
209+
deletePhoto
210+
};
104211
};
212+
213+
export interface UserPhoto {
214+
filepath: string;
215+
webviewPath?: string;
216+
}
105217
```
106218

107219
The selected photo is removed from the `photos` array first, then we delete the photo file using the Filesystem API.
@@ -119,16 +231,6 @@ const cachePhotos = () => {
119231
watch(photos, cachePhotos);
120232
```
121233

122-
Finally, return the `deletePhoto` function:
123-
124-
```tsx
125-
return {
126-
photos,
127-
takePhoto,
128-
deletePhoto,
129-
};
130-
```
131-
132234
Save this file, then tap on a photo again and choose the "Delete" option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪
133235

134236
In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices.

0 commit comments

Comments
 (0)