From 421ea0222f9e1201ea6b21e20a1de37da2bc9645 Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Tue, 14 Jul 2020 17:32:49 -0600 Subject: [PATCH] Update ComposeModal.vue, add media tagging --- .../assets/js/components/ComposeModal.vue | 119 ++++++++++++++++-- 1 file changed, 109 insertions(+), 10 deletions(-) diff --git a/resources/assets/js/components/ComposeModal.vue b/resources/assets/js/components/ComposeModal.vue index c72e85304..65eddaf50 100644 --- a/resources/assets/js/components/ComposeModal.vue +++ b/resources/assets/js/components/ComposeModal.vue @@ -254,9 +254,9 @@ - +
+

Tag people NEW

+

Add location

@@ -269,9 +269,10 @@

- Visibility: {{visibilityTag}} + Audience - Edit + {{visibilityTag}} +

@@ -293,7 +294,42 @@
-

This feature is not available yet.

+ + +

You can tag {{10 - taggedUsernames.length}} more {{taggedUsernames.length == 9 ? 'person' : 'people'}}!

+

Tagged People

+
+
+
+ +
+ {{tag.name}} +
+
+
+ + +
+
+
+

Search usernames to tag.

+
+
+

When you tag someone, they are sent a notification.
For more information on tagging, click here.

+
+
+

Tagging someone is like mentioning them, with the option to make it private between you.

+

+ You can choose to tag someone in public or private mode. Public mode will allow others to see who you tagged in the post and private mode tagged users will not be shown to others. +

@@ -538,6 +574,7 @@ export default { composeTextLength: 0, nsfw: false, filters: [], + currentFilter: false, ids: [], media: [], carouselCursor: 0, @@ -560,7 +597,6 @@ export default { zoom: 0 }, - taggedUsernames: false, namedPages: [ 'cropPhoto', 'tagPeople', @@ -573,9 +609,12 @@ export default { 'mediaMetadata', 'addToStory', 'editMedia', - 'cameraRoll' + 'cameraRoll', + 'tagPeopleHelp' ], - cameraRollMedia: [] + cameraRollMedia: [], + taggedUsernames: [], + taggedPeopleSearch: null } }, @@ -673,6 +712,7 @@ export default { toggleFilter(e, filter) { this.media[this.carouselCursor].filter_class = filter; + this.currentFilter = filter; }, deleteMedia() { @@ -727,7 +767,8 @@ export default { visibility: this.visibility, cw: this.nsfw, comments_disabled: this.commentsDisabled, - place: this.place + place: this.place, + tagged: this.taggedUsernames }; axios.post('/api/local/status/compose', data) .then(res => { @@ -766,6 +807,10 @@ export default { this.page = 2; break; + case 'tagPeopleHelp': + this.showTagCard(); + break; + default: this.namedPages.indexOf(this.page) != -1 ? this.page = 3 : this.page--; break; @@ -803,6 +848,15 @@ export default { break; case 2: + if(this.currentFilter) { + if(window.confirm('Are you sure you want to apply this filter?')) { + this.applyFilterToMedia(); + this.page++; + } + } else { + this.page++; + } + break; case 3: this.page++; break; @@ -823,6 +877,11 @@ export default { this.page = 'tagPeople'; }, + showTagHelpCard() { + this.pageTitle = 'About Tag People'; + this.page = 'tagPeopleHelp'; + }, + showLocationCard() { this.pageTitle = 'Add Location'; this.page = 'addLocation'; @@ -909,7 +968,47 @@ export default { this.cameraRollMedia = res.data; }); }, + applyFilterToMedia() { + // this is where the magic happens + }, + + tagSearch(input) { + if (input.length < 1) { return []; }; + let self = this; + let results = []; + return axios.get('/api/local/compose/tag/search', { + params: { + q: input + } + }).then(res => { + //return res.data; + return res.data.filter(d => { + return self.taggedUsernames.filter(r => { + return r.id == d.id; + }).length == 0; + }); + }); + }, + + getTagResultValue(result) { + return '@' + result.name; + }, + + onTagSubmitLocation(result) { + if(this.taggedUsernames.filter(r => { + return r.id == result.id; + }).length) { + return; + } + this.taggedUsernames.push(result); + this.$refs.autocomplete.value = ''; + return; + }, + + untagUsername(index) { + this.taggedUsernames.splice(index, 1); + } } }