Feat/setup wizard last bits 2

dt-core/admin/components/setup-wizard-controls.js

@@ -16,6 +16,9 @@ export class SetupWizardControls extends OpenLitElement {
     this.dispatchEvent(new CustomEvent('back'));
   }
   next() {
+    if (this.saving) {
+      return;
+    }
     this.dispatchEvent(new CustomEvent('next'));
   }
   skip() {
@@ -36,7 +39,11 @@ export class SetupWizardControls extends OpenLitElement {
           : html`
               <button @click=${this.back}>${this.backLabel ?? 'Back'}</button>
             `}
-        <button @click=${this.next} class="btn-primary">
+        <button
+          @click=${this.next}
+          class="btn-primary ${this.saving ? 'saving' : ''}"
+          ?disabled=${this.saving}
+        >
           ${this.nextLabel ?? 'Next'}
           ${this.saving ? html`<span class="spinner light"></span>` : ''}
         </button>

dt-core/admin/components/setup-wizard-keys.js

@@ -1,52 +1,47 @@
-import {
-  html,
-  css,
-} from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
+import { html } from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
 import { OpenLitElement } from './setup-wizard-open-element.js';
 
 export class SetupWizardKeys extends OpenLitElement {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-    `,
-  ];
-
   static get properties() {
     return {
       step: { type: Object },
       firstStep: { type: Boolean },
-      _options: { type: Object },
+      _options: { type: Object, attribute: false },
       _saving: { type: Boolean, attribute: false },
+      _finished: { type: Boolean, attribute: false },
     };
   }
 
+  constructor() {
+    super();
+    this._saving = false;
+    this._finished = false;
+    this._options = {
+      dt_mapbox_api_key: '',
+      dt_google_map_key: '',
+    };
+    this.show_mapbox_instructions = false;
+    this.show_google_instructions = false;
+  }
+
   back() {
     this.dispatchEvent(new CustomEvent('back'));
   }
   async next() {
+    if (this._finished) {
+      this.dispatchEvent(new CustomEvent('next'));
+      return;
+    }
+
     this._saving = true;
     await window.dt_admin_shared.update_dt_options(this._options);
     this._saving = false;
-
-    this.dispatchEvent(new CustomEvent('next'));
+    this._finished = true;
   }
   skip() {
     this.dispatchEvent(new CustomEvent('next'));
   }
 
-  constructor() {
-    super();
-    this._saving = false;
-    this._options = {
-      dt_mapbox_api_key: '',
-      dt_google_map_key: '',
-    };
-    this.show_mapbox_instructions = false;
-    this.show_google_instructions = false;
-  }
-
   render() {
     this._options.dt_mapbox_api_key = this.step.config.dt_mapbox_api_key;
     this._options.dt_google_map_key = this.step.config.dt_google_map_key;
@@ -219,13 +214,16 @@ export class SetupWizardKeys extends OpenLitElement {
               </tr>
             </tbody>
           </table>
+          ${this._finished
+            ? html` <section class="card success">Keys saved</section> `
+            : ''}
         </div>
         <setup-wizard-controls
           ?hideBack=${this.firstStep}
           @next=${this.next}
           @back=${this.back}
           @skip=${this.skip}
-          .saving=${this._saving}
+          ?saving=${this._saving}
         ></setup-wizard-controls>
       </div>
     `;

dt-core/admin/components/setup-wizard-modules.js

@@ -1,6 +1,5 @@
 import {
   html,
-  css,
   repeat,
 } from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
 import { OpenLitElement } from './setup-wizard-open-element.js';
@@ -13,6 +12,7 @@ export class SetupWizardModules extends OpenLitElement {
       availableModules: { type: Array, attribute: false },
       selectedModules: { type: Object, attribute: false },
       loading: { Boolean, attribute: false },
+      finished: { Boolean, attribute: false },
     };
   }
 
@@ -51,24 +51,14 @@ export class SetupWizardModules extends OpenLitElement {
   }
 
   back() {
-    switch (this.stage) {
-      case 'follow-up':
-        this.stage = 'work';
-        break;
-      case 'work':
-        this.dispatchEvent(new CustomEvent('back'));
-        break;
-    }
+    this.dispatchEvent(new CustomEvent('back'));
   }
   async next() {
-    switch (this.stage) {
-      case 'work':
-        await this.submitModuleChanges();
-        this.stage = 'follow-up';
-        break;
-      case 'follow-up':
-        this.dispatchEvent(new CustomEvent('next'));
-        break;
+    if (this.finished) {
+      this.dispatchEvent(new CustomEvent('next'));
+    } else {
+      await this.submitModuleChanges();
+      this.finished = true;
     }
   }
   skip() {
@@ -151,27 +141,31 @@ export class SetupWizardModules extends OpenLitElement {
                     </tbody>
                   </table>
                 </section>
-                ${this.loading ? html`<span class="spinner"></span>` : ''}
-              `
-            : ''}
-          ${this.stage === 'follow-up'
-            ? html`
-                <p>
-                  <strong
-                    >The modules you have chosen have been turned on.</strong
-                  >
-                </p>
-                <p>
-                  You can enable and disable these modules to your liking in the
-                  'Settings (D.T)' section of the Wordpress admin.
-                </p>
+                ${this.finished
+                  ? html`
+                      <section class="card success">
+                        <p>
+                          <strong
+                            >The modules you have chosen have been turned
+                            on.</strong
+                          >
+                        </p>
+                        <p>
+                          You can enable and disable these modules to your
+                          liking in the 'Settings (D.T)' section of the
+                          Wordpress admin.
+                        </p>
+                      </section>
+                    `
+                  : ''}
               `
             : ''}
         </div>
         <setup-wizard-controls
           nextLabel=${this.nextLabel()}
           backLabel=${this.translations.back}
           skipLabel=${this.translations.skip}
+          ?saving=${this.loading}
           @next=${this.next}
           @back=${this.back}
           @skip=${this.skip}

dt-core/admin/components/setup-wizard-plugins.js

@@ -1,26 +1,19 @@
-import {
-  html,
-  css,
-} from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
+import { html } from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
 import { OpenLitElement } from './setup-wizard-open-element.js';
 
 export class SetupWizardPlugins extends OpenLitElement {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-    `,
-  ];
-
   static get properties() {
     return {
       step: { type: Object },
       firstStep: { type: Boolean },
+      loading: { type: Boolean, attribute: false },
+      finished: { type: Boolean, attribute: false },
     };
   }
   constructor() {
     super();
+    this.loading = false;
+    this.finished = false;
     this.plugins = window.setupWizardShare.data.plugins;
     let recommended_plugins = [];
     Object.keys(window.setupWizardShare.data.use_cases || {}).forEach(
@@ -48,6 +41,11 @@ export class SetupWizardPlugins extends OpenLitElement {
     this.dispatchEvent(new CustomEvent('next'));
   }
   async next() {
+    if (this.finished) {
+      this.dispatchEvent(new CustomEvent('next'));
+      return;
+    }
+    this.loading = true;
     const plugins_to_install = this.plugins.filter((plugin) => plugin.selected);
 
     for (let plugin of plugins_to_install) {
@@ -68,9 +66,9 @@ export class SetupWizardPlugins extends OpenLitElement {
         plugin.active = true;
       }
     }
+    this.loading = false;
+    this.finished = true;
     this.requestUpdate();
-
-    this.dispatchEvent(new CustomEvent('next'));
   }
 
   select_all() {
@@ -82,6 +80,12 @@ export class SetupWizardPlugins extends OpenLitElement {
     });
     this.requestUpdate();
   }
+  nextLabel() {
+    if (this.finished) {
+      return 'Next';
+    }
+    return 'Install and Activate Selected Plugins';
+  }
 
   render() {
     return html`
@@ -146,10 +150,20 @@ export class SetupWizardPlugins extends OpenLitElement {
               })}
             </tbody>
           </table>
+          ${
+            this.finished
+              ? html`
+                  <section class="card success">
+                    Finished installing and activating plugins
+                  </section>
+                `
+              : ''
+          }
         </div>
         <setup-wizard-controls
           ?hideBack=${this.firstStep}
-          nextLabel="Install and Activate Selected Plugins"
+          nextLabel=${this.nextLabel()}
+          ?saving=${this.loading}
           @next=${this.next}
           @back=${this.back}
           @skip=${this.skip}

dt-core/admin/components/setup-wizard.js

@@ -81,6 +81,8 @@ export class SetupWizard extends LitElement {
       .wrap {
         padding: 1rem;
         min-height: 100vh;
+        max-width: 1200px;
+        margin: auto;
       }
       .cluster {
         display: flex;
@@ -129,7 +131,7 @@ export class SetupWizard extends LitElement {
       .cover {
         display: flex;
         flex-direction: column;
-        min-block-size: 80vh;
+        min-block-size: min(80vh, 800px);
       }
       .cover > * {
         margin-block: 0.5rem;
@@ -173,10 +175,18 @@ export class SetupWizard extends LitElement {
         background-color: var(--primary-color);
         color: var(--default-color);
       }
+      .btn-primary.saving {
+        background-color: var(--default-dark);
+        cursor: progress;
+      }
       .btn-primary:hover,
       .btn-primary:focus,
       .btn-primary:active {
         background-color: var(--primary-hover-color);
+
+        &.saving {
+          background-color: var(--default-dark);
+        }
       }
       .btn-outline {
         border: 1px solid transparent;
@@ -226,6 +236,17 @@ export class SetupWizard extends LitElement {
       .btn-card.disabled:hover {
         background-color: var(--default-hover-color);
       }
+      .card {
+        background-color: var(--default-color);
+        border-radius: 12px;
+        padding: 1rem 2rem;
+        width: fit-content;
+
+        &.success {
+          background-color: var(--secondary-color);
+          color: var(--default-color);
+        }
+      }
       .input-group {
         display: flex;
         flex-direction: column;

dt-core/admin/menu/menu-setup-wizard.php

@@ -39,6 +39,7 @@ public function __construct() {
         });
         add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
         add_filter( 'script_loader_tag', [ $this, 'filter_script_loader_tag' ], 10, 2 );
+        add_filter( 'dt_setup_wizard_items', [ $this, 'dt_setup_wizard_items' ], 10, 1 );
     }
 
     public function enqueue_scripts(){
@@ -70,6 +71,25 @@ public function enqueue_scripts(){
         ] );
     }
 
+    public function dt_setup_wizard_items( $items ){
+
+        $is_completed = !empty( get_option( 'dt_setup_wizard_completed' ) );
+        $is_administrator = current_user_can( 'manage_options' );
+
+        $setup_wizard_step = [
+            'label' => 'Setup Wizard',
+            'description' => 'D.T. can be used in many ways from managing connections and relationships, all the way through to tracking and managing a movement of Disciple Making.             In order to help you, we want to take you through a series of choices to give you the best start at getting Disciple.Tools setup ready to suit your needs.',
+            'link' => esc_url( admin_url( 'admin.php?page=dt_setup_wizard' ) ),
+            'complete' => $is_completed || !$is_administrator,
+            'hide_mark_done' => true
+        ];
+
+        return [
+            'getting_started' => $setup_wizard_step,
+            ...$items,
+        ];
+    }
+
     public function has_access_permission() {
         return !current_user_can( 'manage_dt' );
     }