updated lists index to use typescript and composition api

This commit is contained in:
Edward Tirado Jr 2025-04-06 17:30:14 -05:00
parent e335601ab8
commit d339424e7a
3 changed files with 34 additions and 29 deletions

9
.idea/workspace.xml generated
View file

@ -6,11 +6,7 @@
<component name="ChangeListManager">
<list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/nuxt.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/nuxt.config.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/index.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/tsconfig.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -25,6 +21,7 @@
<list>
<option value="CSS File" />
<option value="Vue Single File Component" />
<option value="TypeScript File" />
</list>
</option>
</component>
@ -130,7 +127,7 @@
<workItem from="1673397538637" duration="47416000" />
<workItem from="1673508732689" duration="1316000" />
<workItem from="1673547794038" duration="2346000" />
<workItem from="1743904898331" duration="4240000" />
<workItem from="1743904898331" duration="10658000" />
</task>
<servers />
</component>

View file

@ -13,30 +13,32 @@
</div>
</template>
<script>
export default {
name: "index",
data: () => ({
lists: [],
}),
methods: {
getLists: function () {
<script lang="ts" setup>
import type { MovieList } from "~/types/movielist";
const lists = defineModel<MovieList[]>("movie_list", { default: [] });
const updateLists = async function () {
let config = useRuntimeConfig();
fetch(`${config.public.apiURL}/lists`, {
const { data, status, error } = await useFetch<MovieList[]>(
`${config.public.apiURL}/lists`,
{
method: "GET",
headers: {"Content-type": "application/json"}
})
.then(response => response.json())
.then(json => this.lists = json)
.catch(err => console.log(err))
headers: { "Content-type": "application/json" },
},
},
mounted() {
this.getLists()
);
if (error) {
if (error.value?.statusCode === 401) {
console.log("unauthorized");
}
}
} else {
lists.value = data.value || [];
}
};
onMounted(() => {
updateLists();
});
</script>
<style scoped>
</style>
<style scoped></style>

6
src/types/movielist.ts Normal file
View file

@ -0,0 +1,6 @@
export type MovieList = {
id: number;
name: string;
public: boolean;
movie_count: number;
};