fix: 🩹 Fix session list item layout and add drag and drop functionality

wizarrrr · Nov 8, 2023 · 1b1eb76 · 1b1eb76
1 parent 7e0d415
commit 1b1eb76
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 38 deletions.
diff --git a/apps/wizarr-frontend/src/components/SessionList/SessionItem.vue b/apps/wizarr-frontend/src/components/SessionList/SessionItem.vue
@@ -6,16 +6,13 @@
  {{ session.ip }}
  </p>
  <p class="text-xs truncate text-gray-500 dark:text-gray-400 w-full">
- {{ $filter('timeAgo', session.created) }}
+ {{ $filter("timeAgo", session.created) }}
  </p>
  </template>
 
  <template #buttons>
  <div class="flex flex-row space-x-2">
- <button
- @click="deleteLocalSession"
- class="bg-red-600 hover:bg-primary_hover focus:outline-none text-white font-medium rounded px-3.5 py-2 text-sm dark:bg-red-600 dark:hover:bg-primary_hover"
- >
+ <button @click="deleteLocalSession" class="bg-red-600 hover:bg-primary_hover focus:outline-none text-white font-medium rounded px-3.5 py-2 text-sm dark:bg-red-600 dark:hover:bg-primary_hover">
  <i class="fa-solid fa-trash"></i>
  </button>
  </div>
@@ -24,18 +21,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { formatTimeAgo } from '@vueuse/core';
-import { useSessionsStore } from '@/stores/sessions';
-import { mapActions } from 'pinia';
+import { defineComponent } from "vue";
+import { formatTimeAgo } from "@vueuse/core";
+import { useSessionsStore } from "@/stores/sessions";
+import { mapActions } from "pinia";
 
-import type { Session } from '@/types/api/sessions';
+import type { Session } from "@/types/api/sessions";
 
-import ListItem from '../ListItem.vue';
-import browserDetect from 'browser-detect';
+import ListItem from "../ListItem.vue";
+import browserDetect from "browser-detect";
 
 export default defineComponent({
- name: 'SessionItem',
+ name: "SessionItem",
  components: {
  ListItem,
  },
@@ -48,24 +45,18 @@ export default defineComponent({
  computed: {
  browser(): string {
  const browser = browserDetect(this.session.user_agent);
- return this.$filter(
- 'firstLetterUppercase',
- browser.name ?? 'Unknown',
- );
+ return this.$filter("firstLetterUppercase", browser.name ?? "Unknown");
  },
  os(): string {
  const browser = browserDetect(this.session.user_agent);
- return this.$filters(
- ['removeVersion', 'firstLetterUppercase'],
- browser.os ?? 'Unknown',
- );
+ return this.$filters(["removeVersion", "firstLetterUppercase"], browser.os ?? "Unknown");
  },
  },
  methods: {
  async deleteLocalSession() {
  await this.deleteSession(this.session.id);
  },
- ...mapActions(useSessionsStore, ['deleteSession']),
+ ...mapActions(useSessionsStore, ["deleteSession"]),
  },
 });
 </script>
diff --git a/apps/wizarr-frontend/src/components/SessionList/SessionList.vue b/apps/wizarr-frontend/src/components/SessionList/SessionList.vue
@@ -1,12 +1,5 @@
 <template>
- <Draggable
- v-model="sessions"
- tag="ul"
- group="sessions"
- ghost-class="moving-card"
- :animation="200"
- item-key="id"
- >
+ <Draggable v-model="sessions" tag="ul" group="sessions" ghost-class="moving-card" :animation="200" item-key="id">
  <template #item="{ element }">
  <li class="mb-2">
  <SessionItem :session="element" />
@@ -16,24 +9,24 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { useSessionsStore } from '@/stores/sessions';
-import { mapActions, mapWritableState } from 'pinia';
+import { defineComponent } from "vue";
+import { useSessionsStore } from "@/stores/sessions";
+import { mapActions, mapWritableState } from "pinia";
 
-import Draggable from 'vuedraggable';
-import SessionItem from './SessionItem.vue';
+import Draggable from "vuedraggable";
+import SessionItem from "./SessionItem.vue";
 
 export default defineComponent({
- name: 'SessionList',
+ name: "SessionList",
  components: {
  Draggable,
  SessionItem,
  },
  computed: {
- ...mapWritableState(useSessionsStore, ['sessions']),
+ ...mapWritableState(useSessionsStore, ["sessions"]),
  },
  methods: {
- ...mapActions(useSessionsStore, ['getSessions']),
+ ...mapActions(useSessionsStore, ["getSessions"]),
  },
  async created() {
  await this.getSessions();