mirror of
https://github.com/go-gitea/gitea.git
synced 2026-05-13 19:45:47 +02:00
create vue components to construct reorderable group hierarchy in dashboard repo list
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧
parent
3244cfc34c
commit
8f653da71f
230
web_src/js/components/DashboardRepoGroup.vue
Normal file
230
web_src/js/components/DashboardRepoGroup.vue
Normal file
@ -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>
|
||||||
124
web_src/js/components/DashboardRepoGroupItem.vue
Normal file
124
web_src/js/components/DashboardRepoGroupItem.vue
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user