1249 Submit project details for new project

- refactored projects-new-information.hbs - extracted all contact form fields into a new template: projects-new-add-contacts.hbs - added boroughs to projects-new-information template using ember powerselect - added functions to projects/new..js to handle dropdown actions - updated project optionset to include boroughs and imported into optionsets.js
NYCPlanning · Oct 19, 2024 · 80910ef · 80910ef
1 parent 7e2d128
commit 80910ef
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 140 deletions.
diff --git a/client/.gitignore b/client/.gitignore
@@ -1,12 +1,12 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist/
+**/dist
 /tmp/
 
 # dependencies
 /bower_components/
-/node_modules/
+**/node_modules
 
 # misc
 /.env*

diff --git a/client/app/components/packages/projects/new.hbs b/client/app/components/packages/projects/new.hbs
@@ -20,9 +20,14 @@
           Planning will contact you with the next steps.
         </p>
       </section>
-      <Packages::Projects::ProjectsNewInformation @form={{saveableProjectsNewForm}} />
+      <Packages::Projects::ProjectsNewInformation 
+        @form={{saveableProjectsNewForm}} 
+        @boroughOptions={{this.boroughOptions}} 
+        @onBoroughChange={{this.handleBoroughChange}} 
+        @selectedBorough={{this.selectedBorough}} />
+      <Packages::Projects::ProjectsNewAddContacts 
+        @form={{saveableProjectsNewForm}} />
     </div>
-
     <div class="cell large-4 sticky-sidebar">
       <saveableProjectsNewForm.PageNav>
         <saveableProjectsNewForm.SubmitButton @isEnabled={{saveableProjectsNewForm.isSubmittable}} data-test-save-button />

diff --git a/client/app/components/packages/projects/new.js b/client/app/components/packages/projects/new.js
@@ -1,7 +1,10 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import SubmittableProjectsNewForm from '../../../validations/submittable-projects-new-form';
+import { optionset } from '../../../helpers/optionset';
+
 
 export default class ProjectsNewFormComponent extends Component {
   validations = {
@@ -14,6 +17,24 @@ export default class ProjectsNewFormComponent extends Component {
   @service
   store;
 
+  @tracked
+  selectedBorough = null;
+
+  get boroughOptions() {
+    return optionset(['project', 'boroughs', 'list']);
+  }
+
+  @action
+  handleBoroughChange(selectedBorough) {
+    console.log('Selected borough:', selectedBorough);
+
+    this.selectedBorough = selectedBorough;
+
+    if (this.args.form) {
+      this.args.form.set('borough', selectedBorough);
+    }
+  }
+
   @action
   async submitPackage() {
     const primaryContactInput = {
@@ -34,12 +55,12 @@ export default class ProjectsNewFormComponent extends Component {
 
     const contactInputs = [primaryContactInput, applicantInput];
     try {
-      const contactPromises = contactInputs
-        .map((contact) => this.store.queryRecord('contact',
-          {
-            email: contact.email,
-            includeAllStatusCodes: true,
-          }));
+      const contactPromises = contactInputs.map((contact) =>
+        this.store.queryRecord('contact', {
+          email: contact.email,
+          includeAllStatusCodes: true,
+        })
+      );
 
       const contacts = await Promise.all(contactPromises);
 

diff --git a/client/app/components/packages/projects/projects-new-add-contacts.hbs b/client/app/components/packages/projects/projects-new-add-contacts.hbs
@@ -0,0 +1,119 @@
+{{#let @form as |form|}}
+<form.Section @title="Contact Information">
+  <h3>Primary Contact</h3>
+  <p>This contact is the person who will respond to public inquiries regarding the application.</p>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      First Name 
+    </Q.Label>
+
+    <form.Field 
+      @attribute="primaryContactFirstName"
+      @type="text-input"
+      id={{Q.questionId}}
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      Last Name 
+    </Q.Label>
+
+    <form.Field 
+      @attribute="primaryContactLastName"
+      @type="text-input"
+      id={{Q.questionId}}
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      Email
+    </Q.Label>
+
+    <form.Field 
+      @attribute="primaryContactEmail" 
+      @type="text-input" 
+      id={{Q.questionId}} 
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{false}} as |Q|>
+    <Q.Label>
+      Phone
+    </Q.Label>
+    <p class="q-help">
+      No dashes, parentheses, or special characters.
+    </p>
+
+    <form.Field 
+      @attribute="primaryContactPhone" 
+      @type="text-input" 
+      id={{Q.questionId}} 
+      @showCounter={{true}}
+      @maxlength="10"
+    />
+  </Ui::Question>
+
+  <h3>Applicant</h3>
+  <p>The owner, entity, or representative of the project described in this application.</p>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      First Name 
+    </Q.Label>
+
+    <form.Field 
+      @attribute="applicantFirstName"
+      @type="text-input"
+      id={{Q.questionId}}
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      Last Name 
+    </Q.Label>
+
+    <form.Field 
+      @attribute="applicantLastName"
+      @type="text-input"
+      id={{Q.questionId}}
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      Email
+    </Q.Label>
+
+    <form.Field 
+      @attribute="applicantEmail" 
+      @type="text-input" 
+      id={{Q.questionId}} 
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{false}} as |Q|>
+    <Q.Label>
+      Phone
+    </Q.Label>
+    <p class="q-help">
+      No dashes, parentheses, or special characters.
+    </p>
+
+    <form.Field 
+      @attribute="applicantPhone" 
+      @type="text-input" 
+      id={{Q.questionId}} 
+      @showCounter={{true}}
+      @maxlength="10"
+    />
+  </Ui::Question>
+</form.Section>
+{{/let}}
diff --git a/client/app/components/packages/projects/projects-new-information.hbs b/client/app/components/packages/projects/projects-new-information.hbs
@@ -13,122 +13,21 @@
       @maxlength="50"
     />
   </Ui::Question>
-</form.Section>
-<form.Section @title="Contact Information">
-  <h3>Primary Contact</h3>
-  <p>This contact is the person who will respond to public inquiries regarding the application.</p>
-  <Ui::Question @required={{true}} as |Q|>
-    <Q.Label>
-      First Name 
-    </Q.Label>
-
-    <form.Field 
-      @attribute="primaryContactFirstName"
-      @type="text-input"
-      id={{Q.questionId}}
-      @showCounter={{true}}
-      @maxlength="50"
-    />
-  </Ui::Question>
-  <Ui::Question @required={{true}} as |Q|>
-    <Q.Label>
-      Last Name 
-    </Q.Label>
-
-    <form.Field 
-      @attribute="primaryContactLastName"
-      @type="text-input"
-      id={{Q.questionId}}
-      @showCounter={{true}}
-      @maxlength="50"
-    />
-  </Ui::Question>
   <Ui::Question @required={{true}} as |Q|>
     <Q.Label>
-      Email
+      Borough
     </Q.Label>
-
-    <form.Field 
-      @attribute="primaryContactEmail" 
-      @type="text-input" 
-      id={{Q.questionId}} 
-      @showCounter={{true}}
-      @maxlength="50"
-    />
-  </Ui::Question>
-  <Ui::Question @required={{false}} as |Q|>
-    <Q.Label>
-      Phone
-    </Q.Label>
-    <p class="q-help">
-      No dashes, parentheses, or special characters.
-    </p>
-
-    <form.Field 
-      @attribute="primaryContactPhone" 
-      @type="text-input" 
-      id={{Q.questionId}} 
-      @showCounter={{true}}
-      @maxlength="10"
-    />
-  </Ui::Question>
-
-  <h3>Applicant</h3>
-  <p>The owner, entity, or representative of the project described in this application.</p>
-  <Ui::Question @required={{true}} as |Q|>
-    <Q.Label>
-      First Name 
-    </Q.Label>
-
-    <form.Field 
-      @attribute="applicantFirstName"
-      @type="text-input"
-      id={{Q.questionId}}
-      @showCounter={{true}}
-      @maxlength="50"
-    />
-  </Ui::Question>
-  <Ui::Question @required={{true}} as |Q|>
-    <Q.Label>
-      Last Name 
-    </Q.Label>
-
-    <form.Field 
-      @attribute="applicantLastName"
-      @type="text-input"
-      id={{Q.questionId}}
-      @showCounter={{true}}
-      @maxlength="50"
-    />
-  </Ui::Question>
-  <Ui::Question @required={{true}} as |Q|>
-    <Q.Label>
-      Email
-    </Q.Label>
-
-    <form.Field 
-      @attribute="applicantEmail" 
-      @type="text-input" 
-      id={{Q.questionId}} 
-      @showCounter={{true}}
-      @maxlength="50"
-    />
-  </Ui::Question>
-  <Ui::Question @required={{false}} as |Q|>
-    <Q.Label>
-      Phone
-    </Q.Label>
-    <p class="q-help">
-      No dashes, parentheses, or special characters.
-    </p>
-
-    <form.Field 
-      @attribute="applicantPhone" 
-      @type="text-input" 
-      id={{Q.questionId}} 
-      @showCounter={{true}}
-      @maxlength="10"
-    />
+    <PowerSelect 
+      @options={{@boroughOptions}}
+      @onChange={{@onBoroughChange}}
+      @selected={{@selectedBorough}} 
+      @searchField="label"
+      @placeholder="Select a borough"
+      as |borough|
+      >
+      {{borough.label}}
+    </PowerSelect>
   </Ui::Question>
 </form.Section>
-{{/let}}
+{{/let}}
+