From 4e1a51c8238f6498954f4ba37c82178776f817ca Mon Sep 17 00:00:00 2001 From: Torben Indorf Date: Tue, 11 Feb 2020 21:56:57 +0100 Subject: [PATCH] added new icons for the navigation select the new icon for any state --- src/TODO-List | 5 +++ src/api/repositories/StatusRepository.ts | 12 +++++++ src/assets/logo.svg | 23 ------------ .../status/CreateStatus.component.vue | 26 ++++++++++++-- .../status/StatusTable.component.vue | 3 ++ src/helper/NavigationItemStorage.ts | 23 ++++++++---- src/interfaces/NavigationItem.interface.ts | 1 + src/locales/de.json | 2 ++ src/models/Area.ts | 3 +- src/models/Status.ts | 1 + src/plugins/vuetify/themes/defaultDark.ts | 2 +- src/plugins/vuetify/themes/defaultLight.ts | 36 +------------------ src/stores/status.store.ts | 6 ++++ src/stores/user.store.ts | 1 + src/views/shared/Login.view.vue | 2 +- src/views/shared/Navigation.view.vue | 7 ++-- 16 files changed, 79 insertions(+), 74 deletions(-) create mode 100644 src/TODO-List delete mode 100644 src/assets/logo.svg diff --git a/src/TODO-List b/src/TODO-List new file mode 100644 index 0000000..29c7e76 --- /dev/null +++ b/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 +// diff --git a/src/api/repositories/StatusRepository.ts b/src/api/repositories/StatusRepository.ts index d547052..ccb3e19 100644 --- a/src/api/repositories/StatusRepository.ts +++ b/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 { return this.axiosClient.patch(`status/${status.id}`, status); } + + public setStatusIcon(status: Status, icon: any): Promise { + const formData = new FormData(); + formData.append('file', icon); + return this.axiosClient.post(`status/${status.id}/setIcon`, formData, + { + headers: { + 'Content-Type': 'multipart/form-data' + } + }); + } } diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index 89ffd39..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - E20E0719-69F7-4807-B0EB-A3B8E520CFE4 - Created with sketchtool. - - - - - - - - - - \ No newline at end of file diff --git a/src/components/status/CreateStatus.component.vue b/src/components/status/CreateStatus.component.vue index 7e70c29..04ddb31 100644 --- a/src/components/status/CreateStatus.component.vue +++ b/src/components/status/CreateStatus.component.vue @@ -16,6 +16,15 @@ v-model="selectedStatus.name"/> {{ errors.first('name') }} + + Neues Icon auswählen + + + Derzeitiges Icon: {{ selectedStatus.iconName }} + + {{ errors.first('iconFile') }} + @@ -45,11 +54,16 @@ public selectedStatus?: Status; @StatusStore.Action('createStatusAction') - private createStatusAction!: (statusData: any) => Promise; + private createStatusAction!: (statusData: any) => Promise; @StatusStore.Action('editStatusAction') private editStatusAction!: (statusData: any) => Promise; + @StatusStore.Action('setStatusIconAction') + private setStatusIconAction!: (payload: { status: Status, icon: any }) => Promise; + + 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 diff --git a/src/components/status/StatusTable.component.vue b/src/components/status/StatusTable.component.vue index c85f619..fc37563 100644 --- a/src/components/status/StatusTable.component.vue +++ b/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', diff --git a/src/helper/NavigationItemStorage.ts b/src/helper/NavigationItemStorage.ts index 9abc0e5..c00e908 100644 --- a/src/helper/NavigationItemStorage.ts +++ b/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', diff --git a/src/interfaces/NavigationItem.interface.ts b/src/interfaces/NavigationItem.interface.ts index 3242f32..606c251 100644 --- a/src/interfaces/NavigationItem.interface.ts +++ b/src/interfaces/NavigationItem.interface.ts @@ -4,4 +4,5 @@ export interface NavigationItemInterface { title: string; routerName: string; dropdownOptions: NavigationSubItemInterface[]; + icon: string; } diff --git a/src/locales/de.json b/src/locales/de.json index 7e0c80a..5056dc0 100644 --- a/src/locales/de.json +++ b/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", diff --git a/src/models/Area.ts b/src/models/Area.ts index 91ead23..2ad1d23 100644 --- a/src/models/Area.ts +++ b/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)); }); } diff --git a/src/models/Status.ts b/src/models/Status.ts index 624ffda..4ce167c 100644 --- a/src/models/Status.ts +++ b/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); diff --git a/src/plugins/vuetify/themes/defaultDark.ts b/src/plugins/vuetify/themes/defaultDark.ts index d57a693..698b08a 100644 --- a/src/plugins/vuetify/themes/defaultDark.ts +++ b/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', diff --git a/src/plugins/vuetify/themes/defaultLight.ts b/src/plugins/vuetify/themes/defaultLight.ts index c517d87..baff627 100644 --- a/src/plugins/vuetify/themes/defaultLight.ts +++ b/src/plugins/vuetify/themes/defaultLight.ts @@ -5,8 +5,7 @@ * https://vuetifyjs.com/en/customization/theme#theme */ export default { - // REIN light theme colors - 'primary': '#1867c0', + 'primary': '#00A252', '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', }; diff --git a/src/stores/status.store.ts b/src/stores/status.store.ts index 4601f49..a8ed9bb 100644 --- a/src/stores/status.store.ts +++ b/src/stores/status.store.ts @@ -32,6 +32,12 @@ const actions: ActionTree = { const status = new Status(statusRaw.data); commit('handleStatus', status); return status; + }, + setStatusIconAction: async ({commit}, payload: { status: Status, icon: any }): Promise => { + const statusRaw = await statusRepository.setStatusIcon(payload.status, payload.icon); + const status = new Status(statusRaw.data); + commit('handleStatus', status); + return status; } }; diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts index bca186d..ddd3aa7 100644 --- a/src/stores/user.store.ts +++ b/src/stores/user.store.ts @@ -45,6 +45,7 @@ const mutations = { } else { state.users.push(user); } + console.log('state', state.users); } }; diff --git a/src/views/shared/Login.view.vue b/src/views/shared/Login.view.vue index 4cba344..94be5c1 100644 --- a/src/views/shared/Login.view.vue +++ b/src/views/shared/Login.view.vue @@ -7,7 +7,7 @@
- logo +
{{ applicationName }} diff --git a/src/views/shared/Navigation.view.vue b/src/views/shared/Navigation.view.vue index 963056d..f12369f 100644 --- a/src/views/shared/Navigation.view.vue +++ b/src/views/shared/Navigation.view.vue @@ -4,10 +4,6 @@
- logo