Progress bar (stepper) to be consistent and indicate my steps as a fo…

…rm designer. (#1017)
bcgov · Sep 27, 2023 · 798ef25 · 798ef25
1 parent 772f83c
commit 798ef25
Show file tree

Hide file tree

Showing 32 changed files with 344 additions and 154 deletions.
diff --git a/app/frontend/src/components/base/BaseStepper.vue b/app/frontend/src/components/base/BaseStepper.vue
@@ -0,0 +1,80 @@
+<template>
+  <BaseSecure :idp="[IDP.IDIR]" :class="{ 'dir-rtl': isRTL }">
+    <v-stepper
+      v-model="creatorStep"
+      class="elevation-0 d-flex flex-column"
+      alt-labels
+    >
+      <v-stepper-header
+        style="width: 40%"
+        class="elevation-0 px-0 align-self-center"
+      >
+        <v-stepper-step :complete="creatorStep > 1" step="1" class="pl-1 pr-1">
+          <span :class="{ 'mr-2': isRTL }" :lang="lang">
+            {{ $t('trans.baseStepper.setUpForm') }}
+          </span>
+        </v-stepper-step>
+        <v-divider />
+        <v-stepper-step :complete="creatorStep > 2" step="2" class="pl-1 pr-1">
+          <span :class="{ 'mr-2': isRTL }" :lang="lang">
+            {{ $t('trans.baseStepper.designForm') }}
+          </span>
+        </v-stepper-step>
+        <v-divider />
+        <v-stepper-step
+          :complete="creatorStep === 3"
+          step="3"
+          class="pl-1 pr-1"
+        >
+          <span :class="{ 'mr-2': isRTL }" :lang="lang">
+            {{ $t('trans.baseStepper.manageForm') }}
+          </span>
+        </v-stepper-step>
+      </v-stepper-header>
+      <v-stepper-items>
+        <v-stepper-content step="1" class="pa-1">
+          <div class="mt-4">
+            <slot name="setUpForm"></slot>
+          </div>
+        </v-stepper-content>
+        <v-stepper-content step="2" class="pa-1">
+          <div class="mt-4">
+            <slot name="designForm"></slot>
+          </div>
+        </v-stepper-content>
+        <v-stepper-content step="3" class="pa-1">
+          <div class="mt-4">
+            <slot name="manageForm"></slot>
+          </div>
+        </v-stepper-content>
+      </v-stepper-items>
+    </v-stepper>
+  </BaseSecure>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { IdentityProviders } from '@/utils/constants';
+export default {
+  name: 'BaseStepper',
+  props: {
+    step: Number,
+  },
+  computed: {
+    ...mapGetters('form', ['lang', 'isRTL']),
+    IDP: () => IdentityProviders,
+    creatorStep() {
+      return this.step;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/* unset 'overflow: hidden' from all parents of FormDesigner, so FormDesigner's 'sticky' components menu sticks. */
+.v-stepper,
+.v-stepper__items,
+.v-stepper ::v-deep .v-stepper__wrapper {
+  overflow: initial !important;
+}
+</style>
+
+step
diff --git a/app/frontend/src/components/designer/FloatButton.vue b/app/frontend/src/components/designer/FloatButton.vue
@@ -19,8 +19,8 @@
         data-cy="publishRouterLink"
         class="fabAction"
         :to="{
-          name: 'FormManage',
-          query: { f: formId, fd: 'formDesigner', d: draftId },
+          name: 'PublishForm',
+          query: { f: formId, fd: true, d: draftId },
         }"
         :class="{ 'disabled-router': !formId }"
         tag="div"
@@ -45,7 +45,10 @@
         class="fabAction"
         data-cy="settingsRouterLink"
         ref="settingsRouterLink"
-        :to="{ name: 'FormManage', query: { f: formId } }"
+        :to="{
+          name: 'PublishForm',
+          query: { f: formId, d: draftId },
+        }"
         :class="{ 'disabled-router': !formId }"
         tag="div"
       >
@@ -302,7 +305,6 @@ export default {
       });
       window.open(route.href);
     },
-
     setSizes() {
       this.floatButtonSize = {};
 
@@ -440,7 +442,6 @@ export default {
     size() {
       this.setSizes();
     },
-
     savedStatus(value) {
       if (value === 'Saved') {
         this.savedMsg = this.$t('trans.floatButton.saved');

diff --git a/app/frontend/src/components/designer/FormDesigner.vue b/app/frontend/src/components/designer/FormDesigner.vue
@@ -569,6 +569,7 @@ export default {
       const patch = compare(form, this.formSchema);
 
       if (patch.length > 0) {
+        this.canSave = true;
         this.savedStatus = 'Save';
         this.isFormSaved = false;
         // Remove any actions past the action we were on
@@ -610,6 +611,7 @@ export default {
       if (this.canUndoPatch()) {
         this.savedStatus = 'Save';
         this.isFormSaved = false;
+        this.canSave = true;
         // Flag for formio to know we are setting the form
         this.patch.undoClicked = true;
         this.formSchema = this.getPatch(--this.patch.index);
@@ -620,6 +622,7 @@ export default {
       if (this.canRedoPatch()) {
         this.savedStatus = 'Save';
         this.isFormSaved = false;
+        this.canSave = true;
         // Flag for formio to know we are setting the form
         this.patch.redoClicked = true;
         this.formSchema = this.getPatch(++this.patch.index);
@@ -680,6 +683,7 @@ export default {
 
         this.savedStatus = 'Saved';
         this.isFormSaved = true;
+        this.canSave = false;
       } catch (error) {
         await this.setDirtyFlag(true);
         this.savedStatus = 'Not Saved';

diff --git a/app/frontend/src/components/forms/manage/ApiKey.vue b/app/frontend/src/components/forms/manage/ApiKey.vue
@@ -190,7 +190,7 @@ export default {
       );
     },
     secret() {
-      return this.apiKey && this.apiKey.secret ? this.apiKey.secret : undefined;
+      return this.apiKey && this.apiKey.secret ? this.apiKey.secret : '';
     },
   },
   methods: {

diff --git a/app/frontend/src/components/forms/manage/ManageVersions.vue b/app/frontend/src/components/forms/manage/ManageVersions.vue
@@ -268,7 +268,7 @@ import { FormPermissions } from '@/utils/constants';
 
 export default {
   name: 'ManageVersions',
-  inject: ['fd', 'draftId', 'formId'],
+  inject: ['formDesigner', 'draftId', 'formId'],
   data() {
     return {
       formSchema: {
@@ -490,10 +490,10 @@ export default {
       }
     },
   },
-  created() {
+  async created() {
     //check if the navigation to this page is from FormDesigner
-    if (this.fd) {
-      this.turnOnPublish();
+    if (this.formDesigner) {
+      await this.turnOnPublish();
     }
   },
 };

diff --git a/app/frontend/src/internationalization/trans/chefs/ar/ar.json b/app/frontend/src/internationalization/trans/chefs/ar/ar.json
@@ -762,10 +762,14 @@
     "createOnlineTitle": "قم بإنشاء نماذج عبر الإنترنت لجمع المعلومات من عملائك وتحسين سير العمل الخاص بك.",
     "getStarted": "البدء"
   },
+  "baseStepper": {
+    "designForm": "نموذج التصميم",
+    "setUpForm": "قم بإعداد النموذج",
+    "manageForm": "إدارة النموذج"
+  },
+
   "create": {
     "createNewForm": "إنشاء نموذج جديد",
-    "setUpForm": "قم بإعداد النموذج",
-    "designForm": "نموذج التصميم",
     "formSettings": "إعدادات النموذج",
     "disclaimer": "تنصل",
     "disclaimerStmt": "أوافق على إخلاء المسؤولية وبيان المسؤولية لمصممي النماذج",
@@ -965,4 +969,4 @@
       "user": "مستخدم"
     }
   }
-}
+}
diff --git a/app/frontend/src/internationalization/trans/chefs/de/de.json b/app/frontend/src/internationalization/trans/chefs/de/de.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "Erstellen Sie Online-Formulare, um Informationen von Ihren Kunden zu sammeln und Ihre Arbeitsabläufe zu verbessern.",
     "getStarted": "Loslegen"
   },
+  "baseStepper": {
+    "designForm": "Designform",
+    "setUpForm": "Formular einrichten",
+    "manageForm": "Formular verwalten"
+  },
   "create": {
     "createNewForm": "Neues Formular erstellen",
-    "setUpForm": "Formular einrichten",
-    "designForm": "Designform",
     "formSettings": "Formulareinstellungen",
     "disclaimer": "Haftungsausschluss",
     "disclaimerStmt": "Ich stimme dem Haftungsausschluss und der Haftungserklärung von Form Designers zu",

diff --git a/app/frontend/src/internationalization/trans/chefs/en/en.json b/app/frontend/src/internationalization/trans/chefs/en/en.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "Create online forms to collect information from your clients and improve your workflows.",
     "getStarted": "Get started"
   },
+  "baseStepper": {
+    "designForm": "Design Form",
+    "setUpForm": "Set up Form",
+    "manageForm": "Manage Form"
+  },
   "create": {
     "createNewForm": "Create New Form",
-    "setUpForm": "Set up Form",
-    "designForm": "Design Form",
     "formSettings": "Form Settings",
     "disclaimer": "Disclaimer",
     "disclaimerStmt": "I agree to the disclaimer and statement of responsibility for Form Designers",

diff --git a/app/frontend/src/internationalization/trans/chefs/es/es.json b/app/frontend/src/internationalization/trans/chefs/es/es.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "Cree formularios en línea para recopilar información de sus clientes y mejorar sus flujos de trabajo.",
     "getStarted": "Empezar"
   },
+"baseStepper": {
+  "setUpForm": "Configurar formulario",
+  "designForm": "Formulario de diseño",
+  "manageForm": "Administrar formulario"
+},
   "create": {
     "createNewForm": "Crear nuevo formulario",
-    "setUpForm": "Configurar formulario",
-    "designForm": "Formulario de diseño",
     "formSettings": "Configuración de formulario",
     "disclaimer": "Descargo de responsabilidad",
     "disclaimerStmt": "Acepto el descargo de responsabilidad y la declaración de responsabilidad de Form Designers",

diff --git a/app/frontend/src/internationalization/trans/chefs/fa/fa.json b/app/frontend/src/internationalization/trans/chefs/fa/fa.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "فرم های آنلاین برای جمع آوری اطلاعات از مشتریان خود و بهبود گردش کار خود ایجاد کنید.",
     "getStarted": "شروع کنید"
   },
+"baseStepper": {
+  "setUpForm": "فرم را تنظیم کنید",
+  "designForm": "فرم طراحی",
+  "manageForm": "مدیریت فرم"
+},
   "create": {
     "createNewForm": "ایجاد فرم جدید",
-    "setUpForm": "فرم را تنظیم کنید",
-    "designForm": "فرم طراحی",
     "formSettings": "تنظیمات فرم",
     "disclaimer": "سلب مسئولیت",
     "disclaimerStmt": "من با سلب مسئولیت و بیانیه مسئولیت طراحان فرم موافقم",

diff --git a/app/frontend/src/internationalization/trans/chefs/fr/fr.json b/app/frontend/src/internationalization/trans/chefs/fr/fr.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "Créez des formulaires en ligne pour collecter des informations auprès de vos clients et améliorer vos flux de travail.",
     "getStarted": "Commencer"
   },
+"baseStepper": {
+  "setUpForm": "Configurer le formulaire",
+    "designForm": "Formulaire de conception",
+    "manageForm": "Gérer le formulaire"
+},
   "create": {
     "createNewForm": "Créer un nouveau formulaire",
-    "setUpForm": "Configurer le formulaire",
-    "designForm": "Formulaire de conception",
     "formSettings": "Paramètres du formulaire",
     "disclaimer": "Clause de non-responsabilité",
     "disclaimerStmt": "J'accepte la clause de non-responsabilité et la déclaration de responsabilité des concepteurs de formulaires",

diff --git a/app/frontend/src/internationalization/trans/chefs/hi/hi.json b/app/frontend/src/internationalization/trans/chefs/hi/hi.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "अपने ग्राहकों से जानकारी एकत्र करने और अपने कार्यप्रवाह में सुधार करने के लिए ऑनलाइन फॉर्म बनाएं।",
     "getStarted": "शुरू हो जाओ"
   },
+"baseStepper": {
+  "setUpForm": "फॉर्म सेट करें",
+    "designForm": "डिज़ाइन फॉर्म",
+    "manageForm": "प्रपत्र प्रबंधित करें"
+},
   "create": {
     "createNewForm": "नया फॉर्म बनाएं",
-    "setUpForm": "फॉर्म सेट करें",
-    "designForm": "डिज़ाइन फॉर्म",
     "formSettings": "फॉर्म सेटिंग्स",
     "disclaimer": "अस्वीकरण",
     "disclaimerStmt": "मैं फॉर्म डिजाइनरों के अस्वीकरण और जिम्मेदारी के बयान से सहमत हूं",

diff --git a/app/frontend/src/internationalization/trans/chefs/it/it.json b/app/frontend/src/internationalization/trans/chefs/it/it.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "Crea moduli online per raccogliere informazioni dai tuoi clienti e migliorare i tuoi flussi di lavoro.",
     "getStarted": "Iniziare"
   },
+"baseStepper": {
+  "setUpForm": "Imposta modulo",
+    "designForm": "Modulo di progettazione",
+    "manageForm": "Gestisci modulo"
+},
   "create": {
     "createNewForm": "Crea nuovo modulo",
-    "setUpForm": "Imposta modulo",
-    "designForm": "Modulo di progettazione",
     "formSettings": "Impostazioni modulo",
     "disclaimer": "Disclaimer",
     "disclaimerStmt": "Accetto il disclaimer e la dichiarazione di responsabilità per Form Designers",

diff --git a/app/frontend/src/internationalization/trans/chefs/ja/ja.json b/app/frontend/src/internationalization/trans/chefs/ja/ja.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "オンライン フォームを作成してクライアントから情報を収集し、ワークフローを改善します。",
     "getStarted": "始めましょう"
   },
-  "create": {
-    "createNewForm": "新しいフォームの作成",
+  "baseStepper": {
     "setUpForm": "フォームの設定",
     "designForm": "デザインフォーム",
+    "manageForm": "フォームの管理"
+    },
+  "create": {
+    "createNewForm": "新しいフォームの作成",
     "formSettings": "フォーム設定",
     "disclaimer": "免責事項",
     "disclaimerStmt": "フォームデザイナーの免責事項と責任声明に同意します",

diff --git a/app/frontend/src/internationalization/trans/chefs/ko/ko.json b/app/frontend/src/internationalization/trans/chefs/ko/ko.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "클라이언트로부터 정보를 수집하고 작업 흐름을 개선하기 위한 온라인 양식을 만드십시오.",
     "getStarted": "시작하다"
   },
-  "create": {
-    "createNewForm": "새 양식 만들기",
+  "baseStepper": {
     "setUpForm": "양식 설정",
     "designForm": "디자인 양식",
+    "manageForm": "양식 관리"
+    },
+  "create": {
+    "createNewForm": "새 양식 만들기",
     "formSettings": "양식 설정",
     "disclaimer": "부인 성명",
     "disclaimerStmt": "양식 디자이너에 대한 면책 조항 및 책임 진술에 동의합니다.",

diff --git a/app/frontend/src/internationalization/trans/chefs/pa/pa.json b/app/frontend/src/internationalization/trans/chefs/pa/pa.json
@@ -762,10 +762,13 @@
     "createOnlineTitle": "ਆਪਣੇ ਗਾਹਕਾਂ ਤੋਂ ਜਾਣਕਾਰੀ ਇਕੱਠੀ ਕਰਨ ਅਤੇ ਆਪਣੇ ਵਰਕਫਲੋ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਔਨਲਾਈਨ ਫਾਰਮ ਬਣਾਓ।",
     "getStarted": "ਸ਼ੁਰੂ ਕਰੋ"
   },
-  "create": {
-    "createNewForm": "ਨਵਾਂ ਫਾਰਮ ਬਣਾਓ",
+  "baseStepper": {
     "setUpForm": "ਫਾਰਮ ਸੈਟ ਅਪ ਕਰੋ",
     "designForm": "ਡਿਜ਼ਾਈਨ ਫਾਰਮ",
+    "manageForm": "ਫਾਰਮ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰੋ"
+    },
+  "create": {
+    "createNewForm": "ਨਵਾਂ ਫਾਰਮ ਬਣਾਓ",
     "formSettings": "ਫਾਰਮ ਸੈਟਿੰਗਾਂ",
     "disclaimer": "ਬੇਦਾਅਵਾ",
     "disclaimerStmt": "ਮੈਂ ਫਾਰਮ ਡਿਜ਼ਾਈਨਰਾਂ ਲਈ ਬੇਦਾਅਵਾ ਅਤੇ ਜ਼ਿੰਮੇਵਾਰੀ ਦੇ ਬਿਆਨ ਨਾਲ ਸਹਿਮਤ ਹਾਂ",

diff --git a/app/frontend/src/internationalization/trans/chefs/pt/pt.json b/app/frontend/src/internationalization/trans/chefs/pt/pt.json
@@ -762,10 +762,14 @@
     "createOnlineTitle": "Crie formulários online para coletar informações de seus clientes e melhorar seus fluxos de trabalho.",
     "getStarted": "iniciar"
   },
+
+"baseStepper": {
+  "setUpForm": "Configurar formulário",
+    "designForm": "Forma de desenho",
+    "manageForm": "Gerenciar formulário"
+},
   "create": {
     "createNewForm": "Criar novo formulário",
-    "setUpForm": "Configurar formulário",
-    "designForm": "Forma de desenho",
     "formSettings": "Configurações do formulário",
     "disclaimer": "Isenção de responsabilidade",
     "disclaimerStmt": "Eu concordo com a isenção de responsabilidade e declaração de responsabilidade para Form Designers",