From 5bbee489169215c61d19d44912f8a8451be31052 Mon Sep 17 00:00:00 2001
From: TCHERNIATINSKY <philippe.tcherniatinsky@inrae.fr>
Date: Thu, 21 Apr 2022 16:09:19 +0200
Subject: [PATCH 1/3] =?UTF-8?q?Ajout=20du=20document=20aide=20=C3=A0=20la?=
=?UTF-8?q?=20page=20applicationCreation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ui/.gitignore | 3 +-
ui/package.json | 4 +-
ui/src/locales/en.json | 1 +
ui/src/locales/fr.json | 1 +
ui/src/main.js | 4 +-
ui/src/router/index.js | 8 +-
.../application/ApplicationCreationView.vue | 6 +-
ui/src/views/common/MenuView.vue | 2 +-
ui/src/views/documentation/HelpView.vue | 88 +++++++++++++++++++
9 files changed, 110 insertions(+), 7 deletions(-)
create mode 100644 ui/src/views/documentation/HelpView.vue
diff --git a/ui/.gitignore b/ui/.gitignore
index 8e9c8df82..7bf753e0a 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -25,4 +25,5 @@ pnpm-debug.log*
ui/cypress/integration/examples
ui/cypress/videos
ui/cypress/screenshots
-ui/cypress/downloads
\ No newline at end of file
+ui/cypress/downloads
+/public/files/
diff --git a/ui/package.json b/ui/package.json
index bf80a685c..a4fecd19b 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -4,8 +4,8 @@
"private": true,
"scripts": {
"cypress:open": "cypress open",
- "serve": "vue-cli-service serve",
- "build": "vue-cli-service build",
+ "serve": "mkdir -p public/files && cp ../Documentation_fichier_Yaml.pdf public/files/aide.pdf;vue-cli-service serve",
+ "build": "mkdir -p public/files && cp ../Documentation_fichier_Yaml.pdf public/files/aide.pdf;vue-cli-service build; ",
"lint": "vue-cli-service lint",
"i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
},
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index a108a680d..a9422e403 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -2,6 +2,7 @@
"titles":{
"login-page":"Welcome to SI-ORE",
"applications-page":"My applications",
+ "aide":"Help writing an application's configuration file.",
"references-page":"{applicationName} references",
"references-data":"{refName} data",
"application-creation":"Application creation",
diff --git a/ui/src/locales/fr.json b/ui/src/locales/fr.json
index 91942acb2..8def8733f 100644
--- a/ui/src/locales/fr.json
+++ b/ui/src/locales/fr.json
@@ -2,6 +2,7 @@
"titles": {
"login-page": "Bienvenue sur SI-ORE",
"applications-page": "Mes applications",
+ "aide": "Aide à l'écriture du fichier de configuration d'une application.",
"references-page": "Référentiels de {applicationName}",
"references-data": "Données de {refName}",
"application-creation": "Créer une application",
diff --git a/ui/src/main.js b/ui/src/main.js
index 7bf9d25f8..084caee3a 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -8,6 +8,7 @@ import {
faCircle,
faCheck,
faCheckCircle,
+ faQuestionCircle,
faSquare,
faMinusSquare,
faCheckSquare,
@@ -63,6 +64,7 @@ library.add(
faEyeSlash,
faPlus,
faExclamationCircle,
+ faQuestionCircle,
faCheck,
faCheckCircle,
faSquare,
@@ -182,4 +184,4 @@ const app = new Vue({
i18n,
render: (h) => h(App),
}).$mount("#app");
-export default app;
+export default app;
\ No newline at end of file
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index aa40956e5..8d428d296 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -1,6 +1,7 @@
import Vue from "vue";
import VueRouter from "vue-router";
import LoginView from "@/views/LoginView.vue";
+import HelpView from "@/views/documentation/HelpView.vue";
import ApplicationsView from "@/views/application/ApplicationsView.vue";
import ApplicationCreationView from "@/views/application/ApplicationCreationView.vue";
import ReferencesManagementView from "@/views/references/ReferencesManagementView.vue";
@@ -18,6 +19,11 @@ const routes = [
path: "/",
redirect: "/login",
},
+ {
+ path: "/help",
+ name: "help",
+ component: HelpView,
+ },
{
path: "/login",
name: "Login",
@@ -77,4 +83,4 @@ const router = new VueRouter({
routes,
});
-export default router;
+export default router;
\ No newline at end of file
diff --git a/ui/src/views/application/ApplicationCreationView.vue b/ui/src/views/application/ApplicationCreationView.vue
index 00581b88d..560910578 100644
--- a/ui/src/views/application/ApplicationCreationView.vue
+++ b/ui/src/views/application/ApplicationCreationView.vue
@@ -70,6 +70,7 @@
<b-button type="is-primary" @click="handleSubmit(createApplication)" icon-left="plus">
{{ $t("applications.create") }}
</b-button>
+ <b-button type="is-primary" @click="showHelp" icon-left="question-circle" />
</div>
</ValidationObserver>
<div v-if="errorsMessages.length">
@@ -133,6 +134,9 @@ export default class ApplicationCreationView extends Vue {
this.checkMessageErrors(error);
}
}
+ showHelp(){
+ this.$router.push("/help");
+ }
async testApplication() {
this.errorsMessages = [];
@@ -158,4 +162,4 @@ export default class ApplicationCreationView extends Vue {
}
}
}
-</script>
+</script>
\ No newline at end of file
diff --git a/ui/src/views/common/MenuView.vue b/ui/src/views/common/MenuView.vue
index a341304d4..500cb50bf 100644
--- a/ui/src/views/common/MenuView.vue
+++ b/ui/src/views/common/MenuView.vue
@@ -195,4 +195,4 @@ export default class MenuView extends Vue {
fill: white;
}
}
-</style>
+</style>
\ No newline at end of file
diff --git a/ui/src/views/documentation/HelpView.vue b/ui/src/views/documentation/HelpView.vue
new file mode 100644
index 000000000..b38cc2b9d
--- /dev/null
+++ b/ui/src/views/documentation/HelpView.vue
@@ -0,0 +1,88 @@
+><template>
+ <PageView>
+ <h1 class="title main-title">{{ $t("titles.aide") }}</h1>
+
+ <div class="columns columnPrincipale">
+ <embed src="files/aide.pdf" width=800 height=500 type='application/pdf'/>
+ </div>
+ </PageView>
+</template>
+
+<script>
+import { Component, Vue } from "vue-property-decorator";
+import PageView from "@/views/common/PageView.vue";
+
+@Component({
+ components: { PageView },
+})
+export default class HelpView extends Vue {
+}
+</script>
+
+<style lang="scss" scoped>
+// card & modal style
+.columns {
+ flex-wrap: wrap;
+ margin: 0px;
+ width: 100%;
+ height: 100%;
+
+ &.columnPrincipale {
+ margin-left: 50px;
+ margin-top: 50px;
+ }
+}
+.columns embed {
+ width: 100%;
+ height: 100%;
+}
+
+.column {
+ display: grid;
+
+ .comment {
+ display: flex;
+ align-items: center;
+ align-content: start;
+ }
+ .card {
+ &.applicationCard {
+ width: 300px;
+
+ .card-footer {
+ border: none;
+ }
+ }
+
+ .btnModal {
+ margin: 5px;
+ opacity: 50%;
+ color: $primary;
+ background-color: transparent;
+ }
+
+ .card-footer-item {
+ border-right: none;
+ }
+ }
+}
+
+.createApplication {
+ background-color: $dark;
+ color: white;
+}
+
+.card-header-title {
+ &.title {
+ margin-top: 0;
+ text-transform: uppercase;
+ margin-bottom: 0px;
+ }
+}
+
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+ top: 5px;
+ left: 5px;
+}
+</style>
\ No newline at end of file
--
GitLab
From 880bb6b2d7c2e63406cba25a0e73a93801613536 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Thu, 21 Apr 2022 17:50:49 +0200
Subject: [PATCH 2/3] bouton info
---
ui/src/main.js | 4 +-
.../application/ApplicationCreationView.vue | 92 ++++++++++---------
ui/src/views/documentation/HelpView.vue | 7 +-
3 files changed, 53 insertions(+), 50 deletions(-)
diff --git a/ui/src/main.js b/ui/src/main.js
index 084caee3a..5ac942815 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -56,6 +56,7 @@ import {
faTimesCircle,
faEdit,
faInfo,
+ faQuestion,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(
@@ -110,7 +111,8 @@ library.add(
faArchive,
faTimesCircle,
faEdit,
- faInfo
+ faInfo,
+ faQuestion
);
Vue.component("vue-fontawesome", FontAwesomeIcon);
diff --git a/ui/src/views/application/ApplicationCreationView.vue b/ui/src/views/application/ApplicationCreationView.vue
index 560910578..979cc75b7 100644
--- a/ui/src/views/application/ApplicationCreationView.vue
+++ b/ui/src/views/application/ApplicationCreationView.vue
@@ -4,57 +4,64 @@
<h1 class="title main-title">{{ $t("titles.application-creation") }}</h1>
<div>
<ValidationObserver ref="observer" v-slot="{ handleSubmit }">
- <ValidationProvider
- rules="required|validApplicationName|validApplicationNameLength"
- name="applicationsName"
- v-slot="{ errors, valid }"
- vid="applicationsName"
- >
- <b-field
- class="input-field"
- :type="{
- 'is-danger': errors && errors.length > 0,
- 'is-success': valid,
- }"
- :message="errors[0]"
+ <div class="columns">
+ <ValidationProvider
+ class="column"
+ rules="required"
+ name="applicationCreation"
+ v-slot="{ errors, valid }"
+ vid="applicationCreation"
>
- <template slot="label">
- {{ $t("applications.name") }}
- <span class="mandatory">
- {{ $t("validation.obligatoire") }}
- </span>
- </template>
- <b-input
- v-model="applicationConfig.name"
- :placeholder="$t('applications.name-placeholder')"
- >
- </b-input>
- </b-field>
- </ValidationProvider>
- <ValidationProvider
- rules="required"
- name="applicationCreation"
- v-slot="{ errors, valid }"
- vid="applicationCreation"
- >
- <b-field
- class="file is-primary"
- :type="{
+ <b-field
+ class="file is-primary"
+ :type="{
'is-danger': errors && errors.length > 0,
'is-success': valid,
}"
- >
- <b-upload v-model="applicationConfig.file" class="file-label" accept=".yaml, .zip">
- <span class="file-cta">
+ >
+ <b-upload v-model="applicationConfig.file" class="file-label" accept=".yaml, .zip">
+ <span>
+ <b-button size="is-small" type="is-primary" @click="showHelp" icon-left="question" outlined rounded/>
+ </span>
+ <span class="file-cta">
<b-icon class="file-icon" icon="upload"></b-icon>
<span class="file-label">{{ $t("applications.chose-config") }}</span>
</span>
- <span class="file-name" v-if="applicationConfig.file">
+ <span class="file-name" v-if="applicationConfig.file">
{{ applicationConfig.file.name }}
</span>
- </b-upload>
- </b-field>
- </ValidationProvider>
+ </b-upload>
+ </b-field>
+ </ValidationProvider>
+ <ValidationProvider
+ class="column"
+ rules="required|validApplicationName|validApplicationNameLength"
+ name="applicationsName"
+ v-slot="{ errors, valid }"
+ vid="applicationsName"
+ >
+ <b-field
+ class="input-field"
+ :type="{
+ 'is-danger': errors && errors.length > 0,
+ 'is-success': valid,
+ }"
+ :message="errors[0]"
+ >
+ <template slot="label">
+ {{ $t("applications.name") }}
+ <span class="mandatory">
+ {{ $t("validation.obligatoire") }}
+ </span>
+ </template>
+ <b-input
+ v-model="applicationConfig.name"
+ :placeholder="$t('applications.name-placeholder')"
+ >
+ </b-input>
+ </b-field>
+ </ValidationProvider>
+ </div>
<div class="columns">
<b-field class="column" :label="$t('dataTypesRepository.comment')" expanded>
<b-input v-model="comment" maxlength="200" type="textarea"></b-input>
@@ -70,7 +77,6 @@
<b-button type="is-primary" @click="handleSubmit(createApplication)" icon-left="plus">
{{ $t("applications.create") }}
</b-button>
- <b-button type="is-primary" @click="showHelp" icon-left="question-circle" />
</div>
</ValidationObserver>
<div v-if="errorsMessages.length">
diff --git a/ui/src/views/documentation/HelpView.vue b/ui/src/views/documentation/HelpView.vue
index b38cc2b9d..739217be9 100644
--- a/ui/src/views/documentation/HelpView.vue
+++ b/ui/src/views/documentation/HelpView.vue
@@ -3,7 +3,7 @@
<h1 class="title main-title">{{ $t("titles.aide") }}</h1>
<div class="columns columnPrincipale">
- <embed src="files/aide.pdf" width=800 height=500 type='application/pdf'/>
+ <embed class="column" src="files/aide.pdf" width=800 height=500 type='application/pdf'/>
</div>
</PageView>
</template>
@@ -26,11 +26,6 @@ export default class HelpView extends Vue {
margin: 0px;
width: 100%;
height: 100%;
-
- &.columnPrincipale {
- margin-left: 50px;
- margin-top: 50px;
- }
}
.columns embed {
width: 100%;
--
GitLab
From 7f23d4594ff467ad787675b20a383f5e751c054a Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Thu, 21 Apr 2022 18:09:44 +0200
Subject: [PATCH 3/3] en attente de la refonte du formulaire
---
ui/src/views/application/ApplicationCreationView.vue | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/ui/src/views/application/ApplicationCreationView.vue b/ui/src/views/application/ApplicationCreationView.vue
index 979cc75b7..03e910b93 100644
--- a/ui/src/views/application/ApplicationCreationView.vue
+++ b/ui/src/views/application/ApplicationCreationView.vue
@@ -6,7 +6,7 @@
<ValidationObserver ref="observer" v-slot="{ handleSubmit }">
<div class="columns">
<ValidationProvider
- class="column"
+ class="column is-3"
rules="required"
name="applicationCreation"
v-slot="{ errors, valid }"
@@ -20,9 +20,6 @@
}"
>
<b-upload v-model="applicationConfig.file" class="file-label" accept=".yaml, .zip">
- <span>
- <b-button size="is-small" type="is-primary" @click="showHelp" icon-left="question" outlined rounded/>
- </span>
<span class="file-cta">
<b-icon class="file-icon" icon="upload"></b-icon>
<span class="file-label">{{ $t("applications.chose-config") }}</span>
@@ -33,6 +30,9 @@
</b-upload>
</b-field>
</ValidationProvider>
+ <div style="margin: 5px" class="column is-1">
+ <b-button size="is-small" type="is-primary" @click="showHelp" icon-left="question" outlined rounded/>
+ </div>
<ValidationProvider
class="column"
rules="required|validApplicationName|validApplicationNameLength"
@@ -141,6 +141,7 @@ export default class ApplicationCreationView extends Vue {
}
}
showHelp(){
+ //window.open(this.$router.push("/help"));
this.$router.push("/help");
}
--
GitLab