fix: apply ESLint rule vue/component-tags-order
This commit is contained in:
iamsivin
@@ -1,26 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
|
||||
>
|
||||
<woot-message-editor
|
||||
v-model="noteContent"
|
||||
class="input--note"
|
||||
:placeholder="$t('NOTES.ADD.PLACEHOLDER')"
|
||||
:enable-suggestions="false"
|
||||
/>
|
||||
<div class="flex justify-end w-full">
|
||||
<woot-button
|
||||
color-scheme="warning"
|
||||
:title="$t('NOTES.ADD.TITLE')"
|
||||
:is-disabled="buttonDisabled"
|
||||
@click="onAdd"
|
||||
>
|
||||
{{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
|
||||
import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
|
||||
@@ -59,6 +36,29 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
|
||||
>
|
||||
<woot-message-editor
|
||||
v-model="noteContent"
|
||||
class="input--note"
|
||||
:placeholder="$t('NOTES.ADD.PLACEHOLDER')"
|
||||
:enable-suggestions="false"
|
||||
/>
|
||||
<div class="flex justify-end w-full">
|
||||
<woot-button
|
||||
color-scheme="warning"
|
||||
:title="$t('NOTES.ADD.TITLE')"
|
||||
:is-disabled="buttonDisabled"
|
||||
@click="onAdd"
|
||||
>
|
||||
{{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input--note {
|
||||
&::v-deep .ProseMirror-menubar {
|
||||
|
||||
@@ -1,55 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
|
||||
>
|
||||
<div class="flex items-end justify-between gap-1 text-xs">
|
||||
<div class="flex items-center">
|
||||
<thumbnail
|
||||
:title="noteAuthorName"
|
||||
:src="noteAuthor.thumbnail"
|
||||
:username="noteAuthorName"
|
||||
size="20px"
|
||||
/>
|
||||
<div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
|
||||
<span class="font-medium text-slate-800 dark:text-slate-100">
|
||||
{{ noteAuthorName }}
|
||||
</span>
|
||||
<span class="text-slate-700 dark:text-slate-100">
|
||||
{{ $t('NOTES.LIST.LABEL') }}
|
||||
</span>
|
||||
<span class="font-medium text-slate-700 dark:text-slate-100">
|
||||
{{ readableTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex invisible actions">
|
||||
<woot-button
|
||||
v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
|
||||
variant="smooth"
|
||||
size="tiny"
|
||||
icon="delete"
|
||||
color-scheme="secondary"
|
||||
@click="toggleDeleteModal"
|
||||
/>
|
||||
</div>
|
||||
<woot-delete-modal
|
||||
v-if="showDeleteModal"
|
||||
:show.sync="showDeleteModal"
|
||||
:on-close="closeDelete"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('DELETE_NOTE.CONFIRM.TITLE')"
|
||||
:message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
|
||||
:confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
|
||||
:reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-dompurify-html="formatMessage(note || '')"
|
||||
class="mt-4 note__content"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
||||
@@ -115,6 +63,58 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
|
||||
>
|
||||
<div class="flex items-end justify-between gap-1 text-xs">
|
||||
<div class="flex items-center">
|
||||
<thumbnail
|
||||
:title="noteAuthorName"
|
||||
:src="noteAuthor.thumbnail"
|
||||
:username="noteAuthorName"
|
||||
size="20px"
|
||||
/>
|
||||
<div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
|
||||
<span class="font-medium text-slate-800 dark:text-slate-100">
|
||||
{{ noteAuthorName }}
|
||||
</span>
|
||||
<span class="text-slate-700 dark:text-slate-100">
|
||||
{{ $t('NOTES.LIST.LABEL') }}
|
||||
</span>
|
||||
<span class="font-medium text-slate-700 dark:text-slate-100">
|
||||
{{ readableTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex invisible actions">
|
||||
<woot-button
|
||||
v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
|
||||
variant="smooth"
|
||||
size="tiny"
|
||||
icon="delete"
|
||||
color-scheme="secondary"
|
||||
@click="toggleDeleteModal"
|
||||
/>
|
||||
</div>
|
||||
<woot-delete-modal
|
||||
v-if="showDeleteModal"
|
||||
:show.sync="showDeleteModal"
|
||||
:on-close="closeDelete"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('DELETE_NOTE.CONFIRM.TITLE')"
|
||||
:message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
|
||||
:confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
|
||||
:reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-dompurify-html="formatMessage(note || '')"
|
||||
class="mt-4 note__content"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// For RTL direction view
|
||||
.app-rtl--wrapper {
|
||||
|
||||
@@ -1,27 +1,3 @@
|
||||
<template>
|
||||
<div>
|
||||
<add-note @add="onAddNote" />
|
||||
<contact-note
|
||||
v-for="note in notes"
|
||||
:id="note.id"
|
||||
:key="note.id"
|
||||
:note="note.content"
|
||||
:user="note.user"
|
||||
:created-at="note.created_at"
|
||||
@edit="onEditNote"
|
||||
@delete="onDeleteNote"
|
||||
/>
|
||||
|
||||
<div v-if="isFetching" class="text-center p-4 text-base">
|
||||
<spinner size="" />
|
||||
<span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
|
||||
</div>
|
||||
<div v-else-if="!notes.length" class="text-center p-4 text-base">
|
||||
<span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddNote from './AddNote.vue';
|
||||
import ContactNote from './ContactNote.vue';
|
||||
@@ -58,3 +34,27 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<add-note @add="onAddNote" />
|
||||
<contact-note
|
||||
v-for="note in notes"
|
||||
:id="note.id"
|
||||
:key="note.id"
|
||||
:note="note.content"
|
||||
:user="note.user"
|
||||
:created-at="note.created_at"
|
||||
@edit="onEditNote"
|
||||
@delete="onDeleteNote"
|
||||
/>
|
||||
|
||||
<div v-if="isFetching" class="text-center p-4 text-base">
|
||||
<spinner size="" />
|
||||
<span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
|
||||
</div>
|
||||
<div v-else-if="!notes.length" class="text-center p-4 text-base">
|
||||
<span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user