travaux intégration UI

client/src/components/AccountMenu.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-list>
+    <v-list-item
+      v-for="(item, index) in items"
+      :key="index"
+      :value="index"
+    >
+      <v-list-item-title>{{ item.title }}</v-list-item-title>
+    </v-list-item>
+  </v-list>
+</template>
+<script setup lang="ts">
+  import {ref} from "vue";
+
+  const items =  ref([
+    { title: 'Click Me' },
+    { title: 'Click Me' },
+    { title: 'Click Me' },
+    { title: 'Click Me 2' },
+  ])
+</script>

client/src/components/AppMenu.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="app-menu">
+    <v-list>
+      <v-list-item
+        v-for="(item, index) in items"
+        :key="index"
+        :to="item.to"
+        :value="index"
+      >
+        <v-list-item-title>{{ item.title }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>
+<script setup lang="ts">
+  import {computed, ref} from "vue";
+  import { useAppStore } from "@/stores/app";
+
+  const app = useAppStore()
+
+  // [
+  //   { title: 'Collections', to: '/collections' },
+  //   { title: 'Click Me' },
+  //   { title: 'Click Me' },
+  //   { title: 'Click Me 2' },
+  // ]
+
+  const items =  computed(() => {
+    const items = []
+    if (app.userInfo) {
+      items.push({ title: 'Collections', to: '/collections' })
+    }
+    items.push({ title: 'Placeholder page', to: '/placeholder' })
+    return items
+  })
+</script>

client/src/layouts/default.vue

@@ -1,38 +1,28 @@
 <template>
   <v-app-bar>
-
     <v-app-bar-nav-icon @click="drawer = !drawer" />
 
     <v-app-bar-title>Application</v-app-bar-title>
 
     <v-spacer />
 
-    <span v-if="app.userInfo">
+    <v-btn icon="mdi-theme-light-dark" @click="theme.cycle()" />
-      <v-btn
-        color="primary"
-      >
-        Parent activator
 
-        <v-menu activator="parent">
+    <v-menu v-if="app.userInfo">
-          <v-list>
+      <template #activator="{ props }">
-            <v-list-item
+        <v-btn
-              v-for="(item, index) in items"
+          id="menu-account-activator"
-              :key="index"
+          icon="mdi-account"
-              :value="index"
+          v-bind="props"
-            >
+        />
-              <v-list-item-title>{{ item.title }}</v-list-item-title>
+      </template>
-            </v-list-item>
+      <AccountMenu />
-          </v-list>
     </v-menu>
-      </v-btn>
+    <v-btn v-if="!app.userInfo" text="Login" to="/login" />
-    </span>
-    <span v-else>
-      <v-btn text="Login" to="/login" />
-    </span>
   </v-app-bar>
 
   <v-navigation-drawer v-model="drawer">
-    <!--  -->
+    <AppMenu />
   </v-navigation-drawer>
 
   <v-main>
@@ -43,18 +33,14 @@
 </template>
 
 <script setup lang="ts">
-// import AppFooter from "@/components/AppFooter.vue";
-
   import {ref} from 'vue'
+  import {useTheme} from 'vuetify'
+  // import AppFooter from "@/components/AppFooter.vue";
+  import AppMenu from "@/components/AppMenu.vue";
   import {useAppStore} from '@/stores/app'
 
+  const theme = useTheme()
   const app = useAppStore()
 
   const drawer = ref(false)
-  const items =  ref([
-    { title: 'Click Me' },
-    { title: 'Click Me' },
-    { title: 'Click Me' },
-    { title: 'Click Me 2' },
-  ])
 </script>

client/src/pages/collections/[id]/edit.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Edit collection</div>
+</template>

client/src/pages/collections/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col class="collections-menu">
+        <v-card>
+          <v-list nav>
+            <v-list-item
+              v-for="collection in collections"
+              :key="collection.id"
+              color="primary"
+              :value="collection"
+              @click="selectedCollection = collection"
+            >
+              <template #prepend>
+                <v-icon :icon="collection.icon" />
+              </template>
+
+              <v-list-item-title>{{ collection.title }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-col>
+      <v-col>
+        <v-card v-if="selectedCollection">
+          <v-card-title />
+          <v-card-text>
+            <v-row>
+              <v-col>
+                <h3>Collections > {{ selectedCollection.title }}</h3>
+              </v-col>
+              <v-col class="text-right">
+                <v-btn icon="mdi-cog-outline" @click="onEditCollection" />
+                <v-btn icon="mdi-refresh" />
+              </v-col>
+            </v-row>
+
+            <div class="mt-3">
+              <v-text-field placeholder="Search" />
+            </div>
+            <div>
+              <v-data-table
+                :headers="headers"
+                hide-default-footer
+                item-key="name"
+                :items="items"
+              />
+            </div>
+            <div class="mt-4 text-center">
+              <v-btn color="primary" prepend-icon="mdi-plus">Add record</v-btn>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+
+  </v-container>
+</template>
+<script setup lang="ts">
+  import {onMounted, ref} from 'vue'
+  import {useRouter} from "vue-router";
+
+  const router = useRouter()
+
+  const collections = ref([
+    { id: 1, title: 'users', icon: 'mdi-account' },
+    { id: 2, title: 'items', icon: 'mdi-folder-outline' },
+    { id: 3, title: 'carts', icon: 'mdi-folder-outline' },
+  ])
+
+  const selectedCollection = ref(null)
+
+  onMounted(() => {
+    selectedCollection.value = collections.value[0]
+  })
+
+  const headers = ref([
+    { title: 'Pyramid', value: 'name' },
+    { title: 'Location', value: 'location' },
+    { title: 'Construction Date', value: 'constructionDate' },
+  ])
+
+  const items = ref([
+    {
+      name: 'Great Pyramid of Giza',
+      location: 'Egypt',
+      constructionDate: 'c. 2580–2560 BC',
+    },
+    {
+      name: 'Pyramid of Khafre',
+      location: 'Egypt',
+      constructionDate: 'c. 2570 BC',
+    },
+    {
+      name: 'Red Pyramid',
+      location: 'Egypt',
+      constructionDate: 'c. 2590 BC',
+    },
+    {
+      name: 'Bent Pyramid',
+      location: 'Egypt',
+      constructionDate: 'c. 2600 BC',
+    },
+    {
+      name: 'Pyramid of the Sun',
+      location: 'Mexico',
+      constructionDate: 'c. 200 CE',
+    },
+  ])
+
+  function onEditCollection () {
+    router.push(`/collections/${selectedCollection.value.id}/edit`)
+  }
+</script>
+
+<style scoped lang="scss">
+.collections-menu {
+  max-width: 300px;
+}
+</style>

client/src/pages/placeholder.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Placeholder page</div>
+</template>