From 6ecf80f34ccd9dbea67d03032b265d2657df30ab Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Sun, 24 Oct 2021 18:16:19 +0200
Subject: [PATCH] improve profile page #36

---
 package-lock.json               | 44 ++++++++++++++-
 package.json                    |  1 +
 src/components/AutoComplete.vue | 43 +++++++++-----
 src/components/ProfileList.vue  | 99 +++++++++++++--------------------
 src/components/Skill.vue        |  2 +-
 src/main.js                     |  3 +
 src/views/profile/Edit.vue      | 18 ++++--
 7 files changed, 127 insertions(+), 83 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 324b218..32e56a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "eslint-plugin-vue": "^7.0.0",
         "sass": "^1.37.5",
         "sass-loader": "^10.2.0",
+        "v-tooltip": "^4.0.0-alpha.1",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0-0",
         "vuex": "^4.0.2"
@@ -1215,7 +1216,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
       "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
       "dev": true,
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -13008,6 +13008,19 @@
         "uuid": "bin/uuid"
       }
     },
+    "node_modules/v-tooltip": {
+      "version": "4.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-alpha.1.tgz",
+      "integrity": "sha512-TTNLJ/IVyoburxW0M3gxHhRb+d18xbozI5c0q2LCqIw4YUZzLKCG0ufx72d+j/1Xkqam9kDNHZChZq4KfsVpvw==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.6.0",
+        "vue-resize": "^2.0.0-alpha.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.3.0.tgz?cache=0&sync_timestamp=1614993892777&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8-compile-cache%2Fdownload%2Fv8-compile-cache-2.3.0.tgz",
@@ -13225,6 +13238,15 @@
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
+    "node_modules/vue-resize": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+      "dev": true,
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.8.tgz",
@@ -15574,8 +15596,7 @@
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
       "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
@@ -25577,6 +25598,16 @@
       "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
       "dev": true
     },
+    "v-tooltip": {
+      "version": "4.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-alpha.1.tgz",
+      "integrity": "sha512-TTNLJ/IVyoburxW0M3gxHhRb+d18xbozI5c0q2LCqIw4YUZzLKCG0ufx72d+j/1Xkqam9kDNHZChZq4KfsVpvw==",
+      "dev": true,
+      "requires": {
+        "@popperjs/core": "^2.6.0",
+        "vue-resize": "^2.0.0-alpha.1"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.3.0.tgz?cache=0&sync_timestamp=1614993892777&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8-compile-cache%2Fdownload%2Fv8-compile-cache-2.3.0.tgz",
@@ -25769,6 +25800,13 @@
         }
       }
     },
+    "vue-resize": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+      "dev": true,
+      "requires": {}
+    },
     "vue-router": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.8.tgz",
diff --git a/package.json b/package.json
index a476688..29972f0 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "eslint-plugin-vue": "^7.0.0",
     "sass": "^1.37.5",
     "sass-loader": "^10.2.0",
+    "v-tooltip": "^4.0.0-alpha.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.2"
diff --git a/src/components/AutoComplete.vue b/src/components/AutoComplete.vue
index ed2399d..c5f1316 100644
--- a/src/components/AutoComplete.vue
+++ b/src/components/AutoComplete.vue
@@ -9,25 +9,42 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     :values="values"
     :type="type"
     :editable="true"
+    :show-secondary="showSecondary"
     @remove-value="removeValue($event)"
     @update-values="this.$emit('update-values', this.values)"
   >
   </profile-list>
   <div v-bind="$attrs" class="card-body">
     <div class="row">
-      <div class="col">
+      <div class="col-12 col-md-4 col-lg-3 col-xl-2">
+        <div class="form-control-plaintext form-control-sm">Eintrag hinzufügen:</div>
+      </div>
+      <div class="col-12 col-md-6">
         <input
           autocomplete="off"
           type="text"
-          class="form-control"
+          class="form-control form-control-sm"
           id="searchText"
           maxlength="25"
+          :placeholder="placeholder"
           v-model="searchText"
           @input="search()"
           @keyup.enter="addResult()"
         />
+        <div v-if="searchResults">
+          <ul class="list-group">
+            <li
+              class="list-group-item"
+              v-for="result in searchResults"
+              :key="result.id"
+              @click="addResult(result)"
+            >
+              {{ result.name }}
+            </li>
+          </ul>
+        </div>
       </div>
-      <div class="col">
+      <div class="col-md-2">
         <button
           v-if="searchText != ''"
           type="button"
@@ -40,18 +57,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </button>
       </div>
     </div>
-    <div v-if="searchResults">
-      <ul class="list-group">
-        <li
-          class="list-group-item"
-          v-for="result in searchResults"
-          :key="result.id"
-          @click="addResult(result)"
-        >
-          {{ result.name }}
-        </li>
-      </ul>
-    </div>
   </div>
 </template>
 <script>
@@ -76,6 +81,14 @@ export default {
     values: {
       type: Array,
     },
+    showSecondary: {
+      type: Boolean,
+      default: true,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
diff --git a/src/components/ProfileList.vue b/src/components/ProfileList.vue
index 67b6388..bd621d1 100644
--- a/src/components/ProfileList.vue
+++ b/src/components/ProfileList.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       :key="value.id"
     >
       <div class="row">
-        <div class="col d-flex align-items-center">
+        <div class="col-12 col-md-5 d-flex align-items-center">
           <div
             class="list-icon me-1"
             :style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
@@ -22,70 +22,49 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             {{ value[type].name }}
           </div>
         </div>
-        <div class="col">
-          <div v-if="type == 'skill'">
-            <div v-if="editable">
-              <select
-                v-if="editableValues[valueKey]"
-                class="form-select form-select-sm"
-                aria-label="Selektiere dein Level"
-                v-model="editableValues[valueKey].level"
-                @input="$emit('update-values', editableValues)"
+        <div class="col-10 col-md-5">
+          <div v-if="type == 'skill' && showSecondary">
+            <select
+              class="form-select form-select-sm"
+              aria-label="Selektiere dein Level"
+              v-model="editableValues[valueKey].level"
+              @input="$emit('update-values', editableValues)"
+            >
+              <option
+                v-for="(value, key) in levelSelection"
+                :value="key"
+                :key="key"
               >
-                <option
-                  v-for="(value, key) in levelSelection"
-                  :value="key"
-                  :key="key"
-                >
-                  {{ value.long || value }}
-                </option>
-              </select>
-            </div>
-            <div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
+                {{ value.long || value }}
+              </option>
+            </select>
           </div>
           <div v-else-if="type == 'language'">
-            <div v-if="editable">
-              <div v-if="editable">
-                <select
-                  v-if="editableValues[valueKey]"
-                  class="form-select form-select-sm"
-                  aria-label="Selektiere dein Level"
-                  v-model="editableValues[valueKey].level"
-                  @input="$emit('update-values', editableValues)"
-                >
-                  <option
-                    v-for="(value, key) in languagesSelection"
-                    :value="key"
-                    :key="key"
-                  >
-                    {{ value }}
-                  </option>
-                </select>
-              </div>
-            </div>
-            <div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
+            <select
+              class="form-select form-select-sm"
+              aria-label="Selektiere dein Level"
+              v-model="editableValues[valueKey].level"
+              @input="$emit('update-values', editableValues)"
+            >
+              <option
+                v-for="(value, key) in languagesSelection"
+                :value="key"
+                :key="key"
+              >
+                {{ value }}
+              </option>
+            </select>
           </div>
           <div v-else-if="type == 'contacttype'">
-            <div v-if="editable">
-              <input 
-                class="form-control form-control-sm" 
-                maxlength="200" 
-                v-model="editableValues[valueKey].content"
-              />
-            </div>
-            <div v-else>
-              <span v-if="value[type].name === 'E-Mail'">
-                <a :href="`mailto:${value.content}`">{{ value.content }}</a>
-              </span>
-              <span v-else>
-                {{ value.content }}
-              </span>
-            </div>
+            <input
+              class="form-control form-control-sm"
+              maxlength="200"
+              v-model="editableValues[valueKey].content"
+            />
           </div>
         </div>
-        <div class="col text-end">
+        <div class="col-2 text-end">
           <button
-            v-if="editable"
             type="button"
             class="btn btn-sm btn-light"
             aria-label="Löschen"
@@ -112,10 +91,10 @@ export default {
       type: Array,
       required: true,
     },
-    editable: {
+    showSecondary: {
       type: Boolean,
-      default: false,
-    },
+      default: true
+    }
   },
   data() {
     return {
diff --git a/src/components/Skill.vue b/src/components/Skill.vue
index f457385..5d9df04 100644
--- a/src/components/Skill.vue
+++ b/src/components/Skill.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <template>
   <div class="skill rounded me-2">
-    <div class="skill__left px-2">
+    <div class="skill__left p-2">
       <div class="skill__icon" :style="{ backgroundImage: iconUrl }"></div>
     </div>
     <div class="skill__right d-flex align-items-center rounded-end px-2">
diff --git a/src/main.js b/src/main.js
index 6c381ae..42a65c3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,12 +6,15 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
 import App from './App.vue'
 import router from './router'
 import store from '@/store'
+import VTooltipPlugin from 'v-tooltip'
 
+import 'v-tooltip/dist/v-tooltip.css'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import './assets/global.scss'
 
 const app = createApp(App)
 
+app.use(VTooltipPlugin)
 app.use(router)
 app.use(store)
 
diff --git a/src/views/profile/Edit.vue b/src/views/profile/Edit.vue
index bf7eecb..3aafbaa 100644
--- a/src/views/profile/Edit.vue
+++ b/src/views/profile/Edit.vue
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             <div class="col-6 mb-3">
               <label class="form-label">
                 Pronomen
-                <i class="bi bi-info-circle" title="ToDo: Tooltip"></i>
+                <i class="bi bi-info-circle" v-tooltip="pronounsTooltip"></i>
               </label>
               <input
                 type="text"
@@ -60,7 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
           <label class="form-label">Anschrift</label>
           <div class="row">
-            <div class="col-4">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
               <input
                 type="text"
                 class="form-control"
@@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 v-model="profile.address.postcode"
               />
             </div>
-            <div class="col-4">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
               <input
                 type="text"
                 class="form-control"
@@ -80,7 +80,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 v-model="profile.address.city"
               />
             </div>
-            <div class="col-4">
+            <div class="col-12 col-md-4">
               <input
                 type="text"
                 class="form-control"
@@ -98,6 +98,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             <auto-complete
               type="skill"
               :values="profile.skills"
+              placeholder="z.B. Python, JavaScript, Linux"
               @update-values="profile.skills = $event"
             ></auto-complete>
           </template>
@@ -108,6 +109,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             <auto-complete
               type="language"
               :values="profile.languages"
+              placeholder="z.B. Deutsch, Englisch, Französisch"
               @update-values="profile.languages = $event"
             ></auto-complete>
           </template>
@@ -119,6 +121,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               type="skill"
               label="Ich suche"
               :values="profile.searchtopics"
+              :showSecondary="false"
+              placeholder="z.B. Python, JavaScript, Linux"
               @update-values="profile.searchtopics = $event"
             ></auto-complete>
           </template>
@@ -153,6 +157,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 class="form-control"
                 id="availability"
                 rows="3"
+                maxlength="4000"
                 v-model="profile.availability_text"
               ></textarea>
             </Section>
@@ -162,6 +167,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 <auto-complete
                   type="contacttype"
                   :values="profile.contacts"
+                  placeholder="z.B. E-Mail, Mobiltelefon, Matrix, Web"
                   @update-values="profile.contacts = $event"
                 ></auto-complete>
               </template>
@@ -253,6 +259,10 @@ export default {
         searchtopics: [],
         contacts: [],
       },
+      pronounsTooltip: {
+        content:  'Wie möchtest du angesprochen werden?<br>Zum Beispiel "er/ihn" oder "sie/ihre".',
+        html: true
+      }
     };
   },
   async created() {