Working on item card interactions, implemented close on click outside [SCI-9470] (#6401)

Fixed date format, checklist content, active/archived state [SCI-9470]

Fixed date formatting on BE [SCI-9470]
This commit is contained in:
Gregor Lasnibat 2023-10-12 15:26:41 +02:00 committed by GitHub
parent e0148cca31
commit 60d79be220
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 5 deletions

View file

@ -98,8 +98,9 @@
<Reminder :value="column.value" :valueType="column.value_type" />
</span>
<component :is="column.data_type" :key="index" :data_type="column.data_type" :colId="column.id"
:colName="column.name" :colVal="column.value" :repositoryRowId="repositoryRowId" :repositoryId="repository?.id"
:permissions="permissions" @closeSidebar="toggleShowHideSidebar(null)" />
:colName="column.name" :colVal="column.value" :repositoryRowId="repositoryRowId"
:repositoryId="repository?.id" :permissions="permissions"
@closeSidebar="toggleShowHideSidebar(null)" />
<div id="dashed-divider" :class="{ 'hidden': index === customColumns.length - 1 }"
class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey">
</div>
@ -237,10 +238,24 @@ export default {
created() {
window.repositoryItemSidebarComponent = this;
},
mounted() {
// Add a click event listener to the document
document.addEventListener('click', this.handleOutsideClick);
},
beforeDestroy() {
delete window.repositoryItemSidebarComponent;
document.removeEventListener('click', this.handleDocumentClick);
},
methods: {
handleOutsideClick(event) {
if (!this.isShowing) return
const sidebar = this.$refs.wrapper;
// Check if the clicked element is not within the sidebar and it's not another item link
if (!sidebar.contains(event.target) && !event.target.closest('a')) {
this.toggleShowHideSidebar(null)
}
},
toggleShowHideSidebar(repositoryRowUrl) {
// initial click
if (this.currentItemUrl === null) {

View file

@ -15,9 +15,9 @@
</div>
</div>
<div v-else
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 h-fit overflow-auto grid auto-rows-auto grid-cols-3">
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 h-10 w-[370px] overflow-x-auto flex flex-wrap">
<div v-for="(checklistItem, index) in allChecklistItems" :key="index">
<div id="checklist-item" class="min-w-max">
<div id="checklist-item" class="flex w-fit h-[18px] break-words mx-1">
{{ `${checklistItem.label} |` }}
</div>
</div>

View file

@ -13,7 +13,7 @@ end
json.default_columns do
json.name @repository_row.name
json.code @repository_row.code
json.added_on @repository_row.created_at
json.added_on I18n.l(@repository_row.created_at, format: :full)
json.added_by @repository_row.created_by&.full_name
json.archived @repository_row.archived?
end