Merge pull request #209 from Ritika-Patel08/#166

Improved: code by using ion-fab to add new parking(#166)
hotwax · Mar 7, 2024 · b2a446b · b2a446b
2 parents f6ba597 + 65951cc
commit b2a446b
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 26 deletions.
diff --git a/src/components/CreateFacilityGroupModal.vue b/src/components/CreateFacilityGroupModal.vue
@@ -46,7 +46,7 @@
 
       <ion-fab vertical="bottom" horizontal="end" slot="fixed">
         <ion-fab-button @click="createFacilityGroup" @keyup.enter.stop>
-          <ion-icon :icon="addOutline" />
+          <ion-icon :icon="saveOutline" />
         </ion-fab-button>
       </ion-fab>
     </form>
@@ -75,7 +75,7 @@ import {
   modalController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { addOutline, closeOutline } from "ionicons/icons";
+import { closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
 import { FacilityService } from "@/services/FacilityService";
 import { mapGetters, useStore } from 'vuex'
@@ -196,8 +196,8 @@ export default defineComponent({
     const store = useStore();
 
     return {
-      addOutline,
       closeOutline,
+      saveOutline,
       store,
       translate
     };

diff --git a/src/components/CreateVirtualFacilityModal.vue b/src/components/CreateVirtualFacilityModal.vue
@@ -38,7 +38,7 @@
 
       <ion-fab vertical="bottom" horizontal="end" slot="fixed">
         <ion-fab-button @click="createVirtualFacility" @keyup.enter.stop>
-          <ion-icon :icon="addOutline" />
+          <ion-icon :icon="saveOutline" />
         </ion-fab-button>
       </ion-fab>
     </form>
@@ -65,7 +65,7 @@ import {
   modalController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { addOutline, closeOutline } from "ionicons/icons";
+import { closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
 import { FacilityService } from "@/services/FacilityService";
 import { mapGetters, useStore } from 'vuex'
@@ -175,9 +175,9 @@ export default defineComponent({
     const store = useStore();
 
     return {
-      addOutline,
       closeOutline,
       store,
+      saveOutline,
       translate
     };
   },

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -5,7 +5,6 @@
   "Add Group": "Add Group",
   "Add locations to facility": "Add locations to facility",
   "Add group description": "Add group description",
-  "Add new parking": "Add new parking",
   "Staff member": "Staff member",
   "Add Store": "Add Store",
   "Add Store Address": "Add Store Address",
@@ -52,7 +51,6 @@
   "Country": "Country",
   "Create ": "Create ",
   "Create Distribution Center login": "Create Distribution Center login",
-  "Create group": "Create group",
   "Create login credentials": "Create login credentials",
   "Create Outlet Store": "Create Outlet Store",
   "Create Outlet Store login": "Create Outlet Store login",

diff --git a/src/theme/variables.css b/src/theme/variables.css
@@ -394,10 +394,4 @@ hr {
     display: none;
   }
 
-  .button-card {
-    display: grid;
-    place-items: center;
-    align-self: stretch;
-  }
-
 }
diff --git a/src/views/FindGroups.vue b/src/views/FindGroups.vue
@@ -59,12 +59,6 @@
               <ion-label>{{ group.description }}</ion-label>
             </ion-item>
           </ion-card> 
-          <ion-card class="button-card">
-            <ion-button color="medium" fill="clear" @click="openCreateFacilityGroupModal()">
-              <ion-icon :icon="addOutline" slot="start"/>
-              {{ translate('Create group') }}
-            </ion-button>
-          </ion-card>
         </main>
         <main v-else>
           <p class="empty-state">{{ translate("No groups found") }}</p>
@@ -81,6 +75,11 @@
           :loading-text="translate('Loading')"
         />
       </ion-infinite-scroll>
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button @click="openCreateFacilityGroupModal()">
+          <ion-icon :icon="addOutline" />
+        </ion-fab-button>
+      </ion-fab>
     </ion-content>
   </ion-page>
 </template>
@@ -93,6 +92,8 @@ import {
   IonCard,
   IonChip,
   IonContent,
+  IonFab,
+  IonFabButton,
   IonHeader,
   IonIcon,
   IonInfiniteScroll,
@@ -134,6 +135,8 @@ export default defineComponent({
     IonCard,
     IonChip,
     IonContent,
+    IonFab,
+    IonFabButton,
     IonHeader,
     IonIcon,
     IonInfiniteScroll,

diff --git a/src/views/Parking.vue b/src/views/Parking.vue
@@ -45,12 +45,6 @@
           <ion-item lines="full" v-if="facility.description && !['BACKORDER', 'PRE_ORDER'].includes(facility.facilityTypeId) && facility.facilityId !== '_NA_'">
             <ion-label>{{ facility.description }}</ion-label>
           </ion-item>
-        </ion-card> 
-        <ion-card class="button-card">
-          <ion-button color="medium" fill="clear" @click="openCreateVirtualFacilityModal()">
-            <ion-icon :icon="addOutline" slot="start"/>
-            {{ translate('Add new parking') }}
-          </ion-button>
         </ion-card>
       </main>
       <ion-infinite-scroll
@@ -63,6 +57,11 @@
           :loading-text="translate('Loading')"
         />
       </ion-infinite-scroll>
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button @click="openCreateVirtualFacilityModal()">
+          <ion-icon :icon="addOutline" />
+        </ion-fab-button>
+      </ion-fab>
     </ion-content>
   </ion-page>
 </template>
@@ -75,6 +74,8 @@ import {
   IonButtons,
   IonCard,
   IonContent,
+  IonFab,
+  IonFabButton,
   IonHeader, 
   IonIcon,
   IonInfiniteScroll,
@@ -109,6 +110,8 @@ export default defineComponent({
     IonButtons,
     IonCard,
     IonContent,
+    IonFab,
+    IonFabButton,
     IonHeader, 
     IonIcon,
     IonInfiniteScroll,