diff --git a/components/NotesCard.vue b/components/NotesCard.vue index e23e760..9a3b827 100644 --- a/components/NotesCard.vue +++ b/components/NotesCard.vue @@ -124,7 +124,7 @@
- + @@ -141,7 +141,7 @@ > @@ -248,9 +248,9 @@ import CategoryPills from '~/components/CategoryPills.vue' @Component({ components: {DeleteNotesModal, AvatarBar, CategoryPills}, mounted() { - if (this.note.images && this.note.images.length) { + if (this.note.coverImages && this.note.coverImages.length) { this.image = new Image() - this.image.src = this.note.images[0] + this.image.src = this.note.coverImages[0]?.imageURL // this.note.userP this.hasImage = true } @@ -269,6 +269,9 @@ export default class NotesCard extends Vue { deleteNotesOpen = false + get coverImages() { + return this.note.coverImages?.map((img) => img?.imageURL) || [] + } OpenDeleteModal() { this.deleteNotesOpen = true } @@ -292,7 +295,6 @@ export default class NotesCard extends Vue { async toggleLike(id: string, time?: any) { if (this.disabled) return - const a = this.$vs.loading() await notesStore.ToggleLikedNote(id) a.close() diff --git a/mixins/PasteImagesMixin.ts b/mixins/PasteImagesMixin.ts index f64db81..cfdffcc 100644 --- a/mixins/PasteImagesMixin.ts +++ b/mixins/PasteImagesMixin.ts @@ -1,40 +1,19 @@ import {Component, Vue} from 'nuxt-property-decorator' import functions from '~/plugins/firebaseFunctions' import type {StoredImage} from '~/types/firebaseTypes' +import UploadImage from '~/utils/uploadImage' @Component({}) export default class PasteImagesMixin extends Vue { images: StoredImage[] = [] contents!: string async uploadImage(image: File, evt?: any) { - const reader = new FileReader() - const promise = new Promise<{imageURL : string, fileName : string}>((resolve, reject) => { - reader.addEventListener('load', async () => { - const base64image = reader.result - try { - const imageResponse = await functions.httpsCallable( - 'functionPostImage' - )({name: image.name, image: base64image}) - - const imageURL = imageResponse.data.imageURL as string - const fileName = imageResponse.data.fileName as string - if (evt) { - this.insertAtCursor(evt.target, `\n![image](${imageURL})\n`) - } - - this.images.push({ - imageURL, - fileName - }) - return resolve({imageURL, fileName}) - } catch (error) { - console.log({error}) - return reject(error) - } - }) - }) - reader.readAsDataURL(image) - return promise + const imageUpload = await UploadImage(image) + if (evt) { + this.insertAtCursor(evt.target, `\n![image](${imageUpload.imageURL})\n`) + } + this.images.push(imageUpload) + return imageUpload; } async onPaste(evt: any) { diff --git a/screens/notes/PostNotesModal.vue b/screens/notes/PostNotesModal.vue index 388d1ac..3fcb811 100644 --- a/screens/notes/PostNotesModal.vue +++ b/screens/notes/PostNotesModal.vue @@ -47,7 +47,7 @@ class="block mb-3 w-6 mt-3 w-full lg:w-1/2" placeholder="Subject" v-model="subjectSelect" - :disabled="group" + :disabled="!!group" >
@@ -70,7 +70,7 @@ class="block mb-3 w-6 mt-3 w-full lg:w-1/2" placeholder="Grade" v-model="gradeSelect" - :disabled="group" + :disabled="!!group" > + +
group.approved) + return groupsStore.userGroups.filter((group) => group.approved) } characterLimit = 5000 @@ -229,7 +234,9 @@ export default class PostNotesModal extends mixins(ValidateImage, PasteImage) { } readonly GradeList = GradeList.filter((v) => v !== 'ALL') - Cancel() {} + Cancel() { + // this.validateImageType() + } // make this a mixin getIcon(subject: SubjectGroup_O | Subject_O) { return SubjectIconList[subject] @@ -252,6 +259,19 @@ export default class PostNotesModal extends mixins(ValidateImage, PasteImage) { return windowStore.isLargeScreen } + get fileRefs() { + return ( + (this.$refs.postImageUpload as Vue & { + filesx: (File & {remove : boolean})[] + srcs: imageSrc[] + itemRemove: any[] + }) || { + filesx: [], + srcs: [], + itemRemove: [] + } + ) + } async PreviewNote() { if (this.formErrors) { this.$vs.notification({ @@ -261,6 +281,18 @@ export default class PostNotesModal extends mixins(ValidateImage, PasteImage) { return } + const uploadFile = [...this.fileRefs.filesx].filter(image => !image.remove) // Clones the list so that its not mutatable + + const fileImageSrcs = [...this.fileRefs.srcs] // Clone list and check that it exists + .filter((v) => !v.remove) // Remove removed images + .map((v) => ({ + // Turn them into StoredFile type + fileName: '', + imageURL: v.src || '' + })) + + console.log({uploadFile}); + notesStore.SET_UPLOAD_IMAGES(uploadFile) const previewNote = new Note({ title: this.title, uid: authStore.user?.uid!, @@ -272,8 +304,10 @@ export default class PostNotesModal extends mixins(ValidateImage, PasteImage) { subject: this.subjectSelect as Subject_O, grade: this.gradeSelect as Grade_O, contents: this.contents, - storedImages: [...this.images] + storedImages: [...this.images], + coverImages: fileImageSrcs }) + if (this.schoolSelect != 'All Schools') previewNote.school = this.schoolSelect @@ -290,7 +324,8 @@ export default class PostNotesModal extends mixins(ValidateImage, PasteImage) { !this.title || this.subjectSelect === '' || this.gradeSelect === '' || - !this.contents + !this.contents || + !this.fileRefs.filesx.filter(image => !image.remove).every((image) => this.validateImageType(image)) ) } } diff --git a/store/notes.ts b/store/notes.ts index 7ddd2db..06afc0e 100644 --- a/store/notes.ts +++ b/store/notes.ts @@ -20,6 +20,7 @@ import { import { School_O } from '~/types/schools' import functions from '~/plugins/firebaseFunctions' import { HourDiff } from '~/utils/time' +import UploadImage from '~/utils/uploadImage' let LastVisible: store.QueryDocumentSnapshot | null = null @@ -314,11 +315,13 @@ export default class NotesModule extends VuexModule { } return }) + + const uploadImages = await Promise.all(this.UploadImages.map(file => UploadImage(file))); await Promise.all(deleteImages || []) const newImages = note.storedImages?.filter((value) => note.contents?.includes(value.imageURL) ) - const newNote: Note = Object.assign({}, note, { storedImages: newImages }) + const newNote: Note = {...note, storedImages: newImages, coverImages : uploadImages }; if (note.id) { return await firestore .collection('notes') diff --git a/types/notes.ts b/types/notes.ts index 82ae60d..74a627e 100644 --- a/types/notes.ts +++ b/types/notes.ts @@ -19,6 +19,7 @@ export interface Note_t { images?: string[] contents : string storedImages?: StoredImage[] + coverImages ?: StoredImage[] school ?: School_O; createdAt: Date @@ -44,6 +45,8 @@ export interface Note_t_F { images?: string[] contents : string storedImages?: StoredImage[] + coverImages ?: StoredImage[] + school ?: School_O; createdAt: Date_t_F diff --git a/utils/uploadImage.ts b/utils/uploadImage.ts new file mode 100644 index 0000000..5be23b7 --- /dev/null +++ b/utils/uploadImage.ts @@ -0,0 +1,28 @@ +import functions from '~/plugins/firebaseFunctions' + +const UploadImage = async (image: File) => { + const reader = new FileReader() + const promise = new Promise<{imageURL: string; fileName: string}>( + (resolve, reject) => { + reader.addEventListener('load', async () => { + const base64image = reader.result + try { + const imageResponse = await functions.httpsCallable( + 'functionPostImage' + )({name: image.name, image: base64image}) + + const imageURL = imageResponse.data.imageURL as string + const fileName = imageResponse.data.fileName as string + return resolve({imageURL, fileName}) + } catch (error) { + console.log({error}) + return reject(error) + } + }) + } + ) + reader.readAsDataURL(image) + return promise +} + +export default UploadImage; \ No newline at end of file