wip: Provide a message activity #152

kalisio · Aug 20, 2024 · bc96806 · bc96806
1 parent e2de6f8
commit bc96806
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 3 deletions.
diff --git a/config/default.js b/config/default.js
@@ -379,7 +379,19 @@ module.exports = {
         content: [
           { id: 'layout', icon: 'las la-icons', label: 'Messages.LABEL', color: 'primary', disabled: true }
         ]
+      },
+      bottom: {
+        content: [
+          { component: 'messages/Composer', class: 'fit' }
+        ],
+        sizes: { xs: 100, sm: 600, md: 600, lg: 600, xl: 600 },
+        visible: true
       }
+    },
+    messages: {
+      information: { label: 'MessagesActivity.INFORMATION', color: 'grey-7', textColor: 'black', icon: 'las la-info' },
+      warning: { label: 'MessagesActivity.WARNING', color: 'warning', textColor: 'black', icon: 'las la-exclamation' },
+      alert: { label: 'MessagesActivity.ALERT', color: 'negative', textColor: 'white', icon: 'las la-skull-crossbones' }
     }
   },
   collectionActivity: {

diff --git a/src/components/messages/Composer.vue b/src/components/messages/Composer.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="column">
+    <div class="row justify-between items-center no-wrap">
+      <div class="q-pl-sm">
+        <q-fab 
+          :icon="getKindIcon(currentKind)"
+          :color="getKindColor(currentKind)"
+          direction="up"
+          :vertical-actions-align="$q.screen.lt.md ? 'left' : 'center'"
+          padding="xs"
+        >
+          <template v-for="kind in availableKinds" :key="kind">
+            <q-fab-action 
+              :icon="getKindIcon(kind)"
+              :color="getKindColor(kind)"
+              :label="getKindLabel(kind)"
+              padding="xs"
+              @click="currentKind = kind"
+            />
+          </template>
+        </q-fab>
+      </div>
+      <div class="row items-center justify-end">
+        <KAction
+          id="add-file"
+          icon="las la-font"
+          tooltip="Composer.FORMAT_MESSAGE"
+          :toggle="{ color: 'primary', tooltip: 'Composer.CLOSE_EDITOR' }"
+          :handler="() => { editor = !editor }"
+          size="0.9rem"
+        />
+        <KAction
+          id="add-file"
+          icon="las la-plus-circle"
+          tooltip="Composer.ADD_FILE"
+          :handler="attachFile"
+          size="0.9rem"
+        />
+      </div>
+    </div> 
+    <div class="row no-wrap">
+      <div class="q-pa-sm col">
+        <q-editor 
+          v-if="editor"
+          :placeholder="$t('Composer.WRITE_YOUR_MESSAGE')"
+          v-model="body" 
+          :toolbar="editorToolbar"
+          min-height="4rem"
+        />
+        <q-input v-else
+          :placeholder="$t('Composer.WRITE_YOUR_MESSAGE')"
+          v-model="body" 
+          hide-bottom-space
+          @keydown.enter.prevent="sendMessage"
+        />
+      </div>
+      <KAction
+        id="send-message"
+        icon="send"
+        tooltip="Composer.SEND_MESSAGE"
+        :disabled="!hasBody"
+        :handler="sendMessage"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref, computed } from 'vue'
+import { useQuasar } from 'quasar'
+import { i18n, Store, composables as kdkCoreComposables }  from '@kalisio/kdk/core.client'
+
+// Data
+const $q = useQuasar()
+const User = Store.get('user')
+const MessageKinds = config.messagesActivity.messages
+const { createMessage } = kdkCoreComposables.useMessages()
+const editor = ref(false)
+const currentKind = ref(_.head(_.keys(MessageKinds)))
+const body = ref('')
+const editorToolbar = [
+  ['bold', 'italic', 'underline', 'strike', 'unordered', 'ordered'],
+  ['quote', 'link', 'hr'],
+  [{
+    label: $q.lang.editor.align,
+    icon: $q.iconSet.editor.align,
+    fixedLabel: true,
+    list: 'only-icons',
+    options: ['left', 'center', 'right', 'justify']
+  }],
+  ['undo', 'redo']
+]
+// Computed
+const availableKinds = computed(() => {
+  return _.difference(_.keys(MessageKinds), [currentKind.value])
+})
+const hasBody = computed(() => {
+  return !_.isEmpty(body.value)
+})
+
+// Function
+function getKindIcon (kind) {
+  return MessageKinds[kind].icon
+}
+function getKindColor (kind) {
+  return MessageKinds[kind].color
+}
+function getKindLabel (kind) {
+  return i18n.t(MessageKinds[kind].label)
+}
+async function attachFile () {
+  $q.notify({ type: 'negative', message: 'Not implemented' })
+}
+async function sendMessage () {
+  if (_.isEmpty(body.value)) return
+  let tags = []
+  // create the message
+  await createMessage({
+    kind: currentKind.value,
+    body: body.value,
+    author: _.get(User, 'profile.name'),
+    tags,
+  })
+  // refresh the interface
+  currentKind.value = _.head(_.keys(MessageKinds))
+  body.value = ''
+}
+</script>
diff --git a/src/components/messages/MessagesActivity.vue b/src/components/messages/MessagesActivity.vue
@@ -11,13 +11,18 @@
 
 <script setup>
 import _ from 'lodash'
+import config from 'config'
 
 // Data
+const MessageKinds = config.messagesActivity.messages
+console.log(MessageKinds)
 const schema = {
   timestampField: 'createdAt',
+  authorField: 'author',
   titleField: 'title',
   colorField: 'color',
-  decorationField: 'decoration'
+  decorationField: 'decoration',
+  bodyField: 'body'
 }
 
 // Function
@@ -29,6 +34,7 @@ function process (messages) {
       decoration.push({ component: 'QChip', label: tag, size: 'sm' })
     })
     message.decoration = decoration
+    if (message.kind) message.color = MessageKinds[message.kind].color
   })
   return messages
 }

diff --git a/src/i18n/app_en.json b/src/i18n/app_en.json
@@ -31,7 +31,14 @@
     "LABEL": "Documents"
   },
   "MessagesActivity": {
-    "LABEL": "Messages"
+    "LABEL": "Messages",
+    "INFORMATION": "Information",
+    "WARNING": "Warning",
+    "ALERT": "Alert"
+  },
+  "Composer": {
+    "WRITE_YOUR_MESSAGE": "Write your message...",
+    "SEND_MESSAGE": "Send message"
   },
   "CollectionActivity": {
     "LABEL": "Collections",

diff --git a/src/i18n/app_fr.json b/src/i18n/app_fr.json
@@ -31,7 +31,14 @@
     "LABEL": "Documents"
   },
   "MessagesActivity": {
-    "LABEL": "Messages"
+    "LABEL": "Messages",
+    "INFORMATION": "Information",
+    "WARNING": "Attention",
+    "ALERT": "Alerte"
+  },
+  "Composer": {
+    "WRITE_YOUR_MESSAGE": "Saisissez votre message...",
+    "SEND_MESSAGE": "Envoyer le message"
   },
   "CollectionActivity": {
     "LABEL": "Collections",