Skip to content

Add API Resource, Delete feature and other changes. #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joligoms wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add API Resource, Delete feature and other changes. #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8227a20
Add more CSS to the component
tomasgoncalves02 Jul 6, 2021
73510a3
Readjust NoteForm component
tomasgoncalves02 Jul 6, 2021
e14d48b
Fix positionings in NoteForm component
joligoms Jul 6, 2021
fa3a13f
Add API Resource, Delete feature and other changes
joligoms Jul 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
719 changes: 562 additions & 157 deletions dist/js/field.js
View file
Open in desktop

Large diffs are not rendered by default.

61 changes: 56 additions & 5 deletions resources/js/components/DetailField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<!-- <panel-item :field="field" />-->
<div>
<h3 class="mb-4 text-lg font-semibold text-gray-900">Comments</h3>
<notes :notes="notes" @reply-to="defineFormData($event)"></notes>
<notes :notes="notes" @reply-to="defineFormData($event)" @delete-note="openDeleteModal($event)"></notes>
<note-form
@note-submit="pushNotes($event)"
@cancel-reply="defineFormData"
Expand All @@ -11,6 +11,11 @@
:reply_to_id="reply_to_id"
:reply_to_name="reply_to_name"
></note-form>
<delete-resource-modal
v-if="deleteModalOpen"
@confirm="confirmDelete"
@close="closeDeleteModal">
</delete-resource-modal>
</div>
</template>

Expand All @@ -21,18 +26,26 @@ import NoteForm from './Notes/NoteForm';
export default {
components: {
Notes,
NoteForm
NoteForm,
},
props: ['resourceName', 'field'],
data() {
return {
popperOptions: {
placement: 'left',
modifiers: {
offset: { offset: '0, 10px' },
},
},
newNote: '',
notes: [],
notesCount: 0,
notable_type: '',
notable_id: '',
reply_to_id: '',
reply_to_name: ''
reply_to_name: '',
deleteModalOpen: false,
deleteId: null
};
},
mounted() {
Expand All @@ -56,7 +69,15 @@ export default {
});
},
pushNotes(data) {
this.notes = data;
if (data.notable_type === 'PDMFC\\NovaNotesField\\Models\\Note') {
const parentNote = this.notes.find(note => note.id === data.notable_id)
if (parentNote) {
parentNote.notes.push(data)
}
} else {
this.notes.push(data)
}

this.notesCount = this.notes.length;
this.notable_id = this.field.notable_id;
this.notable_type = this.field.notable_type;
Expand All @@ -67,8 +88,38 @@ export default {
this.notable_type = data ? data.notable_type : this.field.notable_type;
this.reply_to_id = data ? data.reply_to_id : '';
this.reply_to_name = data ? data.reply_to_name : '';
},
confirmDelete() {
Nova.request()
.delete('/nova-vendor/notes-field/delete', {
params: {
id: this.deleteId
}
})
.then(() => {
this.notes.forEach((note, index) => {
if (note.id === this.deleteId) {
this.notes.splice(index, 1)
} else {
let childIndex = note.notes.findIndex(note => note.id === this.deleteId)
if (childIndex != -1) {
this.notes[index].notes.splice(childIndex, 1)
}
}
})
this.notesCount = this.notes.length
this.closeDeleteModal()
});
},
openDeleteModal(deleteId) {
this.deleteModalOpen = true
this.deleteId = deleteId
},
closeDeleteModal() {
this.deleteModalOpen = false
this.deleteId = null
}
}
},
};
</script>

Expand Down
43 changes: 40 additions & 3 deletions resources/js/components/IndexField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div
class="overflow-y-auto flex-grow flex px-4 py-5"
>
<notes :notes="notes" @reply-to="defineFormData($event)"></notes>
<notes :notes="notes" @reply-to="defineFormData($event)" @delete-note="openDeleteModal($event)"></notes>
</div>
<div class="bg-gray-50 p-4">
<note-form
Expand Down Expand Up @@ -49,6 +49,11 @@
{{ notesCount }}
</div>
</div>
<delete-resource-modal
v-if="deleteModalOpen"
@confirm="confirmDelete"
@close="closeDeleteModal">
</delete-resource-modal>
</popper>
</template>

Expand Down Expand Up @@ -79,7 +84,9 @@ export default {
notable_type: '',
notable_id: '',
reply_to_id: '',
reply_to_name: ''
reply_to_name: '',
deleteModalOpen: false,
deleteId: null
};
},
mounted() {
Expand Down Expand Up @@ -125,8 +132,38 @@ export default {
this.notable_type = data ? data.notable_type : this.field.notable_type;
this.reply_to_id = data ? data.reply_to_id : '';
this.reply_to_name = data ? data.reply_to_name : '';
},
confirmDelete() {
Nova.request()
.delete('/nova-vendor/notes-field/delete', {
params: {
id: this.deleteId
}
})
.then(() => {
this.notes.forEach((note, index) => {
if (note.id === this.deleteId) {
this.notes.splice(index, 1)
} else {
let childIndex = note.notes.findIndex(note => note.id === this.deleteId)
if (childIndex != -1) {
this.notes[index].notes.splice(childIndex, 1)
}
}
})
this.notesCount = this.notes.length
this.closeDeleteModal()
});
},
openDeleteModal(deleteId) {
this.deleteModalOpen = true
this.deleteId = deleteId
},
closeDeleteModal() {
this.deleteModalOpen = false
this.deleteId = null
}
}
},
};
</script>

Expand Down
11 changes: 11 additions & 0 deletions resources/js/components/Notes/InputField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
type="text"
:class="[errorClass, 'py-2 px-3 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-md border']"
:placeholder="placeholder"
ref="inputField"
/>
</template>

Expand All @@ -25,13 +26,23 @@ export default {
},
hasError: {
type: Boolean
},
focused: {
type: Boolean
}
},
methods: {
handleInput(value) {
this.$emit('input', value);
},
},
watch: {
focused() {
if (this.focused) {
this.$refs.inputField.focus()
}
}
},
computed: {
errorClass() {
return this.hasError ? 'border-red-500' : 'border-gray-300';
Expand Down
22 changes: 15 additions & 7 deletions resources/js/components/Notes/Note.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
<template>
<li class="flex text-left bg-indigo overflow-hidden px-4 py-4">
<div class="mr-4 flex-shrink-0">
<li class="flex text-left bg-indigo overflow-hidden px-4 py-4 w-full">
<div class=" mr-4 flex-shrink-0">
<img
class="inline-block h-16 w-16 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
src="https://www.gravatar.com/avatar/8441b1210b3a6c05b68c9f4c315f1590?s=300"
alt=""
/>
</div>
<div>
<div class="flex space-x-2">
<div class="w-full">
<div class="flex">
<h4 class="text-lg font-semibold">{{ data.author ? data.author.name : '-' }}</h4>
<icon-eye-off v-if="data.personal" />
<icon-eye-off v-if="data.personal" class="mx-2" />
<button @click="handleDeleteNote(data.id)" v-if="data.authorizedToDelete" class="ml-auto appearance-none cursor-pointer text-70 hover:text-primary">
<icon>
<icon-delete></icon-delete>
</icon>
</button>
</div>

<p
Expand All @@ -27,7 +32,7 @@
</div>

<div v-if="!isReply" v-for="note in data.notes" class="mt-6 flex">
<note :data=note :key="note.note"></note>
<note :data=note :key="note.note" @delete-note="handleDeleteNote(note.id)"></note>
</div>
</div>

Expand Down Expand Up @@ -66,6 +71,9 @@ export default {
reply_to_id: this.data.id,
reply_to_name: this.data.author ? this.data.author.name : '-'
});
},
handleDeleteNote(noteId) {
this.$emit('delete-note', noteId);
}
},
computed: {
Expand Down
60 changes: 36 additions & 24 deletions resources/js/components/Notes/NoteForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,5 @@
<template lang="html">
<div class="flex flex-col space-y-2">
<toggle v-model="isPrivate">
<template #iconOff>
<icon-eye-solid />
</template>
<template #iconOn>
<icon-eye-off />
</template>
</toggle>
<toggle v-model="richText">
<template #iconOff>
<icon-doc-text-solid />
</template>
<template #iconOn>
<icon-doc-text />
</template>
</toggle>

<div v-if="reply_to_id != ''" class="flex space-x-2">
<p class="self-center font-semibold">Replying to {{ reply_to_name }}</p>
<span @click.stop="emitCancelReply" class="self-center cursor-pointer dim">
Expand All @@ -28,7 +11,7 @@
<div class="flex flex-col space-y-2 " v-if="errors.length > 0">
<p class="text-red-500" v-for="error in errors">{{ error }}</p>
</div>
<div :class="[richText ? 'space-y-4' : 'space-x-4', 'mt-1 flex fleix-wrap flex-row']">
<div class="mt-1 flex flex-wrap flex-row">
<div v-if="richText" class="w-full" >
<trix-note v-model="newNote"></trix-note>
</div>
Expand All @@ -37,13 +20,35 @@
v-model="newNote"
@enter="onSubmit"
:hasError="errors.length > 0"
:focused="reply_to_id != ''"
></input-field>
<a
class="flex-shrink-0 justify-self-center self-center btn btn-default btn-primary text-white cursor-pointer"
@click="onSubmit"
>Send</a
>
<div class="w-full mx-0 flex my-2">
<div class="flex space-x-2">
<toggle v-model="isPrivate">
<template #iconOff>
<icon-eye-solid />
</template>
<template #iconOn>
<icon-eye-off />
</template>
</toggle>
<toggle v-model="richText">
<template #iconOff>
<icon-doc-text-solid />
</template>
<template #iconOn>
<icon-doc-text />
</template>
</toggle>
</div>
<span @click="onSubmit" class="self-center ml-auto cursor-pointer" @mouseover="isHovered=true" @mouseleave="isHovered=false">
<icon-paper-airplane v-if="!isHovered"/>
<icon-paper-airplane-solid v-else/>
</span>
</div>

</div>

</div>
</div>
</template>
Expand All @@ -57,6 +62,8 @@ import IconEyeOff from '../icons/IconEyeOff.vue';
import IconDocTextSolid from '../icons/IconDocTextSolid.vue';
import IconDocText from '../icons/IconDocText.vue';
import XCircle from '../icons/XCircle.vue';
import IconPaperAirplane from '../icons/IconPaperAirplane.vue';
import IconPaperAirplaneSolid from '../icons/IconPaperAirplaneSolid.vue';

export default {
components: {
Expand All @@ -67,13 +74,16 @@ export default {
IconEyeSolid,
IconDocText,
IconDocTextSolid,
XCircle
XCircle,
IconPaperAirplane,
IconPaperAirplaneSolid,
},
props: {
notable_id: {
type: Number,
required: true
},

notable_type: {
type: String,
required: true
Expand All @@ -92,6 +102,7 @@ export default {
newNote: '',
notesCount: 0,
errors: [],
isHovered: false
};
},
methods: {
Expand All @@ -107,6 +118,7 @@ export default {
reply_to_id: this.reply_to_id
})
.then(({ data }) => {
console.log(data);
data.reply_to_id = this.reply_to_id ? this.reply_to_id : undefined;
this.$emit('note-submit', data);
this.newNote = '';
Expand Down
7 changes: 5 additions & 2 deletions resources/js/components/Notes/Notes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template>
<div class="flex flex-grow">
<div v-if="notes.length === 0" class="self-center text-center block w-full">
<h2 class="text-xl font-semibold opacity-50">No notes found...</h2>
<h2 class="text-xl p-52 font-semibold opacity-50">No notes found...</h2>
</div>
<ul class="space-y-4 flex-grow">
<note v-for="note in notes" :data="note" :key="note.note" @reply-to="handleReplyTo($event)"></note>
<note v-for="note in notes" :data="note" :key="note.note" @reply-to="handleReplyTo($event)" @delete-note="handleDeleteNote($event)"></note>
</ul>
</div>
</template>
Expand All @@ -26,6 +26,9 @@ export default {
methods: {
handleReplyTo(data) {
this.$emit('reply-to', data)
},
handleDeleteNote(id) {
this.$emit('delete-note', id)
}
}
}
Expand Down
Loading