Ticket Component

software/src/components/basics/actionDialog.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ModelRef } from 'vue';
+
+const showDialog: ModelRef<boolean> = defineModel()
+
+defineProps({
+  title: String,
+  icon: {
+    type: String
+  },
+  subtitle: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <v-dialog max-width="1200" v-model="showDialog">
+    <v-card
+      :title="title"
+      :subtitle="subtitle"
+      :prepend-icon="icon"
+    >
+      <slot></slot>
+
+      <template #actions>
+        <slot name="actions"></slot>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>

software/src/components/basics/cardView.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+
+defineProps({
+  title: String,
+  icon: {
+    type: String
+  },
+  subtitle: {
+    type: String,
+  }
+})
+</script>
+
+<template>
+  <v-card
+    variant="tonal"
+    :prepend-icon="icon"
+    :title="title"
+    :subtitle="subtitle"
+  >
+    <v-container class="pt-0">
+      <v-row>
+        <v-col >
+          <slot></slot>
+        </v-col>
+      </v-row>
+    </v-container>
+    
+    <v-card-actions v-if="$slots.actions">
+      <v-spacer />
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
+</template>

software/src/components/basics/cardViewLeftImage.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+defineProps({
+  /** Image to display on the left side */
+  image: String,
+
+  /** Title in the top bar */
+  title: String,
+
+  /** Make the CardView click- and hoverable */
+  link: {
+    type: Boolean,
+    default: true
+  },
+
+  /** Displays a Skeleton Loader if true */
+  loading: Boolean,
+
+  /** Height of the card, default 140px */
+  height: {
+    type: Number,
+    default: 200
+  },
+
+  colorHeader: String
+})
+</script>
+
+<template>
+  <v-card
+    variant="tonal"
+    :link="link"
+  >
+    <v-card-title v-if="title" color="primary" class="pa-0">
+      <v-sheet color="primary" class="pl-2 py-1">
+        {{ title }}
+      </v-sheet>
+    </v-card-title>
+
+    <v-row :height="height">
+      <!-- First col for image -->
+      <v-col
+        cols="3"
+      >
+        <v-skeleton-loader
+          type="image"
+          :loading="loading"
+        >
+          <v-img 
+            :src="image" 
+            :height="height"
+            :width="100"
+            aspect-ratio="1"
+            cover
+          />
+        </v-skeleton-loader>
+      </v-col>
+
+      <!-- Second col for main content -->
+      <v-col
+        cols="7"
+        class="text-h5"
+      >
+        <v-skeleton-loader
+          :loading="loading"
+          type="sentences"
+          class="my-2"
+        >
+          <div>
+            <slot name="content" />
+          </div>
+        </v-skeleton-loader>
+      </v-col>
+
+      <v-divider vertical class="mt-3" />
+
+      <!-- Third col for append content after the divider -->
+      <v-col
+        cols="2"
+        class="text-center pr-5 text-h5 d-flex justify-center align-center"
+      >
+        <slot name="append"></slot>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>

software/src/components/basics/cardViewTopImage.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+defineProps({
+  image: String,
+  errorImage: {
+    type: String,
+    default: "artists/unknown-artist.jpg"
+  },
+  title: String,
+  smallerTitle: {
+    type: Boolean,
+    default: false
+  },
+  link: {
+    type: Boolean,
+    default: true
+  },
+  loading: Boolean
+})
+</script>
+
+<template>
+  <v-card
+    variant="tonal"
+    :link="link"
+  >
+    <v-skeleton-loader
+      :loading="loading"
+      type="image"
+      height="200"
+    >
+      <v-img
+        :src="'http://localhost:3000/static/' + image"
+        aspect-ratio="1"
+        max-height="200"
+        cover
+      >
+        <template #error>
+          <v-img
+            :src="'http://localhost:3000/static/' + errorImage"
+            aspect-ratio="1"
+            style="background-color: aliceblue;"
+          />
+        </template>
+      </v-img>
+      
+      </v-skeleton-loader>
+
+    <v-skeleton-loader
+      :loading="loading"
+      type="heading"
+    >
+      <div v-if="title">
+        <v-card-title v-if="!smallerTitle">
+          {{ title }}
+        </v-card-title>
+
+        <v-card-title v-else style="font-size: medium">
+          {{ title }}
+        </v-card-title>
+      </div>
+    </v-skeleton-loader>
+
+    <v-skeleton-loader
+      type="sentences"
+      :loading="loading"
+    >
+      <div class="px-4 pb-4" v-if="$slots.default">
+        <slot></slot>
+      </div>
+    </v-skeleton-loader>
+
+    <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
+      <v-spacer />
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
+</template>

software/src/components/basics/confirmDialog.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ModelRef } from 'vue';
+import actionDialog from './../basics/actionDialog.vue';
+import outlinedButton from './../basics/outlinedButton.vue';
+
+const showDialog: ModelRef<boolean> = defineModel()
+
+const props = defineProps({
+  title: String,
+  description: String,
+  onConfirm: Function
+})
+
+function confirmPressed() {
+  props.onConfirm()
+  showDialog.value = false
+}
+</script>
+
+<template>
+  <action-dialog 
+    :title="title"
+    max-width="400"
+    v-model="showDialog"
+  >
+    <v-row>
+      <v-col>
+        {{ description }}
+      </v-col>
+    </v-row>
+
+    <template #actions>
+      <outlined-button
+        @click="showDialog = false" 
+        prepend-icon="mdi-close"
+        color="orange"
+      >
+        {{ $t("dialog.cancel") }}
+      </outlined-button>
+
+      <outlined-button
+        @click="confirmPressed"
+        prepend-icon="mdi-check"
+        color="red"
+      >
+        {{ $t("dialog.confirm") }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>

software/src/components/basics/outlinedButton.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  prependIcon: String,
+  color: {
+    type: String,
+    default: "secondary"
+  }
+})
+</script>
+
+<template>
+  <v-btn 
+    :prepend-icon="prependIcon"
+    variant="outlined"
+    :color="color"
+  >
+    <slot></slot>
+  </v-btn>
+</template>

software/src/components/basics/sectionDivider.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps({
+  title: String,
+  image: String,
+  loading: Boolean
+})
+</script>
+
+<template>
+  <v-row class="pt-3">
+    <v-col class="d-flex justify-center align-center">
+      <v-sheet height="12" width="100%" color="primary" class="rounded-s-lg" />
+    </v-col>
+    
+    <v-col class="v-col-auto">
+      <v-skeleton-loader
+        type="heading"
+        :loading="loading"
+        width="300"
+      >
+        <span class="text-h4">{{ title }}</span>
+      </v-skeleton-loader>
+    </v-col>
+
+    <v-col class="d-flex justify-center align-center">
+      <v-sheet height="12" width="100%" color="primary" class="rounded-e-lg" />
+    </v-col>
+  </v-row>
+</template>