From 8f653da71f74b8dff3ecde46587e557b0b07c9d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Sat, 16 Aug 2025 16:45:30 -0400
Subject: [PATCH] create vue components to construct reorderable group
 hierarchy in dashboard repo list

---
 web_src/js/components/DashboardRepoGroup.vue  | 230 ++++++++++++++++++
 .../js/components/DashboardRepoGroupItem.vue  | 124 ++++++++++
 2 files changed, 354 insertions(+)
 create mode 100644 web_src/js/components/DashboardRepoGroup.vue
 create mode 100644 web_src/js/components/DashboardRepoGroupItem.vue

diff --git a/web_src/js/components/DashboardRepoGroup.vue b/web_src/js/components/DashboardRepoGroup.vue
new file mode 100644
index 0000000000..2d9877e500
--- /dev/null
+++ b/web_src/js/components/DashboardRepoGroup.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import type {SortableOptions} from 'sortablejs';
+import DashboardRepoGroupItem from './DashboardRepoGroupItem.vue';
+import {Sortable} from 'sortablejs-vue3';
+import hash from 'object-hash';
+import {computed, inject, nextTick, type ComputedRef, type WritableComputedRef} from 'vue';
+import {GET, POST} from '../modules/fetch.ts';
+import type {GroupMapType} from './DashboardRepoList.vue';
+const {curGroup, depth} = defineProps<{ curGroup: number; depth: number; }>();
+const emitter = defineEmits<{
+  loadChanged: [ boolean ],
+  itemAdded: [ item: any, index: number ],
+  itemRemoved: [ item: any, index: number ]
+}>();
+const groupData = inject<WritableComputedRef<Map<number, GroupMapType>>>('groups');
+const searchUrl = inject<string>('searchURL');
+const orgName = inject<string>('orgName');
+
+const combined = computed(() => {
+  let groups = groupData.value.get(curGroup)?.subgroups ?? [];
+  groups = Array.from(new Set(groups));
+
+  const repos = (groupData.value.get(curGroup)?.repos ?? []).filter((a, pos, arr) => arr.findIndex((b) => b.id === a.id) === pos);
+  const c = [
+    ...groups, // ,
+    ...repos,
+  ];
+  return c;
+});
+function repoMapper(webSearchRepo: any) {
+  return {
+    ...webSearchRepo.repository,
+    latest_commit_status_state: webSearchRepo.latest_commit_status?.State, // if latest_commit_status is null, it means there is no commit status
+    latest_commit_status_state_link: webSearchRepo.latest_commit_status?.TargetURL,
+    locale_latest_commit_status_state: webSearchRepo.locale_latest_commit_status,
+  };
+}
+function mapper(item: any) {
+  groupData.value.set(item.group.id, {
+    repos: item.repos.map((a: any) => repoMapper(a)),
+    subgroups: item.subgroups.map((a: {group: any}) => a.group.id),
+    ...item.group,
+    latest_commit_status_state: item.latest_commit_status?.State, // if latest_commit_status is null, it means there is no commit status
+    latest_commit_status_state_link: item.latest_commit_status?.TargetURL,
+    locale_latest_commit_status_state: item.locale_latest_commit_status,
+  });
+  // return {
+  // ...item.group,
+  // subgroups: item.subgroups.map((a) => mapper(a)),
+  // repos: item.repos.map((a) => repoMapper(a)),
+  // };
+}
+async function searchGroup(gid: number) {
+  emitter('loadChanged', true);
+  const searchedURL = `${searchUrl}&group_id=${gid}`;
+  let response, json;
+  try {
+    response = await GET(searchedURL);
+    json = await response.json();
+  } catch {
+    emitter('loadChanged', false);
+    return;
+  }
+  mapper(json.data);
+  for (const g of json.data.subgroups) {
+    mapper(g);
+  }
+  emitter('loadChanged', false);
+  const tmp = groupData.value;
+  groupData.value = tmp;
+}
+const orepos = inject<ComputedRef<any[]>>('repos');
+
+const dynKey = computed(() => hash(combined.value));
+function getId(it: any) {
+  if (typeof it === 'number') {
+    return `group-${it}`;
+  }
+  return `repo-${it.id}`;
+}
+
+const options: SortableOptions = {
+  group: {
+    name: 'repo-group',
+    put(to, _from, _drag, _ev) {
+      const closestLi = to.el?.closest('li');
+      const base = to.el.getAttribute('data-is-group').toLowerCase() === 'true';
+      if (closestLi) {
+        const input = Array.from(closestLi?.querySelector('label')?.children).find((a) => a instanceof HTMLInputElement && a.checked);
+        return base && Boolean(input);
+      }
+      return base;
+    },
+    pull: true,
+  },
+  delay: 500,
+  emptyInsertThreshold: 50,
+  delayOnTouchOnly: true,
+  dataIdAttr: 'data-sort-id',
+  draggable: '.expandable-menu-item',
+  dragClass: 'active',
+  store: {
+    get() {
+      return combined.value.map((a) => getId(a)).filter((a, i, arr) => arr.indexOf(a) === i);
+    },
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    async set(sortable) {
+      const arr = sortable.toArray();
+      const groups = Array.from(new Set(arr.filter((a) => a.startsWith('group')).map((a) => parseInt(a.split('-')[1]))));
+      const repos = arr
+        .filter((a) => a.startsWith('repo'))
+        .map((a) => orepos.value.filter(Boolean).find((b) => b.id === parseInt(a.split('-')[1])))
+        .map((a, i) => ({...a, group_sort_order: i + 1}))
+        .filter((a, pos, arr) => arr.findIndex((b) => b.id === a.id) === pos);
+
+      for (let i = 0; i < groups.length; i++) {
+        const cur = groupData.value.get(groups[i]);
+        groupData.value.set(groups[i], {
+          ...cur,
+          sort_order: i + 1,
+        });
+      }
+      const cur = groupData.value.get(curGroup);
+      const ndata: GroupMapType = {
+        ...cur,
+        subgroups: groups.toSorted((a, b) => groupData.value.get(a).sort_order - groupData.value.get(b).sort_order),
+        repos: repos.toSorted((a, b) => a.group_sort_order - b.group_sort_order),
+      };
+      groupData.value.set(curGroup, ndata);
+      // const tmp = groupData.value;
+      // groupData.value = tmp;
+      for (let i = 0; i < ndata.subgroups.length; i++) {
+        const sg = ndata.subgroups[i];
+        const data = {
+          newParent: curGroup,
+          id: sg,
+          newPos: i + 1,
+          isGroup: true,
+        };
+        try {
+          await POST(`/${orgName}/groups/items/move`, {
+            data,
+          });
+        } catch (error) {
+          console.error(error);
+        }
+      }
+      for (const r of ndata.repos) {
+        const data = {
+          newParent: curGroup,
+          id: r.id,
+          newPos: r.group_sort_order,
+          isGroup: false,
+        };
+        try {
+          await POST(`/${orgName}/groups/items/move`, {
+            data,
+          });
+        } catch (error) {
+          console.error(error);
+        }
+      }
+      nextTick(() => {
+        const finalSorted = [
+          ...ndata.subgroups,
+          ...ndata.repos,
+        ].map(getId);
+        try {
+          sortable.sort(finalSorted, true);
+        } catch {}
+      });
+    },
+  },
+};
+
+</script>
+<template>
+  <Sortable
+    :options="options" tag="ul"
+    :class="{ 'expandable-menu': curGroup === 0, 'repo-owner-name-list': curGroup === 0, 'expandable-ul': true }"
+    v-model:list="combined"
+    :data-is-group="true"
+    :item-key="(it) => getId(it)"
+    :key="dynKey"
+  >
+    <template #item="{ element, index }">
+      <dashboard-repo-group-item
+        :index="index + 1"
+        :item="element"
+        :depth="depth + 1"
+        :key="getId(element)"
+        @load-requested="searchGroup"
+      />
+    </template>
+  </Sortable>
+</template>
+<style scoped>
+ul.expandable-ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+ul.expandable-ul li {
+  padding: 0 10px;
+}
+.repos-search {
+  padding-bottom: 0 !important;
+}
+
+.repos-filter {
+  margin-top: 0 !important;
+  border-bottom-width: 0 !important;
+}
+
+.repos-filter .item {
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+}
+
+.repo-owner-name-list li.active {
+  background: var(--color-hover);
+}
+ul.expandable-ul > li:not(:last-child) {
+  border-bottom: 1px solid var(--color-secondary);
+}
+ul.expandable-ul > li:first-child {
+  border-top: 1px solid var(--color-secondary);
+}
+</style>
diff --git a/web_src/js/components/DashboardRepoGroupItem.vue b/web_src/js/components/DashboardRepoGroupItem.vue
new file mode 100644
index 0000000000..fddea4ec76
--- /dev/null
+++ b/web_src/js/components/DashboardRepoGroupItem.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import {computed, inject, type WritableComputedRef} from 'vue';
+import {commitStatus, type CommitStatus, type GroupMapType} from './DashboardRepoList.vue';
+import DashboardRepoGroup from './DashboardRepoGroup.vue';
+import {SvgIcon, type SvgName} from '../svg.ts';
+const {depth} = defineProps<{index: number; depth: number;}>();
+const groupData = inject<WritableComputedRef<Map<number, GroupMapType>>>('groups');
+const loadedMap = inject<WritableComputedRef<Map<number, boolean>>>('loadedMap');
+const expandedGroups = inject<WritableComputedRef<number[]>>('expandedGroups');
+const itemProp = defineModel<any>('item');
+const isGroup = computed<boolean>(() => typeof itemProp.value === 'number');
+const item = computed(() => isGroup.value ? groupData.value.get(itemProp.value as number) : itemProp.value);
+const id = computed(() => typeof itemProp.value === 'number' ? itemProp.value : itemProp.value.id);
+const idKey = computed<string>(() => {
+  const prefix = isGroup.value ? 'group' : 'repo';
+  return `${prefix}-${id.value}`;
+});
+
+const indentCss = computed<string>(() => `padding-inline-start: ${depth * 0.5}rem`);
+
+function icon(item: any) {
+  if (item.repos) {
+    return 'octicon-list-unordered';
+  }
+  if (item.fork) {
+    return 'octicon-repo-forked';
+  } else if (item.mirror) {
+    return 'octicon-mirror';
+  } else if (item.template) {
+    return `octicon-repo-template`;
+  } else if (item.private) {
+    return 'octicon-lock';
+  } else if (item.internal) {
+    return 'octicon-repo';
+  }
+  return 'octicon-repo';
+}
+
+function statusIcon(status: CommitStatus): SvgName {
+  return commitStatus[status].name as SvgName;
+}
+
+function statusColor(status: CommitStatus) {
+  return commitStatus[status].color;
+}
+const emitter = defineEmits<{
+  loadRequested: [ number ]
+}>();
+function onCheck(nv: boolean) {
+  if (isGroup.value && expandedGroups) {
+    if (nv) {
+      expandedGroups.value = [...expandedGroups.value, item.value.id];
+      if (!loadedMap.value.has(item.value.id)) {
+        emitter('loadRequested', item.value.id as number);
+        loadedMap.value.set(item.value.id, true);
+      }
+    } else {
+      const idx = expandedGroups.value.indexOf(item.value.id as number);
+      if (idx > -1) {
+        expandedGroups.value = expandedGroups.value.toSpliced(idx, 1);
+      }
+    }
+  }
+}
+const active = computed(() => isGroup.value && expandedGroups.value.includes(id.value));
+</script>
+<template>
+  <li class="tw-flex tw-flex-col tw-px-0 tw-pr-0 expandable-menu-item tw-mt-0" :data-sort-id="idKey" :data-is-group="isGroup" :data-id="id">
+    <label
+      class="tw-flex tw-items-center tw-py-2"
+      :style="indentCss"
+      :class="{
+        'has-children': !!item.repos?.length || !!item.subgroups?.length || isGroup,
+      }"
+    >
+      <input v-if="isGroup" :checked="active" type="checkbox" class="toggle tw-h-0 tw-w-0 tw-overflow-hidden tw-opacity-0 tw-absolute" @change="(e) => onCheck((e.target as HTMLInputElement).checked)">
+      <svg-icon :name="icon(item)" :size="16" class-name="repo-list-icon"/>
+      <svg-icon v-if="isGroup" name="octicon-chevron-right" :size="16" class="collapse-icon"/>
+      <a :href="item.link" class="repo-list-link muted tw-flex-shrink">
+        <div class="text truncate">{{ item.full_name || item.name }}</div>
+        <div v-if="item.archived">
+          <svg-icon name="octicon-archive" :size="16"/>
+        </div>
+      </a>
+      <a class="tw-flex tw-items-center" v-if="item.latest_commit_status_state" :href="item.latest_commit_status_state_link" :data-tooltip-content="item.locale_latest_commit_status_state">
+        <!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
+        <svg-icon :name="statusIcon(item.latest_commit_status_state)" :class-name="'commit-status icon text ' + statusColor(item.latest_commit_status_state)" :size="16"/>
+      </a>
+    </label>
+    <div class="menu-expandable-content">
+      <div class="menu-expandable-content-inner">
+        <dashboard-repo-group :cur-group="id" v-if="isGroup" :depth="depth + 1"/>
+      </div>
+    </div>
+  </li>
+</template>
+<style scoped>
+.repo-list-link {
+  min-width: 0;
+  /* for text truncation */
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 0.5rem;
+}
+
+.repo-list-link .svg {
+  color: var(--color-text-light-2);
+}
+
+.repo-list-icon, .collapse-icon {
+  min-width: 16px;
+  margin-right: 2px;
+  top: 0px;
+}
+
+/* octicon-mirror has no padding inside the SVG */
+.repo-list-icon.octicon-mirror {
+  width: 14px;
+  min-width: 14px;
+  margin-left: 1px;
+  margin-right: 3px;
+}
+</style>