feat: add document user comments

ICIJ · Aug 1, 2024 · 6582c84 · 6582c84
1 parent a72763b
commit 6582c84
Show file tree

Hide file tree

Showing 10 changed files with 321 additions and 14 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -41,6 +41,9 @@ declare module 'vue' {
     BButton: typeof import('bootstrap-vue-next')['BButton']
     BButtonGroup: typeof import('bootstrap-vue-next')['BButtonGroup']
     BCard: typeof import('bootstrap-vue-next')['BCard']
+    BCardBody: typeof import('bootstrap-vue-next')['BCardBody']
+    BCardFooter: typeof import('bootstrap-vue-next')['BCardFooter']
+    BCardHeader: typeof import('bootstrap-vue-next')['BCardHeader']
     BCol: typeof import('bootstrap-vue-next')['BCol']
     BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
     BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
@@ -151,6 +154,8 @@ declare module 'vue' {
     DocumentUserActionsEntry: typeof import('./src/components/Document/DocumentUserActions/DocumentUserActionsEntry.vue')['default']
     DocumentUserComments: typeof import('./src/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserComments.vue')['default']
     DocumentUserCommentsAction: typeof import('./src/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsAction.vue')['default']
+    DocumentUserCommentsContent: typeof import('./src/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsContent.vue')['default']
+    DocumentUserCommentsInput: typeof import('./src/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsInput.vue')['default']
     DocumentUserCommentsList: typeof import('./src/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsList.vue')['default']
     DocumentUserCommentsListEntry: typeof import('./src/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsListEntry.vue')['default']
     DocumentViewerAudio: typeof import('./src/components/Document/DocumentViewer/DocumentViewerAudio.vue')['default']

diff --git a/src/components/Document/DocumentUserActions/DocumentUserActionsCard.vue b/src/components/Document/DocumentUserActions/DocumentUserActionsCard.vue
@@ -13,20 +13,21 @@
         @close="$emit('close')"
       />
     </div>
-    <template v-if="isSplit">
-      <document-user-actions-card-list :title="listNameOthers">
-        <slot name="others"></slot>
-      </document-user-actions-card-list>
-      <document-user-actions-card-list :title="listNameYours">
-        <slot name="yours"></slot>
-      </document-user-actions-card-list>
-    </template>
-    <template v-else>
-      <div class="py-2">
-        <slot name="yours"></slot>
-        <slot name="content"></slot>
-      </div>
-    </template>
+    <div class="py-4">
+      <slot name="content">
+        <template v-if="isSplit">
+          <document-user-actions-card-list :title="listNameOthers">
+            <slot name="others"></slot>
+          </document-user-actions-card-list>
+          <document-user-actions-card-list :title="listNameYours">
+            <slot name="yours"></slot>
+          </document-user-actions-card-list>
+        </template>
+        <template v-else>
+          <slot name="yours"></slot>
+        </template>
+      </slot>
+    </div>
     <footer class="pt-2">
       <p v-if="showWarning" class="text-light-emphasis">
         <phosphor-icon name="info" class="me-1" /><slot name="footer-warning"></slot>

diff --git a/src/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserComments.vue b/src/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserComments.vue
@@ -0,0 +1,30 @@
+<script setup>
+import DocumentUserCommentsList from '@/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsList'
+import DocumentUserCommentsAction from '@/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsAction'
+import DocumentUserActionsCard from '@/components/Document/DocumentUserActions/DocumentUserActionsCard.vue'
+const comment = defineModel({
+  type: String,
+  required: true
+})
+const props = defineProps({
+  comments: { type: Array, default: () => [] }
+})
+
+const title = `${props.comments.length} comments`
+</script>
+
+<template>
+  <document-user-actions-card icon="chats-teardrop" :title="title" :show-warning="true">
+    <template #content>
+      <document-user-comments-list :comments="comments" />
+    </template>
+    <template #footer-warning
+      >Your comments are public to project’s members and are also be visible on the iHub
+    </template>
+    <template #footer>
+      <document-user-comments-action :model-value="comment" @update:model-value="$emit('update:modelValue', $event)" />
+    </template>
+  </document-user-actions-card>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/...mponents/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsAction.vue b/...mponents/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsAction.vue
@@ -0,0 +1,14 @@
+<script setup>
+const comment = defineModel({
+  type: String,
+  required: true
+})
+</script>
+
+<template>
+  <div>
+    <b-form-textarea v-model="comment" placeholder="Write your text"></b-form-textarea>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/...components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsList.vue b/...components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsList.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { PhosphorIcon } from '@icij/murmur-next'
+import { computed } from 'vue'
+
+import DocumentUserCommentsListEntry from '@/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsListEntry.vue'
+
+defineOptions({ name: 'DocumentUserCommentsList' })
+
+const open = defineModel('open', {
+  type: Boolean,
+  default: true
+})
+const props = defineProps({
+  comments: { type: Array, default: () => [] },
+  height: { type: String, default: '250px' }
+})
+const style = {
+  '--document-user-comments-list__comments__list--height': props.height
+}
+
+const firstComment = '#comment-0'
+const lastComment = props.comments.length ? `#comment-${props.comments.length - 1}` : ''
+const closedEye = computed(() => {
+  return open.value ? 'regular' : 'fill'
+})
+
+const sortingText = 'From oldest to most recent'
+const displayComments = computed(() => (open.value ? 'Hide comments' : 'Show comments'))
+const goToOldest = 'Go to oldest'
+const goToRecent = 'Go to most recent'
+const noComments = 'No comments on this document yet.'
+</script>
+
+<template>
+  <section class="document-user-comments-list">
+    <header class="d-flex justify-content-between align-items-center">
+      <span><phosphor-icon name="sortAscending" />{{ sortingText }}</span>
+      <span
+        class="btn btn-outline-link d-inline-flex justify-content-between"
+        style="width: 190px"
+        @click="open = !open"
+        ><phosphor-icon name="eyeClosed" :weight="closedEye" class="me-2" />{{ displayComments }}</span
+      >
+    </header>
+    <section v-if="open" class="document-user-comments-list__comments py-2">
+      <template v-if="comments.length">
+        <header class="text-center py-2">
+          <a :href="firstComment">{{ goToOldest }}</a>
+        </header>
+        <article class="document-user-comments-list__comments__list d-block overflow-y-scroll" :style="style">
+          <document-user-comments-list-entry
+            v-for="(comment, index) in comments"
+            :id="`comment-${index}`"
+            :key="index"
+            :text="comment.text"
+            :to="comment.to"
+            :date="comment.date"
+            :username="comment.username"
+          />
+        </article>
+        <footer class="text-center py-2">
+          <a :href="lastComment">{{ goToRecent }}</a>
+        </footer>
+      </template>
+      <template v-else>
+        <div class="text-center py-2">{{ noComments }}</div>
+      </template>
+    </section>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.document-user-comments-list {
+  &__comments__list {
+    height: var(--document-user-comments-list__comments__list--height);
+  }
+}
+</style>
diff --git a/...nents/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsListEntry.vue b/...nents/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsListEntry.vue
@@ -0,0 +1,28 @@
+<script setup>
+import DisplayUser from '@/components/Display/DisplayUser.vue'
+import DisplayDatetime from '@/components/Display/DisplayDatetime.vue'
+import ButtonIcon from '@/components/Button/ButtonIcon.vue'
+
+defineProps({
+  username: { type: String, required: true },
+  date: { type: Number, required: true },
+  to: { type: String, required: true },
+  text: { type: String, required: true }
+})
+
+const goToComment = 'Go to comment'
+</script>
+
+<template>
+  <section class="py-2">
+    <div class="d-flex">
+      <display-user :username="username" />
+      <display-datetime class="ms-auto" :value="date" />
+      <button-icon variant="link" icon-left="arrowSquareOut" square hide-label :label="goToComment" />
+      <!--      <button-icon variant="link" icon-left="arrowSquareOut" square hide-label label="Link to comment" :to="to" />-->
+    </div>
+    <article class="ps-4 text-justify">{{ text }}</article>
+  </section>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/...ponents/Document/DocumentUserActions/DocumentUserComments/DocumentUserComments.stories.js b/...ponents/Document/DocumentUserActions/DocumentUserComments/DocumentUserComments.stories.js
@@ -0,0 +1,63 @@
+import DocumentUserComments from '@/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserComments'
+import { storeDecoratorPipelineChainByCategory } from '~storybook/decorators/vuex'
+
+export default {
+  title: 'Components/Document/DocumentUserActions/DocumentUserComments/DocumentUserComments',
+  tags: ['autodocs'],
+  decorators: [storeDecoratorPipelineChainByCategory],
+  component: DocumentUserComments,
+  args: {
+    comments: [],
+    modelValue: null
+  }
+}
+export const Default = {}
+
+export const WithComments = {
+  args: {
+    comments: [
+      {
+        username: 'bfett',
+        date: Date.now() - 150000000000,
+        to: 'http://example.com',
+        text: 'I would like to underline the role of the Galactic empress in creating the company as you can see here on this document page 65, paragraph 3. She says “I created the company in 2016 [...]”. This is very important to mention in the article that we plan to publish with the Guardian. cc @chorizo @tomatoe'
+      },
+      {
+        username: 'lskywalker',
+        date: Date.now() - 100000000000,
+        to: 'http://example.com',
+        text: "I'm not sure this is enough for the Vulkans to write the story. Wdyt @spoke?"
+      },
+      {
+        username: 'spoke',
+        date: Date.now(),
+        to: 'http://example.com',
+        text: 'May the force be with you 🖖'
+      },
+      {
+        username: 'bfett',
+        date: Date.now() - 50000000000,
+        to: 'http://example.com',
+        text: 'Did you have any info on the stargate ?'
+      },
+      {
+        username: 'ttilk',
+        date: Date.now() - 100000000000,
+        to: 'http://example.com',
+        text: 'This is a top secret information not sur tha @yoda would approve'
+      },
+      {
+        username: 'byoda',
+        date: Date.now(),
+        to: 'http://example.com',
+        text: 'The document number 101010001 you may read.'
+      },
+      {
+        username: 'r2d2',
+        date: Date.now(),
+        to: 'http://example.com',
+        text: 'BLIP!'
+      }
+    ]
+  }
+}
diff --git a/...s/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsAction.stories.js b/...s/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsAction.stories.js
@@ -0,0 +1,11 @@
+import DocumentUserCommentsAction from '@/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsAction'
+
+export default {
+  title: 'Components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsAction',
+  tags: ['autodocs'],
+  component: DocumentUserCommentsAction,
+  args: {
+    comment: 'cdesprat'
+  }
+}
+export const Default = {}
diff --git a/...nts/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsList.stories.js b/...nts/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsList.stories.js
@@ -0,0 +1,61 @@
+import DocumentUserCommentsList from '@/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsList'
+import { storeDecoratorPipelineChainByCategory } from '~storybook/decorators/vuex'
+
+export default {
+  title: 'Components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsList',
+  tags: ['autodocs'],
+  component: DocumentUserCommentsList,
+  decorators: [storeDecoratorPipelineChainByCategory],
+  args: {
+    comments: []
+  }
+}
+export const Default = {}
+export const WithComments = {
+  args: {
+    comments: [
+      {
+        username: 'bfett',
+        date: Date.now() - 150000000000,
+        to: 'http://example.com',
+        text: 'I would like to underline the role of the Galactic empress in creating the company as you can see here on this document page 65, paragraph 3. She says “I created the company in 2016 [...]”. This is very important to mention in the article that we plan to publish with the Guardian. cc @chorizo @tomatoe'
+      },
+      {
+        username: 'lskywalker',
+        date: Date.now() - 100000000000,
+        to: 'http://example.com',
+        text: "I'm not sure this is enough for the Vulkans to write the story. Wdyt @spoke?"
+      },
+      {
+        username: 'spoke',
+        date: Date.now(),
+        to: 'http://example.com',
+        text: 'May the force be with you 🖖'
+      },
+      {
+        username: 'bfett',
+        date: Date.now() - 50000000000,
+        to: 'http://example.com',
+        text: 'Did you have any info on the stargate ?'
+      },
+      {
+        username: 'ttilk',
+        date: Date.now() - 100000000000,
+        to: 'http://example.com',
+        text: 'This is a top secret information not sur tha @yoda would approve'
+      },
+      {
+        username: 'byoda',
+        date: Date.now(),
+        to: 'http://example.com',
+        text: 'The document number 101010001 you may read.'
+      },
+      {
+        username: 'r2d2',
+        date: Date.now(),
+        to: 'http://example.com',
+        text: 'BLIP!'
+      }
+    ]
+  }
+}
diff --git a/...ocument/DocumentUserActions/DocumentUserComments/DocumentUserCommentsListEntry.stories.js b/...ocument/DocumentUserActions/DocumentUserComments/DocumentUserCommentsListEntry.stories.js
@@ -0,0 +1,16 @@
+import DocumentUserCommentsListEntry from '@/components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsListEntry'
+import { storeDecoratorPipelineChainByCategory } from '~storybook/decorators/vuex'
+
+export default {
+  title: 'Components/Document/DocumentUserActions/DocumentUserComments/DocumentUserCommentsListEntry',
+  decorators: [storeDecoratorPipelineChainByCategory],
+  tags: ['autodocs'],
+  component: DocumentUserCommentsListEntry,
+  args: {
+    username: 'bfett',
+    date: Date.now(),
+    to: 'http://example.com',
+    text: 'I would like to underline the role of the Galactic empress in creating the company as you can see here on this document page 65, paragraph 3. She says “I created the company in 2016 [...]”. This is very important to mention in the article that we plan to publish with the Guardian. cc @chorizo @tomatoe'
+  }
+}
+export const Default = {}