LuckPermsWeb/src/components/Editor/Modals/CreateGroup.vue at 1db385c8b4e58e4be9302aa13a8ae9a5682904c2 · LuckPerms/LuckPermsWeb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<template>
<div @keyup.enter="addGroup">
  <h2>{{ $t('editor.groups.create') }}</h2>
  <div class="row">
    <div class="col">
      <div class="form-group">
        <label for="groupName">{{ $t('editor.groups.name') }}</label>
        <input type="text" id="groupName" :value="group.name" @input="updateGroupName($event)">
      </div>
      <div class="form-group">
        <label for="displayName">{{ $t('editor.groups.displayName') }}</label>
        <input type="text" id="displayName" v-model="group.displayName">
      </div>
      <div class="form-group">
        <label for="parent">{{ $t('editor.groups.parent') }}</label>
        <select name="parent" id="parent" v-model="group.parent">
          <option value="0">{{ $t('editor.groups.none') }}</option>
          <option v-for="groupItem in props" :value="groupItem.id" :key="groupItem.id">
            {{ groupItem.displayName }}
          </option>
        </select>
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <label for="weight">{{ $t('editor.groups.weight') }}</label>
        <input type="number" id="weight" v-model="group.weight">
      </div>
      <div class="form-group">
        <label for="prefix">{{ $t('editor.groups.prefix') }}</label>
        <input type="text" id="prefix" v-model="group.prefix">
      </div>
      <div class="form-group">
        <label for="suffix">{{ $t('editor.groups.suffix') }}</label>
        <input type="text" id="suffix" v-model="group.suffix">
      </div>
    </div>
  </div>
  <button type="button" @click="addGroup" class="save-button">
    <font-awesome icon="plus-circle" />
    {{ $t('editor.groups.add') }}
  </button>
</div>
</template>

<script>

export default {
  name: 'CreateGroup',
  data() {
    return {
      group: {
        name: '',
        displayName: '',
        weight: 0,
        parent: 0,
        prefix: '',
        suffix: '',
      },
    };
  },
  props: {
    props: Array,
  },
  computed: {
  },
  methods: {
    updateGroupName(event) {
      this.group.name = event.target.value.toLowerCase().replace(/ /g, '-');
    },

    addGroup() {
      if (this.group.name !== '') {
        const result = this.$store.dispatch('addGroup', this.group);

        if (result === 'success') this.$emit('close');
      }
    },
  },
};
</script>

<style lang="scss">

</style>