Skip to content

Commit

Permalink
Merge pull request #422 from openaddresses/actions-update
Browse files Browse the repository at this point in the history 
[UI] Less Stroke
  • Loading branch information
@ingalls
ingalls authored Feb 10, 2025
2 parents d58d29d + fe6f58f commit a91c7ff
Show file tree
Hide file tree
Showing 51 changed files with 5,481 additions and 3,061 deletions.
2,796 changes: 1,798 additions & 998 deletions api/web/package-lock.json
View file

Large diffs are not rendered by default.

27 changes: 6 additions & 21 deletions api/web/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
{
"name": "oa",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
"serve": "vite serve --port 5430",
"build": "vite build",
"lint": "vite lint"
"lint": "eslint src/"
},
"dependencies": {
"@tabler/core": "^1.0.0-beta17",
Expand All @@ -26,25 +27,9 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"eslint": "^8.11.0",
"eslint": "^9.0.0",
"eslint-plugin-vue": "^9.0.0",
"vite": "^5.4.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"vue/multi-word-component-names": 1
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
"typescript-eslint": "^8.23.0",
"vite": "^6.0.0"
}
}
501 changes: 325 additions & 176 deletions api/web/src/components/Data.vue
View file

Large diffs are not rendered by default.

30 changes: 23 additions & 7 deletions api/web/src/components/Err.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,37 @@
<div class='z2 fixed top right bottom left scroll-auto bg-darken50'>
<div class='flex flex--center-main pt36'>
<div class='bg-white round relative w600'>
<button @click='$emit("err", false)' class='absolute top right px12 py12'>
<svg class='icon link color-darken50'><use xlink:href='#icon-close'></use></svg>
<button
class='absolute top right px12 py12'
@click='$emit("err", false)'
>
<svg class='icon link color-darken50'><use xlink:href='#icon-close' /></svg>
</button>

<div class='flex flex--center-main'>
<div class='pt12'>
<svg class='icon h60 w60 color-gray'><use href='#icon-alert'/></svg>
<svg class='icon h60 w60 color-gray'><use href='#icon-alert' /></svg>
</div>
</div>

<div class='txt-l mb12 align-center'>Uh Oh!</div>
<div class='txt-m align-center' v-text='err.message'></div>
<div class='txt-l mb12 align-center'>
Uh Oh!
</div>
<div
class='txt-m align-center'
v-text='err.message'
/>

<a href='mailto:[email protected]' class='fl btn btn--stroke btn--gray round ml12'>Contact Us</a>
<button @click='$emit("err", false)' class='fr mb12 mr12 btn round btn--gray btn--stroke'>Ok</button>
<a
href='mailto:[email protected]'
class='fl btn btn--stroke btn--gray round ml12'
>Contact Us</a>
<button
class='fr mb12 mr12 btn round btn--gray btn--stroke'
@click='$emit("err", false)'
>
Ok
</button>
</div>
</div>
</div>
Expand Down
201 changes: 118 additions & 83 deletions api/web/src/components/Errors.vue
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,121 @@
<template>
<div>
<div class='page-wrapper'>
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col d-flex">
<TablerBreadCrumb/>
<div>
<div class='page-wrapper'>
<div class='page-header d-print-none'>
<div class='container-xl'>
<div class='row g-2 align-items-center'>
<div class='col d-flex'>
<TablerBreadCrumb />
</div>
</div>
</div>
</div>
</div>
</div>
<div class='page-body'>
<div class='container-xl'>
<div class='row row-deck row-cards'>
<div class='col-12'>
<div class='card'>
<div class='card-header'>
<h3 class='card-title'>Job Errors</h3>
<div class='page-body'>
<div class='container-xl'>
<div class='row row-deck row-cards'>
<div class='col-12'>
<div class='card'>
<div class='card-header'>
<h3 class='card-title'>
Job Errors
</h3>

<div class='ms-auto btn-list'>
<IconSearch @click='showFilter = !showFilter' class='cursor-pointer' size='32'/>
<IconRefresh @click='fetchProblems' class='cursor-pointer' size='32'/>
</div>
</div>
<template v-if='showFilter'>
<div class='card-body row'>
<div class='col-12 col-md-6'>
<QuerySource @source='paging.source = $event'/>
</div>
<div class='col-12 col-md-3'>
<QueryLayer @layer='paging.layer = $event' />
</div>
<div class='col-12 col-md-3'>
<QueryStatus @status='paging.status = $event'/>
<div class='ms-auto btn-list'>
<IconSearch
class='cursor-pointer'
size='32'
@click='showFilter = !showFilter'
/>
<IconRefresh
class='cursor-pointer'
size='32'
@click='fetchProblems'
/>
</div>
</div>
</template>
<template v-if='showFilter'>
<div class='card-body row'>
<div class='col-12 col-md-6'>
<QuerySource @source='paging.source = $event' />
</div>
<div class='col-12 col-md-3'>
<QueryLayer @layer='paging.layer = $event' />
</div>
<div class='col-12 col-md-3'>
<QueryStatus @status='paging.status = $event' />
</div>
</div>
</template>

<TablerLoading v-if='loading' desc='Loading Errors'/>
<TablerNone v-else-if='!list.total' label='Errors' :create='false'/>
<table v-else class="table table-hover table-vcenter card-table">
<thead>
<tr>
<th>Status</th>
<th>Job ID</th>
<th>Job Name</th>
<th>Attributes</th>
</tr>
</thead>
<tbody>
<template :key='error.job' v-for='error in list.errors'>
<tr @click='$router.push(`/job/${error.job}`);' class='cursor-pointer'>
<td><Status :status='error.status'/></td>
<td>Job <span v-text='error.job'/></td>
<td><span v-text='`${error.source_name} - ${error.layer} - ${error.name}`'/></td>
<td>
<div class='d-flex'>
<div class='ms-auto btn-list'>
<ErrorsModerate
:error='error'
@moderated="list.errors.splice(i, 1)"
/>
</div>
</div>
</td>
</tr>
<TablerLoading
v-if='loading'
desc='Loading Errors'
/>
<TablerNone
v-else-if='!list.total'
label='Errors'
:create='false'
/>
<table
v-else
class='table table-hover table-vcenter card-table'
>
<thead>
<tr>
<td colspan='4'>
<div :key='message' v-for='message in error.messages' class='text-center w-full' v-text='message'></div>
</td>
<th>Status</th>
<th>Job ID</th>
<th>Job Name</th>
<th>Attributes</th>
</tr>
</template>
</tbody>
</table>
<TableFooter :limit='paging.limit' :total='list.total' @page='paging.page = $event'/>
</thead>
<tbody>
<template
v-for='error in list.errors'
:key='error.job'
>
<tr
class='cursor-pointer'
@click='$router.push(`/job/${error.job}`);'
>
<td><Status :status='error.status' /></td>
<td>Job <span v-text='error.job' /></td>
<td><span v-text='`${error.source_name} - ${error.layer} - ${error.name}`' /></td>
<td>
<div class='d-flex'>
<div class='ms-auto btn-list'>
<ErrorsModerate
:error='error'
@moderated='list.errors.splice(i, 1)'
/>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='4'>
<div
v-for='message in error.messages'
:key='message'
class='text-center w-full'
v-text='message'
/>
</td>
</tr>
</template>
</tbody>
</table>
<TableFooter
:limit='paging.limit'
:total='list.total'
@page='paging.page = $event'
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
Expand All @@ -102,6 +137,19 @@ import {
export default {
name: 'Errors',
components: {
IconSearch,
IconRefresh,
Status,
QueryStatus,
QuerySource,
QueryLayer,
ErrorsModerate,
TablerBreadCrumb,
TablerLoading,
TablerNone,
TableFooter
},
props: [ ],
data: function() {
return {
Expand All @@ -122,9 +170,6 @@ export default {
}
};
},
mounted: async function() {
await this.fetchProblems();
},
watch: {
problems: function() {
this.$emit('errors', this.problems.length);
Expand All @@ -136,6 +181,9 @@ export default {
}
}
},
mounted: async function() {
await this.fetchProblems();
},
methods: {
fetchProblems: async function() {
try {
Expand Down Expand Up @@ -163,18 +211,5 @@ export default {
window.open(url, "_blank");
}
},
components: {
IconSearch,
IconRefresh,
Status,
QueryStatus,
QuerySource,
QueryLayer,
ErrorsModerate,
TablerBreadCrumb,
TablerLoading,
TablerNone,
TableFooter
},
}
</script>
Loading

0 comments on commit a91c7ff

Please sign in to comment.