|
|
|
@ -11,7 +11,7 @@
|
|
|
|
|
</span>
|
|
|
|
|
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
|
|
|
|
<div class="menu transition" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak>
|
|
|
|
|
<div class="ui icon search input">
|
|
|
|
|
<i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
|
|
|
|
|
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
|
|
|
|
@ -20,13 +20,13 @@
|
|
|
|
|
<div class="header branch-tag-choice">
|
|
|
|
|
<div class="ui grid">
|
|
|
|
|
<div class="two column row">
|
|
|
|
|
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()">
|
|
|
|
|
<a class="reference column" href="#" @click="handleTabSwitch('branches')">
|
|
|
|
|
<span class="text" :class="{black: mode === 'branches'}">
|
|
|
|
|
<svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
|
|
|
|
|
</span>
|
|
|
|
|
</a>
|
|
|
|
|
<template v-if="!noTag">
|
|
|
|
|
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()">
|
|
|
|
|
<a class="reference column" href="#" @click="handleTabSwitch('tags')">
|
|
|
|
|
<span class="text" :class="{black: mode === 'tags'}">
|
|
|
|
|
<svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
|
|
|
|
|
</span>
|
|
|
|
@ -37,20 +37,23 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="scrolling menu" ref="scrollContainer">
|
|
|
|
|
<svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/>
|
|
|
|
|
<div class="loading-indicator is-loading" v-if="isLoading"/>
|
|
|
|
|
<div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index">
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
<a v-if="enableFeed && mode === 'branches'" role="button" class="rss-icon ui compact right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
|
|
|
|
|
<svg-icon name="octicon-rss" :size="14"/>
|
|
|
|
|
<a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon ui compact right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
|
|
|
|
|
<!-- creating a lot of Vue component is pretty slow, so we use a static SVG here -->
|
|
|
|
|
<svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length">
|
|
|
|
|
<a href="#" @click="createNewBranch()">
|
|
|
|
|
<div v-show="createTag">
|
|
|
|
|
<div v-show="shouldCreateTag">
|
|
|
|
|
<i class="reference tags icon"/>
|
|
|
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
|
|
|
<span v-html="textCreateTag.replace('%s', searchTerm)"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!createTag">
|
|
|
|
|
<div v-show="!shouldCreateTag">
|
|
|
|
|
<svg-icon name="octicon-git-branch"/>
|
|
|
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
|
|
|
<span v-html="textCreateBranch.replace('%s', searchTerm)"/>
|
|
|
|
@ -64,12 +67,12 @@
|
|
|
|
|
<form ref="newBranchForm" :action="formActionUrl" method="post">
|
|
|
|
|
<input type="hidden" name="_csrf" :value="csrfToken">
|
|
|
|
|
<input type="hidden" name="new_branch_name" v-model="searchTerm">
|
|
|
|
|
<input type="hidden" name="create_tag" v-model="createTag">
|
|
|
|
|
<input type="hidden" name="create_tag" v-model="shouldCreateTag">
|
|
|
|
|
<input type="hidden" name="current_path" v-model="treePath" v-if="treePath">
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="message" v-if="showNoResults">
|
|
|
|
|
<div class="message" v-if="showNoResults && !isLoading">
|
|
|
|
|
{{ noResults }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -81,6 +84,7 @@ import {createApp, nextTick} from 'vue';
|
|
|
|
|
import $ from 'jquery';
|
|
|
|
|
import {SvgIcon} from '../svg.js';
|
|
|
|
|
import {pathEscapeSegments} from '../utils/url.js';
|
|
|
|
|
import {showErrorToast} from '../modules/toast.js';
|
|
|
|
|
|
|
|
|
|
const sfc = {
|
|
|
|
|
components: {SvgIcon},
|
|
|
|
@ -110,12 +114,16 @@ const sfc = {
|
|
|
|
|
formActionUrl() {
|
|
|
|
|
return `${this.repoLink}/branches/_new/${this.branchNameSubURL}`;
|
|
|
|
|
},
|
|
|
|
|
shouldCreateTag() {
|
|
|
|
|
return this.mode === 'tags';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
|
menuVisible(visible) {
|
|
|
|
|
if (visible) {
|
|
|
|
|
this.focusSearchField();
|
|
|
|
|
this.fetchBranchesOrTags();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
@ -139,7 +147,6 @@ const sfc = {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
selectItem(item) {
|
|
|
|
|
const prev = this.getSelected();
|
|
|
|
@ -246,7 +253,44 @@ const sfc = {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
this.menuVisible = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleTabSwitch(mode) {
|
|
|
|
|
if (this.isLoading) return;
|
|
|
|
|
this.mode = mode;
|
|
|
|
|
this.focusSearchField();
|
|
|
|
|
this.fetchBranchesOrTags();
|
|
|
|
|
},
|
|
|
|
|
async fetchBranchesOrTags() {
|
|
|
|
|
if (!['branches', 'tags'].includes(this.mode) || this.isLoading) return;
|
|
|
|
|
// only fetch when branch/tag list has not been initialized
|
|
|
|
|
if (this.hasListInitialized[this.mode] ||
|
|
|
|
|
(this.mode === 'branches' && !this.showBranchesInDropdown) ||
|
|
|
|
|
(this.mode === 'tags' && this.noTag)
|
|
|
|
|
) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.isLoading = true;
|
|
|
|
|
try {
|
|
|
|
|
// the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name"
|
|
|
|
|
const reqUrl = `${this.repoLink}/${this.mode}/list`;
|
|
|
|
|
const resp = await fetch(reqUrl);
|
|
|
|
|
const {results} = await resp.json();
|
|
|
|
|
for (const result of results) {
|
|
|
|
|
let selected = false;
|
|
|
|
|
if (this.mode === 'branches') {
|
|
|
|
|
selected = result === this.defaultBranch;
|
|
|
|
|
} else {
|
|
|
|
|
selected = result === (this.release ? this.release.tagName : this.defaultBranch);
|
|
|
|
|
}
|
|
|
|
|
this.items.push({name: result, url: pathEscapeSegments(result), branch: this.mode === 'branches', tag: this.mode === 'tags', selected});
|
|
|
|
|
}
|
|
|
|
|
this.hasListInitialized[this.mode] = true;
|
|
|
|
|
} catch (e) {
|
|
|
|
|
showErrorToast(`Network error when fetching ${this.mode}, error: ${e}`);
|
|
|
|
|
} finally {
|
|
|
|
|
this.isLoading = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
@ -258,7 +302,6 @@ export function initRepoBranchTagSelector(selector) {
|
|
|
|
|
searchTerm: '',
|
|
|
|
|
refNameText: '',
|
|
|
|
|
menuVisible: false,
|
|
|
|
|
createTag: false,
|
|
|
|
|
release: null,
|
|
|
|
|
|
|
|
|
|
isViewTag: false,
|
|
|
|
@ -266,27 +309,15 @@ export function initRepoBranchTagSelector(selector) {
|
|
|
|
|
isViewTree: false,
|
|
|
|
|
|
|
|
|
|
active: 0,
|
|
|
|
|
|
|
|
|
|
isLoading: false,
|
|
|
|
|
// This means whether branch list/tag list has initialized
|
|
|
|
|
hasListInitialized: {
|
|
|
|
|
'branches': false,
|
|
|
|
|
'tags': false,
|
|
|
|
|
},
|
|
|
|
|
...window.config.pageData.branchDropdownDataList[elIndex],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name"
|
|
|
|
|
|
|
|
|
|
if (data.showBranchesInDropdown && data.branches) {
|
|
|
|
|
for (const branch of data.branches) {
|
|
|
|
|
data.items.push({name: branch, url: pathEscapeSegments(branch), branch: true, tag: false, selected: branch === data.defaultBranch});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!data.noTag && data.tags) {
|
|
|
|
|
for (const tag of data.tags) {
|
|
|
|
|
if (data.release) {
|
|
|
|
|
data.items.push({name: tag, url: pathEscapeSegments(tag), branch: false, tag: true, selected: tag === data.release.tagName});
|
|
|
|
|
} else {
|
|
|
|
|
data.items.push({name: tag, url: pathEscapeSegments(tag), branch: false, tag: true, selected: tag === data.defaultBranch});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const comp = {...sfc, data() { return data }};
|
|
|
|
|
createApp(comp).mount(elRoot);
|
|
|
|
|
}
|
|
|
|
@ -302,4 +333,8 @@ export default sfc; // activate IDE's Vue plugin
|
|
|
|
|
.menu .item:hover .rss-icon {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.scrolling.menu .loading-indicator {
|
|
|
|
|
height: 4em;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|