From 4cb7abdc9bfca2d601a66b417ef301c531d4cb59 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 11 Nov 2021 06:51:21 +0100
Subject: [PATCH] add momentjs, add component CreateFormular.vue formular for
 creating gdd

---
 admin/package.json                      |  2 +
 admin/src/components/CreateFormular.vue | 66 +++++++++++++++++++++
 admin/src/components/UserTable.vue      | 78 ++++++++++++++++++++++---
 admin/src/locales/en.json               | 17 +++++-
 admin/src/main.js                       |  4 ++
 admin/src/views/Overview.vue            |  7 ++-
 admin/yarn.lock                         | 12 ++++
 7 files changed, 177 insertions(+), 9 deletions(-)
 create mode 100644 admin/src/components/CreateFormular.vue

diff --git a/admin/package.json b/admin/package.json
index 2b4e33c91..5dff9145e 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -33,11 +33,13 @@
     "dotenv-webpack": "^7.0.3",
     "graphql": "^15.6.1",
     "jest": "26.6.3",
+    "moment": "^2.29.1",
     "stats-webpack-plugin": "^0.7.0",
     "vue": "^2.6.11",
     "vue-apollo": "^3.0.8",
     "vue-i18n": "^8.26.5",
     "vue-jest": "^3.0.7",
+    "vue-moment": "^4.1.0",
     "vue-router": "^3.5.3",
     "vuex": "^3.6.2"
   },
diff --git a/admin/src/components/CreateFormular.vue b/admin/src/components/CreateFormular.vue
new file mode 100644
index 000000000..5dd07a4c1
--- /dev/null
+++ b/admin/src/components/CreateFormular.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <b-form>
+      <b-row class="m-4">
+        <b-col>
+          <b-form-radio name="radio-size" size="lg">{{ MonatBevorLast }}</b-form-radio>
+        </b-col>
+        <b-col>
+          <b-form-radio name="radio-size" size="lg">{{ MonatLast }}</b-form-radio>
+        </b-col>
+        <b-col>
+          <b-form-radio name="radio-size" size="lg">{{ MonatAktuell }}</b-form-radio>
+        </b-col>
+      </b-row>
+      <b-row class="m-4">
+        <div>
+          <b-form-textarea
+            id="textarea-state"
+            v-model="text"
+            :state="text.length >= 10"
+            placeholder="Enter at least 10 characters"
+            rows="3"
+          ></b-form-textarea>
+        </div>
+      </b-row>
+      <b-row class="m-4">
+        <label for="range-2 h4">
+          Betrag Auswählen
+          <span class="mt-2 h3" v-if="value > 0">{{ value }} GDD</span>
+        </label>
+        <b-input
+          id="range-2"
+          v-model="value"
+          type="range"
+          min="0"
+          max="1000"
+          step="10"
+          class="mr-4 ml-4"
+        ></b-input>
+      </b-row>
+      <b-row class="m-4">
+        <b-col class="text-center"><b-button type="reset" variant="danger">Reset</b-button></b-col>
+        <b-col class="text-center">
+          <div class="text-right">
+            <b-button type="submit" variant="primary">Submit</b-button>
+          </div>
+        </b-col>
+      </b-row>
+    </b-form>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CreateFormular',
+  data() {
+    return {
+      text: 'datatext',
+      value: 0,
+      MonatAktuell: this.$moment().format('MMMM'),
+      MonatLast: this.$moment().subtract(1, 'month').format('MMMM'),
+      MonatBevorLast: this.$moment().subtract(2, 'month').format('MMMM'),
+    }
+  },
+  created() {},
+}
+</script>
diff --git a/admin/src/components/UserTable.vue b/admin/src/components/UserTable.vue
index 55e9b5b3c..2e92c9a7f 100644
--- a/admin/src/components/UserTable.vue
+++ b/admin/src/components/UserTable.vue
@@ -1,22 +1,86 @@
 <template>
   <div>
-    <b-table :items="items" :fields="fields" caption-top>
-      <template #table-caption>This is a table caption at the top.</template>
+    <b-table :items="items" :fields="fields" :filter="criteria" caption-top striped hover>
+      <template #cell(checkbox)="row">
+        <!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->
+        <b-form-checkbox v-model="row.detailsShowing" @change="row.toggleDetails">
+          Details via check
+        </b-form-checkbox>
+      </template>
+      <template #table-caption>
+        <div>
+          <b-form-input
+            v-model="criteria"
+            placeholder="User suche"
+            class="bg-color-gray"
+          ></b-form-input>
+        </div>
+      </template>
+
+      <template #cell(show_details)="row">
+        <b-button size="sm" @click="row.toggleDetails" class="mr-2">
+          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
+        </b-button>
+      </template>
+
+      <template #row-details="row">
+        <b-card>
+          <b-row class="mb-2">
+            <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
+            <b-col>{{ row.item.age }}</b-col>
+          </b-row>
+
+          <b-row class="mb-2">
+            <b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
+            <b-col>{{ row.item.isActive }}</b-col>
+          </b-row>
+          <create-formular />
+
+          <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
+        </b-card>
+      </template>
     </b-table>
   </div>
 </template>
 
 <script>
+import CreateFormular from '../components/CreateFormular.vue'
+
 export default {
   name: 'UserTable',
-  props: {},
+  props: ['count', 'area'],
+  components: {
+    CreateFormular,
+  },
   data() {
     return {
-      fields: ['first_name', 'last_name', 'age'],
+      criteria: '',
+      fields: ['checkbox', 'email', 'first_name', 'last_name', 'creation', 'show_details'],
       items: [
-        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
-        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
-        { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
+        {
+          email: 'dickerson@web.de',
+          first_name: 'Dickerson',
+          last_name: 'Macdonald',
+          creation: '0,200, 1000',
+        },
+        {
+          email: 'larsen@woob.de',
+          first_name: 'Larsen',
+          last_name: 'Shaw',
+          creation: '0,200, 1000',
+        },
+        {
+          email: 'geneva@tete.de',
+          first_name: 'Geneva',
+          last_name: 'Wilson',
+          creation: '0,200, 1000',
+        },
+        {
+          email: 'viewrter@asdfvb.com',
+          first_name: 'Soledare',
+          last_name: 'Takker',
+          creation: '100,400, 800',
+        },
       ],
     }
   },
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 0967ef424..ac7159ece 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -1 +1,16 @@
-{}
+{
+    "monthNames": { 
+        "January": "", 
+        "February": "", 
+        "March": "", 
+        "April": "", 
+        "May": "", 
+        "June": "",
+        "July": "", 
+        "August": "", 
+        "September": "", 
+        "October": "", 
+        "November": "", 
+        "December": ""
+    }
+}
diff --git a/admin/src/main.js b/admin/src/main.js
index 089e02352..197b82888 100644
--- a/admin/src/main.js
+++ b/admin/src/main.js
@@ -17,6 +17,8 @@ import { BootstrapVue } from 'bootstrap-vue'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 import 'bootstrap/dist/css/bootstrap.css'
 
+import moment from 'vue-moment'
+
 const httpLink = new HttpLink({ uri: CONFIG.GRAPHQL_URI })
 
 const authLink = new ApolloLink((operation, forward) => {
@@ -50,10 +52,12 @@ const apolloProvider = new VueApollo({
 })
 
 Vue.use(BootstrapVue)
+Vue.use(moment)
 
 addNavigationGuards(router, store)
 
 new Vue({
+  moment,
   router,
   store,
   i18n,
diff --git a/admin/src/views/Overview.vue b/admin/src/views/Overview.vue
index 0cb8a106d..55eca4aea 100644
--- a/admin/src/views/Overview.vue
+++ b/admin/src/views/Overview.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <user-table count="5" />
+    <create-formular />
+    <hr />
+
+    <user-table count="5" area="overview" />
 
     Startübersicht Adminbereich
     <ul>
@@ -11,10 +14,12 @@
   </div>
 </template>
 <script>
+import CreateFormular from '../components/CreateFormular.vue'
 import UserTable from '../components/UserTable.vue'
 export default {
   name: 'overview',
   components: {
+    CreateFormular,
     UserTable,
   },
 }
diff --git a/admin/yarn.lock b/admin/yarn.lock
index 59a49674d..0fdef5450 100644
--- a/admin/yarn.lock
+++ b/admin/yarn.lock
@@ -9020,6 +9020,11 @@ mkdirp@0.x, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.19.2, moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -12469,6 +12474,13 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-moment@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vue-moment/-/vue-moment-4.1.0.tgz#092a8ff723a96c6f85a0a8e23ad30f0bf320f3b0"
+  integrity sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==
+  dependencies:
+    moment "^2.19.2"
+
 vue-router@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"