improve profile page #36

2021-10-24 18:16:19 +02:00 · 2021-10-24 18:16:19 +02:00 · 6ecf80f34c
commit 6ecf80f34c
parent 016a1bd959
7 changed files with 127 additions and 83 deletions
--- 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",
--- 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"
--- 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 {
--- 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 {
--- 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">
--- 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)

--- 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() {