feat: add module selection

DiscipleTools · Dec 16, 2024 · 5b80ef8 · 5b80ef8
1 parent ac2c520
commit 5b80ef8
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 30 deletions.
diff --git a/dt-core/admin/components/setup-wizard-modules.js b/dt-core/admin/components/setup-wizard-modules.js
@@ -1,35 +1,31 @@
 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';
 
 export class SetupWizardModules extends OpenLitElement {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-    `,
-  ];
-
   static get properties() {
     return {
       step: { type: Object },
       firstStep: { type: Boolean },
       stage: { type: String, attribute: false },
       useCases: { type: Array, attribute: false },
       option: { type: Object, attribute: false },
+      availableModules: { type: Array, attribute: false },
+      selectedModules: { type: Array, attribute: false },
     };
   }
 
   constructor() {
     super();
-
-    this.stage = 'prompt';
+    this.stage = 'work';
     this.data = window.setupWizardShare.data;
     this.useCases = [];
     this.option = {};
+    this.availableModules = [];
+    this.selectedModules = [];
   }
 
   firstUpdated() {
@@ -43,8 +39,7 @@ export class SetupWizardModules extends OpenLitElement {
     this.useCases = useCaseKeys.map(
       (useCaseKey) => this.data.use_cases[useCaseKey],
     );
-
-    console.log(useCaseKeys, this.useCases);
+    this.availableModules = this.data.modules;
   }
 
   back() {
@@ -74,15 +69,26 @@ export class SetupWizardModules extends OpenLitElement {
         break;
     }
   }
-
   selectOption(option) {
     this.option = option;
+    this.selectedModules = option.recommended_modules;
+  }
+  toggleModule(key) {
+    if (this.selectedModules.includes(key)) {
+      const index = this.selectedModules.findIndex((module) => module === key);
+      this.selectedModules = [
+        ...this.selectedModules.slice(0, index),
+        ...this.selectedModules.slice(index + 1),
+      ];
+    } else {
+      this.selectedModules = [...this.selectedModules, key];
+    }
   }
 
   render() {
     return html`
       <div class="cover">
-        <div class="content">
+        <div class="content flow">
           ${this.stage === 'prompt'
             ? html`
                 <h2>Time to customize what fields are available.</h2>
@@ -126,6 +132,39 @@ export class SetupWizardModules extends OpenLitElement {
                       : ''}
                   </div>
                 </div>
+                <section>
+                  <h2>Available Modules</h2>
+                  <div class="modules">
+                    ${Object.keys(this.availableModules).length > 0
+                      ? html`
+                          <div class="flow" size="small">
+                            ${repeat(
+                              this.availableModules,
+                              (module) => module.key,
+                              (module) => {
+                                return html`
+                                  <label class="toggle" key=${module.key}>
+                                    <input
+                                      type="checkbox"
+                                      ?checked=${this.selectedModules.includes(
+                                        module.key,
+                                      )}
+                                      @change=${() =>
+                                        this.toggleModule(module.key)}
+                                    />
+                                    <div class="flow">
+                                      <h3>${module.name}</h3>
+                                      <p>${module.description}</p>
+                                    </div>
+                                  </label>
+                                `;
+                              },
+                            )}
+                          </div>
+                        `
+                      : ''}
+                  </div>
+                </section>
               `
             : ''}
           ${this.stage === 'follow-up'

diff --git a/dt-core/admin/components/setup-wizard.js b/dt-core/admin/components/setup-wizard.js
@@ -121,22 +121,18 @@ export class SetupWizard extends LitElement {
         flex-direction: column;
         min-block-size: 80vh;
       }
-
       .cover > * {
         margin-block: 0.5rem;
       }
-
+      .cover > .content {
+        margin-block-end: auto;
+      }
       .cover > :first-child:not(.content) {
         margin-block-start: 0;
       }
-
       .cover > :last-child:not(.content) {
         margin-block-end: 0;
       }
-
-      .cover > .content {
-        margin-block-end: auto;
-      }
       /* Utilities */
       .ms-auto {
         margin-left: auto;
@@ -196,21 +192,25 @@ export class SetupWizard extends LitElement {
       .toggle {
         position: relative;
         display: inline-block;
-
         input {
           display: none;
         }
-        span {
+        div {
           display: inline-block;
           padding-block: 1rem;
-          background-color: var(--default-dark);
+          background-color: var(--default-color);
           border-radius: 8px;
           width: 100%;
           text-align: center;
         }
-        input:checked + span {
+        input:checked + div {
           background-color: var(--secondary-color);
           color: white;
+          h1,
+          h2,
+          h3 {
+            color: white;
+          }
         }
       }
       .breadcrumbs {
@@ -442,23 +442,23 @@ export class SetupWizard extends LitElement {
         <div class="grid" size="small">
           <label class="toggle">
             <input type="checkbox" />
-            <span>Name</span>
+            <div>Name</div>
           </label>
           <label class="toggle">
             <input type="checkbox" />
-            <span>Gender</span>
+            <div>Gender</div>
           </label>
           <label class="toggle">
             <input type="checkbox" />
-            <span>Email</span>
+            <div>Email</div>
           </label>
           <label class="toggle">
             <input type="checkbox" />
-            <span>Location</span>
+            <div>Location</div>
           </label>
           <label class="toggle">
             <input type="checkbox" />
-            <span>Phone</span>
+            <div>Phone</div>
           </label>
         </div>
         <h3>Stepper</h3>