Browse Source

code cleanup

code-review
Stephan Richter 3 months ago
parent
commit
631a527a5d
  1. 1
      frontend/src/Components/CompanySelector.svelte
  2. 5
      frontend/src/Components/EstimatedTask.svelte
  3. 4
      frontend/src/Components/MarkdownEditor.svelte
  4. 8
      frontend/src/Components/PermissionSelector.svelte
  5. 2
      frontend/src/Components/PriceEditor.svelte
  6. 16
      frontend/src/routes/document/Add.svelte
  7. 25
      frontend/src/routes/document/EstimateList.svelte
  8. 25
      frontend/src/routes/document/ItemList.svelte
  9. 29
      frontend/src/routes/document/List.svelte
  10. 19
      frontend/src/routes/document/Position.svelte
  11. 35
      frontend/src/routes/document/PositionList.svelte
  12. 67
      frontend/src/routes/document/PositionSelector.svelte
  13. 39
      frontend/src/routes/document/Send.svelte
  14. 19
      frontend/src/routes/document/StateSelector.svelte
  15. 25
      frontend/src/routes/document/TemplateSelector.svelte
  16. 31
      frontend/src/routes/document/TimeList.svelte
  17. 16
      frontend/src/routes/document/TypeSelector.svelte
  18. 71
      frontend/src/routes/document/View.svelte

1
frontend/src/Components/CompanySelector.svelte

@ -1,5 +1,6 @@ @@ -1,5 +1,6 @@
<script>
import {onMount} from 'svelte';
import { api } from '../urls.svelte.js';
import {t} from '../translations.svelte.js';

5
frontend/src/Components/EstimatedTask.svelte

@ -1,7 +1,10 @@ @@ -1,7 +1,10 @@
<script>
import {t} from '../translations.svelte.js';
let { task, onSelect = (task) => {} } = $props();
let {
task,
onSelect = (task) => {}
} = $props();
</script>
<div>

4
frontend/src/Components/MarkdownEditor.svelte

@ -40,8 +40,8 @@ @@ -40,8 +40,8 @@
const url = api('markdown/render');
const resp = await fetch(url,{
credentials: 'include',
method: 'POST',
body: editValue.source
method : 'POST',
body : editValue.source
});
editValue.rendered = await resp.text();
}

8
frontend/src/Components/PermissionSelector.svelte

@ -3,9 +3,9 @@ @@ -3,9 +3,9 @@
import {t} from '../translations.svelte.js';
let {
caption = t('select_permission'),
selected = $bindable(0),
onchange = (val) => console.log('changed to',val),
caption = t('select_permission'),
selected = $bindable(0),
onchange = (val) => console.log('changed to',val),
permissions = null
} = $props();
@ -24,4 +24,4 @@ @@ -24,4 +24,4 @@
</select>
{:else}
<span>{message}</span>
{/if}
{/if}

2
frontend/src/Components/PriceEditor.svelte

@ -38,7 +38,7 @@ @@ -38,7 +38,7 @@
<style>
input{width:100px}
div{
min-width: 40px;
min-width: 40px;
min-height: 20px;
}
.editable:hover{

16
frontend/src/routes/document/Add.svelte

@ -9,8 +9,8 @@ @@ -9,8 +9,8 @@
let company = $state(null);
let docType = $state(null);
let error = $state(null);
let router = useTinyRouter();
let error = $state(null);
let router = useTinyRouter();
let document = $state({
type : +router.query.document_type,
@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
name : ''
},
sender : {
name : 'sender',
name : 'sender',
company : +router.query.company_id
}
});
@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
const resp = await fetch(url,{ credentials: 'include'});
if (resp.ok){
const types = await resp.json();
docType = t('type_'+types[document.type]);
docType = t('type_'+types[document.type]);
} else {
error = await resp.text();
}
@ -60,7 +60,7 @@ @@ -60,7 +60,7 @@
var addr = '';
if (contact.ORG) addr += contact.ORG.trim()+"\n";
if (contact.N) {
var name = (contact.N.given+" "+contact.N.family).trim()+"\n";
var name = (contact.N.given+" "+contact.N.family).trim()+"\n";
if (name != addr) addr += name;
}
if (contact.ADR.street) addr += contact.ADR.street+"\n";
@ -75,9 +75,9 @@ @@ -75,9 +75,9 @@
async function submit(){
const url = api('document');
const resp = await fetch(url,{
method: 'POST',
method : 'POST',
credentials: 'include',
body: JSON.stringify(document)
body : JSON.stringify(document)
});
if (resp.ok){
const json = await resp.json();
@ -144,4 +144,4 @@ @@ -144,4 +144,4 @@
</label>
</fieldset>
<button onclick={submit}>{t('create_new_document')}</button>
</fieldset>
</fieldset>

25
frontend/src/routes/document/EstimateList.svelte

@ -1,19 +1,26 @@ @@ -1,19 +1,26 @@
<script>
import { t } from '../../translations.svelte.js';
import { onMount } from 'svelte';
import { api } from '../../urls.svelte.js';
import { t } from '../../translations.svelte.js';
import EstimatedTask from '../../Components/EstimatedTask.svelte';
let { company_id, onSelect = (task) => {} } = $props();
let {
company_id,
onSelect = (task) => {}
} = $props();
let error = $state(null);
let projects = $state(null);
let error = $state(null);
async function loadItems(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/estimated_times`;
let data = { company_id: company_id };
const url = api('task/estimated_times');
let data = { company_id: company_id };
const resp = await fetch(url,{
credentials:'include',
method: 'POST',
body: JSON.stringify(data)
credentials: 'include',
method : 'POST',
body : JSON.stringify(data)
});
if (resp.ok){
projects = await resp.json();
@ -53,4 +60,4 @@ @@ -53,4 +60,4 @@
</fieldset>
{/each}
{/if}
</div>
</div>

25
frontend/src/routes/document/ItemList.svelte

@ -1,20 +1,27 @@ @@ -1,20 +1,27 @@
<script>
import { t } from '../../translations.svelte.js';
import { onMount } from 'svelte';
import Item from '../../Components/Item.svelte';
let { company_id, onSelect = (item) => {} } = $props();
import { api } from '../../urls.svelte.js';
import { t } from '../../translations.svelte.js';
import Item from '../../Components/Item.svelte';
let {
company_id,
onSelect = (item) => {}
} = $props();
let items = $state(null);
let error = $state(null);
async function loadItems(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/items/list`;
let data = { company_id: company_id };
const url = api('items/list');
let data = { company_id: company_id };
const resp = await fetch(url,{
credentials:'include',
method: 'POST',
body: JSON.stringify(data)
credentials: 'include',
method : 'POST',
body : JSON.stringify(data)
});
if (resp.ok){
items = await resp.json();
@ -37,4 +44,4 @@ @@ -37,4 +44,4 @@
<Item item={item} onclick={() => onSelect(item)} />
{/each}
{/if}
</div>
</div>

29
frontend/src/routes/document/List.svelte

@ -1,21 +1,24 @@ @@ -1,21 +1,24 @@
<script>
import { onMount } from 'svelte';
import { useTinyRouter } from 'svelte-tiny-router';
import { onMount } from 'svelte';
import { t } from '../../translations.svelte.js';
import TypeSelector from './TypeSelector.svelte';
import { api } from '../../urls.svelte.js';
import { t } from '../../translations.svelte.js';
import TypeSelector from './TypeSelector.svelte';
let error = null;
let companies = {};
let documents = null;
let error = null;
let companies = {};
let company_id = +router.query.company_id;
let documents = null;
let router = useTinyRouter();
let docType = 0;
let selected_company = null;
let router = useTinyRouter();
let company_id = +router.query.company_id;
let docType = 0;
async function loadCompanies(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
const url = api('company/list');
const resp = await fetch(url,{ credentials: 'include'});
if (resp.ok){
companies = await resp.json();
@ -37,7 +40,7 @@ @@ -37,7 +40,7 @@
async function load(company){
router.navigate(`/document?company_id=${company.id}`);
selected_company = company;
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/list`;
const url = api('document/list');
const resp = await fetch(url,{
credentials: 'include',
method: 'POST',
@ -60,7 +63,7 @@ @@ -60,7 +63,7 @@
async function deleteDoc(ev,doc){
if (confirm(t('really_delete',doc.number))){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}`;
const url = api(`document/${doc.id}`;
const resp = await fetch(url,{
credentials: 'include',
method: 'DELETE'
@ -122,4 +125,4 @@ @@ -122,4 +125,4 @@
</tbody>
</table>
{/if}
</fieldset>
</fieldset>

19
frontend/src/routes/document/Position.svelte

@ -1,10 +1,19 @@ @@ -1,10 +1,19 @@
<script>
import { onMount } from 'svelte';
import { useTinyRouter } from 'svelte-tiny-router';
import { onMount } from 'svelte';
import LineEditor from '../../Components/LineEditor.svelte';
import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
import PriceEditor from '../../Components/PriceEditor.svelte';
var { currency, editable, pos = $bindable(null), submit = (key,newVal) => {}, movePos = (number,step) => {}, drop = (number) => {} } = $props();
import LineEditor from '../../Components/LineEditor.svelte';
import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
import PriceEditor from '../../Components/PriceEditor.svelte';
var {
currency,
drop = (number) => {},
editable,
movePos = (number,step) => {},
pos = $bindable(null),
submit = (key,newVal) => {}
} = $props();
let prefix = `pos.${pos.number}`
function moveup(){

35
frontend/src/routes/document/PositionList.svelte

@ -1,26 +1,33 @@ @@ -1,26 +1,33 @@
<script>
import Position from './Position.svelte';
import { onMount } from 'svelte';
import { useTinyRouter } from 'svelte-tiny-router';
import { onMount } from 'svelte';
import { t } from '../../translations.svelte.js';
var { document = $bindable(null), submit = (key,newVal) => {}, error = $bindable(null) } = $props();
import { api } from '../../urls.svelte-js';
import { t } from '../../translations.svelte.js';
import Position from './Position.svelte';
var {
document = $bindable(null),
error = $bindable(null)
submit = (key,newVal) => {},
} = $props();
let editable = $derived(document.state == 1);
async function updatePositions(resp){
let json = await resp.json();
let json = await resp.json();
document.positions = {};
error = null;
setTimeout(() => document.positions = json,100)
error = null;
}
async function movePos(number,step){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${document.id}/position`;
const url = api(`document/${document.id}/position`;
const resp = await fetch(url,{
method: 'PATCH',
credentials:'include',
body:JSON.stringify({position:number,move:step})
method : 'PATCH',
credentials: 'include',
body : JSON.stringify({position:number,move:step})
});
if (resp.ok){
updatePositions(resp);
@ -32,11 +39,11 @@ @@ -32,11 +39,11 @@
async function drop(number){
let confirmed = confirm(t('confirm_deletion').replace('{pos}',document.positions[number].item));
if (!confirmed) return;
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${document.id}/position`;
const url = api(`document/${document.id}/position`;
const resp = await fetch(url,{
method: 'DELETE',
credentials:'include',
body:JSON.stringify({position:number})
method : 'DELETE',
credentials: 'include',
body : JSON.stringify({position:number})
});
if (resp.ok){
updatePositions(resp);

67
frontend/src/routes/document/PositionSelector.svelte

@ -1,10 +1,15 @@ @@ -1,10 +1,15 @@
<script>
import { t } from '../../translations.svelte.js';
import { t } from '../../translations.svelte.js';
import EstimateList from './EstimateList.svelte';
import ItemList from './ItemList.svelte';
import TimeList from './TimeList.svelte';
import ItemList from './ItemList.svelte';
import TimeList from './TimeList.svelte';
let { close = () => {}, doc = $bindable({}), onSelect = (item) => {} } = $props();
let {
close = () => {},
doc = $bindable({}),
onSelect = (item) => {}
} = $props();
let source = $state(0);
@ -15,52 +20,52 @@ @@ -15,52 +20,52 @@
function estimateSelected(estimate){
select({
item_code:t('estimated_time'),
title:estimate.name,
description:estimate.description.source,
amount:estimate.estimated_time,
unit:t('hours')
item_code : t('estimated_time'),
title : estimate.name,
description : estimate.description.source,
amount : estimate.estimated_time,
unit : t('hours')
});
}
function itemSelected(item){
select({
item_code:item.code,
title:item.name,
description:item.description.source,
amount:1,
unit:item.unit,
unit_price:item.unit_price,
tax:item.tax
item_code : item.code,
title : item.name,
description : item.description.source,
amount : 1,
unit : item.unit,
unit_price : item.unit_price,
tax : item.tax
});
}
function timeSelected(time){
select({
item_code:t('timetrack'),
title:time.subject,
description:time.description.source,
amount:time.duration,
unit:t('hours'),
time_id:time.id
item_code : t('timetrack'),
title : time.subject,
description : time.description.source,
amount : time.duration,
unit : t('hours'),
time_id : time.id
});
}
</script>
<style>
div{
position: fixed;
top: 0;
bottom: 20px;
left: 0;
right: 0;
padding: 10px;
overflow: auto;
position : fixed;
top : 0;
bottom : 20px;
left : 0;
right : 0;
padding : 10px;
overflow : auto;
}
span{
position: sticky;
top: 0;
position : sticky;
top : 0;
}
</style>

39
frontend/src/routes/document/Send.svelte

@ -1,34 +1,35 @@ @@ -1,34 +1,35 @@
<script>
import { onMount } from 'svelte';
import { t } from '../../translations.svelte.js';
import { onMount } from 'svelte';
import { useTinyRouter } from 'svelte-tiny-router';
const router = useTinyRouter();
import { api } from '../../urls.svelte.js';
import { t } from '../../translations.svelte.js';
let { id } = $props();
let error = $state(null);
let doc = $state(null);
let email = $state(null);
let content = $state(null);
let subject = $state(null);
let content = $state(null);
let doc = $state(null);
let email = $state(null);
let error = $state(null);
const router = useTinyRouter();
let subject = $state(null);
let { id } = $props();
async function loadDoc(){
let url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}`;
let url = api(`document/${id}`);
let resp = await fetch(url,{credentials:'include'});
if (resp.ok){
doc = await resp.json();
email = doc.customer.email;
doc = await resp.json();
email = doc.customer.email;
subject = t('new_document_from',t(doc.type),doc.company.name,doc.number),
error = null;
error = null;
} else {
error = await resp.text();
return;
}
url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}/settings`;
url = api(`document/${id}/settings`);
resp = await fetch(url,{credentials:'include'});
if (resp.ok){
const settings = await resp.json();
content = settings.content;
content = settings.content;
} else {
error = await resp.text();
}
@ -36,11 +37,11 @@ @@ -36,11 +37,11 @@
async function doSend(){
var data = {email:email,subject:subject,content:content};
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}/send`;
const url = api(`document/${id}/send`);
const resp = await fetch(url,{
credentials:'include',
method: 'POST',
body: JSON.stringify(data)
credentials : 'include',
method : 'POST',
body : JSON.stringify(data)
});
if (resp.ok){
router.navigate(`/document?company_id=${doc.company.id}`);

19
frontend/src/routes/document/StateSelector.svelte

@ -1,16 +1,23 @@ @@ -1,16 +1,23 @@
<script>
import {onMount} from 'svelte';
import {t} from '../../translations.svelte.js';
let { caption = t('select_state'), selected = $bindable(0), onchange = (val) => console.log('changed to '+val)} = $props();
import {api} from '../../urls.svelte.js';
import {t} from '../../translations.svelte.js';
let {
caption = t('select_state'),
onchange = (val) => console.log('changed to '+val),
selected = $bindable(0)
} = $props();
let message = $state(t('loading'));
let states = $state(null);
let states = $state(null);
async function loadStates(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/states`;
var resp = await fetch(url,{credentials: 'include'});
const url = api('document/states');
const resp = await fetch(url,{credentials: 'include'});
if (resp.ok){
states = await resp.json();
states = await resp.json();
} else {
message = await resp.text();
}

25
frontend/src/routes/document/TemplateSelector.svelte

@ -1,21 +1,30 @@ @@ -1,21 +1,30 @@
<script>
import {onMount} from 'svelte';
import {t} from '../../translations.svelte.js';
let { caption, company, value = $bindable(0), onchange = () => console.log('changed')} = $props();
let message = t('loading');
import {api} from '../../urls.svelte.js';
import {t} from '../../translations.svelte.js';
let {
caption,
company,
value = $bindable(0),
onchange = () => console.log('changed')
} = $props();
let message = t('loading');
let templates = $state(null);
async function loadTemplates(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/templates`;
const url = api('document/templates');
var resp = await fetch(url,{
credentials: 'include',
method: 'POST',
body: JSON.stringify({company:company})
credentials : 'include',
method : 'POST',
body : JSON.stringify({company:company})
});
if (resp.ok){
templates = await resp.json();
} else {
message = await resp.text();
message = await resp.text();
}
}

31
frontend/src/routes/document/TimeList.svelte

@ -1,20 +1,25 @@ @@ -1,20 +1,25 @@
<script>
import { t } from '../../translations.svelte.js';
import { onMount } from 'svelte';
let { company_id, onSelect = (time) => {} } = $props();
import { api } from '../../urls.svelte.js';
import { t } from '../../translations.svelte.js';
let {
company_id,
onSelect = (time) => {}
} = $props();
let error = $state(null);
let projects = $state(null);
let times = $state(null);
let error = $state(null);
let times = $state(null);
async function loadProjects(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/list`;
let data = { company_id: company_id };
const url = api'project/list');
let data = { company_id: company_id };
const resp = await fetch(url,{
credentials:'include',
method: 'POST',
body: JSON.stringify(data)
credentials : 'include',
method : 'POST',
body : JSON.stringify(data)
});
if (resp.ok){
projects = await resp.json();
@ -24,12 +29,12 @@ @@ -24,12 +29,12 @@
}
async function loadTimes(projectId){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/times/list`;
const url = api('times/list');
let data = { company_id: company_id, project_id: projectId };
const resp = await fetch(url,{
credentials:'include',
method: 'POST',
body: JSON.stringify(data)
credentials : 'include',
method : 'POST',
body : JSON.stringify(data)
});
if (resp.ok){
times = await resp.json();

16
frontend/src/routes/document/TypeSelector.svelte

@ -1,12 +1,20 @@ @@ -1,12 +1,20 @@
<script>
import {onMount} from 'svelte';
import {t} from '../../translations.svelte.js';
let { caption, value = $bindable(0), onchange = () => console.log('changed')} = $props();
import {api} from '../../urls.svelte.js';
import {t} from '../../translations.svelte.js';
let {
caption,
onchange = () => console.log('changed'),
value = $bindable(0)
} = $props();
let message = t('loading');
let types = $state(null);
let types = $state(null);
async function loadTypes(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/types`;
const url = api('api/document/types');
var resp = await fetch(url,{credentials: 'include'});
if (resp.ok){
types = await resp.json();

71
frontend/src/routes/document/View.svelte

@ -1,9 +1,11 @@ @@ -1,9 +1,11 @@
<script>
import { onMount } from 'svelte';
import { t } from '../../translations.svelte.js';
import { user } from '../../user.svelte.js';
import { onMount } from 'svelte';
import { useTinyRouter } from 'svelte-tiny-router';
import {api} from '../../urls.svelte.js';
import { t } from '../../translations.svelte.js';
import { user } from '../../user.svelte.js';
import LineEditor from '../../Components/LineEditor.svelte';
import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
import MultilineEditor from '../../Components/MultilineEditor.svelte';
@ -13,23 +15,22 @@ @@ -13,23 +15,22 @@
import StateSelector from './StateSelector.svelte';
import TemplateSelector from './TemplateSelector.svelte';
const router = useTinyRouter();
let { id } = $props();
let error = $state(null);
let doc = $state(null);
let pdfDisabled = $state(false);
let sndDisabled = $state(false);
let doc = $state(null);
let editable = $derived(doc.state == 1);
let error = $state(null);
let { id } = $props();
let pdfDisabled = $state(false);
let position_select = $state(false);
let editable = $derived(doc.state == 1);
const router = useTinyRouter();
let sndDisabled = $state(false);
async function loadDoc(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}`;
const url = api(`document/${id}`;
const resp = await fetch(url,{credentials:'include'});
if (resp.ok){
doc = await resp.json();
doc = await resp.json();
error = null;
} else {
error = await resp.text();
@ -45,8 +46,8 @@ @@ -45,8 +46,8 @@
doc.state = newVal;
} else {
const dummy = doc.state;
doc.state = null; // we need to alter in between,
doc.state = dummy; // otherwise the state will not be re-set
doc.state = null; // we need to alter in between,
doc.state = dummy; // otherwise the state will not be re-set
}
}
@ -55,16 +56,16 @@ @@ -55,16 +56,16 @@
if (parts.length<1) return false;
let data = newValue;
while (parts.length > 0){
const inner = data;
data = {};
const inner = data;
data = {};
data[parts.pop()] = inner;
}
try {
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}`;
const url = api(`document/${doc.id}`;
const resp = await fetch(url,{
credentials:'include',
method:'PATCH',
body:JSON.stringify(data)
credentials : 'include',
method : 'PATCH',
body : JSON.stringify(data)
});
return resp.ok;
} catch (err){
@ -73,15 +74,15 @@ @@ -73,15 +74,15 @@
}
async function addPosition(selected){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}/position`;
const url = api(`document/${doc.id}/position`;
const resp = await fetch(url,{
method: 'POST',
credentials:'include',
body:JSON.stringify(selected)
method : 'POST',
credentials : 'include',
body : JSON.stringify(selected)
});
if (resp.ok){
doc.positions = await resp.json();
error = null;
error = null;
} else {
error = await resp.text();
}
@ -90,15 +91,15 @@ @@ -90,15 +91,15 @@
async function render(ev){
pdfDisabled = true;
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}/pdf`;
const resp = await fetch(url,{credentials:'include'});
const url = api(`document/${doc.id}/pdf`;
const resp = await fetch(url,{credentials:'include'});
if (resp.ok){
error = null;
const blob = await resp.blob();
const parts = resp.headers.get("Content-disposition").split(";");
const filename = parts[1].split('=')[1].split('"').join('');
var fileLink = document.createElement('a');
fileLink.href = URL.createObjectURL(blob);
error = null;
const blob = await resp.blob();
const parts = resp.headers.get("Content-disposition").split(";");
const filename = parts[1].split('=')[1].split('"').join('');
var fileLink = document.createElement('a');
fileLink.href = URL.createObjectURL(blob);
fileLink.download = filename;
fileLink.click();
} else {

Loading…
Cancel
Save