BAIP-131 (#49)

* typo fix * typos fixed * Teleop and teleop card changed - car is transmitted through props * deleted the car object writeout * Dashboard and DashboardCard changes - watch removed, car data is transferred through props * Dashboard and DashboardCard changes - watch removed, car data is transferred through props * BAIP-131 - resolved + BAIP-141 - color picker deleted * fix, color picker icon deleted * duplicate removed
bringauto · Apr 17, 2023 · 7b00b99 · 7b00b99
1 parent 9c646de
commit 7b00b99
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 146 deletions.
diff --git a/FE/README.md b/FE/README.md
@@ -1,9 +1,9 @@
 # BringAuto Fleet Front-End
 
 ## Project setup
-Environment variablest to setup:
+Environment variables to setup:
 * APP_VUE_GRAPHQL_URL
-* APP_VUE_SENTRY_URL 
+* APP_VUE_SENTRY_URL
 
 Node packages setup:
 ```

diff --git a/FE/src/components/DashboardCard.vue b/FE/src/components/DashboardCard.vue
@@ -1,23 +1,22 @@
 <template>
   <div class="dash-card">
-    <template v-if="selectedCar">
+    <template v-if="car">
       <v-select
-        v-model="selectedCar"
+        :value="car"
         :label="$t('newOrder.car')"
         :items="cars"
         item-text="name"
         item-value="id"
         required
+        @change="$emit('setCar', $event)"
       />
       <!--<p class="text-center text-h6 mb-0">{{ car.name }}</p>-->
       <div class="d-flex justify-center align-center text-caption mb-1">
-        <span v-if="selectedCar.fuel" class="mr-2">
-          <v-icon>{{
-            getCarBatteryIcon(selectedCar.fuel.toFixed(4) || car.fuel.toFixed(4))
-          }}</v-icon>
-          {{ selectedCar.fuel.toFixed(4) * 100 || car.fuel.toFixed(4) * 100 }}%
+        <span v-if="car.fuel" class="mr-2">
+          <v-icon>{{ getCarBatteryIcon(car.fuel.toFixed(4)) }}</v-icon>
+          {{ car.fuel.toFixed(4) * 100 }}%
         </span>
-        <span>{{ getLastUpdate(selectedCar) }}</span>
+        <span>{{ getLastUpdate(car) }}</span>
       </div>
       <v-btn
         v-if="!isUser"
@@ -36,33 +35,33 @@
           :aria-disabled="isUser"
           @click="showOrder = !showOrder"
         >
-          {{ selectedCar.orders.nodes.length }}
+          {{ car.orders.nodes.length }}
         </p>
         <!-- button for create a single order
-        <v-btn :disabled="selectedCar.underTest" color="primary" icon @click="handleNewOrder">
+        <v-btn :disabled="car.underTest" color="primary" icon @click="handleNewOrder">
            <v-icon> mdi-plus-circle-outline</v-icon>
          </v-btn> -->
         <v-btn
           v-if="!isUser"
-          :disabled="selectedCar.underTest"
+          :disabled="car.underTest"
           color="primary"
           icon
-          @click="handleNewMulripleOrder"
+          @click="handleNewMultipleOrder"
         >
           <v-icon> mdi-plus-circle-multiple-outline</v-icon>
         </v-btn>
       </v-row>
-      <template v-for="(order, key) in selectedCar.orders.nodes.slice(0, 3)">
+      <template v-for="(order, key) in car.orders.nodes.slice(0, 3)">
         <p :key="order.id" class="text-caption mb-0">{{ key + 1 }}. {{ orderListing(order) }}</p>
       </template>
-      <p v-if="selectedCar.orders.nodes.length > 3" class="text-caption mb-0">...</p>
+      <p v-if="car.orders.nodes.length > 3" class="text-caption mb-0">...</p>
       <v-dialog v-model="showOrder" width="1000">
         <v-card>
           <v-card-title class="headline primary white--text">
             {{ $t("general.orders") }}
           </v-card-title>
           <v-card-text class="mt-2">
-            <div v-if="selectedCar.orders.nodes === undefined">
+            <div v-if="car.orders.nodes === undefined">
               {{ $t("general.noOrders") }}
             </div>
             <v-data-table
@@ -99,7 +98,7 @@
               </template>
             </v-data-table>
             <v-row justify="center">
-              <v-btn v-if="!isUser" color="success" text @click="handleNewMulripleOrder">
+              <v-btn v-if="!isUser" color="success" text @click="handleNewMultipleOrder">
                 {{ $t("orders.new") }}
               </v-btn>
             </v-row>
@@ -139,12 +138,14 @@ export default {
     car: {
       type: Object,
     },
+    cars: {
+      type: Array,
+    },
   },
   data() {
     return {
       CarStateFormated,
       orders: [],
-      cars: [],
       showOrder: false,
       allRoutes,
       headers: [
@@ -166,7 +167,6 @@ export default {
     ...mapGetters({
       getMe: GetterNames.GetMe,
       roles: GetterNames.GetRoles,
-      getSelectCar: GetterNames.GetSelectCar,
       isRole: GetterNames.isRole,
     }),
     isUser() {
@@ -181,18 +181,10 @@ export default {
         return trans;
       };
     },
-    selectedCar: {
-      get() {
-        return this.cars.find((car) => car.id === this.getSelectCar) || this.cars[0] || this.car;
-      },
-      set(val) {
-        this.setCarId(val);
-      },
-    },
     getFilteredOrders() {
-      return this.selectedCar.orders.nodes.map((order) => {
+      return this.car.orders.nodes.map((order) => {
         const { trans } = getOrderState(order.status);
-        return { ...order, trans, name: this.selectedCar.name };
+        return { ...order, trans, name: this.car.name };
       });
     },
   },
@@ -212,34 +204,22 @@ export default {
       this.cars = cars.filter((car) => (car.underTest && this.isAdmin) || !car.underTest);
     },
 
-    async initForm() {
-      await this.fetchOrders();
-      this.handleSelectedParams();
-    },
     handleEditOrder(item) {
       this.$router.push({ name: allRoutes.EditOrder, params: { id: item.id } });
     },
-    handleSelectedParams() {
-      if (this.$route.params.carId) {
-        this.setCarId(this.$route.params.carId);
-      }
-      if (!this.getSelectCar) {
-        this.setCarId(this.cars[0]);
-      }
-    },
     handleNewOrder() {
       this.$router.push({
         name: allRoutes.NewOrder,
         params: {
-          carId: this.selectedCar.id,
+          carId: this.car.id,
         },
       });
     },
-    handleNewMulripleOrder() {
+    handleNewMultipleOrder() {
       this.$router.push({
         name: allRoutes.NewMultipleOrder,
         params: {
-          carId: this.selectedCar.id,
+          carId: this.car.id,
         },
       });
     },

diff --git a/FE/src/components/Editation/EditRouteModal.vue b/FE/src/components/Editation/EditRouteModal.vue
@@ -18,22 +18,20 @@
             v-model="color"
             :background-color="color"
             :value="route.color"
-            append-icon="mdi-invert-colors"
             hide-details
             outlined
-            @click:append="hover = !hover"
           />
         </v-col>
         <v-col cols="12" md="12">
           <v-row>
             <v-col cols="12" md="6">
-              <v-color-picker
+              <!-- <v-color-picker
                 v-if="hover"
                 v-model="color"
                 elevation="0"
                 hide-inputs
                 hide-mode-switch
-              />
+              /> -->
               <v-col cols="6" md="8">
                 <v-btn justify="center" @click="isHidden = !isHidden">
                   {{ $t("routes.coordinates") }}

diff --git a/FE/src/components/Layout/Header.vue b/FE/src/components/Layout/Header.vue
@@ -32,7 +32,7 @@
         hide-details
         item-text="name"
         item-value="id"
-        label="companies"
+        :label="$t('general.companies')"
         outlined
         return-object
       />