From f5f9d2af61e5f83223474a1f4213329669b8f96f Mon Sep 17 00:00:00 2001
From: Dominik <s3003348@rz.ba-dresden.de>
Date: Sat, 23 Jan 2021 14:40:35 +0100
Subject: [PATCH] Added Jobtype functionality

---
 .../components/management/CreateEvent.vue     |  64 +++++++++
 .../components/management/Eventtypes.vue      |  60 ++++++++
 .../components/management/JobTypes.vue        | 131 ++++++++++++++++++
 src/plugins/schedule/pages/Mainpage.vue       |  49 +++++++
 src/plugins/schedule/pages/Management.vue     |  99 +++++++++++++
 src/plugins/schedule/pages/Overview.vue       |   8 ++
 src/plugins/schedule/pages/Requests.vue       |   8 ++
 src/plugins/schedule/permissions.ts           |  12 ++
 src/plugins/schedule/plugin.ts                |   8 +-
 src/plugins/schedule/routes/index.ts          |  63 +++++++++
 src/plugins/schedule/store/schedule.ts        | 102 ++++++++++++++
 11 files changed, 603 insertions(+), 1 deletion(-)
 create mode 100644 src/plugins/schedule/components/management/CreateEvent.vue
 create mode 100644 src/plugins/schedule/components/management/Eventtypes.vue
 create mode 100644 src/plugins/schedule/components/management/JobTypes.vue
 create mode 100644 src/plugins/schedule/pages/Mainpage.vue
 create mode 100644 src/plugins/schedule/pages/Management.vue
 create mode 100644 src/plugins/schedule/pages/Overview.vue
 create mode 100644 src/plugins/schedule/pages/Requests.vue
 create mode 100644 src/plugins/schedule/permissions.ts
 create mode 100644 src/plugins/schedule/routes/index.ts
 create mode 100644 src/plugins/schedule/store/schedule.ts

diff --git a/src/plugins/schedule/components/management/CreateEvent.vue b/src/plugins/schedule/components/management/CreateEvent.vue
new file mode 100644
index 0000000..7be95b0
--- /dev/null
+++ b/src/plugins/schedule/components/management/CreateEvent.vue
@@ -0,0 +1,64 @@
+<template>
+  <q-page padding>
+    <q-card>
+      <q-form @submit="save" @reset="reset">
+        <q-card-section class="fit row justify-start content-center items-center">
+          <q-input
+            class="col-xs-12 col-sm-6 q-pa-sm"
+            label="Veranstaltungsname"
+            :rules="[notEmpty]"
+            v-model="eventname"
+            filled
+          />
+
+          <q-input
+            class="col-xs-12 col-sm-6 q-pa-sm"
+            label="Beschreibung"
+            type="textarea"
+            v-model="eventdescription"
+            filled
+          />
+
+          <IsoDateInput
+            class="col-xs-12 col-sm-6 q-pa-sm"
+            v-model="eventdate"
+            label="Veranstaltungstermin"
+          />
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn label="Reset" type="reset" />
+          <q-btn color="primary" type="submit" label="Speichern" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+import { Store } from 'vuex';
+import { StateInterface } from 'src/store';
+export default defineComponent({
+  name: 'CreateEvent',
+  components: {},
+  setup(_, { root }) {
+    const store = <Store<StateInterface>>root.$store;
+    const user = ref<FG.User>({
+      userid: '',
+      display_name: '',
+      firstname: '',
+      lastname: '',
+      mail: '',
+      roles: []
+    });
+    function setUser(value: FG.User) {
+      store.dispatch('user/setUser', value).catch(error => {
+        console.warn(error);
+      });
+    }
+    return { user, setUser };
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/src/plugins/schedule/components/management/Eventtypes.vue b/src/plugins/schedule/components/management/Eventtypes.vue
new file mode 100644
index 0000000..b92f7ec
--- /dev/null
+++ b/src/plugins/schedule/components/management/Eventtypes.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <q-page padding>
+      <q-card>
+        <q-card-section>
+          <q-table title="Veranstaltungstypen" :data="rows" row-key="userid" :columns="columns">
+            <template v-slot:top-right>
+              <q-input dense v-model="newevent" placeholder="Neuer Typ" />
+
+              <div></div>
+              <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" />
+            </template>
+            <!-- <template v-slot:top-right>
+                  <q-btn round color="primary" icon="mdi-plus"/>
+                </template> -->
+          </q-table>
+        </q-card-section>
+      </q-card>
+    </q-page>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+import { Store } from 'vuex';
+import { StateInterface } from 'src/store';
+export default defineComponent({
+  name: 'Eventtypes',
+  components: {},
+  setup(_, { root }) {
+    const store = <Store<StateInterface>>root.$store;
+    const user = ref<FG.User>({
+      userid: '',
+      display_name: '',
+      firstname: '',
+      lastname: '',
+      mail: '',
+      roles: []
+    });
+    const columns = [
+      {
+        name: 'eventname',
+        label: 'Name',
+        field: 'eventname',
+        align: 'left',
+        sortable: true
+      },
+      {
+        name: 'actions',
+        label: 'Aktionen',
+        field: 'actions'
+      }
+    ];
+
+    return { user, columns };
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/src/plugins/schedule/components/management/JobTypes.vue b/src/plugins/schedule/components/management/JobTypes.vue
new file mode 100644
index 0000000..8f952d0
--- /dev/null
+++ b/src/plugins/schedule/components/management/JobTypes.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <q-dialog v-model="edittype">
+      <q-card>
+        <q-card-section>
+          <div class="text-h6">Editere Diensttyp {{ actualJob.name }}</div>
+        </q-card-section>
+        <q-card-section>
+          <q-input dense label="name" filled v-model="newJobName" />
+        </q-card-section>
+        <q-card-actions>
+          <q-btn flat color="danger" label="Abbrechen" @click="discardChanes()" />
+          <q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+    <q-page padding>
+      <q-card>
+        <q-card-section>
+          <q-table title="Diensttypen" :data="rows" row-key="jobid" :columns="columns">
+            <template v-slot:top-right>
+              <q-input dense v-model="newJob" placeholder="Neuer Typ" />
+
+              <div></div>
+              <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
+            </template>
+            <template v-slot:body-cell-actions="props">
+              <!-- <q-btn :label="item"> -->
+              <!-- {{ item.row.name }} -->
+              <q-td :props="props" align="right" :auto-width="true">
+                <q-btn
+                  round
+                  icon="mdi-pencil"
+                  @click="editType({ id: props.row.id, name: props.row.name })"
+                />
+                <q-btn round icon="mdi-delete" @click="deleteType(props.row.id)" />
+              </q-td>
+            </template>
+          </q-table>
+        </q-card-section>
+      </q-card>
+    </q-page>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, onBeforeMount } from '@vue/composition-api';
+import { Store } from 'vuex';
+import { StateInterface } from 'src/store';
+import { ScheduleInterface, JobType } from '../../store/schedule';
+export default defineComponent({
+  name: 'JobTypes',
+  components: {},
+  setup(_, { root }) {
+    const store = <Store<StateInterface>>root.$store;
+    const state = <ScheduleInterface>store.state.schedule;
+    const newJob = ref('');
+    const edittype = ref(false);
+    const emptyJob: JobType = { id: -1, name: '' };
+    const actualJob = ref(emptyJob);
+    const newJobName = ref('');
+
+    onBeforeMount(() => {
+      void store.dispatch('schedule/getJobTypes');
+      console.log(store);
+    });
+
+    const rows = computed(() => state.jobTypes);
+
+    const columns = [
+      {
+        name: 'jobname',
+        label: 'Name',
+        field: 'name',
+        align: 'left',
+        sortable: true
+      },
+      {
+        name: 'actions',
+        label: 'Aktionen',
+        field: 'actions',
+        align: 'right'
+      }
+    ];
+
+    function addType() {
+      void store.dispatch('schedule/addJobType', { name: newJob.value });
+      newJob.value = '';
+    }
+
+    function editType(job: JobType) {
+      edittype.value = true;
+      actualJob.value = job;
+    }
+
+    function saveChanges() {
+      void store
+        .dispatch('schedule/changeJobTypeName', { id: actualJob.value.id, name: newJobName.value })
+        .finally(() => {
+          discardChanges();
+        });
+    }
+
+    function discardChanges() {
+      actualJob.value = emptyJob;
+      newJobName.value = '';
+      edittype.value = false;
+    }
+
+    function deleteType(id: number) {
+      void store.dispatch('schedule/removeJobType', id);
+    }
+    return {
+      columns,
+      rows,
+      addType,
+      newJob,
+      deleteType,
+      edittype,
+      editType,
+      actualJob,
+      newJobName,
+      discardChanges,
+      saveChanges
+    };
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/src/plugins/schedule/pages/Mainpage.vue b/src/plugins/schedule/pages/Mainpage.vue
new file mode 100644
index 0000000..6edbb33
--- /dev/null
+++ b/src/plugins/schedule/pages/Mainpage.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <q-page padding v-if="checkMain">
+      <q-card>
+        <q-card-section>
+          <q-list v-for="(mainRoute, index) in mainRoutes" :key="'mainRoute' + index">
+            <essential-link
+              v-for="(route, index2) in mainRoute.children"
+              :key="'route' + index2"
+              :title="route.title"
+              :icon="route.icon"
+              :link="route.name"
+              :permissions="route.meta.permissions"
+            />
+          </q-list>
+        </q-card-section>
+      </q-card>
+    </q-page>
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api';
+import EssentialLink from 'src/components/navigation/EssentialLink.vue';
+import mainRoutes from 'src/plugins/schedule/routes';
+import { Store } from 'vuex';
+import { BalanceInterface } from 'src/plugins/balance/store/balance';
+import setLoadingBar from 'src/utils/loading';
+import { StateInterface } from 'src/store';
+export default defineComponent({
+  // name: 'PageName'
+  components: { EssentialLink },
+  setup(_, { root }) {
+    const store = <Store<StateInterface>>root.$store;
+    const loading = computed(() => {
+      return (<BalanceInterface>store.state.balance).loading > 0;
+    });
+    const checkMain = computed(() => {
+      return root.$route.matched.length == 2;
+    });
+
+    setLoadingBar(loading);
+
+    return { checkMain, mainRoutes };
+  }
+});
+</script>
+<style scoped></style>
diff --git a/src/plugins/schedule/pages/Management.vue b/src/plugins/schedule/pages/Management.vue
new file mode 100644
index 0000000..05b65d1
--- /dev/null
+++ b/src/plugins/schedule/pages/Management.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <q-tabs v-model="tab" v-if="$q.screen.gt.sm">
+      <q-tab
+        v-for="(tabindex, index) in tabs"
+        :key="'tab' + index"
+        :name="tabindex.name"
+        :label="tabindex.label"
+      />
+    </q-tabs>
+    <div class="fit row justify-end" v-else>
+      <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" />
+    </div>
+    <q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
+      <q-list v-model="tab">
+        <q-item
+          v-for="(tabindex, index) in tabs"
+          :key="'tab' + index"
+          :active="tab == tabindex.name"
+          clickable
+          @click="tab = tabindex.name"
+        >
+          <q-item-label>{{ tabindex.label }}</q-item-label>
+        </q-item>
+      </q-list>
+    </q-drawer>
+    <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
+      <q-tab-panels
+        v-model="tab"
+        style="background-color: transparent;"
+        class="q-ma-none q-pa-none fit row justify-center content-start items-start"
+        animated
+      >
+        <q-tab-panel name="create">
+          <CreateEvent />
+        </q-tab-panel>
+        <q-tab-panel name="eventtypes">
+          <Eventtypes />
+        </q-tab-panel>
+        <q-tab-panel name="jobtypes">
+          <JobTypes v-if="canEditRoles" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-page>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api';
+import Eventtypes from '../components/management/Eventtypes.vue';
+import JobTypes from '../components/management/JobTypes.vue';
+import CreateEvent from '../components/management/CreateEvent.vue';
+import { Store } from 'vuex';
+import { StateInterface } from 'src/store';
+import { hasPermission } from 'src/utils/permission';
+import { PERMISSIONS } from '../permissions';
+import { Screen } from 'quasar';
+
+export default defineComponent({
+  name: 'EventManagement',
+  components: { CreateEvent, Eventtypes, JobTypes },
+  setup(_, { root }) {
+    const store = <Store<StateInterface>>root.$store;
+
+    const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT, store));
+
+    interface Tab {
+      name: string;
+      label: string;
+    }
+
+    const tabs: Tab[] = [
+      { name: 'create', label: 'Veranstantungen' },
+      { name: 'eventtypes', label: 'Veranstaltungsarten' },
+      { name: 'jobtypes', label: 'Dienstarten' }
+    ];
+
+    const drawer = ref<boolean>(false);
+
+    const showDrawer = computed({
+      get: () => {
+        return !Screen.gt.sm && drawer.value;
+      },
+      set: (val: boolean) => {
+        drawer.value = val;
+      }
+    });
+
+    const tab = ref<string>('create');
+
+    return {
+      canEditRoles,
+      showDrawer,
+      tab,
+      tabs
+    };
+  }
+});
+</script>
diff --git a/src/plugins/schedule/pages/Overview.vue b/src/plugins/schedule/pages/Overview.vue
new file mode 100644
index 0000000..b64ab3f
--- /dev/null
+++ b/src/plugins/schedule/pages/Overview.vue
@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <q-card>
+      <q-card-section class="row"> </q-card-section>
+      <q-card-section> </q-card-section>
+    </q-card>
+  </q-page>
+</template>
diff --git a/src/plugins/schedule/pages/Requests.vue b/src/plugins/schedule/pages/Requests.vue
new file mode 100644
index 0000000..b64ab3f
--- /dev/null
+++ b/src/plugins/schedule/pages/Requests.vue
@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <q-card>
+      <q-card-section class="row"> </q-card-section>
+      <q-card-section> </q-card-section>
+    </q-card>
+  </q-page>
+</template>
diff --git a/src/plugins/schedule/permissions.ts b/src/plugins/schedule/permissions.ts
new file mode 100644
index 0000000..6f47772
--- /dev/null
+++ b/src/plugins/schedule/permissions.ts
@@ -0,0 +1,12 @@
+export const PERMISSIONS = {
+  // Kann andere Nutzer bearbeiten
+  EDIT_OTHER: 'users_edit_other',
+  // Kann Rollen von Nutzern setzen
+  SET_ROLES: 'users_set_roles',
+  // Kann Nutzer löschen
+  DELETE: 'users_delete_other',
+  // Kann neue Nutzer hinzufügen
+  REGISTER: 'users_register',
+  // Kann Rollen löschen oder bearbeiten, z.b. Rechte hinzufügen etc
+  ROLES_EDIT: 'roles_edit'
+};
diff --git a/src/plugins/schedule/plugin.ts b/src/plugins/schedule/plugin.ts
index 8565d4c..4ff59b1 100644
--- a/src/plugins/schedule/plugin.ts
+++ b/src/plugins/schedule/plugin.ts
@@ -1,10 +1,16 @@
 import { FG_Plugin } from 'src/plugins';
+import mainRoutes from './routes';
+import store from './store/schedule';
+import { Module } from 'vuex';
+import { StateInterface } from 'src/store';
 
 const plugin: FG_Plugin.Plugin = {
   name: 'Schedule',
-  requiredModules: [],
+  mainRoutes,
+  requiredModules: ['User'],
   requiredBackendModules: ['schedule'],
   version: '0.0.1',
+  store: new Map<string, Module<any, StateInterface>>([['schedule', store]]),
   widgets: [
     {
       priority: 0,
diff --git a/src/plugins/schedule/routes/index.ts b/src/plugins/schedule/routes/index.ts
new file mode 100644
index 0000000..5a02182
--- /dev/null
+++ b/src/plugins/schedule/routes/index.ts
@@ -0,0 +1,63 @@
+import { FG_Plugin } from 'src/plugins';
+
+/*const permissions = {
+  // Show own and others balance
+  SHOW: 'balance_show',
+  SHOW_OTHER: 'balance_show_others',
+  // Credit balance (give)
+  CREDIT: 'balance_credit',
+  // Debit balance (take)
+  DEBIT: 'balance_debit',
+  // Debit own balance only
+  DEBIT_OWN: 'balance_debit_own',
+  // Send from to other
+  SEND: 'balance_send',
+  // Send from other to another
+  SEND_OTHER: 'balance_send_others',
+  // Can set limit for users
+  SET_LIMIT: 'balance_set_limit',
+  //Allow sending / sub while exceeding the set limit
+  EXCEED_LIMIT: 'balance_exceed_limit'
+};*/
+
+const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
+  {
+    title: 'Dienste',
+    icon: 'mdi-briefcase',
+    path: 'schedule',
+    name: 'schedule',
+    component: () => import('../pages/MainPage.vue'),
+    meta: { permissions: ['user'] },
+    children: [
+      {
+        title: 'Dienstübersicht',
+        icon: 'mdi-account-group',
+        path: 'schedule-overview',
+        name: 'schedule-overview',
+        shortcut: true,
+        meta: { permissions: [] },
+        component: () => import('../pages/Overview.vue')
+      },
+      {
+        title: 'Dienstverwaltung',
+        icon: 'mdi-account-details',
+        path: 'schedule-management',
+        name: 'schedule-management',
+        shortcut: false,
+        meta: { permissions: [] },
+        component: () => import('../pages/Management.vue')
+      },
+      {
+        title: 'Dienstanfragen',
+        icon: 'mdi-account-switch',
+        path: 'schedule-requests',
+        name: 'schedule-requests',
+        shortcut: false,
+        meta: { permissions: [] },
+        component: () => import('../pages/Requests.vue')
+      }
+    ]
+  }
+];
+
+export default mainRoutes;
diff --git a/src/plugins/schedule/store/schedule.ts b/src/plugins/schedule/store/schedule.ts
new file mode 100644
index 0000000..5df9273
--- /dev/null
+++ b/src/plugins/schedule/store/schedule.ts
@@ -0,0 +1,102 @@
+import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
+import { StateInterface } from 'src/store';
+import { axios } from 'src/boot/axios';
+import { AxiosResponse } from 'axios';
+
+export interface JobType {
+  id: number;
+  name: string;
+}
+
+export interface ScheduleInterface {
+  jobTypes: JobType[];
+}
+
+// export interface StateInterfaceSchedule extends StateInterface {
+// //   balance: BalanceInterface;
+// }
+
+const state: ScheduleInterface = {
+  jobTypes: []
+};
+
+const mutations: MutationTree<ScheduleInterface> = {
+  setJobTypes(state, jobTypes: JobType[]) {
+    state.jobTypes = jobTypes;
+  },
+  addJobType(state, jobType: JobType) {
+    state.jobTypes.unshift(jobType);
+  },
+  removeJobType(state, id: number) {
+    const index = state.jobTypes.findIndex(item => item.id == id);
+    state.jobTypes.splice(index, 1);
+  },
+  setJobType(state, jobType: JobType) {
+    const _jobtype = state.jobTypes.find(item => item.id == jobType.id);
+    if (_jobtype) {
+      _jobtype.name = jobType.name;
+    }
+  }
+};
+
+const actions: ActionTree<ScheduleInterface, StateInterface> = {
+  getJobTypes({ commit }) {
+    axios
+      .get('/schedule/job-types')
+      .then((response: AxiosResponse<JobType[]>) => {
+        console.log('action:', response.data);
+        commit('setJobTypes', response.data);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  },
+
+  addJobType({ commit }, data) {
+    axios
+      .post('/schedule/job-types', data)
+      .then((response: AxiosResponse<JobType>) => {
+        commit('addJobType', response.data);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  },
+  removeJobType({ commit }, data: number) {
+    axios
+      .delete(`/schedule/job-types/${data}`)
+      .then(() => {
+        commit('removeJobType', data);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  },
+
+  changeJobTypeName({ commit }, jobtype: JobType) {
+    axios
+      .put(`/schedule/job-types/${jobtype.id}`, jobtype)
+      .then(() => {
+        commit('setJobType', jobtype);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  }
+};
+
+const getters: GetterTree<ScheduleInterface, StateInterface> = {
+  jobTypes(state) {
+    return state.jobTypes;
+  }
+};
+
+const schedule: Module<ScheduleInterface, StateInterface> = {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+};
+
+export default schedule;