feat: unassigned job alert on respective jobs

src/fragments/forms/map-form/components/optimization/Optimization.vue

@@ -30,7 +30,9 @@
           {{ $t('optimization.addFromMap') + $t('optimization.job') }}
         </v-btn>
       </div>
-      <job-list :jobs="jobs"></job-list>
+      <!-- low priority TODO: more elegant solution for this? -->
+      <job-list v-if="mapViewData.hasRoutes()" :jobs="jobs" :map-view-data="mapViewData"></job-list>
+      <job-list v-else :jobs="jobs"></job-list>
       <div class="optimization-heading">
         {{ $t('optimization.vehicles') }} (Max: 3)
         <v-tooltip bottom style="float: right">

src/fragments/forms/map-form/components/optimization/components/job-list/JobList.vue

@@ -2,7 +2,9 @@
   <div class="job-inputs">
       <v-expansion-panel  class="no-shadow" :value="jobExtended" :expand="true">
         <v-expansion-panel-content style="background: transparent;" v-for="(j, i) in jobs" :key="i">
-          <div slot="header" style="padding-bottom: 0;"><v-icon style="padding: 0 5px 0 0">work</v-icon><b>Job {{j.id}} - {{ j.location[0].toPrecision(8) }}, {{ j.location[1].toPrecision(8)}}</b></div>
+          <div v-if="localMapViewData === null || !unassignedIds.includes(j.id)" slot="header" style="padding-bottom: 0;"><v-icon style="padding: 0 5px 0 0">work</v-icon><b>Job {{j.id}} - {{ j.location[0].toPrecision(8) }}, {{ j.location[1].toPrecision(8)}}</b></div>
+          <div v-else slot="header" style="padding-bottom: 0"><v-icon style="padding: 0 5px 0 0">work</v-icon><b>Job {{j.id}} - {{ j.location[0].toPrecision(8) }}, {{ j.location[1].toPrecision(8)}}
+            <v-icon small class="warning-icon">priority_high</v-icon></b></div>
           <v-card-text>
             <template v-for="prop in ['delivery','pickup','skills','time_window','service']">
               <v-chip v-if="j[prop] && prop === 'service'" style="flex: auto">{{ $t(`optimization.${prop}`) }}: {{ humanisedTime(j[prop]) }}</v-chip>

src/fragments/forms/map-form/components/optimization/components/job-list/job-list.css

@@ -0,0 +1,8 @@
+.warning-icon {
+  padding: 3px 3px 3px 3px;
+  float: right;
+  margin: 2px 15px 0 0;
+  border-radius: 15px;
+  background-color: #ffd54f;
+  color: darkgoldenrod
+}

src/fragments/forms/map-form/components/optimization/components/job-list/job-list.js

@@ -1,15 +1,39 @@
 import geoUtils from '@/support/geo-utils'
+import MapViewData from '@/models/map-view-data'
 
 export default {
   data: () => ({
+    localMapViewData: null,
     jobExtended: [true]
   }),
   props: {
     jobs: {
       Type: Array,
       Required: true
+    },
+    mapViewData: {
+      Type: MapViewData,
+      Required: false
     }
   },
+  computed: {
+    unassignedIds () {
+      let unassignedIds = []
+      for (const job of this.localMapViewData.rawData.unassigned) {
+        unassignedIds.push(job.id)
+      }
+      return unassignedIds
+    },
+  },
+  watch: {
+    // Every time the response data changes the map builder is reset and the map data is reloaded
+    mapViewData: {
+      handler: function () {
+        this.localMapViewData = this.mapViewData.clone()
+      },
+      deep: true
+    },
+  },
   methods: {
     skillIds(job) {
       let ids = ''

src/fragments/forms/map-form/components/optimization/components/optimization-details/OptimizationDetails.vue

@@ -7,8 +7,7 @@
       <h3>{{$t('optimizationDetails.optimizationDetails')}}</h3>
     </div>
     <div  style="padding:0 0 0 10px" v-show="localMapViewData.rawData.summary.unassigned">
-      <h4>{{$t('optimizationDetails.warningUnassigned')}}</h4>
-      <v-alert :key="job.id" v-for="job in localMapViewData.rawData.unassigned" :value="job.id"  type="warning" style="color:black" >Job {{job.id}} {{$t('optimizationDetails.isUnassigned')}}</v-alert>
+      <v-alert :value="true" type="warning" style="color:black">{{$t('optimizationDetails.warningUnassigned')}} {{ unassignedJobsString }}</v-alert>
     </div>
     <v-expansion-panel slot="content" class="no-shadow" v-if="hasRoutes" :value="panelExtended" :expand="true">
       <v-expansion-panel-content style="background: transparent;" class="routes-header" :key="routeIndex" v-for="(route, routeIndex) in parsedRoutes">

src/fragments/forms/map-form/components/optimization/components/optimization-details/i18n/optimization-details.i18n.cs-cz.js

@@ -2,14 +2,13 @@ export default {
   optimizationDetails: {
     optimizationDetails: 'Optimized routes',
     schedule: 'Schedule',
-    warningUnassigned: 'Warning: There are unassigned jobs for this optimization!',
+    warningUnassigned: 'Warning! These jobs are unassigned: ',
     'distance': 'Distance',
     'duration': 'Duration',
     'service': 'Service time',
     'delivery': 'Deliveries',
     'pickup': 'Pickups',
     'waiting_time': 'Waiting time',
-    'isUnassigned': 'is unassigned.',
     getInstructions: 'Get instructions for this Vehicle'
   }
 }

src/fragments/forms/map-form/components/optimization/components/optimization-details/i18n/optimization-details.i18n.de-de.js

@@ -2,14 +2,13 @@ export default {
   optimizationDetails: {
     optimizationDetails: 'Optimized routes',
     schedule: 'Schedule',
-    warningUnassigned: 'Warning: There are unassigned jobs for this optimization!',
+    warningUnassigned: 'Warning! These jobs are unassigned: ',
     'distance': 'Distance',
     'duration': 'Duration',
     'service': 'Service time',
     'delivery': 'Deliveries',
     'pickup': 'Pickups',
     'waiting_time': 'Waiting time',
-    'isUnassigned': 'is unassigned.',
     getInstructions: 'Get instructions for this Vehicle'
   }
 }

src/fragments/forms/map-form/components/optimization/components/optimization-details/i18n/optimization-details.i18n.en-us.js

@@ -2,14 +2,13 @@ export default {
   optimizationDetails: {
     optimizationDetails: 'Optimized routes',
     schedule: 'Schedule',
-    warningUnassigned: 'Warning: There are unassigned jobs for this optimization!',
+    warningUnassigned: 'Warning! These jobs are unassigned: ',
     'distance': 'Distance',
     'duration': 'Duration',
     'service': 'Service time',
     'delivery': 'Deliveries',
     'pickup': 'Pickups',
     'waiting_time': 'Waiting time',
-    'isUnassigned': 'is unassigned.',
     getInstructions: 'Get instructions for this Vehicle'
   }
 }

src/fragments/forms/map-form/components/optimization/components/optimization-details/i18n/optimization-details.i18n.es-es.js

@@ -2,14 +2,13 @@ export default {
   optimizationDetails: {
     optimizationDetails: 'Optimized routes',
     schedule: 'Schedule',
-    warningUnassigned: 'Warning: There are unassigned jobs for this optimization!',
+    warningUnassigned: 'Warning! These jobs are unassigned: ',
     'distance': 'Distance',
     'duration': 'Duration',
     'service': 'Service time',
     'delivery': 'Deliveries',
     'pickup': 'Pickups',
     'waiting_time': 'Waiting time',
-    'isUnassigned': 'is unassigned.',
     getInstructions: 'Get instructions for this Vehicle'
   }
 }

src/fragments/forms/map-form/components/optimization/components/optimization-details/i18n/optimization-details.i18n.fr-fr.js

@@ -2,14 +2,13 @@ export default {
   optimizationDetails: {
     optimizationDetails: 'Optimized routes',
     schedule: 'Schedule',
-    warningUnassigned: 'Warning: There are unassigned jobs for this optimization!',
+    warningUnassigned: 'Warning! These jobs are unassigned: ',
     'distance': 'Distance',
     'duration': 'Duration',
     'service': 'Service time',
     'delivery': 'Deliveries',
     'pickup': 'Pickups',
     'waiting_time': 'Waiting time',
-    'isUnassigned': 'is unassigned.',
     getInstructions: 'Get instructions for this Vehicle'
   }
 }

src/fragments/forms/map-form/components/optimization/components/optimization-details/i18n/optimization-details.i18n.hu-hu.js

@@ -2,14 +2,13 @@ export default {
   optimizationDetails: {
     optimizationDetails: 'Optimized routes',
     schedule: 'Schedule',
-    warningUnassigned: 'Warning: There are unassigned jobs for this optimization!',
+    warningUnassigned: 'Warning! These jobs are unassigned: ',
     'distance': 'Distance',
     'duration': 'Duration',
     'service': 'Service time',
     'delivery': 'Deliveries',
     'pickup': 'Pickups',
     'waiting_time': 'Waiting time',
-    'isUnassigned': 'is unassigned.',
     getInstructions: 'Get instructions for this Vehicle'
   }
 }

src/fragments/forms/map-form/components/optimization/components/optimization-details/i18n/optimization-details.i18n.it-it.js

@@ -2,14 +2,13 @@ export default {
   optimizationDetails: {
     optimizationDetails: 'Optimized routes',
     schedule: 'Schedule',
-    warningUnassigned: 'Warning: There are unassigned jobs for this optimization!',
+    warningUnassigned: 'Warning! These jobs are unassigned: ',
     'distance': 'Distance',
     'duration': 'Duration',
     'service': 'Service time',
     'delivery': 'Deliveries',
     'pickup': 'Pickups',
     'waiting_time': 'Waiting time',
-    'isUnassigned': 'is unassigned.',
     getInstructions: 'Get instructions for this Vehicle'
   }
 }

src/fragments/forms/map-form/components/optimization/components/optimization-details/i18n/optimization-details.i18n.pt-br.js

@@ -2,14 +2,13 @@ export default {
   optimizationDetails: {
     optimizationDetails: 'Optimized routes',
     schedule: 'Schedule',
-    warningUnassigned: 'Warning: There are unassigned jobs for this optimization!',
+    warningUnassigned: 'Warning! These jobs are unassigned: ',
     'distance': 'Distance',
     'duration': 'Duration',
     'service': 'Service time',
     'delivery': 'Deliveries',
     'pickup': 'Pickups',
     'waiting_time': 'Waiting time',
-    'isUnassigned': 'is unassigned.',
     getInstructions: 'Get instructions for this Vehicle'
   }
 }

src/fragments/forms/map-form/components/optimization/components/optimization-details/i18n/optimization-details.i18n.ro-ro.js

@@ -2,14 +2,13 @@ export default {
   optimizationDetails: {
     optimizationDetails: 'Optimized routes',
     schedule: 'Schedule',
-    warningUnassigned: 'Warning: There are unassigned jobs for this optimization!',
+    warningUnassigned: 'Warning! These jobs are unassigned: ',
     'distance': 'Distance',
     'duration': 'Duration',
     'service': 'Service time',
     'delivery': 'Deliveries',
     'pickup': 'Pickups',
     'waiting_time': 'Waiting time',
-    'isUnassigned': 'is unassigned.',
     getInstructions: 'Get instructions for this Vehicle'
   }
 }

src/fragments/forms/map-form/components/optimization/components/optimization-details/optimization-details.js

@@ -53,6 +53,14 @@ export default {
       }
       return routes
     },
+    unassignedJobsString () {
+      let ids = []
+      for (const job of this.mapViewData.rawData.unassigned) {
+        ids.push(job.id)
+      }
+      ids.sort()
+      return 'Job ' + ids.join(', Job ')
+    }
   },
   created() {
     this.localMapViewData = this.mapViewData.clone()