Feature/update location modal

app/components/modal-location.hbs

@@ -0,0 +1,112 @@
+{{#if this.isOpen}}
+  <div class='modal__overlay'>
+    <div class='modal__open' id='#blur'>
+      <div class='modal__header'>
+        <h3 class='update__heading'>
+          Update Location
+        </h3>
+        <FaIcon
+          data-test-cross-icon
+          @icon='xmark'
+          class='xmark__icon'
+          {{on 'click' (fn this.toggleModal)}}
+        />
+      </div>
+      <div class='modal__form'>
+        <form class='form__container'>
+          <div class='modal__location'>
+            <div class='modal__location__input__container'>
+              <Input
+                class='modal__Locationinput'
+                data-test-input-location
+                type='text'
+                value={{this.location}}
+                @placeholder={{'Enter New Location'}}
+                @disabled={{@disabled}}
+                {{on 'input' (fn this.updateValue)}}
+              />
+            </div>
+            <div class='search__box'>
+              <FaIcon @icon='magnifying-glass' class='magnifying-glass' />
+            </div>
+          </div>
+
+          {{#each this.placesArray as |places|}}
+            {{#if this.location}}
+
+              <div
+                data-test-places
+                class='places__container'
+                role='button'
+                {{on 'click' (fn this.handleSelectedPlace places.place_name)}}
+              >
+
+                <FaIcon @icon='location-dot' class='location-dot' />
+                {{places.place_name}}
+
+              </div>
+
+            {{else}}
+
+            {{/if}}
+
+          {{/each}}
+
+          <select
+            class='modal__selectinput'
+            data-test-update_location
+            {{on 'change' (fn this.setSelection)}}
+          >
+            <option value='' disabled selected>
+              Reason To Update Location
+            </option>
+            <option value='travelling'>
+              travelling
+            </option>
+            <option value='relocating'>
+              relocating
+            </option>
+          </select>
+          <select
+            class='modal__selectinput'
+            data-test-send-notification
+            {{on 'change' (fn this.setSelectedNotification)}}
+          >
+            <option value='' disabled selected>
+              Send Notification to :
+            </option>
+            <option value='Developers'>
+              Developers
+            </option>
+            <option value='Members'>
+              Members
+            </option>
+            <option value='Users'>
+              Users
+            </option>
+          </select>
+          <button
+            data-test-submit-btn
+            class='update__btn'
+            type='submit'
+            disabled={{this.isSubmitDisabled}}
+            {{on 'click' (fn this.handleSubmit)}}
+          >
+            Update
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+{{else}}
+  <a
+    id='update__link'
+    data-test-update-link
+    href='#'
+    type='link'
+    class='update__link'
+    {{on 'click' (fn this.toggleModal)}}
+  >
+    update location
+  </a>
+{{/if}}

app/components/modal-location.js

@@ -0,0 +1,116 @@
+/* eslint-disable prettier/prettier */
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+
+import ENV from 'website-my/config/environment';
+
+const BASE_URL = ENV.GEOCODING_API_URL;
+
+
+export default class ModalLocationComponent extends  Component{
+
+    @tracked isOpen = false;
+
+    @tracked location = '';
+
+    @tracked updateLocation = null;
+
+    @tracked sendNotification = null;
+
+    @tracked isCheckAll = false;
+
+    @tracked isLoading = false;
+
+    @tracked placesArray = [];
+
+    @action setSelection(event) {
+      this.updateLocation = event.target.value;
+
+      console.log(this.updateLocation, 'update location option');
+    }
+
+    @action setSelectedNotification(event) {
+      this.sendNotification = event.target.value;
+
+      console.log(this.sendNotification, 'notification sent to');
+    }
+
+
+    @action handleSelectedPlace(places) {
+
+          console.log('clicked' , places);
+
+
+          this.location = places;
+    }
+
+    @action async updateValue(event) {
+      this.location = event.target.value;
+
+      this.isLoading = true;
+
+      try {
+        const response = await fetch(
+          `${BASE_URL}/${this.location}.json?limit=4&proximity=ip&types=place%2Cpostcode%2Caddress&access_token=pk.eyJ1IjoidmluYXlhay0wOSIsImEiOiJjbDdoM24waG0wYW9tM3dwYjN3aWJpNGh4In0.pcwljIKYp_NL-GmtDztvPg`,
+          {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+
+        if (response.ok) {
+          this.isLoading = false;
+          console.log(response, 'result url');
+
+          const result = await response.json();
+
+          this.placesArray = result?.features;
+
+          console.log(this.placesArray, '____result');
+        }
+      } catch (error) {
+        this.isLoading = false;
+        console.log(error.message, '__error');
+      } finally {
+        this.isLoading = false;
+      }
+    }
+
+    @action toggleModal() {
+      this.isOpen = !this.isOpen;
+    }
+
+    formDataKeyName = 'modal';
+
+    @tracked isSubmitDisabled = false;
+
+    @action async handleSubmit(e) {
+      e.preventDefault();
+
+      this.isOpen = false;
+
+      const cleanReqObject = {
+        location: this.location,
+
+        updateLocation: this.updateLocation,
+
+        sendNotification: this.sendNotification,
+      };
+
+      this.isSubmitClicked = true;
+
+      this.location = '';
+
+      console.log(cleanReqObject, 'feilds value');
+    }
+
+
+
+
+
+
+}

app/components/navbar.hbs

@@ -1,24 +1,24 @@
-<nav class="nav">
-  <button type="button" class="hamburger--toggle" {{on "click" this.toggleNav}}>
-    <i class="fas fa-bars fa-2x"></i>
-  </button>
-
-  <ul class="nav-menu {{if this.isNavOpen "active-nav" ""}}">
-    <li class="nav__menu__logo">
-      <a href={{this.HOME_PAGE_URL}}>
-        <img src="RDSLogo.png" alt="real_dev_squad" height="50px" width="50px" />
-      </a>
-    </li>
-    <li class="nav__menu__home"><a href={{this.HOME_PAGE_URL}}>Home</a></li>
-    {{#each this.RDS_APPS_MAPPING as |siteURL|}}
-      <li><a href={{siteURL.url}}>{{siteURL.siteName}}</a></li>
-    {{/each}}
-  </ul>
-
-  <div class="user">
-    <div class="user__greet">
-      <div class="user__greet__msg">Hello, {{@firstName}}!</div>
-      <img class="user__profile__pic" src={{@profilePictureURL}} alt="profile"/>
-    </div>
-  </div>
+<nav class="nav">
+  <button type="button" class="hamburger--toggle" {{on "click" this.toggleNav}}>
+    <i class="fas fa-bars fa-2x"></i>
+  </button>
+
+  <ul class="nav-menu {{if this.isNavOpen "active-nav" ""}}">
+    <li class="nav__menu__logo">
+      <a href={{this.HOME_PAGE_URL}}>
+        <img src="RDSLogo.png" alt="real_dev_squad" height="50px" width="50px" />
+      </a>
+    </li>
+    <li class="nav__menu__home"><a href={{this.HOME_PAGE_URL}}>Home</a></li>
+    {{#each this.RDS_APPS_MAPPING as |siteURL|}}
+      <li><a href={{siteURL.url}}>{{siteURL.siteName}}</a></li>
+    {{/each}}
+  </ul>
+
+  <div class="user">
+    <div class="user__greet">
+      <div class="user__greet__msg">Hello, {{@firstName}}!</div>
+      <img class="user__profile__pic" src={{@profilePictureURL}} alt="profile"/>
+    </div>
+  </div>
 </nav>

app/components/user-status.hbs

@@ -1,22 +1,22 @@
-<div class="heading">
-  {{#each this.currentUserStatus as |currentStatus|}}
-    {{#if (eq @status currentStatus.status)}}
-      <h2 data-test-status>{{currentStatus.message}}</h2>
-    {{/if}}
-  {{/each}}
-</div>
-
-<div class="buttons">
-  {{#each this.currentUserStatus as |currentStatus|}}
-    {{#if (eq @status currentStatus.status)}}
-      {{#if (not-eq @status 'ooo')}}
-        <button class={{currentStatus.class}} type="button" data-test-button disabled={{@isStatusUpdating}} {{on "click" (fn @onUpdateStatus currentStatus.firstAvailableStatus )}}>
-          <span data-test-button-text>{{currentStatus.firstStatusMessage}}</span>
-        </button>
-      {{/if}}
-      <button class="buttons--small" type="button" disabled={{@isStatusUpdating}} {{on "click" (fn @onUpdateStatus currentStatus.secondAvailableStatus )}}>
-        <span>{{currentStatus.secondStatusMessage}}</span>
-      </button>
-    {{/if}}
-  {{/each}}
-</div>
+<div class="heading">
+  {{#each this.currentUserStatus as |currentStatus|}}
+    {{#if (eq @status currentStatus.status)}}
+      <h2 data-test-status>{{currentStatus.message}}</h2>
+    {{/if}}
+  {{/each}}
+</div>
+
+<div class="buttons">
+  {{#each this.currentUserStatus as |currentStatus|}}
+    {{#if (eq @status currentStatus.status)}}
+      {{#if (not-eq @status 'ooo')}}
+        <button class={{currentStatus.class}} type="button" data-test-button disabled={{@isStatusUpdating}} {{on "click" (fn @onUpdateStatus currentStatus.firstAvailableStatus )}}>
+          <span data-test-button-text>{{currentStatus.firstStatusMessage}}</span>
+        </button>
+      {{/if}}
+      <button class="buttons--small" type="button" disabled={{@isStatusUpdating}} {{on "click" (fn @onUpdateStatus currentStatus.secondAvailableStatus )}}>
+        <span>{{currentStatus.secondStatusMessage}}</span>
+      </button>
+    {{/if}}
+  {{/each}}
+</div>

app/router.js

@@ -12,4 +12,5 @@ Router.map(function () {
   this.route('tasks');
   this.route('profile');
   this.route('identity');
+  this.route('modal');
 });

app/styles/app.css

@@ -10,6 +10,7 @@
 @import 'components/input-field.css';
 @import 'navbar.css';
 @import 'identity.css';
+@import 'components/modal-display.css';
 
 html,
 body {
@@ -34,6 +35,7 @@ body {
   flex: 100%;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .greeting {