kompetenzinventar/ki-frontend
7
5
Fork 6
Code Issues Pull Requests 12 Packages Projects Releases 1 Wiki Activity

improve profile page #36
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
weeman
2021-10-24 18:16:19 +02:00
parent 016a1bd959
commit 6ecf80f34c
7 changed files with 127 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/ProfileList.vue
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 {