Falukant production, family and administration enhancements

frontend/src/views/admin/falukant/EditUserView.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <h1>Edit Falukant User</h1>
+    <div>
+      <label>Username: <input type="text" v-model="user.username" /></label>
+      <label>Character name: <input type="text" v-model="user.characterName" /></label>
+      <button @click="searchUser">Search</button>
+    </div>
+    <ul v-for="user in users" class="user-list">
+      <li @click="selectUser(user)">{{ user.username }} ({{ user.falukantUser[0].character.definedFirstName.name }} {{
+        user.falukantUser[0].character.definedLastName.name }})</li>
+    </ul>
+    <div v-if="editableUser" class="edit-form">
+      <h2>User: {{ editableUser.username }}</h2>
+      <h3>Character-Name: {{ editableUser.falukantData[0].character.definedFirstName.name }} {{
+        editableUser.falukantData[0].character.definedLastName.name }}</h3>
+      <label>Money: <input type="number" v-model="editableUser.falukantData[0].money" /></label>
+      <label>Age: <input type="number" v-model="age" /></label>
+      <label>Noble title: 
+        <select v-model="editableUser.falukantData[0].character.title_of_nobility">
+          <option v-for="title in titles" :value="title.id">{{ $t(`falukant.titles.male.${title.labelTr}`) }}</option>
+        </select>
+      </label>
+      <label>House: <select v-model="editableUser.falukantData[0].house">
+          <option v-for="house in houses" :value="house.id">{{ $t(`${house.labelTr}`) }}</option>
+        </select>
+      </label>
+      <button @click="saveUser">Save</button>
+      <button @click="deleteUser">Delete</button>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import { mapState } from 'vuex';
+import { mapActions } from 'vuex';
+import apiClient from '@/utils/axios.js';
+
+export default {
+  name: 'AdminFalukantEditUserView',
+  data() {
+    return {
+      user: {
+        username: '',
+        characterName: ''
+      },
+      users: [],
+      editableUser: null,
+      age: null,
+      originalAge: null,
+      originalUser: null,
+      titles: [],
+    }
+  },
+  computed: {
+    ...mapState('falukant', ['user'])
+  },
+  async mounted() {
+    const titlesResult = await apiClient.get('/api/falukant/nobility/titels');
+    this.titles = titlesResult.data;
+  },
+  methods: {
+    async searchUser() {
+      const userResult = await apiClient.post('/api/admin/falukant/searchuser', {
+        userName: this.user.username,
+        characterName: this.user.characterName
+      });
+      this.users = userResult.data;
+    },
+    async selectUser(user) {
+      const userResult = await apiClient.get(`/api/admin/falukant/getuser/${user.id}`);
+      this.editableUser = userResult.data;
+      this.originalUser = JSON.parse(JSON.stringify(this.editableUser));
+      this.age = Math.floor((Date.now() - new Date(this.editableUser.falukantData[0].character.birthdate)) / (24 * 60 * 60 * 1000));
+      this.originalAge = this.age;
+      this.users = [];
+    },
+    async saveUser() {
+      const dataToChange = {
+        id: this.editableUser.falukantData[0].id,
+      };
+      if (this.editableUser.falukantData[0].money != this.originalUser.falukantData[0].money) {
+        dataToChange.money = this.editableUser.falukantData[0].money;
+      }
+      if (this.editableUser.falukantData[0].character.title_of_nobility != this.originalUser.falukantData[0].character.title_of_nobility) {
+        dataToChange.title_of_nobility = this.editableUser.falukantData[0].character.title_of_nobility;
+      }
+      if (this.originalAge != this.age) {
+        dataToChange.age = this.age;
+      }
+      try {
+        await apiClient.post(`/api/admin/falukant/edituser`, dataToChange);
+        this.$root.$refs.messageDialog.open('tr:admin.falukant.edituser.success');
+      } catch (error) {
+        this.$root.$refs.errorDialog.open('tr:admin.falukant.edituser.error');
+      }
+    },
+    async deleteUser() {
+      const dataToChange = {
+        id: this.editableUser.falukantData[0].id,
+      };
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-list>li {
+  cursor: pointer;
+  color: #0066ff;
+}
+
+.edit-form label {
+  display: block;
+}
+</style>