Merge branch 'develop' into gl_SCI_9789

2025-10-28 23:18:10 +08:00 · 2023-12-04 09:50:32 +01:00 · 2023-12-04 09:50:32 +01:00 · 4a22bc9ee8
commit 4a22bc9ee8
parent c1e3c2b6c6 176c181a86
9 changed files with 57 additions and 26 deletions
--- a/app/assets/stylesheets/shared/datetime_picker.scss
+++ b/app/assets/stylesheets/shared/datetime_picker.scss
@ -137,7 +137,7 @@
  --dp-secondary-color: var(--sn-grey);
  --dp-border-color: var(--sn-light-grey);
  --dp-menu-border-color: var(--sn-light-grey);
-  --dp-border-color-hover: var(--sn-light-grey);
+  --dp-border-color-hover: var(--sn-sleepy-grey);
  --dp-disabled-color: var(--sn-super-light-grey);
  --dp-scroll-bar-background: var(--sn-white);
  --dp-scroll-bar-color: var(--sn-grey);
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@ -12,9 +12,12 @@
          class="sticky top-0 right-0 bg-white flex z-50 flex-col h-[78px] pt-6">
          <div class="header flex w-full h-[30px] pr-6">
            <repository-item-sidebar-title v-if="defaultColumns"
-              :editable="permissions?.can_manage && !defaultColumns?.archived" :name="defaultColumns.name"
-              @update="update"></repository-item-sidebar-title>
-            <i id="close-icon" @click="toggleShowHideSidebar(currentItemUrl)"
+              :editable="permissions?.can_manage && !defaultColumns?.archived"
+              :name="defaultColumns.name"
+              :archived="defaultColumns.archived"
+              @update="update">
+            </repository-item-sidebar-title>
+            <i id="close-icon" @click="toggleShowHideSidebar(null)"
              class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
          </div>
          <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px mt-6 mr-6"></div>
@ -27,7 +30,7 @@

          <div v-else class="flex flex-1 flex-grow-1 justify-between" ref="scrollSpyContent" id="scrollSpyContent">

-            <div id="left-col" class="flex flex-col gap-4">
+            <div id="left-col" class="flex flex-col gap-4 max-w-[350px]">

              <!-- INFORMATION -->
              <section id="information-section">
@ -276,6 +279,11 @@ export default {
      inRepository: false
    }
  },
+  provide() {
+    return {
+      reloadRepoItemSidebar: this.reload,
+    }
+  },
  created() {
    window.repositoryItemSidebarComponent = this;
  },
@ -312,23 +320,27 @@ export default {
        this.isShowing = true;
        this.loadRepositoryRow(repositoryRowUrl);
        this.currentItemUrl = repositoryRowUrl;
-        return
+        return;
+      }
+      // same item click
+      if (repositoryRowUrl === this.currentItemUrl) {
+        if (this.isShowing) {
+          this.toggleShowHideSidebar(null);
+        }
+        return;
      }
      // explicit close (from emit)
-      else if (repositoryRowUrl === null) {
+      if (repositoryRowUrl === null) {
        this.isShowing = false;
        this.currentItemUrl = null;
        this.myModuleId = null;
-        return
+        return;
      }
      // click on a different item - if the item card is already showing should just fetch new data
-      else {
-        this.isShowing = true;
-        this.myModuleId = myModuleId;
-        this.loadRepositoryRow(repositoryRowUrl);
-        this.currentItemUrl = repositoryRowUrl;
-        return
-      }
+      this.isShowing = true;
+      this.myModuleId = myModuleId;
+      this.loadRepositoryRow(repositoryRowUrl);
+      this.currentItemUrl = repositoryRowUrl;
    },
    loadRepositoryRow(repositoryRowUrl) {
      this.dataLoading = true
--- a/app/javascript/vue/repository_item_sidebar/Title.vue
+++ b/app/javascript/vue/repository_item_sidebar/Title.vue
@ -4,8 +4,8 @@
    :preventLeavingUntilFilled="true"
    :attributeName="`${i18n.t('repositories.item_card.header_title')}`" :singleLine="true"
    @editingEnabled="editingName = true" @editingDisabled="editingName = false" @update="updateName" @delete="handleDelete"></inline-edit>
-  <h4 v-else class="item-name my-auto truncate text-xl" :title="name">
-    {{ name }}
+  <h4 v-else class="item-name my-auto truncate text-xl" :title="computedName">
+    {{ computedName }}
  </h4>
 </template>

@ -21,6 +21,12 @@ export default {
  props: {
    editable: Boolean,
    name: String,
+    archived: Boolean,
+  },
+  computed: {
+    computedName() {
+      return this.archived ? `(A) ${this.name}` : this.name;
+    },
  },
  methods: {
    updateName(name) {
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
@ -5,10 +5,10 @@
        {{ colName }}
      </div>
      <a v-if="!file_name && (!uploading || error) && canEdit"
-        class="btn-text-link font-normal" @click="openFileChooser">
+        class="btn-text-link font-normal min-w-fit pl-4" @click="openFileChooser">
        {{ i18n.t('repositories.item_card.repository_asset_value.add_asset') }}
      </a>
-      <div v-if="file_name && !uploading && canEdit" class="flex whitespace-nowrap gap-4 pl-4">
+      <div v-if="file_name && !uploading && canEdit" class="flex whitespace-nowrap gap-4 min-w-fit pl-4">
        <a class="btn-text-link font-normal" @click="openFileChooser">
          {{ i18n.t('general.replace') }}
        </a>
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue
@ -17,7 +17,7 @@
        :placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
        :no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
        :searchPlaceholder="i18n.t('repositories.item_card.dropdown_placeholder')"
-        customClass="!h-[38px] !pl-3"
+        customClass="!h-[38px] !pl-3 sci-cursor-edit"
        optionsClassName="max-h-[300px]"
      ></select-search>
      <div v-else-if="text"
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
@ -1,5 +1,5 @@
 <template>
-  <div id="repository-status-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
+  <div ref="container" id="repository-status-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
    <div class="font-inter text-sm font-semibold leading-5 truncate" :title="colName">
      {{ colName }}
    </div>
@ -17,7 +17,7 @@
        :placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
        :no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
        :searchPlaceholder="i18n.t('repositories.item_card.dropdown_placeholder')"
-        customClass="!h-[38px] !pl-2"
+        customClass="!h-[38px] !pl-2 sci-cursor-edit"
        optionsClassName="max-h-[300px]"
      ></select-search>
      <div v-else-if="status && icon"
@ -88,16 +88,25 @@ export default {
      this.isLoading = false;
      this.selected = this.id;
    });
+    this.replaceEmojiesInDropdown();
  },
  methods: {
    changeSelected(id) {
      this.selected = id;
      if (id || id === null) {
        this.update(id);
+        this.replaceEmojiesInDropdown();
      }
    },
    parseEmoji(content) {
      return twemoji.parse(content);
+    },
+    replaceEmojiesInDropdown() {
+      setTimeout(() => {
+        twemoji.size = "24x24";
+        twemoji.base = '/images/twemoji/';
+        twemoji.parse(this.$refs.container);
+      }, 100);
    }
  }
 };
--- a/app/javascript/vue/repository_item_sidebar/repository_values/date_time_component.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/date_time_component.vue
@ -54,9 +54,10 @@
        endDate: null,
        error: null,
        defaultStartDate: null,
-        defaultEndDate: null
+        defaultEndDate: null,
      }
    },
+    inject: ['reloadRepoItemSidebar'],
    props: {
      mode: String,
      range: { type: Boolean, default: false },
@ -171,7 +172,10 @@
          success: () => {
            this.defaultStartDate = this.startDate;
            this.defaultEndDate = this.endDate;
-            if ($('.dataTable')[0]) $('.dataTable').DataTable().ajax.reload(null, false);
+            if ($('.dataTable')[0]) {
+              $('.dataTable').DataTable().ajax.reload(null, false);
+              this.reloadRepoItemSidebar();
+            }
          }
        });
      },
--- a/app/javascript/vue/shared/checklist_select.vue
+++ b/app/javascript/vue/shared/checklist_select.vue
@ -48,7 +48,7 @@
              <input v-model="selectedValues" :value="option.id" :id="option.id" type="checkbox" class="sci-checkbox project-card-selector">
              <label :for="option.id" class="sci-checkbox-label"></label>
            </div>
-            <span class="text-ellipsis overflow-hidden max-h-[4rem] ml-1">{{ option.label }}</span>
+            <span :title="option.label" class="text-ellipsis overflow-hidden max-h-[4rem] ml-1 whitespace-normal line-clamp-3">{{ option.label }}</span>
          </div>
        </div>
        <template v-else>
--- a/app/javascript/vue/shared/select_search.vue
+++ b/app/javascript/vue/shared/select_search.vue
@ -1,6 +1,6 @@
 <template>
  <Select
-    class="sn-select sn-select--search"
+    class="sn-select sn-select--search hover:border-sn-sleepy-grey"
    :class="customClass"
    :className="className"
    :optionsClassName="optionsClassName"