Merge pull request #53 from CityOfPhiladelphia/search-update

Search update
CityOfPhiladelphia · Sep 6, 2024 · 127bbf4 · 127bbf4
2 parents 338c478 + 2b09395
commit 127bbf4
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/src/components/ServiceRequestTracker.vue b/src/components/ServiceRequestTracker.vue
@@ -35,7 +35,12 @@
       To track an existing service request, enter your service request number in the tool above.
     </div>
     </div>
-    <div v-if="failure && !loading">
+    <div v-if="showSearchInput" class="search-input">
+      <button class="clear-label" @click="clearSearchBar()">Clear</button>
+      <div class="service-request-label">Service Request</div>
+      <div class="service-request">#{{ displayID }}</div>
+    </div>
+    <div v-if="failure && !loading && showSearchInput">
       <strong class="error-message">This service request number was not found. If you marked your initial request as private, you won't be able to track it using this tool. Call 311 for an update on private tickets.</strong>
     </div>
     <div v-if="loading" class="mtm center">
@@ -45,8 +50,7 @@
       <div class="row">
         <div class="columns">
           <section class="tertiary-content">
-            <h3 class="service-id">Service request #{{ serviceRequestData.service_request_id }}</h3>
-             <div class="mlm">
+            <div class="mlm">
               <strong>Status</strong>
               <p>{{ serviceRequestData.status | capitalize }}</p>
             </div>
@@ -94,10 +98,12 @@ export default {
   data: function() {
     return {
       id: "",
+      displayID: "",
       serviceRequestData: null,
       failure: false,
       loading: false,
-      routerQuery: {}
+      routerQuery: {},
+      showSearchInput: false 
     };
   },
 
@@ -132,7 +138,7 @@ export default {
       if (val.length == 8) {
         this.requestData();
       }
-      this.id = val.replace(/[^0-9]+/g, ''); 
+            this.id = val.replace(/[^0-9]+/g, ''); 
     }
   },
   methods: {
@@ -167,11 +173,15 @@ export default {
     },
 
     clearSearchBar() {
-      this.id = "";
+      this.id = null;
+      this.showSearchInput = false; 
+      this.serviceRequestData = null;
+      this.failure = false;
     },
 
     requestData() {
       this.loading = true;
+      this.showSearchInput = true; 
       let reqUrl = endpoint + this.id + ".json";
 
       axios
@@ -180,11 +190,13 @@ export default {
           this.serviceRequestData = response.data[0];
           this.loading = false;
           this.failure = false;
+          this.displayID = this.id;
         })
         .catch(e => {
           this.failure = true;
           this.loading = false;
           this.serviceRequestData = null;
+          this.displayID = this.id;
           window.console.log(e);
         });
     }
@@ -291,12 +303,9 @@ export default {
   margin: 17px 10px;
 }
 
-.service-id {
-  margin-top: 0px !important;
-}
-
 .error-message {
-  color: #cc3000;
+  font-weight: 200;
+  font-size: 20px; 
 }
 
 </style>