Merge pull request 'Weitere Arbeiten Profilseite' (#53) from profile-page into main

Reviewed-on: kompetenzinventar/ki-frontend#53
This commit is contained in:
scammo 2021-10-25 14:15:38 +02:00
commit b270a5d56a
7 changed files with 127 additions and 83 deletions

44
package-lock.json generated
View File

@ -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",

View File

@ -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"

View File

@ -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 {

View File

@ -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 {

View File

@ -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">

View File

@ -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)

View File

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