Skip to content

Commit

Permalink
Merge pull request #886 from oslokommune/fix-kr-value-table
Browse files Browse the repository at this point in the history
Minor adjustments to the key result values table
  • Loading branch information
petterhj authored Oct 10, 2023
2 parents ab9ebda + 1cc89c4 commit 87cc8e4
Showing 1 changed file with 31 additions and 96 deletions.
127 changes: 31 additions & 96 deletions src/components/KeyResultValuesList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<th>{{ $t('widget.history.value') }}</th>
<th>{{ $t('widget.history.date') }}</th>
<th>{{ $t('widget.history.comment') }}</th>
<th>{{ $t('widget.history.changedBy') }}</th>
<th></th>
</tr>
</thead>
Expand All @@ -15,56 +16,30 @@
{{ formatValue(record.value) }}
</td>
<td>
{{ dateExtraShort(record.timestamp.toDate()) }}
<span v-tooltip="addedBy(record)">
{{ dateExtraShort(record.timestamp.toDate()) }}
</span>
</td>
<td>
<div>
<p v-if="record.comment">{{ record.comment }}</p>
<div>
<user-link
v-if="record.editedBy || record.createdBy"
:user="record.editedBy || record.createdBy"
@open-user-modal="openProfileModal"
/>
<pkt-button
v-if="hasEditRights"
v-tooltip="$t('tooltip.editProgress')"
size="small"
skin="tertiary"
variant="icon-only"
icon-name="edit"
@onClick="$emit('edit-value', record)"
/>
</div>
</div>
<p v-if="record.comment">{{ record.comment }}</p>
</td>
<td>
<div>
<user-link
v-if="record.editedBy || record.createdBy"
:user="record.editedBy || record.createdBy"
@open-user-modal="openProfileModal"
/>
<pkt-button
v-if="hasEditRights"
v-tooltip="$t('tooltip.editProgress')"
size="small"
skin="tertiary"
variant="icon-only"
icon-name="edit"
@onClick="$emit('edit-value', record)"
/>
</div>
<span v-if="addedBy(record)">{{ addedBy(record) }}</span>
</td>
<td>
<pkt-button
v-if="hasEditRights"
v-tooltip="$t('tooltip.editProgress')"
size="small"
skin="tertiary"
variant="icon-only"
icon-name="edit"
@onClick="$emit('edit-value', record)"
/>
</td>
</tr>
</tbody>
</table>

<profile-modal
v-if="showProfileModal"
:id="chosenProfileId"
@close="closeProfileModal"
/>
</div>
</template>

Expand All @@ -73,16 +48,12 @@ import { mapGetters } from 'vuex';
import { dateExtraShort } from '@/util';
import { formatValue } from '@/util/keyResultProgress';
import { PktButton } from '@oslokommune/punkt-vue2';
import ProfileModal from '@/components/modals/ProfileModal.vue';
import UserLink from '@/components/widgets/WidgetProgressHistory/UserLink.vue';
export default {
name: 'KeyResultValuesList',
components: {
PktButton,
ProfileModal,
UserLink,
},
props: {
Expand All @@ -92,11 +63,6 @@ export default {
},
},
data: () => ({
showProfileModal: false,
chosenProfileId: null,
}),
computed: {
...mapGetters(['hasEditRights']),
},
Expand All @@ -105,14 +71,9 @@ export default {
formatValue,
dateExtraShort,
openProfileModal(profileId) {
this.showProfileModal = true;
this.chosenProfileId = profileId;
},
closeProfileModal() {
this.showProfileModal = false;
this.chosenProfileId = null;
addedBy(record) {
const user = record.editedBy || record.createdBy;
return user ? user.displayName || user.id : null;
},
},
};
Expand All @@ -134,7 +95,7 @@ export default {
border-spacing: 0 0.5rem;
th {
padding: 0 2rem;
padding: 0 1rem;
text-align: left;
@include get-text('pkt-txt-14-medium');
Expand All @@ -149,64 +110,38 @@ export default {
}
td {
padding: 1rem 2rem;
padding: 1rem;
text-align: left;
text-wrap: balance;
background-color: var(--color-white);
@include get-text('pkt-txt-14');
&:nth-child(1) {
@include get-text('pkt-txt-16-bold');
padding: 1rem 2rem;
color: var(--color-yellow-100);
text-align: center;
text-wrap: nowrap;
background: var(--color-yellow-50);
}
&:nth-child(2) {
padding-right: 1rem;
padding-left: 2rem;
text-align: center;
}
&:nth-child(3) {
padding-left: 1rem;
> div {
display: flex;
flex-direction: column;
gap: 0.5rem;
> p {
@include get-text('pkt-txt-14-light');
}
> div {
display: flex;
gap: 1rem;
align-items: center;
.pkt-btn {
margin-left: auto;
}
@include bp('desktop-up') {
display: none;
}
}
}
width: 100%;
white-space: pre-line;
}
&:nth-child(4) {
@include table-cell-desktop-up;
min-width: 10rem;
}
> div {
display: flex;
gap: 0.5rem;
align-items: center;
.pkt-btn {
margin-left: auto;
}
}
&:nth-child(5) {
padding-left: 0;
}
}
}
Expand Down

0 comments on commit 87cc8e4

Please sign in to comment.