diff --git a/cypress/e2e/login.cy.ts b/cypress/e2e/login.cy.ts
index 2b47afd..ccfd0c7 100644
--- a/cypress/e2e/login.cy.ts
+++ b/cypress/e2e/login.cy.ts
@@ -1,7 +1,6 @@
describe('In the login page', () => {
it('type in the form to login', () => {
- cy.visit('https://geovisio-proxy-dev.osc-fr1.scalingo.io/api/auth/login')
- cy.get('#password').type('coucouc')
+ cy.visit('/')
})
})
diff --git a/package.json b/package.json
index 6b05785..1f82ad9 100644
--- a/package.json
+++ b/package.json
@@ -25,11 +25,12 @@
"axios": "^1.2.3",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.3",
- "geovisio": "2.2.1",
+ "geovisio": "2.2.1-develop-acb9989e",
"moment": "^2.29.4",
"pinia": "^2.1.4",
"vue": "^3.2.45",
"vue-axios": "^3.5.2",
+ "vue-draggable-resizable-vue3": "^2.3.1-beta.13",
"vue-eslint-parser": "^9.1.0",
"vue-i18n": "9.2.2",
"vue-meta": "^3.0.0-alpha.10",
@@ -57,6 +58,8 @@
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-vue": "^9.8.0",
"jsdom": "^20.0.3",
+ "less": "^4.2.0",
+ "less-loader": "^11.1.3",
"npm-run-all": "^4.1.5",
"prettier": "2.8.1",
"sass": "^1.62.0",
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 0009feb..c88a95d 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -46,7 +46,8 @@ defineProps({
position: relative;
z-index: 1;
border-radius: toRem(1);
- padding: toRem(1.3) toRem(2) toRem(1.3);
+ padding: toRem(1.3);
+
.icon {
font-size: toRem(2);
}
@@ -103,11 +104,15 @@ defineProps({
width: toRem(3);
padding: 0;
.icon {
- color: var(---black);
+ color: var(--black);
font-size: toRem(1.8);
margin-right: 0;
}
}
+.no-text-white .icon {
+ color: var(--white);
+ margin-right: 0;
+}
.background-white {
background-color: var(--white);
}
@@ -155,7 +160,7 @@ defineProps({
position: absolute;
bottom: -100%;
visibility: hidden;
- width: toRem(18);
+ width: toRem(20);
right: 0;
@include text(xss-regular);
}
diff --git a/src/components/EditText.vue b/src/components/EditText.vue
new file mode 100644
index 0000000..60560f5
--- /dev/null
+++ b/src/components/EditText.vue
@@ -0,0 +1,131 @@
+
+
@@ -141,7 +141,6 @@ defineProps({
}
.waiting-info {
text-align: center;
- width: 100%;
color: var(--black);
width: fit-content;
}
diff --git a/src/components/Input.vue b/src/components/Input.vue
new file mode 100644
index 0000000..5ceea22
--- /dev/null
+++ b/src/components/Input.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
diff --git a/src/components/InputUpload.vue b/src/components/InputUpload.vue
index d215305..634885b 100644
--- a/src/components/InputUpload.vue
+++ b/src/components/InputUpload.vue
@@ -10,8 +10,8 @@
type="file"
multiple
:accept="accept"
- class="input-file"
@change="changeFile"
+ class="input-file"
/>
diff --git a/src/components/header/HeaderOpen.vue b/src/components/header/HeaderOpen.vue
index a96745a..70ec858 100644
--- a/src/components/header/HeaderOpen.vue
+++ b/src/components/header/HeaderOpen.vue
@@ -157,6 +157,7 @@ ul {
}
.logged-link {
padding: toRem(0);
+ margin-bottom: toRem(2);
}
}
diff --git a/src/components/upload/UploadLoader.vue b/src/components/upload/UploadLoader.vue
index 1b35ef7..54e3e26 100644
--- a/src/components/upload/UploadLoader.vue
+++ b/src/components/upload/UploadLoader.vue
@@ -121,7 +121,7 @@ defineProps({
margin-bottom: toRem(1);
}
.sequence-button {
- width: fit-content;
+ width: toRem(22);
}
.text-information {
@include text(s-r-regular);
@@ -167,7 +167,6 @@ defineProps({
margin-bottom: toRem(2);
}
}
-
@media (max-width: toRem(102.4)) {
.loader-title {
flex-direction: column;
diff --git a/src/locales/en.json b/src/locales/en.json
index e0c2216..bb779b2 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -133,6 +133,8 @@
"import_word": "upload",
"import_type": "JPEG format only",
"subtitle_import": "Picture upload",
+ "title_sequence": "Séquence title",
+ "description_title_sequence": "By default, the sequence title will be the date of the day. You can, if you want, edit the title here.",
"text_import": "Upload your jpg files here. Each picture or series of pictures constitutes a \"sequence\". You can then find them in the \"my pictures\" section and choose to hide, show or delete them.",
"subtitle_process": "Upload processing",
"uploading_process": "Upload in progress...",
@@ -143,6 +145,9 @@
"no_img_text": "no picture upload so far",
"upload_done": "Sequence upload done",
"sequence_link": "Show this sequence",
+ "edit_title_tooltip": "Edit the sequence's title",
+ "edit_placeholder_input": "Edit the sequence's title",
+ "ok_button": "OK",
"pictures_error": "{count} picture could not be uploaded| {count} pictures could not be uploaded",
"sequence_loading_information": "Once uploaded, the sequence will be processed then published on Panoramax (usually within a couple of minutes).",
"sequence_loaded_information": "The sequences has been uploaded and is under processing. It should be publicly available on Panoramax within a couple of minutes.",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index b24e3b2..3f56954 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -133,7 +133,9 @@
"import_word": "importer",
"import_type": "Format JPEG uniquement",
"subtitle_import": "Dépôt des images",
- "text_import": "Déposez ici vos fichiers jpg. Chaque image ou série d’images constitue une “séquence”. Vous pourrez ensuite les retrouver dans la section « mes images » et choisir de les masquer, les afficher ou les supprimer.",
+ "title_sequence": "Titre de ma séquence",
+ "description_title_sequence": "Le titre d'une séquence est par défaut la date du jour. Vous pouvez, si vous le souhaitez le modifier ci-dessous.",
+ "text_import": "Déposez ici vos fichiers jpg. Chaque image ou série d’images constitue une « séquence ». Vous pourrez ensuite les retrouver dans la section « mes images » et choisir de les masquer, les afficher ou les supprimer.",
"subtitle_process": "Traitements de l'import",
"uploading_process": "Téléchargement en cours...",
"sequence_title": "Séquence du ",
@@ -143,6 +145,9 @@
"no_img_text": "aucune image chargée actuellement",
"upload_done": "Le chargement de la séquence est terminé",
"sequence_link": "Accéder à cette séquence",
+ "edit_title_tooltip": "Modifier le titre de la séquence",
+ "edit_placeholder_input": "Modifier le titre de la séquence",
+ "ok_button": "Valider",
"pictures_error": "{count} image n'a pas pu être chargée| {count} image n'ont pas pu être chargées",
"sequence_loading_information": "Une fois chargée, la séquence sera en traitement et accessible sur Panoramax dans les prochaines minutes.",
"sequence_loaded_information": "La séquence est chargée et est en cours de traitement. Elle sera accessible sur Panoramax dans quelques minutes.",
diff --git a/src/main.ts b/src/main.ts
index 3fe7347..d5835a9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import axios from 'axios'
import VueAxios from 'vue-axios'
import { globalCookiesConfig } from 'vue3-cookies'
import { createMetaManager } from 'vue-meta'
+import { VueDraggableResizable } from 'vue-draggable-resizable-vue3'
import { pinia } from './store'
import fr from './locales/fr.json'
import en from './locales/en.json'
@@ -40,4 +41,5 @@ app.use(router)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)
app.use(createMetaManager())
+app.use(VueDraggableResizable)
app.mount('#app')
diff --git a/src/tests/unit/components/EditText.spec.js b/src/tests/unit/components/EditText.spec.js
new file mode 100644
index 0000000..1a48b7d
--- /dev/null
+++ b/src/tests/unit/components/EditText.spec.js
@@ -0,0 +1,88 @@
+import { test, describe, expect, vi } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import EditText from '../../../components/EditText.vue'
+import Button from '../../../components/Button.vue'
+import i18n from '../config'
+describe('Template', () => {
+ describe('Props', () => {
+ test('should have default props', () => {
+ const wrapper = shallowMount(EditText, {
+ global: {
+ plugins: [i18n]
+ }
+ })
+ expect(wrapper.vm.defaultText).toBe(null)
+ })
+ })
+ describe('When the props are filled', () => {
+ test('should render the component with the defaultText', () => {
+ const wrapper = shallowMount(EditText, {
+ global: {
+ plugins: [i18n]
+ },
+ props: {
+ defaultText: 'My default text'
+ }
+ })
+ expect(wrapper.html()).contains('class="title">My default text')
+ expect(wrapper.html()).contains('icon="bi bi-pen"')
+ })
+ })
+ describe('When the component is in editable mode', () => {
+ test('should render the component with the element to edit the title', async () => {
+ const wrapper = shallowMount(EditText, {
+ global: {
+ plugins: [i18n]
+ }
+ })
+ wrapper.vm.isEditTitle = true
+ wrapper.vm.titleToEdit = 'title to edit'
+ await wrapper.vm.$nextTick()
+
+ expect(wrapper.html()).contains('text="title to edit"')
+ expect(wrapper.html()).contains('icon="bi bi-x"')
+ expect(wrapper.html()).contains('text="Valider"')
+ })
+ test('should valid the name and emit', async () => {
+ const wrapper = shallowMount(EditText, {
+ global: {
+ plugins: [i18n],
+ components: {
+ Button
+ }
+ }
+ })
+ wrapper.vm.isEditTitle = true
+ wrapper.vm.titleToEdit = 'title to edit'
+ await wrapper.vm.$nextTick()
+
+ const validationButton = wrapper.findComponent('#valid-button')
+ await validationButton.vm.$emit('trigger')
+
+ expect(wrapper.emitted()).toHaveProperty('triggerNewText')
+ expect(wrapper.emitted().triggerNewText[0][0]).toEqual(
+ wrapper.vm.titleToEdit
+ )
+ })
+ test('should close the edit mode', async () => {
+ const wrapper = shallowMount(EditText, {
+ global: {
+ plugins: [i18n],
+ components: {
+ Button
+ }
+ }
+ })
+ wrapper.vm.isEditTitle = true
+ wrapper.vm.titleToEdit = 'title to edit'
+ await wrapper.vm.$nextTick()
+
+ const closeButton = wrapper.findComponent('#close-button')
+ await closeButton.vm.$emit('trigger')
+ await wrapper.vm.$nextTick()
+
+ expect(wrapper.vm.isEditTitle).toEqual(false)
+ expect(wrapper.vm.titleToEdit).toEqual(null)
+ })
+ })
+})
diff --git a/src/tests/unit/components/Header.spec.js b/src/tests/unit/components/Header.spec.js
index 5482479..ad24ead 100644
--- a/src/tests/unit/components/Header.spec.js
+++ b/src/tests/unit/components/Header.spec.js
@@ -28,7 +28,7 @@ const i18n = createI18n({
const router = createRouter({
history: createWebHistory(),
- routes: []
+ routes: [{ path: '/', component: { template: '
+ {{ $t('pages.upload.description_title_sequence') }} +
+