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); + } } }