Can now convert csv to proto + open proto file + filter
This commit is contained in:
cdricms
@@ -1,79 +1,35 @@
|
||||
<script lang="ts">
|
||||
import logo from './assets/images/logo-universal.png'
|
||||
import {Greet} from '../wailsjs/go/main/App.js'
|
||||
import { onMount } from "svelte";
|
||||
import * as rt from "../wailsjs/runtime/runtime"
|
||||
|
||||
let resultText: string = "Please enter your name below 👇"
|
||||
let name: string
|
||||
import Table from "./Table.svelte";
|
||||
|
||||
function greet(): void {
|
||||
Greet(name).then(result => resultText = result)
|
||||
}
|
||||
let path: string;
|
||||
let page = 0;
|
||||
|
||||
let limitReached: boolean;
|
||||
|
||||
$: console.log(limitReached)
|
||||
|
||||
onMount(async () => {
|
||||
rt.EventsOn("proto-opened", (_path: string) => {
|
||||
path = _path;
|
||||
})
|
||||
|
||||
rt.EventsOn("csv-converted", (_path: string) => {
|
||||
console.log(_path)
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<img alt="Wails logo" id="logo" src="{logo}">
|
||||
<div class="result" id="result">{resultText}</div>
|
||||
<div class="input-box" id="input">
|
||||
<input autocomplete="off" bind:value={name} class="input" id="name" type="text"/>
|
||||
<button class="btn" on:click={greet}>Greet</button>
|
||||
</div>
|
||||
{#if path}
|
||||
<Table {path} {page} bind:limitReached={limitReached} />
|
||||
<button disabled={page < 1} on:click={() => page--}>Prev</button>
|
||||
<span>{page+1}</span>
|
||||
<button disabled={limitReached} on:click={() => page++}>Next</button>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
||||
#logo {
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
padding: 10% 0 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-origin: content-box;
|
||||
}
|
||||
|
||||
.result {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
|
||||
.input-box .btn {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
margin: 0 0 0 20px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-box .btn:hover {
|
||||
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.input-box .input {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
background-color: rgba(240, 240, 240, 1);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.input-box .input:hover {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.input-box .input:focus {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
92
frontend/src/Table.svelte
Normal file
92
frontend/src/Table.svelte
Normal file
@@ -0,0 +1,92 @@
|
||||
<script lang="ts">
|
||||
import { GetEmployees } from "../wailsjs/go/main/App.js";
|
||||
// import type { proto } from "../wailsjs/go/models";
|
||||
// let employees: proto.Employee[] = [];
|
||||
export let path: string;
|
||||
export let page: number;
|
||||
let limit: number = 10;
|
||||
export let limitReached: boolean;
|
||||
|
||||
let _column: string | null = null;
|
||||
let _query: string | null = null;
|
||||
let column: string | null = null;
|
||||
let query: string | null = null;
|
||||
|
||||
async function listEmployees(path: string, limit: number, page: number, column?: string, query?: string) {
|
||||
try {
|
||||
const employees = await GetEmployees(path, limit, page, column, query);
|
||||
limitReached = employees.length < limit;
|
||||
return employees
|
||||
} catch (error) {
|
||||
throw error.message;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section>
|
||||
{#await listEmployees(path, limit, page, column, query)}
|
||||
<p>Loading...</p>
|
||||
{:then employees}
|
||||
<div>
|
||||
<select
|
||||
name="query"
|
||||
on:change={({ currentTarget }) => (_column = currentTarget.value)}
|
||||
>
|
||||
{#each Object.keys(employees[0]) as key}
|
||||
<option value={key}>{key}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<input placeholder="Query" type="text" bind:value={_query} />
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
column = _column;
|
||||
query = _query;
|
||||
}}>Search</button
|
||||
>
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
{#each Object.keys(employees[0]) as key}
|
||||
<th>{key}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
{#each employees as employee}
|
||||
<tr>
|
||||
{#each Object.values(employee) as value}
|
||||
<td>{value}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
{:catch error}
|
||||
<p>{error}</p>
|
||||
{/await}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #343434;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #110909;
|
||||
}
|
||||
</style>
|
||||
12
frontend/wailsjs/go/main/App.d.ts
vendored
12
frontend/wailsjs/go/main/App.d.ts
vendored
@@ -1,4 +1,14 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
import {proto} from '../models';
|
||||
import {frontend} from '../models';
|
||||
|
||||
export function Greet(arg1:string):Promise<string>;
|
||||
export function GetEmployees(arg1:string,arg2:number,arg3:number,arg4:any,arg5:any):Promise<Array<proto.Employee>>;
|
||||
|
||||
export function GetProtoPath():Promise<string>;
|
||||
|
||||
export function IsPathValid(arg1:string):Promise<boolean>;
|
||||
|
||||
export function OpenPath(arg1:Array<frontend.FileFilter>):Promise<string>;
|
||||
|
||||
export function SaveData(arg1:Array<number>,arg2:string):Promise<void>;
|
||||
|
||||
@@ -2,6 +2,22 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
export function Greet(arg1) {
|
||||
return window['go']['main']['App']['Greet'](arg1);
|
||||
export function GetEmployees(arg1, arg2, arg3, arg4, arg5) {
|
||||
return window['go']['main']['App']['GetEmployees'](arg1, arg2, arg3, arg4, arg5);
|
||||
}
|
||||
|
||||
export function GetProtoPath() {
|
||||
return window['go']['main']['App']['GetProtoPath']();
|
||||
}
|
||||
|
||||
export function IsPathValid(arg1) {
|
||||
return window['go']['main']['App']['IsPathValid'](arg1);
|
||||
}
|
||||
|
||||
export function OpenPath(arg1) {
|
||||
return window['go']['main']['App']['OpenPath'](arg1);
|
||||
}
|
||||
|
||||
export function SaveData(arg1, arg2) {
|
||||
return window['go']['main']['App']['SaveData'](arg1, arg2);
|
||||
}
|
||||
|
||||
87
frontend/wailsjs/go/models.ts
Executable file
87
frontend/wailsjs/go/models.ts
Executable file
@@ -0,0 +1,87 @@
|
||||
export namespace proto {
|
||||
|
||||
export class Employee {
|
||||
emp_id?: number;
|
||||
name_prefix?: string;
|
||||
first_name?: string;
|
||||
middle_initial?: string;
|
||||
last_name?: string;
|
||||
gender?: number;
|
||||
email?: string;
|
||||
fathers_name?: string;
|
||||
mothers_name?: string;
|
||||
mothers_maiden_name?: string;
|
||||
birthdate?: string;
|
||||
birth_time?: string;
|
||||
weight_kg?: number;
|
||||
joining_date?: string;
|
||||
joining_quarter?: number;
|
||||
joining_half?: number;
|
||||
joining_year?: number;
|
||||
joining_month?: number;
|
||||
joining_month_name?: number;
|
||||
joining_month_name_short?: number;
|
||||
joining_month_day?: number;
|
||||
joining_week_day?: number;
|
||||
joining_week_day_short?: number;
|
||||
years_of_service?: number;
|
||||
salary?: number;
|
||||
latest_hike_percentage?: string;
|
||||
ssn?: string;
|
||||
phone_number?: string;
|
||||
place_name?: string;
|
||||
county?: string;
|
||||
city?: string;
|
||||
state?: string;
|
||||
zip?: number;
|
||||
region?: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new Employee(source);
|
||||
}
|
||||
|
||||
constructor(source: any = {}) {
|
||||
if ('string' === typeof source) source = JSON.parse(source);
|
||||
this.emp_id = source["emp_id"];
|
||||
this.name_prefix = source["name_prefix"];
|
||||
this.first_name = source["first_name"];
|
||||
this.middle_initial = source["middle_initial"];
|
||||
this.last_name = source["last_name"];
|
||||
this.gender = source["gender"];
|
||||
this.email = source["email"];
|
||||
this.fathers_name = source["fathers_name"];
|
||||
this.mothers_name = source["mothers_name"];
|
||||
this.mothers_maiden_name = source["mothers_maiden_name"];
|
||||
this.birthdate = source["birthdate"];
|
||||
this.birth_time = source["birth_time"];
|
||||
this.weight_kg = source["weight_kg"];
|
||||
this.joining_date = source["joining_date"];
|
||||
this.joining_quarter = source["joining_quarter"];
|
||||
this.joining_half = source["joining_half"];
|
||||
this.joining_year = source["joining_year"];
|
||||
this.joining_month = source["joining_month"];
|
||||
this.joining_month_name = source["joining_month_name"];
|
||||
this.joining_month_name_short = source["joining_month_name_short"];
|
||||
this.joining_month_day = source["joining_month_day"];
|
||||
this.joining_week_day = source["joining_week_day"];
|
||||
this.joining_week_day_short = source["joining_week_day_short"];
|
||||
this.years_of_service = source["years_of_service"];
|
||||
this.salary = source["salary"];
|
||||
this.latest_hike_percentage = source["latest_hike_percentage"];
|
||||
this.ssn = source["ssn"];
|
||||
this.phone_number = source["phone_number"];
|
||||
this.place_name = source["place_name"];
|
||||
this.county = source["county"];
|
||||
this.city = source["city"];
|
||||
this.state = source["state"];
|
||||
this.zip = source["zip"];
|
||||
this.region = source["region"];
|
||||
this.username = source["username"];
|
||||
this.password = source["password"];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user