Merge pull request #24 from Libertech-FR/app-developement

App developement

Author: tacxou

.eslintrc.js

@@ -23,7 +23,7 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-inferrable-types': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-explicit-any': 'error',
     '@typescript-eslint/no-var-requires': 'off',
   },
 }

Makefile

@@ -1,12 +1,25 @@
 IMGNAME?=ghcr.io/libertech-fr/teaket:latest
 APPNAME?=teaket
+MINIO_ACCESS_KEY?=AKIAIOSFODNN7EXAMPLE
+MINIO_SECRET_KEY?=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
 
 .DEFAULT_GOAL := help
 help:
 	@printf "\033[33mUsage:\033[0m\n  make [target] [arg=\"val\"...]\n\n\033[33mTargets:\033[0m\n"
 	@grep -E '^[-a-zA-Z0-9_\.\/]+:.*?## .*$$' $(MAKEFILE_LIST) \
 		| sort | awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[32m%-15s\033[0m %s\n", $$1, $$2}'
 
+run-app:
+	cd ./app && yarn dev
+
+run-service:
+	cd ./service && yarn start:dev
+
+run: ## Run app and service
+	@make dbs &
+	@make run-app &
+	@make run-service &
+
 dbs: ## Start databases
 	@docker volume create $(APPNAME)-mongodb
 	@docker run -d --rm \
@@ -21,18 +34,39 @@ dbs: ## Start databases
 	@docker volume create $(APPNAME)-redis
 	@docker run -d --rm \
 		--name $(APPNAME)-redis \
+		-v $(APPNAME)-redis:/data \
 		--network dev \
 		-p 6379:6379 \
-		redis
-	@sleep 1
+		redis || true
+	@docker volume create $(APPNAME)-minio
+	@docker run -d --rm \
+		-p 9000:9000 \
+		-p 9090:9090 \
+		--name $(APPNAME)-minio \
+		--network dev \
+		-v $(APPNAME)-minio:/data \
+		-e "MINIO_ACCESS_KEY=$(MINIO_ACCESS_KEY)" \
+		-e "MINIO_SECRET_KEY=$(MINIO_SECRET_KEY)" \
+		minio/minio server /data --console-address ":9090" || true
+	@docker run --rm -it \
+		--network dev \
+		-e MINIO_BUCKET="teaket" \
+		--entrypoint sh minio/mc -c "\
+			mc config host add myminio http://teaket-minio:9000 \$(MINIO_ACCESS_KEY) \$(MINIO_SECRET_KEY) && \
+			(mc mb myminio/teaket || true) \
+		" || true
 	@docker exec -it teaket-mongodb mongo --eval "rs.initiate({_id: 'rs0', members: [{_id: 0, host: '127.0.0.1:27017'}]})" || true
 
 stop-dbs: ## Stop databases
 	@docker stop $(APPNAME)-redis || true
 	@docker stop $(APPNAME)-mongodb || true
+	@docker stop $(APPNAME)-minio || true
 
 buildseeds: ## Build populate image
 	docker build -t seeding -f ./populate/Dockerfile ./populate
 
 populate-db: ## Populate database
-	docker run --rm --network dev -v ./populate:/app -v ./service/.dev-token.json:/app/.dev-token.json seeding
+	docker run --rm --network dev -v $(CURDIR)/populate:/app -v $(CURDIR)/service/.dev-token.json:/app/.dev-token.json seeding
+
+populate-from-gaiasys: ## Populate database
+	docker run --rm --network dev -v $(CURDIR)/populate:/app -v $(CURDIR)/service/.dev-token.json:/app/.dev-token.json seeding python populate_from_gaiasys.py

app/nuxt.config.ts

@@ -3,6 +3,7 @@ import pugPlugin from 'vite-plugin-pug'
 import openapiTS from 'openapi-typescript'
 import { writeFileSync } from 'fs'
 import { resolve } from 'path'
+import timezone from 'dayjs/plugin/timezone'
 
 const TK_APP_API_URL = process.env.TK_APP_API_URL || 'http://localhost:7100'
 
@@ -27,15 +28,7 @@ export default defineNuxtConfig({
     global: true,
     dirs: [{ path: '~/components', prefix: 'tk' }],
   },
-  modules: [
-    '@nuxt-alt/auth',
-    '@nuxt-alt/http',
-    '@pinia/nuxt',
-    'nuxt-quasar-ui',
-    '@vueuse/nuxt',
-    'dayjs-nuxt',
-    ...appSetup(),
-  ],
+  modules: ['@nuxt-alt/auth', '@nuxt-alt/http', '@pinia/nuxt', 'nuxt-quasar-ui', '@vueuse/nuxt', 'dayjs-nuxt', ...appSetup()],
   auth: {
     globalMiddleware: true,
     rewriteRedirects: true,
@@ -73,19 +66,38 @@ export default defineNuxtConfig({
       },
     },
   },
+  dayjs: {
+    locales: ['fr', 'en'],
+    defaultLocale: 'fr',
+    defaultTimezone: 'Paris',
+    plugins: ['timezone', 'relativeTime'],
+  },
+  pinia: {
+    autoImports: ['defineStore'],
+  },
   appConfig: {
     customSlots: {},
   },
   quasar: {
     iconSet: 'mdi-v5',
+    plugins: ['Notify'],
+    config: {
+      notify: {
+        timeout: 2500,
+        position: 'top-right',
+        actions: [{ icon: 'mdi-close', color: 'white' }],
+      },
+    },
   },
   vite: {
     define: {
       'process.env.DEBUG': process.env.NODE_ENV === 'development',
     },
     plugins: [
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       pugPlugin(<any>{
         pretty: true,
+        compilerOptions: {},
       }),
     ],
   },
@@ -100,7 +112,7 @@ export default defineNuxtConfig({
     shim: false,
   },
   hooks: {
-    'ready': async () => {
+    ready: async () => {
       console.log('[OpenapiTS] Generating .nuxt/types/service-api.d.ts...')
       try {
         const fileData = await openapiTS(`${TK_APP_API_URL}/swagger/json`)
@@ -109,6 +121,6 @@ export default defineNuxtConfig({
       } catch (error) {
         console.debug('[OpenapiTS] Error while generating .nuxt/types/service-api.d.ts', error)
       }
-    }
-  }
+    },
+  },
 })

app/package.json

@@ -16,19 +16,23 @@
     "@nuxt-alt/http": "^1.6.8",
     "@pinia/nuxt": "^0.4.11",
     "@quasar/extras": "^1.16.6",
+    "@tiptap/pm": "^2.1.11",
+    "@tiptap/starter-kit": "^2.1.11",
+    "@tiptap/vue-3": "^2.1.11",
     "@vueuse/router": "^10.4.1",
+    "bson-objectid": "^2.0.4",
     "cookie": "^0.5.0",
     "pinia": "^2.1.6",
     "quasar": "^2.12.6"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@types/node": "^18.17.3",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
     "@vueuse/core": "^10.4.1",
     "@vueuse/nuxt": "^10.4.1",
     "dayjs-nuxt": "^1.1.2",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
     "eslint": "^8.49.0",
     "nuxt": "~3.6.5",
     "nuxt-quasar-ui": "^2.0.5",

app/src/components/TiptapEditor.vue

@@ -0,0 +1,15 @@
+<template>
+    <editor-content :editor="editor" />
+</template>
+  
+<script setup>
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+
+const editor = useEditor({
+    content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
+    extensions: [
+        StarterKit,
+    ],
+})
+</script>

app/src/components/appbar/Menu.vue

@@ -6,10 +6,30 @@ q-btn(flat icon="mdi-dots-grid" size="xl")
             .col-4(v-for="app in apps" :key="app.name")
                 q-btn(flat stack dense :to="app.to" rounded).full-width
                     q-icon(:name="app.icon.name" :color="app.icon.color" size="xl")
+                    q-badge(v-if="app.badge" :color="app.badge.color" floating) {{ app.badge.value }}
                     div.text-center(:class="`text-${app.title.color}`") {{ app.title.name }}
+                    
 </template>
 
 <script lang="ts" setup>
+import { usePinia, useQuasar } from "#imports";
+const store = usePinia()
+const $q = useQuasar()
+const user = store.state.value.auth.user
+const { data, error } = await useHttpApi('/tickets/ticket', {
+    method: 'get',
+    query: {
+        'filters[@lifestep][]': 1,
+        'filters[^envelope.assigned.name]': `/${user.displayName}/`,
+    }
+})
+if (error.value) {
+    $q.notify({
+        message: 'Impossible de charger les tickets',
+        type: 'negative'
+    })
+}
+const baseFilter = 'sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10'
 const apps: {
     title: {
         name: string
@@ -41,7 +61,11 @@ const apps: {
                 name: 'mdi-ticket',
                 color: 'primary'
             },
-            to: '/tickets'
+            to: `/tickets?filters[^envelope.assigned.name]=/${user.displayName}/&filters[@lifestep][]=1&${baseFilter}`,
+            badge: {
+                color: 'red',
+                value: data.value.total
+            }
         },
         {
             title: {
@@ -52,7 +76,7 @@ const apps: {
                 name: 'mdi-ticket',
                 color: 'primary'
             },
-            to: '/tickets'
+            to: `/tickets?filters[@lifestep][]=1&${baseFilter}`
         },
         {
             title: {
@@ -88,4 +112,6 @@ const apps: {
             to: '/deconnexion'
         }
     ]
+
+
 </script>

app/src/components/searchfilters/Main.vue

@@ -1,38 +1,39 @@
 <template lang="pug">
 .row.q-gutter-sm.items-center.q-mt-sm
-    //- .col.col-md-2
-    //-     q-select(:options="fieldTypes" label="Type de champ" v-model="fieldType" clearable @update:model-value="clearFields(['field', 'comparator'])")
-    .col.col-md-2
-      q-select(:options="fields" label="Champs" v-model="field" clearable @update:model-value="onFieldChange($event)")
-    .col.col-md-2
-      q-select(:options="comparatorFilteredByType" label="Comparateurs" v-model="comparator" clearable @update:model-value="clearFields([])" :disable="isFieldDisabled.comparator")
-        template(v-slot:selected-item="scope")
-          q-icon(:name="scope.opt.icon" size="xs")
-        template(v-slot:option="scope")
-          q-item(v-bind="scope.itemProps")
-            q-item-section(avatar)
-              q-icon(:name="scope.opt.icon")
-            q-item-section
-              q-item-label
-                span {{ scope.opt.label }}
-
-    .col-12.col-md-2(v-show="!comparator?.multiplefields")
-      q-input(v-model="search" label="Rechercher" clearable :type="searchInputType" :disable="isFieldDisabled.search" :prefix="comparator?.prefix" :suffix="comparator?.suffix")
-    .col-6.col-md-2(v-show="comparator?.multiplefields")
-      q-input(v-model="searchMin" label="Min" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
-    .col-6.col-md-2(v-show="comparator?.multiplefields")
-      q-input(v-model="searchMax" label="Max" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
-    .col-12.col-md-1
-      q-btn(color="primary" @click="addFilter" :disable="isFieldDisabled.addButton") Ajouter
-    q-space
-    .col-12.col-md-2
-      tk-SearchfiltersRightSelect(ref="rightSelect")
+  //- .col.col-md-2
+  //-     q-select(:options="fieldTypes" label="Type de champ" v-model="fieldType" clearable @update:model-value="clearFields(['field', 'comparator'])")
+  .col.col-md-2
+    q-select(:options="fields" label="Champs" v-model="field" clearable @update:model-value="onFieldChange($event)")
+  .col.col-md-2
+    q-select(:options="comparatorFilteredByType" label="Comparateurs" v-model="comparator" clearable @update:model-value="clearFields([])" :disable="isFieldDisabled.comparator")
+      template(v-slot:selected-item="scope")
+        q-icon(:name="scope.opt.icon" size="xs")
+      template(v-slot:option="scope")
+        q-item(v-bind="scope.itemProps")
+          q-item-section(avatar)
+            q-icon(:name="scope.opt.icon")
+          q-item-section
+            q-item-label
+              span {{ scope.opt.label }}
+
+  .col-12.col-md-2(v-show="!comparator?.multiplefields")
+    q-input(v-model="search" label="Rechercher" clearable :type="searchInputType" :disable="isFieldDisabled.search" :prefix="comparator?.prefix" :suffix="comparator?.suffix")
+  .col-6.col-md-2(v-show="comparator?.multiplefields")
+    q-input(v-model="searchMin" label="Min" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
+  .col-6.col-md-2(v-show="comparator?.multiplefields")
+    q-input(v-model="searchMax" label="Max" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
+  .col-12.col-md-1
+    q-btn(color="primary" @click="addFilter" :disable="isFieldDisabled.addButton") Ajouter
+  q-space
+  .col-12.col-md-2
+    tk-SearchfiltersRightSelect(ref="rightSelect")
 </template>
 
 <script lang="ts" setup>
 import { ref, computed, inject } from 'vue'
 import { useRouter, useRoute } from 'nuxt/app'
 import { useDayjs } from '#imports';
+import { pushQuery } from '~/composables'
 import type { Filter, Field, Comparator, SearchFilter } from '~/types'
 const dayjs = useDayjs()
 
@@ -70,7 +71,7 @@ const comparatorTypes = ref<Comparator[]>([
   { label: 'Inférieur à', querySign: '<', value: '<', icon: 'mdi-less-than', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
   { label: 'Inférieur ou égal à', querySign: '<=', value: '<=', icon: 'mdi-less-than-or-equal', type: ['number', 'date'], multiplefields: false, prefix: '', suffix: '' },
   { label: 'entre', querySign: '<<', value: 'between', icon: 'mdi-arrow-expand-horizontal', type: ['number', 'date'], multiplefields: true, prefix: '', suffix: '' },
-  { label: 'Contiens', querySign: '^', value: '^', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/', suffix: '/' },
+  { label: 'Contiens', querySign: '^', value: '^', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/', suffix: '/i' },
   { label: 'Commence par', querySign: '^', value: '/^', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/^', suffix: '/' },
   { label: 'Fini par', querySign: '^', value: '$/', icon: 'mdi-apple-keyboard-control', type: ['text'], multiplefields: false, prefix: '/', suffix: '$/' },
   { label: 'Egal à', querySign: '@', value: '@', icon: 'mdi-apple-keyboard-control', type: [], multiplefields: true, prefix: '', suffix: '' },
@@ -95,11 +96,11 @@ const addFilter = async () => {
   if (!searchFilter) return
   if (searchFilter.comparator.multiplefields) {
     for (const { key, value } of parseMultipleFilter(searchFilter)) {
-      await pushQuery(key, value)
+      await pushQuery({ key, value })
     }
   } else {
     const { key, value } = parseSimpleFilter(searchFilter)
-    await pushQuery(key, value)
+    await pushQuery({ key, value })
   }
 }
 
@@ -130,15 +131,15 @@ const parseMultipleFilter = (searchFilter: SearchFilter) => {
   return [min, max]
 }
 
-const pushQuery = async (key: string, value: string) => {
-  const query = {
-    ...route.query,
-  }
-  query[key] = value
-  await router.push({
-    query
-  })
-}
+// const pushQuery = async (key: string, value: string) => {
+//   const query = {
+//     ...route.query,
+//   }
+//   query[key] = value
+//   await router.push({
+//     query
+//   })
+// }
 
 const getSearchFilter = computed(() => {
   if (field.value === undefined || field.value === null) return null