Collections and items lists

README.md

@@ -1,2 +1,2 @@
-# tainacan-mobile
+tainacan-mobile
-The Tainacan mobile app for easily insert and edit items.
+The Tainacan mobile app for easily insert and edit items.

capacitor.config.ts

@@ -2,7 +2,7 @@ import { CapacitorConfig } from '@capacitor/cli';
 
 const config: CapacitorConfig = {
   appId: 'io.ionic.starter',
-  appName: 'tainacan-mobile',
+  appName: 'tainacanteste',
   webDir: 'dist',
   bundledWebRuntime: false
 };

ionic.config.json

@@ -1,5 +1,5 @@
 {
-  "name": "tainacan-mobile",
+  "name": "tainacanteste",
   "integrations": {
     "capacitor": {}
   },

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tainacan-mobile",
+  "name": "tainacanteste",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -10,19 +10,21 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@capacitor/app": "1.1.0",
+    "@capacitor/app": "1.1.1",
-    "@capacitor/core": "3.4.0",
+    "@capacitor/core": "3.4.3",
     "@capacitor/haptics": "1.1.4",
-    "@capacitor/keyboard": "1.2.1",
+    "@capacitor/keyboard": "1.2.2",
-    "@capacitor/status-bar": "1.0.7",
+    "@capacitor/status-bar": "1.0.8",
     "@ionic/vue": "^6.0.0",
     "@ionic/vue-router": "^6.0.0",
     "core-js": "^3.6.5",
     "vue": "^3.2.21",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@capacitor/cli": "3.4.0",
+    "@capacitor/cli": "3.4.3",
+    "@ionic/lab": "3.2.11",
     "@types/jest": "^27.0.2",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",

src/components/base/BaseLayout.vue

@@ -0,0 +1,51 @@
+<template>
+    <ion-page>
+        <ion-header>
+            <ion-toolbar>
+                <ion-img width="80" height="80" :src="image" />
+            </ion-toolbar>
+            <ion-toolbar>
+                <ion-buttons slot="start">
+                    <ion-back-button :default-href="pageDefaultBackLink"></ion-back-button>
+                </ion-buttons>
+                <ion-title> {{ pageTitle }} </ion-title>
+            </ion-toolbar>
+        </ion-header>
+        <ion-content>
+            <slot />
+        </ion-content>
+    </ion-page>
+</template>
+
+<script>
+import {
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonBackButton,
+    IonButtons,
+    IonImg,
+} from '@ionic/vue';
+import { computed } from 'vue';
+export default {
+    props: ['pageTitle', 'pageDefaultBackLink'],
+    components: {
+        IonPage,
+        IonHeader,
+        IonToolbar,
+        IonTitle,
+        IonContent,
+        IonBackButton,
+        IonButtons,
+        IonImg,
+    },
+    setup(){
+        const image = computed (() => require('../../assets/logo.png'))
+            return {
+                image,
+            }
+    }
+}
+</script>

src/main.ts

@@ -1,6 +1,9 @@
 import { createApp } from 'vue'
+
 import App from './App.vue'
+import BaseLayout from './components/base/BaseLayout.vue';
 import router from './router';
+//import store from './store';
 
 import { IonicVue } from '@ionic/vue';
 
@@ -22,10 +25,15 @@ import '@ionic/vue/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+import './theme/core.css'; //importei do arquivo criado
+
 
 const app = createApp(App)
   .use(IonicVue)
   .use(router);
+ // .use(store);
+
+app.component('base-layout', BaseLayout);
   
 router.isReady().then(() => {
   app.mount('#app');

src/pages/ColletionsList.vue

@@ -0,0 +1,48 @@
+<template>
+    <base-layout page-title="Collections List">
+        <ion-list>
+            <ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
+                <ion-thumbnail slot="start"> <!-- verificar se existe a imagem de fato -->
+                    <ion-img :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
+                </ion-thumbnail>
+                <ion-label> {{ collection.name }} </ion-label>
+            </ion-item>
+        </ion-list> 
+    </base-layout>
+</template>
+
+<script>
+import {
+    IonList,
+    IonItem,
+    IonImg,
+    IonThumbnail,
+    IonLabel,
+} from '@ionic/vue';
+import BaseLayout from '@/components/base/BaseLayout.vue';
+export default {
+    components: {
+        IonList,
+        IonItem,
+        IonImg,
+        IonThumbnail,
+        IonLabel,
+        BaseLayout
+    },
+    data() {
+        return {
+            collections: [],
+        };
+    },
+
+    created(){
+    fetch("https://museucasadahera.acervos.museus.gov.br/wp-json/tainacan/v2/collections?perpage=4&orderby=modified")
+        .then((response) => response.json())
+        .then((data) => {
+        this.collections = data;
+        });
+    },
+
+}
+</script>
+

src/pages/HomePage.vue

@@ -0,0 +1,109 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-img width="80" height="80" :src="image" />
+      </ion-toolbar>
+      <ion-toolbar color="primary">
+        <ion-title> Coleções </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-card v-for="collection of computedObj" :key="collection.id">
+        <ion-card-header>
+          <ion-card-title>{{ collection.name }} </ion-card-title>
+        </ion-card-header>
+      </ion-card>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { 
+  IonContent, 
+  IonHeader, 
+  IonPage, 
+  IonTitle, 
+  IonToolbar, 
+  IonCard,
+  IonCardHeader,
+  IonCardTitle, 
+  IonImg,
+} from '@ionic/vue';
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle, 
+    IonImg 
+    },
+  setup(){
+    const image = computed (() => require('../assets/logo.png'))
+    return {
+      image,
+    }
+  },
+
+data() {
+  return {
+    collections: [],
+    limit: 4,
+  };
+},
+
+created(){
+  fetch("https://rcteste.tainacan.org/wp-json/tainacan/v2/collections")
+    .then((response) => response.json())
+    .then((data) => {
+      this.collections = data;
+    });
+},
+
+computed:{
+  computedObj(){
+    return this.limit ? this.collections.slice(0,this.limit) : this.collections
+  }
+},
+
+});
+
+
+  
+</script>
+
+<style scoped>
+#container {
+  text-align: center;
+  
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+#container p {
+  font-size: 16px;
+  line-height: 22px;
+  
+  color: #8c8c8c;
+  
+  margin: 0;
+}
+
+#container a {
+  text-decoration: none;
+}
+</style>

src/pages/ItemsList.vue

@@ -0,0 +1,36 @@
+<template>
+    <base-layout page-title="Items List" page-default-back-link="/collections">
+    <ion-item v-for="item of items" :key="item.id">
+        <ion-label> {{ item.title }} </ion-label>
+    </ion-item>
+    </base-layout>
+</template>
+
+<script>
+import {
+    IonItem,
+    IonLabel,
+} from '@ionic/vue';
+import BaseLayout from '@/components/base/BaseLayout.vue';
+export default {
+    components: {
+        IonItem,
+        IonLabel,
+        BaseLayout
+    },
+    data() {
+        return {
+            items: [],
+            collectionId: this.$route.params.id,
+        };
+    },
+
+    created(){
+        fetch(`https://museucasadahera.acervos.museus.gov.br/wp-json/tainacan/v2/collection/${this.collectionId}/items`)
+            .then((response) => response.json())
+            .then((data) => {
+                this.items = data.items;
+            });
+    },
+}
+</script>

src/router/index.ts

@@ -1,16 +1,19 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import HomePage from '../views/HomePage.vue'
+import ColletionsList from '../pages/ColletionsList.vue';//futuro login
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/home'
+    redirect: '/collections'
   },
   {
-    path: '/home',
+    path: '/collections',
-    name: 'Home',
+    component: ColletionsList
-    component: HomePage
+  },
+  {
+    path: '/collections/:id',
+    component: () => import('../pages/ItemsList.vue')
   }
 ]
 

src/theme/core.css

@@ -0,0 +1,4 @@
+ion-toolbar{
+    --background: var(--ion-color-primary);
+    --color: var(--ion-color-primary-contrast);
+}

src/theme/variables.css

@@ -3,77 +3,62 @@ http://ionicframework.com/docs/theming/ */
 
 /** Ionic CSS Variables **/
 :root {
-  /** primary **/
+	--ion-color-primary: #298596;
-  --ion-color-primary: #3880ff;
+	--ion-color-primary-rgb: 41,133,150;
-  --ion-color-primary-rgb: 56, 128, 255;
+	--ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast: #ffffff;
+	--ion-color-primary-contrast-rgb: 255,255,255;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
+	--ion-color-primary-shade: #247584;
-  --ion-color-primary-shade: #3171e0;
+	--ion-color-primary-tint: #3e91a1;
-  --ion-color-primary-tint: #4c8dff;
 
-  /** secondary **/
+	--ion-color-secondary: #4ea2ad;
-  --ion-color-secondary: #3dc2ff;
+	--ion-color-secondary-rgb: 78,162,173;
-  --ion-color-secondary-rgb: 61, 194, 255;
+	--ion-color-secondary-contrast: #000000;
-  --ion-color-secondary-contrast: #ffffff;
+	--ion-color-secondary-contrast-rgb: 0,0,0;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+	--ion-color-secondary-shade: #458f98;
-  --ion-color-secondary-shade: #36abe0;
+	--ion-color-secondary-tint: #60abb5;
-  --ion-color-secondary-tint: #50c8ff;
 
-  /** tertiary **/
+	--ion-color-tertiary: #76c6cc;
-  --ion-color-tertiary: #5260ff;
+	--ion-color-tertiary-rgb: 118,198,204;
-  --ion-color-tertiary-rgb: 82, 96, 255;
+	--ion-color-tertiary-contrast: #000000;
-  --ion-color-tertiary-contrast: #ffffff;
+	--ion-color-tertiary-contrast-rgb: 0,0,0;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+	--ion-color-tertiary-shade: #68aeb4;
-  --ion-color-tertiary-shade: #4854e0;
+	--ion-color-tertiary-tint: #84ccd1;
-  --ion-color-tertiary-tint: #6370ff;
 
-  /** success **/
+	--ion-color-success: #2dd36f;
-  --ion-color-success: #2dd36f;
+	--ion-color-success-rgb: 45,211,111;
-  --ion-color-success-rgb: 45, 211, 111;
+	--ion-color-success-contrast: #000000;
-  --ion-color-success-contrast: #ffffff;
+	--ion-color-success-contrast-rgb: 0,0,0;
-  --ion-color-success-contrast-rgb: 255, 255, 255;
+	--ion-color-success-shade: #28ba62;
-  --ion-color-success-shade: #28ba62;
+	--ion-color-success-tint: #42d77d;
-  --ion-color-success-tint: #42d77d;
 
-  /** warning **/
+	--ion-color-warning: #ffc409;
-  --ion-color-warning: #ffc409;
+	--ion-color-warning-rgb: 255,196,9;
-  --ion-color-warning-rgb: 255, 196, 9;
+	--ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast: #000000;
+	--ion-color-warning-contrast-rgb: 0,0,0;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
+	--ion-color-warning-shade: #e0ac08;
-  --ion-color-warning-shade: #e0ac08;
+	--ion-color-warning-tint: #ffca22;
-  --ion-color-warning-tint: #ffca22;
 
-  /** danger **/
+	--ion-color-danger: #eb445a;
-  --ion-color-danger: #eb445a;
+	--ion-color-danger-rgb: 235,68,90;
-  --ion-color-danger-rgb: 235, 68, 90;
+	--ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast: #ffffff;
+	--ion-color-danger-contrast-rgb: 255,255,255;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
+	--ion-color-danger-shade: #cf3c4f;
-  --ion-color-danger-shade: #cf3c4f;
+	--ion-color-danger-tint: #ed576b;
-  --ion-color-danger-tint: #ed576b;
 
-  /** dark **/
+	--ion-color-medium: #92949c;
-  --ion-color-dark: #222428;
+	--ion-color-medium-rgb: 146,148,156;
-  --ion-color-dark-rgb: 34, 36, 40;
+	--ion-color-medium-contrast: #000000;
-  --ion-color-dark-contrast: #ffffff;
+	--ion-color-medium-contrast-rgb: 0,0,0;
-  --ion-color-dark-contrast-rgb: 255, 255, 255;
+	--ion-color-medium-shade: #808289;
-  --ion-color-dark-shade: #1e2023;
+	--ion-color-medium-tint: #9d9fa6;
-  --ion-color-dark-tint: #383a3e;
 
-  /** medium **/
+	--ion-color-light: #f4f5f8;
-  --ion-color-medium: #92949c;
+	--ion-color-light-rgb: 244,245,248;
-  --ion-color-medium-rgb: 146, 148, 156;
+	--ion-color-light-contrast: #000000;
-  --ion-color-medium-contrast: #ffffff;
+	--ion-color-light-contrast-rgb: 0,0,0;
-  --ion-color-medium-contrast-rgb: 255, 255, 255;
+	--ion-color-light-shade: #d7d8da;
-  --ion-color-medium-shade: #808289;
+	--ion-color-light-tint: #f5f6f9;
-  --ion-color-medium-tint: #9d9fa6;
 
-  /** light **/
-  --ion-color-light: #f4f5f8;
-  --ion-color-light-rgb: 244, 245, 248;
-  --ion-color-light-contrast: #000000;
-  --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d7d8da;
-  --ion-color-light-tint: #f5f6f9;
 }
 
 @media (prefers-color-scheme: dark) {

src/views/HomePage.vue

@@ -1,67 +0,0 @@
-<template>
-  <ion-page>
-    <ion-header :translucent="true">
-      <ion-toolbar>
-        <ion-title>Blank</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    
-    <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Blank</ion-title>
-        </ion-toolbar>
-      </ion-header>
-    
-      <div id="container">
-        <strong>Ready to create an app?</strong>
-        <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-      </div>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: {
-    IonContent,
-    IonHeader,
-    IonPage,
-    IonTitle,
-    IonToolbar
-  }
-});
-</script>
-
-<style scoped>
-#container {
-  text-align: center;
-  
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-  
-  color: #8c8c8c;
-  
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}
-</style>

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "esnext",
+    "noImplicitThis": false,
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",