*: move to tailwind css
I really like it! TODO: Extract more components
This commit is contained in:
Simone Gotti
parent
e47c3b977c
commit
2891b62b6c
|
|
@ -1,4 +1,12 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"*": [
|
||||
"types/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"./src/**/*"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -3055,11 +3055,6 @@
|
|||
"integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
|
||||
"dev": true
|
||||
},
|
||||
"bulma": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.4.tgz",
|
||||
"integrity": "sha512-krG2rP6eAX1WE0sf6O0SC/FUVSOBX4m1PBC2+GKLpb2pX0qanaDqcv9U2nu75egFrsHkI0zdWYuk/oGwoszVWg=="
|
||||
},
|
||||
"bytes": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
|
||||
|
|
@ -3187,6 +3182,12 @@
|
|||
"integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==",
|
||||
"dev": true
|
||||
},
|
||||
"camelcase-css": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
|
||||
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
|
||||
"dev": true
|
||||
},
|
||||
"camelcase-keys": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
|
||||
|
|
@ -3421,8 +3422,7 @@
|
|||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||
"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"coa": {
|
||||
"version": "2.0.2",
|
||||
|
|
@ -5743,8 +5743,7 @@
|
|||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -5765,14 +5764,12 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -5787,20 +5784,17 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -5917,8 +5911,7 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -5930,7 +5923,6 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -5945,7 +5937,6 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
|
|
@ -6057,8 +6048,7 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -6070,7 +6060,6 @@
|
|||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -6192,7 +6181,6 @@
|
|||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -6212,7 +6200,6 @@
|
|||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
|
@ -7788,6 +7775,12 @@
|
|||
"integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.toarray": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
|
||||
"integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.transform": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
|
||||
|
|
@ -8289,6 +8282,15 @@
|
|||
"lower-case": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"node-emoji": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
|
||||
"integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash.toarray": "^4.4.0"
|
||||
}
|
||||
},
|
||||
"node-forge": {
|
||||
"version": "0.7.5",
|
||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
|
||||
|
|
@ -8516,6 +8518,12 @@
|
|||
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
|
||||
"dev": true
|
||||
},
|
||||
"normalize.css": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
|
||||
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
|
||||
"dev": true
|
||||
},
|
||||
"npm-run-path": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
|
||||
|
|
@ -9179,6 +9187,47 @@
|
|||
"postcss": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"postcss-functions": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
|
||||
"integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.1.2",
|
||||
"object-assign": "^4.1.1",
|
||||
"postcss": "^6.0.9",
|
||||
"postcss-value-parser": "^3.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss": {
|
||||
"version": "6.0.23",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
|
||||
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.1",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^5.4.0"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-js": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.1.tgz",
|
||||
"integrity": "sha512-8XQGohCbj6+kq8e3w6WlexkGaSjb5S8zoXnH49eB8JC6+qN2kQW+ib6fTjRgCpRRN9eeFOhMlD0NDjThW1DCBg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"camelcase-css": "^2.0.1",
|
||||
"postcss": "^7.0.14"
|
||||
}
|
||||
},
|
||||
"postcss-load-config": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
|
||||
|
|
@ -9443,6 +9492,16 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"postcss-nested": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.2.tgz",
|
||||
"integrity": "sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^7.0.14",
|
||||
"postcss-selector-parser": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"postcss-normalize-charset": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
|
||||
|
|
@ -9645,6 +9704,12 @@
|
|||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"pretty-hrtime": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
|
||||
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
|
||||
"dev": true
|
||||
},
|
||||
"private": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
|
||||
|
|
@ -11462,6 +11527,57 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"tailwindcss": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.0.1.tgz",
|
||||
"integrity": "sha512-tNyvmizhIY9ydXX8m84S/69851QROZzbH6RB/Q4w0K27OssupGcyXeD8zumzb9Yuzq6PifBH2A6ehjuBPklnYA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"autoprefixer": "^9.4.5",
|
||||
"bytes": "^3.0.0",
|
||||
"chalk": "^2.4.1",
|
||||
"fs-extra": "^8.0.0",
|
||||
"lodash": "^4.17.11",
|
||||
"node-emoji": "^1.8.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^7.0.11",
|
||||
"postcss-functions": "^3.0.0",
|
||||
"postcss-js": "^2.0.0",
|
||||
"postcss-nested": "^4.1.1",
|
||||
"postcss-selector-parser": "^6.0.0",
|
||||
"pretty-hrtime": "^1.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
||||
"dev": true
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
|
||||
"integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.2",
|
||||
"jsonfile": "^4.0.0",
|
||||
"universalify": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"postcss-selector-parser": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
|
||||
"integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cssesc": "^3.0.0",
|
||||
"indexes-of": "^1.0.1",
|
||||
"uniq": "^1.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"tapable": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
"@mdi/font": "^3.6.95",
|
||||
"ansi_up": "^3.0.0",
|
||||
"axios": "^0.18.0",
|
||||
"bulma": "^0.7.4",
|
||||
"moment": "^2.23.0",
|
||||
"moment-duration-format": "^2.2.2",
|
||||
"v-click-outside": "^2.1.3",
|
||||
|
|
@ -30,6 +29,7 @@
|
|||
"eslint-plugin-vue": "^5.2.2",
|
||||
"node-sass": "^4.11.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"tailwindcss": "^1.0.1",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
|
@ -46,14 +46,9 @@
|
|||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
"plugins": [
|
||||
require('tailwindcss')('tailwind.js'),
|
||||
require('autoprefixer')(),
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
173
src/App.vue
173
src/App.vue
|
|
@ -1,87 +1,117 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<nav class="navbar is-light has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<h1>Agola</h1>
|
||||
</a>
|
||||
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navbarBasicExample"
|
||||
<nav class="bg-gray-800 p-3 text-white">
|
||||
<div class="container flex items-center justify-between flex-wrap bg-gray-800">
|
||||
<div class="mr-6">
|
||||
<router-link
|
||||
class="font-semibold flex items-center flex-shrink-0 text-xl tracking-tight"
|
||||
to="/"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
<img class="w-10 mr-2" src="/img/agola-logo-circle.svg">
|
||||
Agola
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
<div class="navbar-start"></div>
|
||||
<div class="navbar-end">
|
||||
<div
|
||||
v-if="user"
|
||||
class="navbar-item has-dropdown"
|
||||
v-click-outside="() => createDropdownActive = false"
|
||||
v-bind:class="{ 'is-active': createDropdownActive }"
|
||||
<div class="block lg:hidden">
|
||||
<button
|
||||
class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white"
|
||||
@click="toggleNav()"
|
||||
>
|
||||
<svg
|
||||
class="fill-current h-3 w-3"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<a class="navbar-link" @click="toggleCreateDropdown()">
|
||||
<i class="mdi mdi-plus-box mdi-24px"/>
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<router-link class="navbar-item" to="/neworganization">New Organization</router-link>
|
||||
</div>
|
||||
<title>Menu</title>
|
||||
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="w-full block flex-grow lg:flex lg:items-center lg:w-auto"
|
||||
:class="{'hidden' : !navActive}"
|
||||
>
|
||||
<div class="text-sm lg:flex-grow"></div>
|
||||
<div v-if="user" class="relative mr-3">
|
||||
<button
|
||||
v-click-outside="() => createDropdownActive = false"
|
||||
@click="toggleCreateDropdown()"
|
||||
class="relative flex items-center focus:outline-none"
|
||||
>
|
||||
<i class="mdi mdi-plus-box mdi-24px"/>
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
<div
|
||||
v-if="createDropdownActive"
|
||||
class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2 text-dark"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
to="/neworganization"
|
||||
>New Organization</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="user" class="relative">
|
||||
<div class="flex">
|
||||
<button
|
||||
v-click-outside="() => userDropdownActive = false"
|
||||
@click="toggleUserDropdown()"
|
||||
class="relative flex items-center focus:outline-none"
|
||||
>
|
||||
{{user.username}}
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="user"
|
||||
class="navbar-item has-dropdown"
|
||||
v-click-outside="() => userDropdownActive = false"
|
||||
v-bind:class="{ 'is-active': userDropdownActive }"
|
||||
v-if="userDropdownActive"
|
||||
class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2 text-dark"
|
||||
>
|
||||
<a class="navbar-link" @click="toggleUserDropdown()">{{user.username}}</a>
|
||||
<div class="navbar-dropdown">
|
||||
<div class="navbar-item">
|
||||
<ul>
|
||||
<li class="block px-4 py-2 border-b">
|
||||
Logged as
|
||||
<b>{{user.username}}</b>
|
||||
</div>
|
||||
<hr class="navbar-divider">
|
||||
<router-link class="navbar-item" to="/logout">
|
||||
<i class="mdi mdi-logout"></i>Logout
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="navbar-item">
|
||||
<router-link class="button" to="/register">Sign up</router-link>
|
||||
<router-link class="button" to="/login">Login</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="navbar-divider">
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
to="/logout"
|
||||
>
|
||||
<i class="mdi mdi-logout"></i>Logout
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="navbar-item">
|
||||
<router-link class="btn btn-blue" to="/register">Sign up</router-link>
|
||||
<router-link class="ml-2 btn btn-blue" to="/login">Login</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div v-if="error" class="container">
|
||||
<div class="message is-danger global-error-message">
|
||||
<div class="message-body">
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>Failed to fetch data: {{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button class="button is-danger" @click="reload()">Retry</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div v-if="error" class="container h-screen" role="alert">
|
||||
<div v-if="error" class="h-full flex justify-center items-center" role="alert">
|
||||
<div v-if="error" class="w-full" role="alert">
|
||||
<div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">Error</div>
|
||||
<div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
|
||||
<p class="mb-8">Failed to fetch data: {{ error }}</p>
|
||||
<button class="btn btn-red" @click="reload()">Retry</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="main-container container">
|
||||
<router-view v-if="routerActive"></router-view>
|
||||
|
||||
<div v-else class="container mt-6 flex">
|
||||
<div class="flex-grow">
|
||||
<router-view v-if="routerActive"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -104,6 +134,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
routerActive: true,
|
||||
navActive: false,
|
||||
userDropdownActive: false,
|
||||
createDropdownActive: false
|
||||
};
|
||||
|
|
@ -129,6 +160,9 @@ export default {
|
|||
this.routerActive = false;
|
||||
this.$nextTick(() => (this.routerActive = true));
|
||||
},
|
||||
toggleNav() {
|
||||
this.navActive = !this.navActive;
|
||||
},
|
||||
toggleUserDropdown() {
|
||||
this.userDropdownActive = !this.userDropdownActive;
|
||||
},
|
||||
|
|
@ -140,13 +174,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/css/main.scss";
|
||||
|
||||
.main-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.global-error-message {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,32 +1,30 @@
|
|||
<template>
|
||||
<div class="item">
|
||||
<div
|
||||
class="touchable"
|
||||
:class="stepClass(step)"
|
||||
role="tab"
|
||||
:aria-expanded="active ? 'true' : 'false'"
|
||||
>
|
||||
<div class="item-content">
|
||||
<div class="header" @click.prevent="toggle">
|
||||
<span class="icon">
|
||||
<i
|
||||
class="mdi mdi-arrow-right"
|
||||
:class="{ 'arrow-down': active, 'arrow-right': !active }"
|
||||
></i>
|
||||
</span>
|
||||
<span class="name">{{step.name}}</span>
|
||||
<span class="duration">{{duration}}</span>
|
||||
</div>
|
||||
<div class="log-container" v-show="active">
|
||||
<Log
|
||||
v-bind:runid="runid"
|
||||
v-bind:taskid="taskid"
|
||||
v-bind:setup="setup"
|
||||
v-bind:step="stepnum"
|
||||
v-bind:stepphase="step.phase"
|
||||
v-bind:show="active"
|
||||
/>
|
||||
<div
|
||||
class="mb-2 border-l-5 rounded-l"
|
||||
:class="stepClass(step)"
|
||||
role="tab"
|
||||
:aria-expanded="active ? 'true' : 'false'"
|
||||
>
|
||||
<div class="px-4 py-4 border border-l-0 rounded-r">
|
||||
<div class="cursor-pointer flex justify-between" @click.prevent="toggle">
|
||||
<div>
|
||||
<i
|
||||
class="inline-block mr-1 mdi mdi-arrow-right"
|
||||
:class="{ 'arrow-down': active, 'arrow-right': !active }"
|
||||
></i>
|
||||
<span class="w-1/3 font-bold">{{step.name}}</span>
|
||||
</div>
|
||||
<span class>{{duration}}</span>
|
||||
</div>
|
||||
<div class="p-1 log-container" v-show="active">
|
||||
<Log
|
||||
v-bind:runid="runid"
|
||||
v-bind:taskid="taskid"
|
||||
v-bind:setup="setup"
|
||||
v-bind:step="stepnum"
|
||||
v-bind:stepphase="step.phase"
|
||||
v-bind:show="active"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,54 +96,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.item {
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
border-left: 0 solid;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 5px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 0 0 30%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.duration {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.log-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,32 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4 class="title is-4">New Organization</h4>
|
||||
<h4 class="mb-4 text-xl font-bold">New Organization</h4>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Organization name" v-model="orgName">
|
||||
<input
|
||||
class="mb-4 appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
type="text"
|
||||
placeholder="Organization name"
|
||||
v-model="orgName"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="orgIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label>
|
||||
<input type="checkbox" v-model="orgIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-primary" @click="createOrg()">Create Organization</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="createOrgError" class="message is-danger">
|
||||
<div class="message-body">{{ createOrgError }}</div>
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
||||
@click="createOrg()"
|
||||
>Create Organization</button>
|
||||
<div
|
||||
v-if="createOrgError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ createOrgError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -67,7 +73,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4 class="title is-4">Create Project</h4>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Project name" v-model="projectName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="projectIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
<h4 class="mb-4 text-xl font-bold">Create Project</h4>
|
||||
|
||||
<input
|
||||
class="mb-4 appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
type="text"
|
||||
placeholder="Project Name"
|
||||
v-model="projectName"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<label>
|
||||
<input type="checkbox" v-model="projectIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-4">Available remote repositories</h4>
|
||||
<h4 class="text-xl">Available remote repositories</h4>
|
||||
<div v-for="remoteSource in remoteSources" v-bind:key="remoteSource.id">
|
||||
<remoterepos
|
||||
class="remoterepos"
|
||||
|
|
@ -24,18 +24,18 @@
|
|||
v-on:reposelected="repoSelected(remoteSource, $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
v-bind:class="{ 'is-loading': createProjectLoading }"
|
||||
:disabled="!createProjectButtonEnabled"
|
||||
@click="createProject()"
|
||||
>Create Project</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="createProjectError" class="message is-danger">
|
||||
<div class="message-body">{{ createProjectError }}</div>
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
||||
v-bind:class="{ 'spinner': createProjectLoading }"
|
||||
:disabled="!createProjectButtonEnabled"
|
||||
@click="createProject()"
|
||||
>Create Project</button>
|
||||
<div
|
||||
v-if="createProjectError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ createProjectError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -164,23 +164,5 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.item-list {
|
||||
.item {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.remoterepos {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="field has-addons is-pulled-rigth">
|
||||
<p class="control">
|
||||
<button class="button" @click="clicked">{{ buttonValue }}</button>
|
||||
</p>
|
||||
<div class="control">
|
||||
<div
|
||||
class="dropdown is-right"
|
||||
<div class="relative mr-3">
|
||||
<div class="flex">
|
||||
<button
|
||||
@click="clicked"
|
||||
class="relative flex items-center focus:outline-none bg-transparent bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-green-700 rounded rounded-r-none"
|
||||
>{{ buttonValue }}</button>
|
||||
<button
|
||||
v-click-outside="() => dropdownActive = false"
|
||||
v-bind:class="{ 'is-active': dropdownActive }"
|
||||
@click="toggleDropdown"
|
||||
class="relative flex items-center focus:outline-none bg-transparent bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-l-0 border-green-700 rounded rounded-l-none"
|
||||
>
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" @click="toggleDropdown">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<a href="#" class="dropdown-item" @click="setButton('project')">New Project</a>
|
||||
<a href="#" class="dropdown-item" @click="setButton('projectgroup')">New Project Group</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="dropdownActive"
|
||||
class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
@click="setButton('project')"
|
||||
>New Project</a>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
@click="setButton('projectgroup')"
|
||||
>New Project Group</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,32 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4 class="title is-4">Create Project Group</h4>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Project Group Name"
|
||||
v-model="projectGroupName"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="projectGroupIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
<h4 class="mb-4 text-xl font-bold">Create Project Group</h4>
|
||||
|
||||
<input
|
||||
class="mb-4 appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
type="text"
|
||||
placeholder="Project Group Name"
|
||||
v-model="projectGroupName"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<label>
|
||||
<input type="checkbox" v-model="projectGroupIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
v-bind:class="{ 'is-loading': createProjectGroupLoading }"
|
||||
:disabled="!createProjectGroupButtonEnabled"
|
||||
@click="createProjectGroup()"
|
||||
>Create Project Group</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="createProjectGroupError" class="message is-danger">
|
||||
<div class="message-body">{{ createProjectGroupError }}</div>
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
||||
v-bind:class="{ 'spinner': createProjectGroupLoading }"
|
||||
:disabled="!createProjectGroupButtonEnabled"
|
||||
@click="createProjectGroup()"
|
||||
>Create ProjectGroup</button>
|
||||
<div
|
||||
v-if="createProjectGroupError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ createProjectGroupError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -115,20 +110,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.item-list {
|
||||
.item {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="dark">
|
||||
<div class="log">
|
||||
<div class="stream-line" v-for="(item, index) in items" :key="index">
|
||||
<div class="p-3 rounded bg-gray-900 text-white">
|
||||
<div class="font-mono leading-normal text-xs" v-for="(item, index) in items" :key="index">
|
||||
<div v-html="item"/>
|
||||
</div>
|
||||
<div v-if="lastitem" class="stream-line">
|
||||
<div v-if="lastitem" class="font-mono leading-snug text-xs">
|
||||
<div v-html="lastitem"/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,22 +141,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.log {
|
||||
background-color: #222;
|
||||
color: #f1f1f1;
|
||||
font-family: Cousine, monospace, "Noto Color Emoji";
|
||||
font-size: 12px;
|
||||
line-height: 19px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
|
||||
.stream-line {
|
||||
pre {
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,32 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="field">
|
||||
<p class="control has-icons-left has-icons-right">
|
||||
<input v-model="username" class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input v-model="password" class="input" type="password" placeholder="Password">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-lock"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<div class="w-full max-w-xs">
|
||||
<form
|
||||
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
|
||||
@submit.prevent="$emit('login', { username, password })"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-bold mb-2" for="username">Username</label>
|
||||
<input
|
||||
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="username"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
v-model="username"
|
||||
>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-bold mb-2" for="password">Password</label>
|
||||
<input
|
||||
class="appearance-none border rounded w-full py-2 px-3 mb-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="******************"
|
||||
v-model="password"
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
@click="$emit('login', { username, password })"
|
||||
class="button is-info is-fullwidth"
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
||||
type="submit"
|
||||
>{{action}} with {{name}}</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4 class="title is-4">Organization Members</h4>
|
||||
<ul v-if="members.length" class="item-list">
|
||||
<li class="item" v-for="member in members" v-bind:key="member.user.id">
|
||||
<span class="name">{{member.user.username}}</span>
|
||||
<span class="role">{{member.role}}</span>
|
||||
<h4 class="mb-3 text-xl">Organization Members</h4>
|
||||
<ul v-if="members.length">
|
||||
<li class="flex" v-for="member in members" v-bind:key="member.user.id">
|
||||
<span class="w-1/2 font-bold">{{member.user.username}}</span>
|
||||
<span class="w-1/2">{{member.role}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="item-list">No Members</div>
|
||||
<div v-else>No Members</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -47,54 +47,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.item-list {
|
||||
.item {
|
||||
border: 1px solid $grey-lighter;
|
||||
border-bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 0 0 30%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.role {
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
|
||||
.stillrunning {
|
||||
flex: 0 0 10%;
|
||||
}
|
||||
|
||||
.waitingapproval {
|
||||
flex: 0 0 10%;
|
||||
}
|
||||
|
||||
.source-info {
|
||||
flex: 0 0 10%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.commit {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<nav class="mb-4 bg-grey-light rounded font-sans w-full">
|
||||
<ol class="list-reset flex text-grey-dark">
|
||||
<li>
|
||||
<a>{{ownertype}}</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mx-2">/</span>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="ownerLink(ownertype, ownername)">{{ownername}}</router-link>
|
||||
</li>
|
||||
<li v-for="(ref, i) in projectref" v-bind:key="i">
|
||||
<span class="mx-2">/</span>
|
||||
<router-link
|
||||
v-if="i+1 < projectref.length"
|
||||
:to="projectGroupLink(ownertype, ownername, projectref.slice(0, i+1))"
|
||||
|
|
@ -19,11 +23,12 @@
|
|||
</li>
|
||||
|
||||
<li v-for="(ref, i) in projectgroupref" v-bind:key="i">
|
||||
<span class="mx-2">/</span>
|
||||
<router-link
|
||||
:to="projectGroupLink(ownertype, ownername, projectgroupref.slice(0, i+1))"
|
||||
>{{ref}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
|
@ -50,5 +55,4 @@ export default {
|
|||
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
</style>
|
||||
|
|
@ -1,81 +1,87 @@
|
|||
<template>
|
||||
<div>
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">Project Group Settings</p>
|
||||
<div class="panel-block is-block">
|
||||
<div v-if="!isRootProjectGroup" class="field">
|
||||
<label class="label">Project Group Name</label>
|
||||
<div class="panel">
|
||||
<p class="panel-title">Project Group Settings</p>
|
||||
<div class="p-4">
|
||||
<div v-if="!isRootProjectGroup" class="mb-4">
|
||||
<label class="block font-bold mb-2">Project Group Name</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Text input" v-model="projectGroup.name">
|
||||
<input
|
||||
class="appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
type="text"
|
||||
placeholder="Project Group Name"
|
||||
v-model="projectGroup.name"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="projectGroupIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="projectGroupIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-blue" @click="updateProjectGroup()">Update</button>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-primary" @click="updateProjectGroup()">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="updateProjectGroupError" class="message is-danger">
|
||||
<div class="message-body">{{ updateProjectGroupError }}</div>
|
||||
<div
|
||||
v-if="updateProjectGroupError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ updateProjectGroupError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">Variables</p>
|
||||
<div class="panel-block is-block">
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<p class="panel-title">Variables</p>
|
||||
<div class="p-4">
|
||||
<projectvars :variables="variables" :allvariables="allvariables"/>
|
||||
</div>
|
||||
</nav>
|
||||
<nav v-if="!isRootProjectGroup" class="panel is-danger">
|
||||
<p class="panel-heading is-danger">Danger Zone</p>
|
||||
<div class="panel-block is-block">
|
||||
<div>
|
||||
<div>
|
||||
<h4 class="title is-4">Delete This Project Group</h4>
|
||||
</div>
|
||||
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
This operation
|
||||
<strong>CANNOT</strong> be undone.
|
||||
This operation will remove
|
||||
<strong>{{projectGroupPath}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<label class="label">
|
||||
Please type the project group name for confirmation:
|
||||
<span
|
||||
class="has-text-danger"
|
||||
>{{ projectGroupName }}</span>
|
||||
</label>
|
||||
<div class="field">
|
||||
<input
|
||||
v-model="projectGroupNameToDelete"
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="Project Group name to delete"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="button is-danger"
|
||||
@click="deleteProjectGroup()"
|
||||
:disabled="!deleteButtonEnabled"
|
||||
>Delete Project Group</button>
|
||||
</div>
|
||||
<div v-if="!isRootProjectGroup" class="panel">
|
||||
<p class="panel-title">Danger Zone</p>
|
||||
<div class="p-4">
|
||||
<h4 class="mb-4 title text-xl">Delete This Project Group</h4>
|
||||
<div
|
||||
class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
|
||||
role="alert"
|
||||
>
|
||||
<p>
|
||||
This operation
|
||||
<strong>CANNOT</strong> be undone.
|
||||
This operation will remove
|
||||
<strong>{{projectGroupPath}}</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="deleteProjectGroupError" class="message is-danger">
|
||||
<div class="message-body">{{ deleteProjectGroupError }}</div>
|
||||
<label class="block mb-2">
|
||||
Please type the project group name for confirmation:
|
||||
<span
|
||||
class="text-red-500 font-bold"
|
||||
>{{ projectGroupName }}</span>
|
||||
</label>
|
||||
<div class="mb-4">
|
||||
<input
|
||||
class="appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
v-model="projectGroupNameToDelete"
|
||||
type="email"
|
||||
placeholder="Project Group name to delete"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-red"
|
||||
@click="deleteProjectGroup()"
|
||||
:disabled="!deleteButtonEnabled"
|
||||
>Delete Project Group</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div
|
||||
v-if="deleteProjectGroupError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ deleteProjectGroupError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -218,10 +224,5 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.panel-heading {
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4 class="title is-4">Projects</h4>
|
||||
<div v-if="projects.length > 0">
|
||||
<div class="item-list" v-for="project in projects" v-bind:key="project.id">
|
||||
<router-link
|
||||
tag="div"
|
||||
class="item"
|
||||
:to="projectLink(ownertype, ownername, ref(project.name))"
|
||||
>
|
||||
<span class="name">{{project.name}}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="item-list">No projects</div>
|
||||
<h4 class="text-xl my-3">Projects</h4>
|
||||
<ul v-if="projects.length > 0">
|
||||
<li class="mb-2 border rounded-l" v-for="project in projects" v-bind:key="project.id">
|
||||
<div class="pl-4 py-4 flex items-center">
|
||||
<router-link class="item" :to="projectLink(ownertype, ownername, ref(project.name))">
|
||||
<span class="font-bold">{{project.name}}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="font-bold">No projects</div>
|
||||
|
||||
<hr>
|
||||
<h4 class="title is-4">Project Groups</h4>
|
||||
<div v-if="projectgroups.length > 0">
|
||||
<div class="item-list" v-for="projectgroup in projectgroups" v-bind:key="projectgroup.id">
|
||||
<router-link
|
||||
tag="div"
|
||||
class="item"
|
||||
:to="projectGroupLink(ownertype, ownername, ref(projectgroup.name))"
|
||||
>
|
||||
<span class="name">{{projectgroup.name}}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="item-list">No project groups</div>
|
||||
<hr class="my-6 border-t">
|
||||
|
||||
<h4 class="text-xl my-3">Project Groups</h4>
|
||||
<ul v-if="projectgroups.length > 0">
|
||||
<li
|
||||
class="mb-2 border rounded-l"
|
||||
v-for="projectgroup in projectgroups"
|
||||
v-bind:key="projectgroup.id"
|
||||
>
|
||||
<div class="pl-4 py-4 flex items-center">
|
||||
<router-link
|
||||
class="item"
|
||||
:to="projectGroupLink(ownertype, ownername, ref(projectgroup.name))"
|
||||
>
|
||||
<span class="font-bold">{{projectgroup.name}}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="font-bold">No project groups</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -109,18 +113,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.item-list {
|
||||
.item {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,95 +1,103 @@
|
|||
<template>
|
||||
<div>
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">Project Settings</p>
|
||||
<div class="panel-block is-block">
|
||||
<div class="field">
|
||||
<label class="label">Project Name</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Text input" v-model="project.name">
|
||||
</div>
|
||||
<div class="panel">
|
||||
<p class="panel-title">Project Settings</p>
|
||||
<div class="p-4">
|
||||
<div class="mb-4">
|
||||
<label class="block font-bold mb-2">Project Name</label>
|
||||
<input
|
||||
class="appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
type="text"
|
||||
placeholder="Project Name"
|
||||
v-model="project.name"
|
||||
>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="projectIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="projectIsPrivate">
|
||||
Private
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-primary" @click="updateProject()">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="updateProjectError" class="message is-danger">
|
||||
<div class="message-body">{{ updateProjectError }}</div>
|
||||
<button class="btn btn-blue" @click="updateProject()">Update</button>
|
||||
<div
|
||||
v-if="updateProjectError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ updateProjectError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">Variables</p>
|
||||
<div class="panel-block is-block">
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<p class="panel-title">Variables</p>
|
||||
<div class="p-4">
|
||||
<projectvars :variables="variables" :allvariables="allvariables"/>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="panel is-danger">
|
||||
<p class="panel-heading is-danger">Danger Zone</p>
|
||||
<div class="panel-block is-block">
|
||||
<div>
|
||||
<h4 class="title is-4">Delete This Project</h4>
|
||||
</div>
|
||||
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
This operation
|
||||
<strong>CANNOT</strong> be undone.
|
||||
This operation will remove
|
||||
<strong>{{projectPath}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<label class="label">
|
||||
Please type the project name for confirmation:
|
||||
<span
|
||||
class="has-text-danger"
|
||||
>{{ projectName }}</span>
|
||||
</label>
|
||||
<div class="field">
|
||||
<input
|
||||
v-model="projectNameToDelete"
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="Project name to delete"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="button is-danger"
|
||||
@click="deleteProject()"
|
||||
:disabled="!deleteButtonEnabled"
|
||||
>Delete Project</button>
|
||||
<div class="panel">
|
||||
<p class="panel-title">Danger Zone</p>
|
||||
<div class="p-4">
|
||||
<h4 class="mb-4 title text-xl">Delete This Project</h4>
|
||||
<div
|
||||
class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
|
||||
role="alert"
|
||||
>
|
||||
<p>
|
||||
This operation
|
||||
<strong>CANNOT</strong> be undone.
|
||||
This operation will remove
|
||||
<strong>{{projectPath}}</strong>
|
||||
</p>
|
||||
</div>
|
||||
<label class="block mb-2">
|
||||
Please type the project name for confirmation:
|
||||
<span
|
||||
class="text-red-500 font-bold"
|
||||
>{{ projectName }}</span>
|
||||
</label>
|
||||
<div class="mb-4">
|
||||
<input
|
||||
class="appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
v-model="projectNameToDelete"
|
||||
type="email"
|
||||
placeholder="Project name to delete"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-red"
|
||||
@click="deleteProject()"
|
||||
:disabled="!deleteButtonEnabled"
|
||||
>Delete Project</button>
|
||||
|
||||
<div v-if="deleteProjectError" class="message is-danger">
|
||||
<div class="message-body">{{ deleteProjectError }}</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="deleteProjectError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ deleteProjectError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-block is-block">
|
||||
<div>
|
||||
<h4 class="title is-4">Change remote repository linked account</h4>
|
||||
<div class="message is-danger">
|
||||
<div
|
||||
class="message-body"
|
||||
>This operation will change the linked account associated with the project remote repository to the current user linked account</div>
|
||||
</div>
|
||||
<button class="button is-danger" @click="updateRepoLinkedAccount()">Change</button>
|
||||
<div class="p-4 border-t">
|
||||
<h4 class="mb-4 title text-xl">Change remote repository linked account</h4>
|
||||
<div
|
||||
class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
|
||||
role="alert"
|
||||
>
|
||||
<p>This operation will change the linked account associated with the project remote repository to the current user linked account</p>
|
||||
</div>
|
||||
<button class="btn btn-red" @click="updateRepoLinkedAccount()">Change</button>
|
||||
|
||||
<div v-if="updateRepoLinkedAccountError" class="message is-danger">
|
||||
<div class="message-body">{{ updateRepoLinkedAccountError }}</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="updateRepoLinkedAccountError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ updateRepoLinkedAccountError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -237,9 +245,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.panel-heading {
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<h5 class="title is-5">Local variables</h5>
|
||||
<h5 class="text-2xl">Local variables</h5>
|
||||
<vars v-if="allvariables.length" :variables="variables"/>
|
||||
<span v-else>No variables</span>
|
||||
|
||||
<hr>
|
||||
<h5 class="title is-5">All variables</h5>
|
||||
<hr class="my-6 border-t">
|
||||
|
||||
<h5 class="text-2xl">All variables</h5>
|
||||
<vars v-if="allvariables.length" :variables="allvariables" :showparentpath="true"/>
|
||||
<span v-else>No variables</span>
|
||||
</div>
|
||||
|
|
@ -25,6 +26,5 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="field">
|
||||
<p class="control has-icons-left has-icons-right">
|
||||
<input v-model="username" class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<button @click="$emit('login', { username })" class="button is-info is-fullwidth">Register</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-full max-w-xs">
|
||||
<form
|
||||
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
|
||||
@submit.prevent="$emit('login', { username })"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-bold mb-2" for="username">Remote Username</label>
|
||||
<input
|
||||
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="username"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
:disabled="true"
|
||||
v-model="remoteUsername"
|
||||
>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-bold mb-2" for="username">Username</label>
|
||||
<input
|
||||
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="username"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
v-model="username"
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
||||
type="submit"
|
||||
>Register</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -24,6 +40,7 @@
|
|||
export default {
|
||||
name: "RegisterForm",
|
||||
props: {
|
||||
remoteUsername: String,
|
||||
username: String
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="mb-2 border-solid border-gray-300 rounded border shadow-sm">
|
||||
<p class="bg-gray-200 px-4 py-3 border-solid border-gray-300 border-b">
|
||||
repositories from
|
||||
<strong>{{ remotesource.name }}</strong>
|
||||
</p>
|
||||
<div v-if="remoterepos.length > 0">
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">
|
||||
repositories from
|
||||
<strong>{{ remotesource.name }}</strong>
|
||||
</p>
|
||||
<label
|
||||
class="panel-block"
|
||||
v-for="(repo, index) in remoterepos"
|
||||
v-bind:key="repo.id"
|
||||
@click="select(index)"
|
||||
>
|
||||
<input type="radio" :checked="selectedrepo == index && selected">
|
||||
{{repo.path}}
|
||||
</label>
|
||||
</nav>
|
||||
<label
|
||||
class="block px-4 py-2 border-b"
|
||||
v-for="(repo, index) in remoterepos"
|
||||
v-bind:key="repo.id"
|
||||
@click="select(index)"
|
||||
>
|
||||
<input type="radio" :checked="selectedrepo == index && selected">
|
||||
{{repo.path}}
|
||||
</label>
|
||||
</div>
|
||||
<div v-else class="item-list">No remote repositories</div>
|
||||
<div v-else class="block px-4 py-2 border-b">No remote repositories</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -58,22 +56,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.item-list {
|
||||
.item {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-block input[type="radio"] {
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,50 +3,49 @@
|
|||
<RunDetail :run="run" :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
|
||||
<div v-if="run">
|
||||
<div v-if="run.phase != 'setuperror'">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li>
|
||||
<a>Tasks</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-4 text-xl font-bold">Tasks</div>
|
||||
|
||||
<div v-if="run" class="tasks-list">
|
||||
<div v-for="task in run.sortedTasks" v-bind:key="task.id" :class="taskClass(task)">
|
||||
<div class="task-content">
|
||||
<div class="columns">
|
||||
<router-link class="column is-10" tag="a" :to="runTaskLink(task)">
|
||||
<span class="name">{{task.name}}</span>
|
||||
</router-link>
|
||||
<div class="column">
|
||||
<span
|
||||
class="tag"
|
||||
v-if="run.tasks_waiting_approval.includes(task.id)"
|
||||
>Waiting approval</span>
|
||||
</div>
|
||||
<div class="parents column">
|
||||
<span v-if="parents(task).length > 0">depends on: </span>
|
||||
<span class="parent" v-for="dep in parents(task)" v-bind:key="dep">{{dep}}</span>
|
||||
</div>
|
||||
<ul v-if="run">
|
||||
<li
|
||||
class="mb-2 border-l-5 rounded-l"
|
||||
v-for="task in run.sortedTasks"
|
||||
v-bind:key="task.id"
|
||||
:class="taskClass(task)"
|
||||
>
|
||||
<div class="pl-4 py-4 flex justify-between items-center border border-l-0 rounded-r">
|
||||
<router-link class="w-1/3 font-bold" tag="a" :to="runTaskLink(task)">
|
||||
<span class="w-1/3 font-bold">{{task.name}}</span>
|
||||
</router-link>
|
||||
<div class="column">
|
||||
<span
|
||||
class="tag"
|
||||
v-if="run.tasks_waiting_approval.includes(task.id)"
|
||||
>Waiting approval</span>
|
||||
</div>
|
||||
<div class="w-40">
|
||||
<span class="block" v-if="parents(task).length > 0">depends on: </span>
|
||||
<span
|
||||
class="font-thin text-gray-600"
|
||||
v-for="dep in parents(task)"
|
||||
v-bind:key="dep"
|
||||
>{{dep}}</span>
|
||||
</div>
|
||||
<!-- <span
|
||||
class="duration"
|
||||
v-if="duration && (step.Phase == 'success' || step.Phase == 'failed') "
|
||||
>{{duration}}</span>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li>
|
||||
<a>Setup Errors</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="setuperrors">
|
||||
<span class="error-line" v-for="(error, i) in run.setup_errors" v-bind:key="i">{{error}}</span>
|
||||
<h2 class="my-4 text-2xl">Setup Errors</h2>
|
||||
<div class="p-3 rounded bg-gray-800 text-white">
|
||||
<pre
|
||||
class="font-mono leading-snug text-xs"
|
||||
v-for="(error, i) in run.setup_errors"
|
||||
v-bind:key="i"
|
||||
>{{error}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -138,65 +137,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.tasks-list {
|
||||
.task-content {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
border-left: 0 solid;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 5px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.parents {
|
||||
margin-left: 1rem;
|
||||
margin-right: 0rem;
|
||||
font-weight: lighter;
|
||||
font-size: 0.8rem;
|
||||
.parent {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setuperrors {
|
||||
background-color: #222;
|
||||
color: #f1f1f1;
|
||||
font-family: Cousine, monospace;
|
||||
font-size: 12px;
|
||||
line-height: 19px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
|
||||
.error-line {
|
||||
pre {
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,110 +1,128 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="run != null">
|
||||
<div class="run">
|
||||
<div :class="runResultClass(run)">
|
||||
<div class="run-content">
|
||||
<div class="item-content columns">
|
||||
<div class="run-title column is-10">
|
||||
<span class="run-name">{{run.name}}</span>
|
||||
<span
|
||||
class="tag"
|
||||
:class="'is-'+runResultClass(run)"
|
||||
>{{ runStatus(run) | capitalize }}</span>
|
||||
<span v-if="stillRunning(run)" class="stillrunning tag">Still running</span>
|
||||
<span v-if="!stillRunning(run)" class="stillrunning"></span>
|
||||
</div>
|
||||
<div class="run-actions column is-2 is-pulled-right">
|
||||
<div
|
||||
v-if="run.can_restart_from_scratch || run.can_restart_from_failed_tasks"
|
||||
class="dropdown is-right"
|
||||
v-click-outside="() => dropdownActive = false"
|
||||
v-bind:class="{ 'is-active': dropdownActive }"
|
||||
>
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" @click="toggleDropdown()">
|
||||
<span>Restart</span>
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-restart" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<a
|
||||
v-if="run.can_restart_from_scratch"
|
||||
class="dropdown-item"
|
||||
@click="restartRun(run.id, true)"
|
||||
>From start</a>
|
||||
<a
|
||||
v-if="run.can_restart_from_failed_tasks"
|
||||
class="dropdown-item"
|
||||
@click="restartRun(run.id)"
|
||||
>From failed tasks</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="button is-danger"
|
||||
v-if="run.phase == 'queued'"
|
||||
@click="cancelRun(run.id)"
|
||||
>Cancel</button>
|
||||
<button
|
||||
class="button is-danger"
|
||||
v-if="run.phase == 'running'"
|
||||
:disabled="run.stopping"
|
||||
@click="stopRun(run.id)"
|
||||
>Stop</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="stopRunError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ stopRunError }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="cancelRunError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ cancelRunError }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="restartRunError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ restartRunError }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 border-l-5 rounded shadow" :class="runResultClass(run)">
|
||||
<div class="p-4 border border-l-0 rounded-r">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center">
|
||||
<span class="text-2xl mr-3">{{run.name}}</span>
|
||||
<span
|
||||
class="mr-3 rounded px-2 py-1 text-xs"
|
||||
:class="'is-' + runResultClass(run)"
|
||||
>{{ runStatus(run) | capitalize }}</span>
|
||||
<span
|
||||
v-if="stillRunning(run)"
|
||||
class="rounded bg-gray-500 text-white px-2 py-1 text-xs"
|
||||
>Still running</span>
|
||||
</div>
|
||||
<div class="item-content columns">
|
||||
<div class="commitmessage column">{{run.annotations.message}}</div>
|
||||
<div class="source-info column">
|
||||
<a :href="run.annotations.commit_link" class="commit" target="_blank">
|
||||
<i class="mdi mdi-source-commit mdi-rotate-90"></i>
|
||||
<span>{{run.annotations.commit_sha.substring(0,8)}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="run.annotations.event_type == 'push'"
|
||||
:href="run.annotations.branch_link"
|
||||
class="commit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-branch"></i>
|
||||
<span>{{run.annotations.branch}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else-if="run.annotations.event_type == 'tag'"
|
||||
:href="run.annotations.tag_link"
|
||||
class="commit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-tag"></i>
|
||||
<span>{{run.annotations.tag}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else-if="run.annotations.event_type == 'pull_request'"
|
||||
:href="run.annotations.pull_request_link"
|
||||
class="commit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-pull"></i>
|
||||
<span>PR #{{run.annotations.pull_request_id}}</span>
|
||||
</a>
|
||||
<div class="relative mr-3">
|
||||
<div
|
||||
v-if="run.can_restart_from_scratch || run.can_restart_from_failed_tasks"
|
||||
class="flex"
|
||||
v-click-outside="() => dropdownActive = false"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<button class="btn btn-blue" @click="toggleDropdown()">
|
||||
<span>Restart</span>
|
||||
<i class="ml-3 mdi mdi-restart" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="dropdownActive"
|
||||
class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
v-if="run.can_restart_from_scratch"
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
@click="restartRun(run.id, true)"
|
||||
>From start</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
v-if="run.can_restart_from_failed_tasks"
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
@click="restartRun(run.id)"
|
||||
>From failed tasks</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-red"
|
||||
v-if="run.phase == 'queued'"
|
||||
@click="cancelRun(run.id)"
|
||||
>Cancel</button>
|
||||
<button
|
||||
class="btn btn-red"
|
||||
v-if="run.phase == 'running'"
|
||||
:disabled="run.stopping"
|
||||
@click="stopRun(run.id)"
|
||||
>Stop</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="w-1/2">{{run.annotations.message}}</div>
|
||||
<div class="w-1/2">
|
||||
<a :href="run.annotations.commit_link" class="block" target="_blank">
|
||||
<i class="mdi mdi-source-commit mdi-rotate-90"></i>
|
||||
<span>{{run.annotations.commit_sha.substring(0,8)}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="run.annotations.event_type == 'push'"
|
||||
:href="run.annotations.branch_link"
|
||||
class="block"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-branch"></i>
|
||||
<span>{{run.annotations.branch}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else-if="run.annotations.event_type == 'tag'"
|
||||
:href="run.annotations.tag_link"
|
||||
class="block"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-tag"></i>
|
||||
<span>{{run.annotations.tag}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else-if="run.annotations.event_type == 'pull_request'"
|
||||
:href="run.annotations.pull_request_link"
|
||||
class="block"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-pull"></i>
|
||||
<span>PR #{{run.annotations.pull_request_id}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="stopRunError" class="message is-danger">
|
||||
<div class="message-body">{{ stopRunError }}</div>
|
||||
</div>
|
||||
<div v-if="cancelRunError" class="message is-danger">
|
||||
<div class="message-body">{{ cancelRunError }}</div>
|
||||
</div>
|
||||
<div v-if="cancelRunError" class="message is-danger">
|
||||
<div class="message-body">{{ cancelRunError }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -222,100 +240,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.run {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.run-content {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
border-left: 0 solid;
|
||||
display: block;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.run-title {
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.run-name {
|
||||
padding-left: 5px;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 0px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.run-actions {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 5px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
|
||||
.setuperror {
|
||||
border-left: 5px solid $yellow;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.commitmessage {
|
||||
}
|
||||
|
||||
.stillrunning {
|
||||
}
|
||||
|
||||
.source-info {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.commit {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,44 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="runs.length > 0">
|
||||
<div class="item-list">
|
||||
<div v-for="run in runs" v-bind:key="run.id" :class="runResultClass(run)">
|
||||
<div class="item-content">
|
||||
<ul>
|
||||
<li
|
||||
class="mb-2 border-l-5 rounded-l"
|
||||
v-for="run in runs"
|
||||
v-bind:key="run.id"
|
||||
:class="runResultClass(run)"
|
||||
>
|
||||
<div class="pl-4 flex items-center border border-l-0 rounded-r">
|
||||
<router-link
|
||||
v-if="projectref"
|
||||
tag="div"
|
||||
class="name"
|
||||
class="w-1/3 font-bold"
|
||||
:to="projectRunLink(ownertype, ownername, projectref, run.id)"
|
||||
>
|
||||
<span class>{{run.name}}</span>
|
||||
</router-link>
|
||||
<router-link v-else class="w-1/3 font-bold" :to="userLocalRunLink(ownername, run.id)">
|
||||
<span>{{run.name}}</span>
|
||||
</router-link>
|
||||
<router-link v-else tag="div" class="name" :to="userLocalRunLink(ownername, run.id)">
|
||||
<span>{{run.name}}</span>
|
||||
</router-link>
|
||||
<div class="commitmessage">{{run.annotations.message}}</div>
|
||||
<span v-if="waitingApproval(run)" class="waitingapproval tag">Waiting Approval</span>
|
||||
<span v-if="!waitingApproval(run)" class="waitingapproval"></span>
|
||||
<span v-if="stillRunning(run)" class="stillrunning tag">Still running</span>
|
||||
<span v-if="!stillRunning(run)" class="stillrunning"></span>
|
||||
<div class="source-info">
|
||||
<a :href="run.annotations.commit_link" class="commit" target="_blank">
|
||||
<div class="w-1/3">{{run.annotations.message}}</div>
|
||||
<span
|
||||
v-if="waitingApproval(run)"
|
||||
class="w-1/5 inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold mr-2"
|
||||
>Waiting Approval</span>
|
||||
<span v-if="!waitingApproval(run)" class="w-1/5"></span>
|
||||
<span
|
||||
v-if="stillRunning(run)"
|
||||
class="w-1/5 inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold mr-2"
|
||||
>Still running</span>
|
||||
<span v-if="!stillRunning(run)" class="w-1/5"></span>
|
||||
<div class="w-32">
|
||||
<a :href="run.annotations.commit_link" class="block" target="_blank">
|
||||
<i class="mdi mdi-source-commit mdi-rotate-90"></i>
|
||||
<span>{{run.annotations.commit_sha.substring(0,8)}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="run.annotations.event_type == 'push'"
|
||||
:href="run.annotations.branch_link"
|
||||
class="commit"
|
||||
class="block whitespace-no-wrap overflow-x-hidden"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-branch"></i>
|
||||
|
|
@ -37,7 +47,7 @@
|
|||
<a
|
||||
v-else-if="run.annotations.event_type == 'tag'"
|
||||
:href="run.annotations.tag_link"
|
||||
class="commit"
|
||||
class="block"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-tag"></i>
|
||||
|
|
@ -46,7 +56,7 @@
|
|||
<a
|
||||
v-else-if="run.annotations.event_type == 'pull_request'"
|
||||
:href="run.annotations.pull_request_link"
|
||||
class="commit"
|
||||
class="block"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-pull"></i>
|
||||
|
|
@ -54,17 +64,17 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="has-text-centered">
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex justify-center my-3">
|
||||
<button
|
||||
v-if="hasMoreRuns"
|
||||
class="button is-primary is-outlined is-fullwidth load-more-button"
|
||||
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
|
||||
@click="loadMoreRuns()"
|
||||
>Load more...</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="item-list">No runs</div>
|
||||
<div v-else class>No runs</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -218,88 +228,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.project-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
.project-name {
|
||||
padding-left: 5px;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item-list {
|
||||
.item-content {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
border-left: 0 solid;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 5px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
|
||||
.setuperror {
|
||||
border-left: 5px solid $yellow;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 0 0 30%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.commitmessage {
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
|
||||
.stillrunning {
|
||||
flex: 0 0 10%;
|
||||
}
|
||||
|
||||
.waitingapproval {
|
||||
flex: 0 0 10%;
|
||||
}
|
||||
|
||||
.source-info {
|
||||
flex: 0 0 10%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.commit {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.load-more-button {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,20 @@
|
|||
<div>
|
||||
<RunDetail :run="run"/>
|
||||
<div v-if="task != null">
|
||||
<div class="columns">
|
||||
<div class="task-title column is-10">
|
||||
<span class="task-name" v-html="task.name"/>
|
||||
<span class="tag" :class="taskClass(task)">{{ task.status | capitalize }}</span>
|
||||
</div>
|
||||
<div class="task-actions column is-2 is-pulled-right">
|
||||
<button
|
||||
class="button is-primary"
|
||||
v-if="task.waiting_approval"
|
||||
@click="approveTask(run.id, task.id)"
|
||||
>Approve</button>
|
||||
<div class="mt-8 mb-4 flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<span class="text-2xl mr-3">{{task.name}}</span>
|
||||
|
||||
<span
|
||||
class="mr-3 rounded px-2 py-1 text-xs"
|
||||
:class="taskClass(task)"
|
||||
>{{ task.status | capitalize }}</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="task.waiting_approval"
|
||||
class="btn btn-blue"
|
||||
@click="approveTask(run.id, task.id)"
|
||||
>Approve</button>
|
||||
</div>
|
||||
<Collapse
|
||||
v-bind:runid="runid"
|
||||
|
|
@ -98,20 +100,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.task-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.task-name {
|
||||
padding-left: 5px;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,107 +1,147 @@
|
|||
<template>
|
||||
<div>
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">Linked Accounts</p>
|
||||
<div class="panel-block is-block">
|
||||
<div class="message is-danger">
|
||||
<div
|
||||
class="message-body"
|
||||
>Removing a Linked Account will also block all the projects that uses this Linked Account to access their remote repository</div>
|
||||
<div class="panel">
|
||||
<p class="panel-title">Linked Accounts</p>
|
||||
<div class="p-4">
|
||||
<div
|
||||
class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
|
||||
role="alert"
|
||||
>
|
||||
<p>Removing a Linked Account will also block all the projects that uses this Linked Account to access their remote repository</p>
|
||||
</div>
|
||||
<ul v-if="user.linked_accounts">
|
||||
<li class="item-list" v-for="(la, index) in user.linked_accounts" v-bind:key="index">
|
||||
<div class="level item">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div>
|
||||
<span class="name">{{la.remote_user_name}}</span>
|
||||
<span class="remotesource-name">(on remote source {{laRemoteSourceName(la)}})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button class="button is-primary" @click="deleteLinkedAccount(la)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
class="flex justify-between items-center mb-2"
|
||||
v-for="(la, index) in user.linked_accounts"
|
||||
v-bind:key="index"
|
||||
>
|
||||
<div>
|
||||
<span class="font-bold">{{la.remote_user_name}}</span>
|
||||
<span class="ml-1">(on remote source {{laRemoteSourceName(la)}})</span>
|
||||
</div>
|
||||
<button class="btn btn-red" @click="deleteLinkedAccount(la)">Delete</button>
|
||||
</li>
|
||||
<div v-if="deleteLinkedAccountError" class="message is-danger">
|
||||
<div class="message-body">{{ deleteLinkedAccountError }}</div>
|
||||
<div
|
||||
v-if="deleteLinkedAccountError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ deleteLinkedAccountError }}</span>
|
||||
</div>
|
||||
</ul>
|
||||
<div v-else>No linked accounts</div>
|
||||
</div>
|
||||
<div v-if="remotesources.length" class="panel-block is-block">
|
||||
<h5 class="title is-5">Add new linked account</h5>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select v-model="selectedRemoteSourceName">
|
||||
<option v-for="rs in remotesources" v-bind:key="rs.id">{{ rs.name }}</option>
|
||||
</select>
|
||||
<div v-if="remotesources.length" class="p-4 border-t">
|
||||
<h5 class="mb-3 text-xl">Add new linked account</h5>
|
||||
|
||||
<div class="inline-block">
|
||||
<div class="flex mb-3 relative w-64">
|
||||
<select
|
||||
class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
|
||||
v-model="selectedRemoteSourceName"
|
||||
>
|
||||
<option v-for="rs in remotesources" v-bind:key="rs.id">{{ rs.name }}</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
|
||||
<svg
|
||||
class="fill-current h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button is-primary" @click="addLinkedAccount()">Add Linked Account</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">User Tokens</p>
|
||||
<div class="panel-block is-block">
|
||||
<div v-if="user.tokens">
|
||||
<div class="item-list" v-for="token in user.tokens" v-bind:key="token">
|
||||
<nav class="level item">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
disabled
|
||||
type="text"
|
||||
placeholder="Token name"
|
||||
:value="token"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button class="button is-primary" @click="deleteUserToken(token)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="ml-3 btn btn-blue" @click="addLinkedAccount()">Add Linked Account</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<p class="panel-title">User Tokens</p>
|
||||
<div class="p-4">
|
||||
<ul v-if="user.tokens">
|
||||
<li
|
||||
class="flex justify-between items-center mb-2"
|
||||
v-for="token in user.tokens"
|
||||
v-bind:key="token"
|
||||
>
|
||||
<span class="font-bold">{{token}}</span>
|
||||
<button class="btn btn-red" @click="deleteUserToken(token)">Delete</button>
|
||||
</li>
|
||||
<div
|
||||
v-if="deleteUserTokenError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ deleteUserTokenError }}</span>
|
||||
</div>
|
||||
<div v-if="deleteUserTokenError" class="message is-danger">
|
||||
<div class="message-body">{{ deleteUserTokenError }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div v-else>No user tokens</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-block is-block">
|
||||
<div v-if="token" class="notification is-success">
|
||||
<button class="delete" @click="closeNewTokenNotification()"></button>
|
||||
User token created: {{token}}
|
||||
</div>
|
||||
<h5 class="title is-5">Create new User Token</h5>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<input
|
||||
class="input is-primary"
|
||||
type="text"
|
||||
placeholder="Token name"
|
||||
v-model="newtokenname"
|
||||
>
|
||||
<div class="p-4 border-t">
|
||||
<div
|
||||
v-if="token"
|
||||
class="my-3 relative bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md"
|
||||
role="alert"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg
|
||||
class="fill-current h-6 w-6 text-teal-500 mr-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold">User token created. Copy it now since it won't be showed again</p>
|
||||
<p class="text-sm">{{token}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button is-primary" @click="createUserToken()">Create Token</button>
|
||||
<span
|
||||
class="absolute top-0 bottom-0 right-0 px-4 py-3"
|
||||
@click="closeNewTokenNotification()"
|
||||
>
|
||||
<svg
|
||||
class="fill-current h-6 w-6 text-teal-500"
|
||||
role="button"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<title>Close</title>
|
||||
<path
|
||||
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="createUserTokenError" class="message is-danger">
|
||||
<div class="message-body">{{ createUserTokenError }}</div>
|
||||
<h5 class="mb-3 text-xl">Create new User Token</h5>
|
||||
<div class="control">
|
||||
<input
|
||||
class="shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
type="text"
|
||||
placeholder="Token name"
|
||||
v-model="newtokenname"
|
||||
>
|
||||
<button class="ml-3 btn btn-blue" @click="createUserToken()">Create Token</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="createUserTokenError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ createUserTokenError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -219,18 +259,5 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.item-list {
|
||||
.item {
|
||||
padding: 10px;
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
.remotesource-name {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,64 +1,54 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="columns has-text-weight-bold">
|
||||
<div class="column is-2">Name</div>
|
||||
<div class="column is-10">
|
||||
<div class="columns">
|
||||
<div class="column is-2">Secret Name</div>
|
||||
<div class="column is-2">Secret Value</div>
|
||||
<div class="column">
|
||||
<div class="columns">
|
||||
<div class="column">Conditions</div>
|
||||
<div class="column">Include</div>
|
||||
<div class="column">Exclude</div>
|
||||
<div class="my-3 flex font-bold">
|
||||
<div class="w-1/3">Name</div>
|
||||
<div class="w-2/3">
|
||||
<div class="flex">
|
||||
<div class="w-1/3">Secret Name</div>
|
||||
<div class="w-1/3">Secret Value</div>
|
||||
<div class="w-1/3">
|
||||
<div class="flex">
|
||||
<div class="w-1/3 mr-2">Conditions</div>
|
||||
<div class="w-1/3 mr-2">Include</div>
|
||||
<div class="w-1/3 mr-2">Exclude</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" v-for="variable in variables" v-bind:key="variable.id">
|
||||
<div class="column is-2">
|
||||
<div class="flex" v-for="variable in variables" v-bind:key="variable.id">
|
||||
<div class="w-1/3">
|
||||
<span class="name">{{variable.name}}</span>
|
||||
<div v-if="showparentpath" class="var-parent-path">from {{variable.parent_path}}</div>
|
||||
<div v-if="showparentpath" class="text-sm font-light">from {{variable.parent_path}}</div>
|
||||
</div>
|
||||
<div class="column is-10">
|
||||
<div class="item-list" v-for="val in variable.values" v-bind:key="val.id">
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<span class="secret-name">{{val.secret_name}}</span>
|
||||
<div
|
||||
v-if="val.matching_secret_parent_path"
|
||||
class="matching-secret"
|
||||
>using secret from {{val.matching_secret_parent_path}}</div>
|
||||
<div v-else class="no-matching-secret">no matching secret</div>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<span class="secret-var">{{val.secret_var}}</span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div v-if="val.when">
|
||||
<div v-if="val.when.branch">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<span>branch</span>
|
||||
<div class="w-2/3">
|
||||
<div class="flex" v-for="val in variable.values" v-bind:key="val.id">
|
||||
<div class="w-1/3">
|
||||
<span>{{val.secret_name}}</span>
|
||||
<div
|
||||
v-if="val.matching_secret_parent_path"
|
||||
class="text-sm"
|
||||
>using secret from {{val.matching_secret_parent_path}}</div>
|
||||
<div v-else class="text-sm text-red-600">no matching secret</div>
|
||||
</div>
|
||||
<div class="w-1/3">
|
||||
<span>{{val.secret_var}}</span>
|
||||
</div>
|
||||
<div class="w-1/3">
|
||||
<div v-if="val.when">
|
||||
<div v-if="val.when.branch">
|
||||
<div class="flex">
|
||||
<div class="w-1/3">
|
||||
<span>branch</span>
|
||||
</div>
|
||||
<div class="w-1/3">
|
||||
<div v-for="include in val.when.branch.include" v-bind:key="include.match">
|
||||
<span>{{include.match}}</span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div
|
||||
class="item-list"
|
||||
v-for="include in val.when.branch.include"
|
||||
v-bind:key="include.match"
|
||||
>
|
||||
<span class="secret-name">{{include.match}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div
|
||||
class="item-list"
|
||||
v-for="exclude in val.when.branch.exclude"
|
||||
v-bind:key="exclude.match"
|
||||
>
|
||||
<span class="secret-name">{{exclude.match}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/3">
|
||||
<div v-for="exclude in val.when.branch.exclude" v-bind:key="exclude.match">
|
||||
<span>{{exclude.match}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,30 +73,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
@import "~bulma/bulma.sass";
|
||||
|
||||
.name {
|
||||
}
|
||||
|
||||
.secret-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.var-parent-path {
|
||||
@extend .has-text-weight-light;
|
||||
@extend .is-size-7;
|
||||
}
|
||||
|
||||
.matching-secret {
|
||||
@extend .has-text-weight-light;
|
||||
@extend .is-size-7;
|
||||
}
|
||||
|
||||
.no-matching-secret {
|
||||
@extend .has-text-danger;
|
||||
@extend .is-size-7;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,19 @@
|
|||
// **
|
||||
// black
|
||||
// **
|
||||
$ansi-black: #222;
|
||||
$ansi-black-bright: #222;
|
||||
$ansi-red: #c0392b;
|
||||
$ansi-red-bright: #e74c3c;
|
||||
$ansi-green: #27af60;
|
||||
$ansi-green-bright: #2ecc71;
|
||||
$ansi-yellow: #f39c12;
|
||||
$ansi-yellow-bright: #f1c40f;
|
||||
$ansi-blue: #2e8dcd;
|
||||
$ansi-blue-bright: #3498db;
|
||||
$ansi-magenta: #8e44ad;
|
||||
$ansi-magenta-bright: #9b59b6;
|
||||
$ansi-cyan: #0097a4;
|
||||
$ansi-cyan-bright: #02c8d9;
|
||||
$ansi-white: #bdc3c7;
|
||||
$ansi-white-bright: #ffffff;
|
||||
|
||||
.ansi-black-fg {
|
||||
color: $ansi-black;
|
||||
|
|
@ -16,10 +29,6 @@
|
|||
background-color: $ansi-black-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// red
|
||||
// **
|
||||
|
||||
.ansi-red-fg {
|
||||
color: $ansi-red;
|
||||
}
|
||||
|
|
@ -34,10 +43,6 @@
|
|||
background-color: $ansi-red-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// green
|
||||
// **
|
||||
|
||||
.ansi-green-fg {
|
||||
color: $ansi-green;
|
||||
}
|
||||
|
|
@ -52,10 +57,6 @@
|
|||
background-color: $ansi-green-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// yellow
|
||||
// **
|
||||
|
||||
.ansi-yellow-fg {
|
||||
color: $ansi-yellow;
|
||||
}
|
||||
|
|
@ -70,10 +71,6 @@
|
|||
background-color: $ansi-yellow-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// blue
|
||||
// **
|
||||
|
||||
.ansi-blue-fg {
|
||||
color: $ansi-blue;
|
||||
}
|
||||
|
|
@ -88,10 +85,6 @@
|
|||
background-color: $ansi-blue-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// magenta
|
||||
// **
|
||||
|
||||
.ansi-magenta-fg {
|
||||
color: $ansi-magenta;
|
||||
}
|
||||
|
|
@ -106,10 +99,6 @@
|
|||
background-color: $ansi-magenta-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// cyan
|
||||
// **
|
||||
|
||||
.ansi-cyan-fg {
|
||||
color: $ansi-cyan;
|
||||
}
|
||||
|
|
@ -124,10 +113,6 @@
|
|||
background-color: $ansi-cyan-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// white
|
||||
// **
|
||||
|
||||
.ansi-white-fg {
|
||||
color: $ansi-white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
@import "~bulma/sass/utilities/initial-variables.sass";
|
||||
@import "~bulma/sass/utilities/functions.sass";
|
||||
|
||||
$grey: #8c9b9d;
|
||||
$grey-light: #a9afb7;
|
||||
$grey-lighter: #dee2e5;
|
||||
$orange: #e67e22;
|
||||
$yellow: #f1b70e;
|
||||
$green: #2ecc71;
|
||||
$turquoise: #1abc9c;
|
||||
$blue: #3498db;
|
||||
$purple: #8e44ad;
|
||||
$red: #e42522;
|
||||
$white-ter: #ecf0f1;
|
||||
$primary: #34495e !default;
|
||||
|
||||
$grey-lighter-invert: findColorInvert($grey-lighter);
|
||||
$green-invert: findColorInvert($green);
|
||||
$red-invert: findColorInvert($red);
|
||||
$blue-invert: findColorInvert($red);
|
||||
|
||||
$custom-colors: (
|
||||
"unknown": (
|
||||
$grey-lighter,
|
||||
$grey-lighter-invert
|
||||
),
|
||||
"success": (
|
||||
$green,
|
||||
$green-invert
|
||||
),
|
||||
"failed": (
|
||||
$red,
|
||||
$red-invert
|
||||
),
|
||||
"running": (
|
||||
$blue,
|
||||
$blue-invert
|
||||
)
|
||||
);
|
||||
|
||||
$link: $grey;
|
||||
$tabs-link-active-color: $blue;
|
||||
$tabs-link-active-border-bottom-color: $blue;
|
||||
$tabs-link-hover-color: $blue;
|
||||
$tabs-link-hover-border-bottom-color: $blue;
|
||||
|
||||
$spacing: 20px;
|
||||
|
||||
$breadcrumb-item-color: $grey-dark !default;
|
||||
$breadcrumb-item-hover-color: $grey-dark !default;
|
||||
|
||||
$breadcrumb-item-padding-vertical: 0 !default;
|
||||
$breadcrumb-item-padding-horizontal: 0.5em !default;
|
||||
|
||||
$breadcrumb-item-separator-color: $grey-light !default;
|
||||
|
||||
$ansi-black: #222;
|
||||
$ansi-black-bright: #222;
|
||||
$ansi-red: #c0392b;
|
||||
$ansi-red-bright: #e74c3c;
|
||||
$ansi-green: #27af60;
|
||||
$ansi-green-bright: #2ecc71;
|
||||
$ansi-yellow: #f39c12;
|
||||
$ansi-yellow-bright: #f1c40f;
|
||||
$ansi-blue: #2e8dcd;
|
||||
$ansi-blue-bright: #3498db;
|
||||
$ansi-magenta: #8e44ad;
|
||||
$ansi-magenta-bright: #9b59b6;
|
||||
$ansi-cyan: #0097a4;
|
||||
$ansi-cyan-bright: #02c8d9;
|
||||
$ansi-white: #bdc3c7;
|
||||
$ansi-white-bright: #ffffff;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "@/css/_variables.scss";
|
||||
|
||||
@import "~bulma/bulma.sass";
|
||||
|
||||
@import "./css/_ansi.scss";
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
||||
@import "@/css/_ansi.scss";
|
||||
|
||||
.btn {
|
||||
@apply font-bold py-2 px-4 rounded;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@apply bg-blue-500 text-white;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
@apply bg-blue-700;
|
||||
}
|
||||
.btn-blue:disabled {
|
||||
@apply bg-blue-500 opacity-50 cursor-not-allowed;
|
||||
}
|
||||
.btn-blue:focus {
|
||||
@apply bg-blue-500 outline-none shadow-outline;
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
@apply bg-red-500 text-white;
|
||||
}
|
||||
.btn-red:hover {
|
||||
@apply bg-red-700;
|
||||
}
|
||||
.btn-red:disabled {
|
||||
@apply bg-red-500 opacity-50 cursor-not-allowed;
|
||||
}
|
||||
.btn-red:focus {
|
||||
@apply bg-red-500 outline-none shadow-outline;
|
||||
}
|
||||
|
||||
.tab {
|
||||
@apply flex border-b-2;
|
||||
}
|
||||
|
||||
.tab-element {
|
||||
@apply px-4 -m-2px border-b-2;
|
||||
}
|
||||
|
||||
.tab-element:hover {
|
||||
@apply border-blue-300 text-blue-500;
|
||||
}
|
||||
|
||||
.tab-element-selected {
|
||||
@apply border-b-2 border-blue-300 text-blue-500;
|
||||
}
|
||||
|
||||
.panel {
|
||||
@apply mb-2 border-solid border-gray-300 rounded border shadow;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
@apply bg-gray-200 px-4 py-3 border-solid border-gray-300 border-b text-xl font-bold;
|
||||
}
|
||||
|
||||
.success {
|
||||
@apply border-green-400;
|
||||
}
|
||||
|
||||
.is-success {
|
||||
@apply bg-green-400 text-white;
|
||||
}
|
||||
|
||||
.failed {
|
||||
@apply border-red-600;
|
||||
}
|
||||
|
||||
.is-failed {
|
||||
@apply bg-red-600 text-white;
|
||||
}
|
||||
|
||||
.running {
|
||||
@apply border-blue-500;
|
||||
}
|
||||
|
||||
.is-running {
|
||||
@apply bg-blue-500 text-white;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
@apply border-gray-400;
|
||||
}
|
||||
|
||||
.is-unknown {
|
||||
@apply bg-gray-400 text-white;
|
||||
}
|
||||
|
||||
.setuperror {
|
||||
@apply border-yellow-500;
|
||||
}
|
||||
|
||||
.is-setuperror {
|
||||
@apply bg-yellow-500 text-white;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
color: transparent !important;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
&:after {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dae1e7;
|
||||
border-radius: 290486px;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
left: calc(50% - (1em / 2));
|
||||
top: calc(50% - (1em / 2));
|
||||
position: absolute !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinAround {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply text-dark;
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import '@/css/tailwind.scss'
|
||||
import "@mdi/font/css/materialdesignicons.css";
|
||||
|
||||
import Vue from "vue";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="column is-4 is-offset-4">
|
||||
<div
|
||||
v-if="addLinkedAccountError"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ addLinkedAccountError }}</span>
|
||||
</div>
|
||||
<div class="my-6 flex justify-center items-center">
|
||||
<div v-if="remotesource">
|
||||
<LoginForm
|
||||
v-if="remotesource.auth_type == 'password'"
|
||||
|
|
@ -10,13 +17,10 @@
|
|||
/>
|
||||
<button
|
||||
v-else
|
||||
class="button is-info is-fullwidth"
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
||||
@click="doAddLinkedAccount(remotesource.name)"
|
||||
>Add Linked Account with {{remotesource.name}}</button>
|
||||
</div>
|
||||
<div v-if="addLinkedAccountError" class="message is-danger">
|
||||
<div class="message-body">{{ addLinkedAccountError }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,34 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="error" class="message is-danger">
|
||||
<div class="message-header">
|
||||
<p>Login error</p>
|
||||
</div>
|
||||
<div class="message-body">{{ error }}</div>
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ error }}</span>
|
||||
</div>
|
||||
<div class="column is-4 is-offset-4">
|
||||
<div class="box" v-for="rs in remotesources" v-bind:key="rs.id">
|
||||
<div>
|
||||
<div
|
||||
class="my-6 flex justify-center items-center"
|
||||
v-for="rs in remotesources"
|
||||
v-bind:key="rs.id"
|
||||
>
|
||||
<LoginForm
|
||||
action="Login"
|
||||
:name="rs.name"
|
||||
v-if="rs.auth_type == 'password'"
|
||||
v-on:login="doLogin($event.username, $event.password, rs.name)"
|
||||
/>
|
||||
<button
|
||||
v-else
|
||||
class="button is-info is-fullwidth"
|
||||
@click="doLogin(null, null, rs.name)"
|
||||
>Login with {{rs.name}}</button>
|
||||
<div v-else class="w-full max-w-xs">
|
||||
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
||||
@click="doLogin(null, null, rs.name)"
|
||||
>Login with {{rs.name}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="error" class="message is-danger">
|
||||
<div class="message-header">
|
||||
<p>Error</p>
|
||||
</div>
|
||||
<div class="message-body">{{ error }}</div>
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,62 +1,67 @@
|
|||
<template>
|
||||
<div>
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<nav class="mb-4 bg-grey-light rounded font-sans w-full">
|
||||
<ol class="list-reset flex text-grey-dark">
|
||||
<li>
|
||||
<a>org</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mx-2">/</span>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="ownerLink('org', orgname)">{{orgname}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="name">
|
||||
<span class="is-size-3">{{orgname}}</span>
|
||||
<div class="is-pulled-right">
|
||||
<createprojectbutton v-on:click="goToCreate($event)"/>
|
||||
</div>
|
||||
<div class="mb-8 flex justify-between">
|
||||
<span class="text-3xl">{{orgname}}</span>
|
||||
<createprojectbutton v-on:click="goToCreate($event)"/>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li :class="[{ 'is-active': $route.name === 'org projects' || $route.name === 'org' }]">
|
||||
<div class="flex justify-between">
|
||||
<ul class="flex-grow tab">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name === 'org projects' || $route.name === 'org' }]"
|
||||
>
|
||||
<router-link :to="ownerProjectsLink('org', orgname)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-home"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-home"/>
|
||||
<span>Projects</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li :class="[{ 'is-active': $route.name === 'org members' }]">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name === 'org members' }]"
|
||||
>
|
||||
<router-link :to="orgMembersLink(orgname)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-account-group"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-account-group"/>
|
||||
<span>Members</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="is-right">
|
||||
<li :class="[{ 'is-active': $route.name.endsWith('org project group settings') }]">
|
||||
<ul class="flex tab">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('org project group settings') }]"
|
||||
>
|
||||
<router-link :to="projectGroupSettingsLink('org', orgname, [])">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-settings"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>Root Project Group Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li :class="[{ 'is-active': $route.name.endsWith('org settings') }]">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('org settings') }]"
|
||||
>
|
||||
<router-link :to="ownerSettingsLink('org', orgname)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-settings"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>Organization Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
<router-view class="mt-8"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -104,10 +109,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.name {
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,64 +2,62 @@
|
|||
<div>
|
||||
<projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
|
||||
|
||||
<div class="name">
|
||||
<span class="is-size-3">{{projectName()}}</span>
|
||||
<div class="mb-8">
|
||||
<span class="text-3xl">{{projectName()}}</span>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-run-fast"/>
|
||||
</span>
|
||||
<div class="flex justify-between">
|
||||
<ul class="flex-grow tab">
|
||||
<li class="tab-element">
|
||||
<i class="mr-1 mdi mdi-run-fast"/>
|
||||
<span>Runs</span>
|
||||
</li>
|
||||
<li>
|
||||
<tabarrow/>
|
||||
</li>
|
||||
<li
|
||||
:class="[{ 'is-active': $route.name.match('project runs') || $route.name.endsWith('project') }]"
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.match('project runs') || $route.name.endsWith('project') }]"
|
||||
>
|
||||
<router-link :to="projectRunsLink(ownertype, ownername, projectref)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-asterisk"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-asterisk"/>
|
||||
<span>All</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li :class="[{ 'is-active': $route.name.match('project branches runs') }]">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.match('project branches runs') }]"
|
||||
>
|
||||
<router-link :to="projectBranchesRunsLink(ownertype, ownername, projectref)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-source-branch"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-source-branch"/>
|
||||
<span>Branches</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li :class="[{ 'is-active': $route.name.match('project tags runs') }]">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.match('project tags runs') }]"
|
||||
>
|
||||
<router-link :to="projectTagsRunsLink(ownertype, ownername, projectref)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-tag"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-tag"/>
|
||||
<span>Tags</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li :class="[{ 'is-active': $route.name.match('project pull requests runs') }]">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.match('project pull requests runs') }]"
|
||||
>
|
||||
<router-link :to="projectPRsRunsLink(ownertype, ownername, projectref)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-source-pull"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-source-pull"/>
|
||||
<span>Pull Requests</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
|
||||
:class="[{ 'is-active': $route.name.endsWith('project run') }]"
|
||||
>
|
||||
<li v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')">
|
||||
<tabarrow/>
|
||||
</li>
|
||||
<li
|
||||
class="tab-element"
|
||||
v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
|
||||
:class="[{ 'is-active': $route.name.endsWith('project run') }]"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('project run') }]"
|
||||
>
|
||||
<router-link :to="projectRunLink(ownertype, ownername, projectref, $route.params.runid)">
|
||||
<p v-if="run">
|
||||
|
|
@ -68,13 +66,10 @@
|
|||
</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name.endsWith('project run task')"
|
||||
:class="[{ 'is-active': $route.name.endsWith('project run') }]"
|
||||
>
|
||||
<li v-if="$route.name.endsWith('project run task')">
|
||||
<tabarrow/>
|
||||
</li>
|
||||
<li v-if="$route.name.endsWith('project run task')" class="is-active">
|
||||
<li class="tab-element" v-if="$route.name.endsWith('project run task')">
|
||||
<router-link
|
||||
:to="projectRunTaskLink(ownertype, ownername, projectref, $route.params.runid, $route.params.taskid)"
|
||||
>
|
||||
|
|
@ -85,18 +80,19 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="is-right">
|
||||
<li :class="[{ 'is-active': $route.name.endsWith('project settings') }]">
|
||||
<ul class="flex tab">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('project settings') }]"
|
||||
>
|
||||
<router-link :to="projectSettingsLink(ownertype, ownername, projectref)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-settings"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>Project Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
<router-view class="mt-8"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -170,10 +166,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.name {
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,38 +7,36 @@
|
|||
:projectgroupref="projectgroupref"
|
||||
/>
|
||||
|
||||
<div class="name">
|
||||
<span class="is-size-3">{{projectGroupName()}}</span>
|
||||
<div class="is-pulled-right">
|
||||
<createprojectbutton v-on:click="goToCreate($event)"/>
|
||||
</div>
|
||||
<div class="mb-8 flex justify-between">
|
||||
<span class="text-3xl">{{projectGroupName()}}</span>
|
||||
<createprojectbutton v-on:click="goToCreate($event)"/>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<div class="flex justify-between">
|
||||
<ul class="flex-grow tab">
|
||||
<li
|
||||
:class="[{ 'is-active': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
|
||||
>
|
||||
<router-link :to="projectGroupProjectsLink(ownertype, ownername, projectgroupref)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-home"/>
|
||||
</span>
|
||||
<i class="mdi mdi-home"/>
|
||||
<span>Projects</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="is-right">
|
||||
<li :class="[{ 'is-active': $route.name.endsWith('project group settings') }]">
|
||||
<ul class="flex tab">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('project group settings') }]"
|
||||
>
|
||||
<router-link :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-settings"/>
|
||||
</span>
|
||||
<i class="mdi mdi-settings"/>
|
||||
<span>Project Group Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
<router-view class="mt-8"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -97,10 +95,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.name {
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,44 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="registeruser" class="column is-4 is-offset-4">
|
||||
<div>{{registeruser.remote_user_info.LoginName}}</div>
|
||||
<RegisterForm
|
||||
:username="registeruser.remote_user_info.LoginName"
|
||||
v-on:login="doRegister(registeruser.remote_source_name, $event.username, registeruser.remote_source_login_name, registeruser.remote_source_login_password)"
|
||||
/>
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
||||
role="alert"
|
||||
>
|
||||
<span class="block sm:inline">{{ error }}</span>
|
||||
</div>
|
||||
<div v-else class="column is-4 is-offset-4">
|
||||
<div class="box" v-for="rs in remotesources" v-bind:key="rs.id">
|
||||
<div v-if="registeruser" class="my-6 flex justify-center items-center">
|
||||
<div>
|
||||
<div>{{registeruser.remote_user_info.LoginName}}</div>
|
||||
<RegisterForm
|
||||
:remote-username="registeruser.remote_user_info.LoginName"
|
||||
:username="registeruser.remote_user_info.LoginName"
|
||||
v-on:login="doRegister(registeruser.remote_source_name, $event.username, registeruser.remote_source_login_name, registeruser.remote_source_login_password)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div
|
||||
class="my-6 flex justify-center items-center"
|
||||
v-for="rs in remotesources"
|
||||
v-bind:key="rs.id"
|
||||
>
|
||||
<LoginForm
|
||||
action="Register"
|
||||
:name="rs.name"
|
||||
v-if="rs.auth_type == 'password'"
|
||||
v-on:login="doAuthorize(rs.name, $event.username, $event.password)"
|
||||
/>
|
||||
<button
|
||||
v-else
|
||||
class="button is-info is-fullwidth"
|
||||
@click="doAuthorize(rs.name)"
|
||||
>Register with {{rs.name}}</button>
|
||||
<div v-else class="w-full max-w-xs">
|
||||
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
||||
@click="doAuthorize(rs.name)"
|
||||
>Register with {{rs.name}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,7 +52,7 @@ import RegisterForm from "@/components/registerform";
|
|||
|
||||
import { fetchRemoteSources, register } from "@/util/data";
|
||||
|
||||
import { authorizeurl, registerurl, fetch, doLogout } from "@/util/auth";
|
||||
import { authorizeurl, fetch, doLogout } from "@/util/auth";
|
||||
|
||||
export default {
|
||||
name: "Register",
|
||||
|
|
|
|||
|
|
@ -1,95 +1,99 @@
|
|||
<template>
|
||||
<div>
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<nav class="mb-4 bg-grey-light rounded font-sans w-full">
|
||||
<ol class="list-reset flex text-grey-dark">
|
||||
<li>
|
||||
<a>user</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mx-2">/</span>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="ownerLink('user', username)">{{username}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="name">
|
||||
<span class="is-size-3">{{username}}</span>
|
||||
<div class="is-pulled-right">
|
||||
<createprojectbutton v-on:click="goToCreate($event)"/>
|
||||
</div>
|
||||
<div class="mb-8 flex justify-between">
|
||||
<span class="text-3xl">{{username}}</span>
|
||||
<createprojectbutton v-on:click="goToCreate($event)"/>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li :class="[{ 'is-active': $route.name === 'user projects' || $route.name === 'user' }]">
|
||||
<div class="flex justify-between">
|
||||
<ul class="flex-grow tab">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name === 'user projects' || $route.name === 'user' }]"
|
||||
>
|
||||
<router-link :to="ownerProjectsLink('user', username)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-home"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-home"/>
|
||||
<span>Projects</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li :class="[{ 'is-active': $route.name === 'user local runs' }]">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name === 'user local runs' }]"
|
||||
>
|
||||
<router-link :to="userLocalRunsLink(username)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-run-fast"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-run-fast"/>
|
||||
<span>Local Runs</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name === 'user local run' || $route.name == 'user local run task'"
|
||||
:class="[{ 'is-active': $route.name === 'user local run' }]"
|
||||
>
|
||||
<li v-if="$route.name === 'user local run' || $route.name == 'user local run task'">
|
||||
<tabarrow/>
|
||||
</li>
|
||||
<li
|
||||
class="tab-element"
|
||||
v-if="$route.name === 'user local run' || $route.name == 'user local run task'"
|
||||
:class="[{ 'is-active': $route.name === 'user local run' }]"
|
||||
:class="[{ 'tab-element-selected': $route.name === 'user local run' }]"
|
||||
>
|
||||
<router-link :to="userLocalRunLink(username, $route.params.runid)">
|
||||
<p v-if="run">
|
||||
<span v-if="run">
|
||||
Run
|
||||
<strong>#{{run.counter}}</strong>
|
||||
</p>
|
||||
</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name === 'user local run task'"
|
||||
:class="[{ 'is-active': $route.name === 'user local run' }]"
|
||||
>
|
||||
<li v-if="$route.name === 'user local run task'">
|
||||
<tabarrow/>
|
||||
</li>
|
||||
<li v-if="$route.name == 'user local run task'" class="is-active">
|
||||
<li
|
||||
class="tab-element"
|
||||
v-if="$route.name == 'user local run task'"
|
||||
:class="[{ 'tab-element-selected': $route.name === 'user local run task' }]"
|
||||
>
|
||||
<router-link
|
||||
:to="userLocalRunTaskLink(username, $route.params.runid, $route.params.taskid)"
|
||||
>
|
||||
<p v-if="run">
|
||||
<span v-if="run">
|
||||
Task
|
||||
<strong>{{run.tasks[$route.params.taskid].name}}</strong>
|
||||
</p>
|
||||
</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="is-right">
|
||||
<li :class="[{ 'is-active': $route.name.endsWith('user project group settings') }]">
|
||||
<ul class="flex tab">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('user project group settings') }]"
|
||||
>
|
||||
<router-link :to="projectGroupSettingsLink('user', username, [])">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-settings"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>Root Project Group Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li :class="[{ 'is-active': $route.name.endsWith('user settings') }]">
|
||||
<li
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('user settings') }]"
|
||||
>
|
||||
<router-link :to="ownerSettingsLink('user', username)">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-settings"/>
|
||||
</span>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>User Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
<router-view class="mt-8"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -161,10 +165,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.name {
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: '2rem',
|
||||
},
|
||||
borderWidth: {
|
||||
default: '1px',
|
||||
'0': '0',
|
||||
'2': '2px',
|
||||
'4': '4px',
|
||||
'5': '5px',
|
||||
'6': '6px',
|
||||
},
|
||||
spacing: {
|
||||
px: '1px',
|
||||
'2px': '2px',
|
||||
'3px': '3px',
|
||||
'0': '0',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'20': '5rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
'40': '10rem',
|
||||
'48': '12rem',
|
||||
'56': '14rem',
|
||||
'64': '16rem',
|
||||
},
|
||||
colors: {
|
||||
dark: '#4a4a4a',
|
||||
}
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus', 'disabled'],
|
||||
borderColor: ['responsive', 'hover', 'focus', 'disabled'],
|
||||
boxShadow: ['responsive', 'hover', 'focus', 'disabled'],
|
||||
cursor: ['responsive', 'disabled'],
|
||||
opacity: ['responsive', 'disabled'],
|
||||
textColor: ['responsive', 'hover', 'focus', 'disabled'],
|
||||
},
|
||||
plugins: [
|
||||
function ({ addVariant, e }) {
|
||||
addVariant('disabled', ({ modifySelectors, separator }) => {
|
||||
modifySelectors(({ className }) => {
|
||||
return `.${e(`disabled${separator}${className}`)}:disabled`
|
||||
})
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue