ui cleanup

Dockerfile

@@ -6,7 +6,7 @@ COPY frontend/package.json frontend/pnpm-lock.yaml ./
 RUN pnpm install --frozen-lockfile --shamefully-hoist
 COPY frontend .
 RUN pnpm build
-
+RUN ls -la /app/.output/
 # Build API
 FROM golang:alpine AS builder
 RUN apk update
@@ -14,8 +14,9 @@ RUN apk upgrade
 RUN apk add --update git build-base gcc g++
 WORKDIR /go/src/app
 COPY ./backend .
-COPY --from=frontend-builder app/.output go/src/app/app/api/public
 RUN go get -d -v ./...
+RUN rm -rf ./app/api/public
+COPY --from=frontend-builder /app/.output/public ./app/api/public
 RUN CGO_ENABLED=1 GOOS=linux go build -o /go/bin/api -v ./app/api/*.go
 
 # Production Stage

README.md

@@ -19,15 +19,15 @@
 - [ ] Items CRUD
   - [x] Create
   - [ ] Update
-  - [ ] Delete
+  - [x] Delete
 - [ ] Asset Attachments for Items
 - [x] Bulk Import via CSV
 - [ ] Documentation
   - [ ] Docker Compose
   - [ ] Import CSV Format
   - [ ] TLDR; Getting Started
-- [ ] Release Flow
-  - [ ] CI/CD Docker Builds w/ Multi-arch
+- [x] Release Flow
+  - [x] CI/CD Docker Builds w/ Multi-arch
 - [ ] Db Migrations
   - [ ] How To
 - [ ] Repo House Keeping

backend/internal/services/service_items.go

@@ -50,7 +50,21 @@ func (svc *ItemService) Create(ctx context.Context, gid uuid.UUID, data types.It
 	return mappers.ToItemOut(item), nil
 }
 func (svc *ItemService) Delete(ctx context.Context, gid uuid.UUID, id uuid.UUID) error {
-	panic("implement me")
+	item, err := svc.repo.Items.GetOne(ctx, id)
+	if err != nil {
+		return err
+	}
+
+	if item.Edges.Group.ID != gid {
+		return ErrNotOwner
+	}
+
+	err = svc.repo.Items.Delete(ctx, id)
+	if err != nil {
+		return err
+	}
+
+	return nil
 }
 func (svc *ItemService) Update(ctx context.Context, gid uuid.UUID, data types.ItemUpdate) (*types.ItemOut, error) {
 	panic("implement me")

fly.toml

@@ -0,0 +1,40 @@
+# fly.toml file generated for homebox on 2022-09-08T16:00:08-08:00
+
+app = "homebox"
+kill_signal = "SIGINT"
+kill_timeout = 5
+processes = []
+
+
+[env]
+  PORT = "7745"
+
+[experimental]
+  allowed_public_ports = []
+  auto_rollback = true
+
+[[services]]
+  http_checks = []
+  internal_port = 7745
+  processes = ["app"]
+  protocol = "tcp"
+  script_checks = []
+  [services.concurrency]
+    hard_limit = 25
+    soft_limit = 20
+    type = "connections"
+
+  [[services.ports]]
+    force_https = true
+    handlers = ["http"]
+    port = 80
+
+  [[services.ports]]
+    handlers = ["tls", "http"]
+    port = 443
+
+  [[services.tcp_checks]]
+    grace_period = "1s"
+    interval = "15s"
+    restart_limit = 0
+    timeout = "2s"

frontend/components/Base/SectionHeader.vue

@@ -12,6 +12,9 @@
     <p v-if="$slots.description" class="mt-2 max-w-4xl text-sm text-gray-500">
       <slot name="description" />
     </p>
+    <div v-if="$slots.after">
+      <slot name="after" />
+    </div>
   </div>
 </template>
 

frontend/lib/api/classes/items.ts

@@ -33,15 +33,15 @@ export interface Item {
 
 export class ItemsApi extends BaseAPI {
   async getAll() {
-    return this.http.get<Results<Item>>(route('/items'));
+    return this.http.get<Results<Item>>({ url: route('/items') });
   }
 
   async create(item: ItemCreate) {
-    return this.http.post<ItemCreate, Item>(route('/items'), item);
+    return this.http.post<ItemCreate, Item>({ url: route('/items'), body: item });
   }
 
   async get(id: string) {
-    const payload = await this.http.get<Item>(route(`/items/${id}`));
+    const payload = await this.http.get<Item>({ url: route(`/items/${id}`) });
 
     if (!payload.data) {
       return payload;
@@ -55,10 +55,17 @@ export class ItemsApi extends BaseAPI {
   }
 
   async delete(id: string) {
-    return this.http.delete<void>(route(`/items/${id}`));
+    return this.http.delete<void>({ url: route(`/items/${id}`) });
   }
 
   async update(id: string, item: ItemCreate) {
-    return this.http.put<ItemCreate, Item>(route(`/items/${id}`), item);
+    return this.http.put<ItemCreate, Item>({ url: route(`/items/${id}`), body: item });
+  }
+
+  async import(file: File) {
+    const formData = new FormData();
+    formData.append('csv', file);
+
+    return this.http.post<FormData, void>({ url: route('/items/import'), data: formData });
   }
 }

frontend/lib/api/classes/labels.ts

@@ -16,22 +16,22 @@ export type Label = LabelCreate &
 
 export class LabelsApi extends BaseAPI {
   async getAll() {
-    return this.http.get<Results<Label>>(route('/labels'));
+    return this.http.get<Results<Label>>({ url: route('/labels') });
   }
 
-  async create(label: LabelCreate) {
-    return this.http.post<LabelCreate, Label>(route('/labels'), label);
+  async create(body: LabelCreate) {
+    return this.http.post<LabelCreate, Label>({ url: route('/labels'), body });
   }
 
   async get(id: string) {
-    return this.http.get<Label>(route(`/labels/${id}`));
+    return this.http.get<Label>({ url: route(`/labels/${id}`) });
   }
 
   async delete(id: string) {
-    return this.http.delete<void>(route(`/labels/${id}`));
+    return this.http.delete<void>({ url: route(`/labels/${id}`) });
   }
 
-  async update(id: string, label: LabelUpdate) {
-    return this.http.put<LabelUpdate, Label>(route(`/labels/${id}`), label);
+  async update(id: string, body: LabelUpdate) {
+    return this.http.put<LabelUpdate, Label>({ url: route(`/labels/${id}`), body });
   }
 }

frontend/lib/api/classes/locations.ts

@@ -15,21 +15,21 @@ export type LocationUpdate = LocationCreate;
 
 export class LocationsApi extends BaseAPI {
   async getAll() {
-    return this.http.get<Results<Location>>(route('/locations'));
+    return this.http.get<Results<Location>>({ url: route('/locations') });
   }
 
-  async create(location: LocationCreate) {
-    return this.http.post<LocationCreate, Location>(route('/locations'), location);
+  async create(body: LocationCreate) {
+    return this.http.post<LocationCreate, Location>({ url: route('/locations'), body });
   }
 
   async get(id: string) {
-    return this.http.get<Location>(route(`/locations/${id}`));
+    return this.http.get<Location>({ url: route(`/locations/${id}`) });
   }
   async delete(id: string) {
-    return this.http.delete<void>(route(`/locations/${id}`));
+    return this.http.delete<void>({ url: route(`/locations/${id}`) });
   }
 
-  async update(id: string, location: LocationUpdate) {
-    return this.http.put<LocationUpdate, Location>(route(`/locations/${id}`), location);
+  async update(id: string, body: LocationUpdate) {
+    return this.http.put<LocationUpdate, Location>({ url: route(`/locations/${id}`), body });
   }
 }

frontend/lib/api/public.ts

@@ -28,17 +28,20 @@ export type StatusResult = {
 
 export class PublicApi extends BaseAPI {
   public status() {
-    return this.http.get<StatusResult>(route('/status'));
+    return this.http.get<StatusResult>({ url: route('/status') });
   }
 
   public login(username: string, password: string) {
-    return this.http.post<LoginPayload, LoginResult>(route('/users/login'), {
-      username,
-      password,
+    return this.http.post<LoginPayload, LoginResult>({
+      url: route('/users/login'),
+      body: {
+        username,
+        password,
+      },
     });
   }
 
-  public register(payload: RegisterPayload) {
-    return this.http.post<RegisterPayload, LoginResult>(route('/users/register'), payload);
+  public register(body: RegisterPayload) {
+    return this.http.post<RegisterPayload, LoginResult>({ url: route('/users/register'), body });
   }
 }

frontend/lib/api/user.ts

@@ -30,14 +30,14 @@ export class UserApi extends BaseAPI {
   }
 
   public self() {
-    return this.http.get<Result<User>>(route('/users/self'));
+    return this.http.get<Result<User>>({ url: route('/users/self') });
   }
 
   public logout() {
-    return this.http.post<object, void>(route('/users/logout'), {});
+    return this.http.post<object, void>({ url: route('/users/logout') });
   }
 
   public deleteAccount() {
-    return this.http.delete<void>(route('/users/self'));
+    return this.http.delete<void>({ url: route('/users/self') });
   }
 }

frontend/lib/requests/requests.ts

@@ -15,6 +15,13 @@ export interface TResponse<T> {
   response: Response;
 }
 
+export type RequestArgs<T> = {
+  url: string;
+  body?: T;
+  data?: FormData;
+  headers?: Record<string, string>;
+};
+
 export class Requests {
   private baseUrl: string;
   private token: () => string;
@@ -39,45 +46,49 @@ export class Requests {
     this.headers = headers;
   }
 
-  public get<T>(url: string): Promise<TResponse<T>> {
-    return this.do<T>(Method.GET, url);
+  public get<T>(args: RequestArgs<T>): Promise<TResponse<T>> {
+    return this.do<T>(Method.GET, args);
   }
 
-  public post<T, U>(url: string, payload: T): Promise<TResponse<U>> {
-    return this.do<U>(Method.POST, url, payload);
+  public post<T, U>(args: RequestArgs<T>): Promise<TResponse<U>> {
+    return this.do<U>(Method.POST, args);
   }
 
-  public put<T, U>(url: string, payload: T): Promise<TResponse<U>> {
-    return this.do<U>(Method.PUT, url, payload);
+  public put<T, U>(args: RequestArgs<T>): Promise<TResponse<U>> {
+    return this.do<U>(Method.PUT, args);
   }
 
-  public delete<T>(url: string): Promise<TResponse<T>> {
-    return this.do<T>(Method.DELETE, url);
+  public delete<T>(args: RequestArgs<T>): Promise<TResponse<T>> {
+    return this.do<T>(Method.DELETE, args);
   }
 
   private methodSupportsBody(method: Method): boolean {
     return method === Method.POST || method === Method.PUT;
   }
 
-  private async do<T>(method: Method, url: string, payload: Object = {}): Promise<TResponse<T>> {
-    const args: RequestInit = {
+  private async do<T>(method: Method, rargs: RequestArgs<unknown>): Promise<TResponse<T>> {
+    const payload: RequestInit = {
       method,
       headers: {
-        'Content-Type': 'application/json',
+        ...rargs.headers,
         ...this.headers,
       },
     };
 
     const token = this.token();
-    if (token !== '' && args.headers !== undefined) {
-      args.headers['Authorization'] = token;
+    if (token !== '' && payload.headers !== undefined) {
+      payload.headers['Authorization'] = token;
     }
 
     if (this.methodSupportsBody(method)) {
-      args.body = JSON.stringify(payload);
+      if (rargs.data) {
+        payload.body = rargs.data;
+      } else {
+        payload.body = JSON.stringify(rargs.body);
+      }
     }
 
-    const response = await fetch(this.url(url), args);
+    const response = await fetch(this.url(rargs.url), payload);
     this.callResponseInterceptors(response);
 
     const data: T = await (async () => {

frontend/pages/home.vue

@@ -44,6 +44,7 @@
 
   const importDialog = ref(false);
   const importCsv = ref(null);
+  const importLoading = ref(false);
   const importRef = ref<HTMLInputElement>(null);
   whenever(
     () => !importDialog.value,
@@ -53,10 +54,12 @@
   );
 
   function setFile(e: Event & { target: HTMLInputElement }) {
-    console.log(e);
     importCsv.value = e.target.files[0];
+    console.log('importCsv.value', importCsv.value);
   }
 
+  const toast = useNotifier();
+
   function openDialog() {
     importDialog.value = true;
   }
@@ -64,32 +67,49 @@
   function uploadCsv() {
     importRef.value.click();
   }
+
+  async function submitCsvFile() {
+    importLoading.value = true;
+
+    const { error } = await api.items.import(importCsv.value);
+
+    if (error) {
+      toast.error('Import failed. Please try again later.');
+    }
+
+    // Reset
+    importDialog.value = false;
+    importLoading.value = false;
+    importCsv.value = null;
+    importRef.value.value = null;
+  }
 </script>
 
 <template>
   <BaseContainer class="space-y-16 pb-16">
     <BaseModal v-model="importDialog">
       <template #title> Import CSV File </template>
-
       <p>
         Import a CSV file containing your items, labels, and locations. See documentation for more information on the
         required format.
       </p>
 
-      <div class="flex flex-col gap-2 py-6">
-        <input ref="importRef" type="file" class="hidden" accept=".csv" @change="setFile" />
-        <BaseButton @click="uploadCsv">
-          <Icon class="h-5 w-5 mr-2" name="mdi-upload" />
-          Upload
-        </BaseButton>
-        <p class="text-center py-4">
-          {{ importCsv?.name }}
-        </p>
-      </div>
+      <form @submit.prevent="submitCsvFile">
+        <div class="flex flex-col gap-2 py-6">
+          <input ref="importRef" type="file" class="hidden" accept=".csv" @change="setFile" />
+          <BaseButton type="button" @click="uploadCsv">
+            <Icon class="h-5 w-5 mr-2" name="mdi-upload" />
+            Upload
+          </BaseButton>
+          <p class="text-center pt-4 -mb-5">
+            {{ importCsv?.name }}
+          </p>
+        </div>
 
-      <div class="modal-action">
-        <BaseButton :disabled="!importCsv"> Submit </BaseButton>
-      </div>
+        <div class="modal-action">
+          <BaseButton type="submit" :disabled="!importCsv"> Submit </BaseButton>
+        </div>
+      </form>
     </BaseModal>
 
     <section aria-labelledby="profile-overview-title" class="mt-8">

frontend/pages/item/[id]/index.vue

@@ -1,66 +1,3 @@
-<template>
-  <BaseContainer class="pb-8">
-    <section class="px-3">
-      <BaseSectionHeader v-if="item" dark class="mb-5">
-        <Icon name="mdi-package-variant" class="-mt-1" />
-        {{ item.name }}
-        <template #description>
-          <div class="flex flex-wrap gap-3 mt-3">
-            <LabelChip class="badge-primary" v-for="label in item.labels" :label="label"></LabelChip>
-          </div>
-        </template>
-      </BaseSectionHeader>
-      <div class="flex justify-between items-center">
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <input type="checkbox" v-model.checked="preferences.showEmpty" class="checkbox" />
-            <span class="label-text ml-4"> Show Empty </span>
-          </label>
-        </div>
-        <BaseButton size="sm" :to="`/item/${itemId}/edit`">
-          <template #icon>
-            <Icon name="mdi-pencil" />
-          </template>
-          Edit
-        </BaseButton>
-      </div>
-      <div class="grid grid-cols-1 gap-3">
-        <BaseDetails :details="itemSummary">
-          <template #title> Item Summary </template>
-          <template #Attachments>
-            <ul role="list" class="divide-y divide-gray-400 rounded-md border border-gray-400">
-              <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
-                <div class="flex w-0 flex-1 items-center">
-                  <Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
-                  <span class="ml-2 w-0 flex-1 truncate">User Guide.pdf</span>
-                </div>
-                <div class="ml-4 flex-shrink-0">
-                  <a href="#" class="font-medium">Download</a>
-                </div>
-              </li>
-              <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
-                <div class="flex w-0 flex-1 items-center">
-                  <Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
-                  <span class="ml-2 w-0 flex-1 truncate">Purchase Receipts.pdf</span>
-                </div>
-                <div class="ml-4 flex-shrink-0">
-                  <a href="#" class="font-medium">Download</a>
-                </div>
-              </li>
-            </ul>
-          </template>
-        </BaseDetails>
-        <BaseDetails :details="purchaseDetails" v-if="showPurchase">
-          <template #title> Purchase Details </template>
-        </BaseDetails>
-        <BaseDetails :details="soldDetails" v-if="showSold">
-          <template #title> Sold Details </template>
-        </BaseDetails>
-      </div>
-    </section>
-  </BaseContainer>
-</template>
-
 <script setup lang="ts">
   definePageMeta({
     layout: 'home',
@@ -85,7 +22,6 @@
 
   const itemSummary = computed(() => {
     return {
-      Name: item.value?.name || '',
       Description: item.value?.description || '',
       'Serial Number': item.value?.serialNumber || '',
       'Model Number': item.value?.modelNumber || '',
@@ -125,6 +61,95 @@
       'Sold At': item.value?.soldTime || '',
     };
   });
+
+  const confirm = useConfirm();
+
+  async function deleteItem() {
+    const confirmed = await confirm.reveal('Are you sure you want to delete this item?');
+
+    if (!confirmed.data) {
+      return;
+    }
+
+    const { error } = await api.items.delete(itemId.value);
+    if (error) {
+      toast.error('Failed to delete item');
+      return;
+    }
+    toast.success('Item deleted');
+    navigateTo('/home');
+  }
 </script>
 
-<style scoped></style>
+<template>
+  <BaseContainer class="pb-8">
+    <section class="px-3">
+      <div class="flex justify-between items-center">
+        <div class="form-control"></div>
+      </div>
+      <div class="grid grid-cols-1 gap-3">
+        <BaseDetails :details="itemSummary">
+          <template #title>
+            <BaseSectionHeader v-if="item" class="pb-0">
+              <Icon name="mdi-package-variant" class="-mt-1 mr-2 text-gray-600" />
+              <span class="text-gray-600">
+                {{ item.name }}
+              </span>
+              <template #after>
+                <div class="flex flex-wrap gap-3 mt-3">
+                  <LabelChip class="badge-primary" v-for="label in item.labels" :label="label"></LabelChip>
+                </div>
+                <div class="modal-action">
+                  <label class="label cursor-pointer mr-auto">
+                    <input type="checkbox" v-model="preferences.showEmpty" class="toggle toggle-primary" />
+                    <span class="label-text ml-4"> Show Empty </span>
+                  </label>
+                  <BaseButton size="sm" :to="`/item/${itemId}/edit`">
+                    <template #icon>
+                      <Icon name="mdi-pencil" />
+                    </template>
+                    Edit
+                  </BaseButton>
+                  <BaseButton size="sm" @click="deleteItem">
+                    <template #icon>
+                      <Icon name="mdi-delete" />
+                    </template>
+                    Delete
+                  </BaseButton>
+                </div>
+              </template>
+            </BaseSectionHeader>
+          </template>
+          <template #Attachments>
+            <ul role="list" class="divide-y divide-gray-400 rounded-md border border-gray-400">
+              <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
+                <div class="flex w-0 flex-1 items-center">
+                  <Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+                  <span class="ml-2 w-0 flex-1 truncate">User Guide.pdf</span>
+                </div>
+                <div class="ml-4 flex-shrink-0">
+                  <a href="#" class="font-medium">Download</a>
+                </div>
+              </li>
+              <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
+                <div class="flex w-0 flex-1 items-center">
+                  <Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+                  <span class="ml-2 w-0 flex-1 truncate">Purchase Receipts.pdf</span>
+                </div>
+                <div class="ml-4 flex-shrink-0">
+                  <a href="#" class="font-medium">Download</a>
+                </div>
+              </li>
+            </ul>
+          </template>
+        </BaseDetails>
+        <BaseDetails :details="purchaseDetails" v-if="showPurchase">
+          <template #title> Purchase Details </template>
+        </BaseDetails>
+        <BaseDetails :details="soldDetails" v-if="showSold">
+          <template #title> Sold Details </template>
+        </BaseDetails>
+      </div>
+    </section>
+  </BaseContainer>
+</template>

frontend/tailwind.config.js

@@ -8,7 +8,6 @@ module.exports = {
     extend: {},
   },
   plugins: [
-    require('@tailwindcss/forms'),
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/typography'),
     require('daisyui'),