added new icons for the navigation

select the new icon for any state

src/TODO-List

@@ -0,0 +1,5 @@
+// TODO: Hinzufügen der "X erstellen"-Dialoge
+// TODO: Hinzufügen der GeoJson zu einer Area (im Dialog + Backend)
+// TODO: Logout
+// TODO: InWork: Icons für Status
+//

src/api/repositories/StatusRepository.ts

@@ -1,4 +1,5 @@
 import BaseRepository from '@/api/repositories/BaseRepository';
+import {Status} from '@/models/Status';
 
 export default class StatusRepository extends BaseRepository {
 
@@ -17,4 +18,15 @@ export default class StatusRepository extends BaseRepository {
     public editStatus(status: any): Promise<any> {
         return this.axiosClient.patch(`status/${status.id}`, status);
     }
+
+    public setStatusIcon(status: Status, icon: any): Promise<any> {
+        const formData = new FormData();
+        formData.append('file', icon);
+        return this.axiosClient.post(`status/${status.id}/setIcon`, formData,
+            {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            });
+    }
 }

src/assets/logo.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 58 (101010) - https://sketch.com -->
-    <title>E20E0719-69F7-4807-B0EB-A3B8E520CFE4</title>
-    <desc>Created with sketchtool.</desc>
-    <g id="Admin-V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Admin-/-Firma-dashboard" transform="translate(-16.000000, -18.000000)" fill="#FFFFFF">
-            <g id="Group-8">
-                <g id="Group-[74h]" transform="translate(16.000000, 18.000000)">
-                    <g id="REIN_demo_logo">
-                        <g id="Group-[26h]">
-                            <g id="logo_white_v4">
-                                <path d="M14.1487224,3.53718059 C18.0557842,3.53718059 21.2230835,6.70447998 21.2230835,10.6115418 C21.2230835,14.5186036 18.0557842,17.685903 14.1487224,17.685903 C10.2416606,17.685903 7.07436118,14.5186036 7.07436118,10.6115418 C7.07436118,10.4561071 7.07937403,10.3018433 7.08924687,10.1489031 C7.30539746,13.3710794 9.98756002,15.9173127 13.2644272,15.9173127 C16.6831063,15.9173127 19.4544933,13.1459257 19.4544933,9.72724663 C19.4544933,6.45037943 16.90826,3.76821687 13.6863698,3.55133527 L13.9104595,3.54111743 L13.9104595,3.54111743 Z" id="Oval-6" transform="translate(14.148722, 10.611542) rotate(170.000000) translate(-14.148722, -10.611542) "></path>
-                                <path d="M15.4751651,1.7685903 C21.0915664,1.7685903 25.6445593,6.32158316 25.6445593,11.9379845 C25.6445593,17.5543858 21.0915664,22.1073787 15.4751651,22.1073787 C9.85876376,22.1073787 5.30577089,17.5543858 5.30577089,11.9379845 C5.30577089,11.7070202 5.31347053,11.4778542 5.32862713,11.2507292 C5.65638204,15.8365026 9.48003871,19.4544933 14.1487224,19.4544933 C19.0325496,19.4544933 22.9916738,15.495369 22.9916738,10.6115418 C22.9916738,5.94285811 19.3736832,2.11920145 14.7885103,1.79138013 C15.0150348,1.77628994 15.2442008,1.7685903 15.4751651,1.7685903 Z"></path>
-                                <path d="M13.7065748,3.55271368e-14 C14.0156412,3.55271368e-14 14.3223185,0.010229409 14.6262864,0.030368126 C8.4293416,0.465007926 3.53718059,5.6301835 3.53718059,11.9379845 C3.53718059,18.5311513 8.88199831,23.875969 15.4751651,23.875969 C21.7822899,23.875969 26.9470342,18.9848568 27.3833037,12.788727 C27.4029648,13.0921718 27.4131496,13.3981839 27.4131496,13.7065748 C27.4131496,21.276507 21.276507,27.4131496 13.7065748,27.4131496 C6.13664256,27.4131496 3.55271368e-14,21.276507 3.55271368e-14,13.7065748 C3.55271368e-14,6.13664256 6.13664256,3.55271368e-14 13.7065748,3.55271368e-14 Z" id="Oval-8"></path>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/components/status/CreateStatus.component.vue

@@ -16,6 +16,15 @@
                                       v-model="selectedStatus.name"/>
                         <span class="input-error text-center">{{ errors.first('name') }}</span>
                     </v-row>
+                    <v-row class="d-flex flex-column mt-6">
+                        <v-label class="">Neues Icon auswählen</v-label>
+                        <v-file-input v-model="iconFile" name="iconFile" v-validate="'required'" data-vv-as="Icon"
+                                      ref="iconFile" class="mt-3" label="Icon" accept="image/png" outlined>
+                        </v-file-input>
+                        <v-label v-if="selectedStatus.iconName">Derzeitiges Icon: {{ selectedStatus.iconName }}
+                        </v-label>
+                        <span class="input-error text-center">{{ errors.first('iconFile') }}</span>
+                    </v-row>
                 </v-form>
             </v-card-text>
             <v-card-actions>
@@ -45,11 +54,16 @@
         public selectedStatus?: Status;
 
         @StatusStore.Action('createStatusAction')
-        private createStatusAction!: (statusData: any) => Promise<Status[]>;
+        private createStatusAction!: (statusData: any) => Promise<Status>;
 
         @StatusStore.Action('editStatusAction')
         private editStatusAction!: (statusData: any) => Promise<Status>;
 
+        @StatusStore.Action('setStatusIconAction')
+        private setStatusIconAction!: (payload: { status: Status, icon: any }) => Promise<boolean>;
+
+        public iconFile?: any = null;
+
         private closeDialog() {
             this.$emit('closeDialog');
         }
@@ -60,8 +74,16 @@
                     if (this.selectedStatus!.id) {
                         await this.editStatusAction(this.selectedStatus);
                     } else {
-                        await this.createStatusAction(this.selectedStatus);
+                        this.selectedStatus = await this.createStatusAction(this.selectedStatus);
                     }
+
+                    if (this.iconFile) {
+                        await this.setStatusIconAction({
+                            status: this.selectedStatus!,
+                            icon: this.iconFile
+                        });
+                    }
+
                     this.closeDialog();
                 } else {
                     // TODO: Show error message

src/components/status/StatusTable.component.vue

@@ -49,6 +49,9 @@
             this.tableHeaders = [{
                 text: 'Statusname',
                 value: 'name'
+            }, {
+                text: 'Icon-Name',
+                value: 'iconName'
             }, {
                 text: 'Optionen',
                 value: 'options',

src/helper/NavigationItemStorage.ts

@@ -5,16 +5,18 @@ export const NavigationItemStorage: NavigationItemInterface[] = [
   {
     title: i18n.t('GENERAL.DASHBOARD').toString(),
     routerName: 'dashboard',
+    icon: 'mdi-chart-arc',
     dropdownOptions: []
   },
   {
     title: i18n.t('GENERAL.USERS').toString(),
     routerName: 'userOverview',
+    icon: 'mdi-account',
     dropdownOptions: [
       {
         title: 'NAVIGATION.DROPDOWN.ALL_USERS',
         routerName: 'usersOverview',
-        icon: 'mdi-user'
+        icon: 'mdi-account-multiple'
       },
       {
         title: 'NAVIGATION.DROPDOWN.CREATE_USER',
@@ -26,11 +28,12 @@ export const NavigationItemStorage: NavigationItemInterface[] = [
   {
     title: i18n.t('GENERAL.AREAS').toString(),
     routerName: 'areasOverview',
+    icon: 'mdi-map',
     dropdownOptions: [
       {
         title: 'NAVIGATION.DROPDOWN.ALL_AREAS',
         routerName: 'areasOverview',
-        icon: 'mdi-account-multiple'
+        icon: 'mdi-map'
       },
       {
         title: 'NAVIGATION.DROPDOWN.CREATE_AREA',
@@ -40,23 +43,31 @@ export const NavigationItemStorage: NavigationItemInterface[] = [
     ]
   },
   {
-    title: i18n.t('NAVIGATION.DROPDOWN.MISC').toString(),
+    title: i18n.t('NAVIGATION.DROPDOWN.ENTITIES').toString(),
     routerName: 'entitiesOverview',
+    icon: 'mdi-binoculars',
     dropdownOptions: [
       {
         title: 'NAVIGATION.DROPDOWN.ALL_ENTITIES',
         routerName: 'entitiesOverview',
-        icon: 'mdi-account-multiple'
+        icon: 'mdi-binoculars'
       },
       {
         title: 'NAVIGATION.DROPDOWN.CREATE_ENTITY',
         routerName: 'createEntity',
         icon: 'mdi-plus-circle-outline'
+      }
+    ]
   },
+  {
+    title: i18n.t('NAVIGATION.DROPDOWN.STATUS').toString(),
+    routerName: 'statusOverview',
+    icon: 'mdi-state-machine',
+    dropdownOptions: [
       {
         title: 'NAVIGATION.DROPDOWN.ALL_STATUS',
         routerName: 'statusOverview',
-        icon: 'mdi-account-multiple'
+        icon: 'mdi-state-machine'
       },
       {
         title: 'NAVIGATION.DROPDOWN.CREATE_STATUS',

src/interfaces/NavigationItem.interface.ts

@@ -4,4 +4,5 @@ export interface NavigationItemInterface {
   title: string;
   routerName: string;
   dropdownOptions: NavigationSubItemInterface[];
+  icon: string;
 }

src/locales/de.json

@@ -19,6 +19,8 @@
   },
   "NAVIGATION": {
     "DROPDOWN": {
+      "ENTITIES": "Entitäten",
+      "STATUS": "Status",
       "MISC": "Weiteres",
       "ALL_USERS": "Alle Benutzer",
       "ALL_AREAS": "Alle Gebiete",

src/models/Area.ts

@@ -11,7 +11,8 @@ export class Area {
         Object.assign(this, data);
 
         if (data.users) {
-            data.users.map((userData: any) => {
+            this.users = [];
+            data.users.forEach((userData: any) => {
                 this.users.push(new User(userData));
             });
         }

src/models/Status.ts

@@ -2,6 +2,7 @@ export class Status {
 
     public id?: string;
     public name?: string;
+    public iconName?: string;
 
     constructor(data: any) {
         Object.assign(this, data);

src/plugins/vuetify/themes/defaultDark.ts

@@ -6,7 +6,7 @@
  */
 export default {
     // vuetify theme colors
-    'primary': '#3787f6',
+    'primary': '#00A252',
     'secondary': '#F5F5F5',
     'accent': '#ffffff', // TODO set accent color
     'error': '#bf2828',

src/plugins/vuetify/themes/defaultLight.ts

@@ -5,8 +5,7 @@
  * https://vuetifyjs.com/en/customization/theme#theme
  */
 export default {
-    // REIN light theme colors
+    'primary': '#00A252',
-    'primary': '#1867c0',
     'secondary': '#172B4D',
     'accent': '#00A252',
     'error': '#E02020',
@@ -31,37 +30,4 @@ export default {
     'on-error': '#ffffff',
     'on-warning': '#ffffff',
     'on-info': '#ffffff',
-    // colors for mitarbeiter profile image
-    // ATTENTION: if employee colors are being updated, change the digitSum function in UserInitialsComponent accordingly.
-    'employee_color_1': '#4FC2F8',
-    'employee_color_2': '#FE8B66',
-    'employee_color_3': '#9CCC66',
-    'employee_color_4': '#9E9E9E',
-    'employee_color_5': '#A0887E',
-    'employee_color_6': '#4CD0E2',
-    'employee_color_7': '#4BB6AC',
-    'employee_color_8': '#5F97F6',
-    'employee_color_9': '#9FA8DB',
-    'employee_color_10': '#B39DDB',
-    // mics colors
-    'bar-yellow': '#F7B500',
-    'job-started': '#E9F7F2',
-    'admin-navigation-bar-bg': '#EDEFF5',
-    'signature-background': '#EEEEEE',
-    'map-radius-border' : '#B8C9E3',
-    'map-radius-background' : '#3282FC',
-    'button-success': '#02875A',
-    // dashboard icons
-    'total-customer': '#5CBBF6',
-    'total-employee': '#F7B500',
-    'total-location': '#B39DDB',
-    'total-workTime': '#00D086',
-    // chart
-    'chart-fill-color': 'rgba(0, 208, 134, 0.2)',
-    'chart-stroke-color': '#00D086',
-
-    // job states
-    'comment_color': '#FB8C00',
-    'cancelled_color': '#E02020',
-    'images_color': '#4CAF50',
 };

src/stores/status.store.ts

@@ -32,6 +32,12 @@ const actions: ActionTree<any, any> = {
         const status = new Status(statusRaw.data);
         commit('handleStatus', status);
         return status;
+    },
+    setStatusIconAction: async ({commit}, payload: { status: Status, icon: any }): Promise<Status> => {
+        const statusRaw = await statusRepository.setStatusIcon(payload.status, payload.icon);
+        const status = new Status(statusRaw.data);
+        commit('handleStatus', status);
+        return status;
     }
 };
 

src/stores/user.store.ts

@@ -45,6 +45,7 @@ const mutations = {
         } else {
             state.users.push(user);
         }
+        console.log('state', state.users);
     }
 };
 

src/views/shared/Login.view.vue

@@ -7,7 +7,7 @@
       <div class="mt-12"></div>
       <div class="my-12 on-primary--text d-flex align-center">
         <div class="application-logo-container mr-3">
-          <img class="big" src="../../assets/logo.svg" alt="logo" />
+
         </div>
         <span class="application-name">
           {{ applicationName }}

src/views/shared/Navigation.view.vue

@@ -4,10 +4,6 @@
       <div class="toolbar d-flex justify-space-between white--text">
         <div class="d-flex align-center">
           <div class="application-logo-container mt-1">
-            <img
-              src="../../assets/logo.svg"
-              alt="logo"
-            />
           </div>
           <div class="application-name ml-6 mr-12">
             <template>
@@ -32,10 +28,11 @@
                     class="fill-height d-flex align-center justify-center px-3"
                     v-on="on"
                   >
+                    <v-icon class="white--text mr-2">{{ item.icon }}</v-icon>
                     <div>{{ item.title }}</div>
                     <v-icon
                       v-if="item.dropdownOptions.length > 0"
-                      class="white--text ml-3"
+                      class="white--text ml-2"
                     >
                       mdi-chevron-down
                     </v-icon>