added require.js and search item by name

l3limp · Aug 6, 2024 · 2d512f7 · 2d512f7
1 parent c4ead5e
commit 2d512f7
Show file tree

Hide file tree

Showing 15 changed files with 632 additions and 483 deletions.
diff --git a/directives/categoriesColumn.htm b/directives/categoriesColumn.htm
@@ -1,13 +1,14 @@
+<div class="small-screen-hide col-md-2 sticky-categories">
+  <p style="margin-bottom: 12px">Categories</p>
 
-<div class="small-screen-hide col-md-2">
-    <div class="list-group sticky-categories">
-      <a
-        ng-click="changeCategory({newCategory:category})"
-        class="list-group-item list-group-item-action"
-        ng-repeat="category in categories"
-        ng-class="{ active: category === currentCategory }"
-      >
-        {{category}}
-      </a>
-    </div>
-  </div>
+  <div class="list-group">
+    <a
+      ng-click="changeCategory({newCategory:category})"
+      class="list-group-item list-group-item-action"
+      ng-repeat="category in categories"
+      ng-class="{ active: category === currentCategory }"
+    >
+      {{category}}
+    </a>
+  </div>
+</div>
diff --git a/directives/homeNavbar.htm b/directives/homeNavbar.htm
@@ -1,7 +1,32 @@
 <div class="sticky-top">
-  <div class="container" style="color: white; height: 32px;">
-    <div class="navbar-brand" style="color: slategrey">Categories</div>
-    <ul class=" nav navbar-nav navbar-right">
+  <div class="container" style="color: white; height: 32px">
+    <ul class="nav navbar-nav navbar-right">
+      <li class="vertical-margin">
+
+        <div class="input-wrapper">
+          <input
+            type="text"
+            class="form-control"
+            placeholder="Search for items"
+            ng-model="searchQuery"
+          />
+          <div class="my-row">
+            <i
+            ng-if="searchQuery != ''"
+
+              class=" btn fa fa-search search-icon small-font"
+              ng-click="loadSearchedItems({searchQuery: searchQuery})"
+            ></i>
+            <i
+
+
+              class=" btn fa fa-close clear-icon small-font"
+              ng-click="loadSearchedItems({searchQuery: ''})"
+            ></i>
+          </div>
+
+        </div>
+      </li>
       <li>
         <i
           class="fa fa-leaf btn vertical-margin"
@@ -16,7 +41,7 @@
         <i
           class="fa fa-inr btn vertical-margin"
           style="color: slategrey"
-          uib-tooltip="Doesn't work"
+          uib-tooltip="Works now"
           tooltip-placement="bottom"
           ng-click="sortItemsPriceAscending()"
         ></i>
@@ -28,7 +53,7 @@
           style="color: slategrey"
           ng-click="toggleFilterModalVisibility()"
         ></i>
-        
+
         >
         <filters-modal
           show-filter-modal="showFilterModal"

diff --git a/index.htm b/index.htm
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-us" ng-app="oldMenu">
+<html lang="en-us">
   <head>
     <title>OldMenu</title>
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
@@ -23,10 +23,6 @@
       }
     </style>
 
-    <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
-    <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
-
   </head>
   <body class="body" id="main" ng-controller="bodyController">
     <header>
@@ -47,14 +43,7 @@
         ></cart-sidebar>
 
     </div>
-
-    <script src="ng/app.js"></script>
-    <script src="ng/routes.js"></script>
-    <script src="ng/controllers/bodyController.js"></script>
-    <script src="ng/controllers/buyNowModalController.js"></script>
-    <script src="ng/controllers/homeController.js"></script>
-    <script src="ng/controllers/itemDetailsController.js"></script>
-    <script src="ng/services.js"></script>
-    <script src="ng/directives.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js" data-main="ng/main"></script>
   </body>
 </html>
diff --git a/ng/app.js b/ng/app.js
@@ -1 +1,3 @@
-var oldMenu = angular.module("oldMenu", ["ngRoute", 'ui.bootstrap']);
+define(["angular", "angular-route", "ui-bootstrap"], function (angular) {
+  return angular.module("oldMenu", ["ngRoute", "ui.bootstrap"]);
+});
diff --git a/ng/controllers/bodyController.js b/ng/controllers/bodyController.js
@@ -1,23 +1,29 @@
-oldMenu.controller("bodyController", [
+define(["app"], function (oldMenu) {
+  oldMenu.controller("bodyController", [
     "$scope",
     "cartService",
     "cacheService",
     function ($scope, cartService, cacheService) {
       $scope.isCartOpen = false;
       $scope.cart = cartService.cart;
 
-      $scope.$watch('cart', function(newValue) {
-        cacheService.setData('cart', newValue);
-      }, true);
+      $scope.$watch(
+        "cart",
+        function (newValue) {
+          cacheService.setData("cart", newValue);
+        },
+        true
+      );
 
       $scope.toggleCartVisibility = function () {
         $scope.isCartOpen = !$scope.isCartOpen;
       };
-  
+
       $scope.getCartQuantity = cartService.getCartQuantity;
       $scope.changeItemQuantityInCart = cartService.changeItemQuantityInCart;
       $scope.getCartSubtotal = cartService.getCartSubtotal;
       $scope.getCartSubtotalWithoutDiscount =
         cartService.getCartSubtotalWithoutDiscount;
     },
-  ]);
+  ]);
+});
diff --git a/ng/controllers/buyNowModalController.js b/ng/controllers/buyNowModalController.js
@@ -1,46 +1,28 @@
-oldMenu.controller("ModalController", [
-  "$scope",
-  "$uibModal",
-  "cartService",
-  function ($scope, $uibModal, cartService) {
-    $scope.openModal = function () {
-      var modalInstance = $uibModal.open({
-        templateUrl: "checkoutModal.htm",
-        controller: "ModalInstanceController",
-        size: "lg",
-        resolve: {
-          cartService: cartService,
-        },
-      });
+define(["app"], function (oldMenu) {
+  oldMenu.controller("ModalController", [
+    "$scope",
+    "$uibModal",
+    "cartService",
+    function ($scope, $uibModal, cartService) {
+      $scope.openModal = function () {
+        var modalInstance = $uibModal.open({
+          templateUrl: "checkoutModal.htm",
+          controller: "ModalInstanceController",
+          size: "lg",
+          resolve: {
+            cartService: cartService,
+          },
+        });
 
-      modalInstance.result.then(
-        function (selectedItem) {
-          $scope.selected = selectedItem;
-        },
-        function () {
-          console.log("Modal dismissed");
-        }
-      );
-    };
-  },
-]);
-
-oldMenu.controller("ModalInstanceController", [
-  "$scope",
-  "$uibModalInstance",
-  "cartService",
-  function ($scope, $uibModalInstance, cartService) {
-    $scope.cart = cartService.cart;
-
-    $scope.getCartSubtotal = cartService.getCartSubtotal;
-    console.log($scope.getCartSubtotal);
-
-    $scope.ok = function () {
-      $uibModalInstance.close("Some result");
-    };
-
-    $scope.cancel = function () {
-      $uibModalInstance.dismiss("cancel");
-    };
-  },
-]);
+        modalInstance.result.then(
+          function (selectedItem) {
+            $scope.selected = selectedItem;
+          },
+          function () {
+            console.log("Modal dismissed");
+          }
+        );
+      };
+    },
+  ]);
+});
diff --git a/ng/controllers/buyNowModalInstanceController.js b/ng/controllers/buyNowModalInstanceController.js
@@ -0,0 +1,20 @@
+define(["app"], function (oldMenu) {
+  oldMenu.controller("ModalInstanceController", [
+    "$scope",
+    "$uibModalInstance",
+    "cartService",
+    function ($scope, $uibModalInstance, cartService) {
+      $scope.cart = cartService.cart;
+
+      $scope.getCartSubtotal = cartService.getCartSubtotal;
+
+      $scope.ok = function () {
+        $uibModalInstance.close("Some result");
+      };
+
+      $scope.cancel = function () {
+        $uibModalInstance.dismiss("cancel");
+      };
+    },
+  ]);
+});