create some base components

OlliL · Nov 24, 2024 · c3ae4de · c3ae4de
1 parent 30f4239
commit c3ae4de
Show file tree

Hide file tree

Showing 11 changed files with 419 additions and 515 deletions.
diff --git a/src/components/DivContentTable.vue b/src/components/DivContentTable.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="row justify-content-md-center">
+    <div :class="class">
+      <table class="table table-striped table-bordered table-hover">
+        <slot name="default"></slot>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  class: {
+    type: String,
+    default: "col-xxl-9 col-xs-12",
+  },
+});
+</script>
diff --git a/src/components/DivError.vue b/src/components/DivError.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="serverErrors">
+  <div v-if="serverErrors && serverErrors.length > 0">
     <div
       class="alert alert-danger text-center"
       v-for="(error, index) in serverErrors"

diff --git a/src/components/DivFilter.vue b/src/components/DivFilter.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="row justify-content-md-center">
+    <div class="col-md-auto mb-3">
+      <div class="row">
+        <div class="col-md-auto mb-3">
+          <button
+            type="button"
+            class="btn btn-primary"
+            @click="$emit('createClicked')"
+          >
+            {{ $t("General.new") }}
+          </button>
+        </div>
+        <div class="col">
+          <div class="input-group">
+            <button
+              type="button"
+              class="btn btn-primary"
+              @click="emit('update:modelValue', '')"
+            >
+              {{ $t("General.all") }}
+            </button>
+            <input
+              class="form-control"
+              type="text"
+              :placeholder="placeholder"
+              :value="props.modelValue"
+              @input="emit('update:modelValue', $event.target.value)"
+            />
+            <div
+              class="form-check form-switch align-self-center ms-2"
+              v-if="showValidToggle"
+            >
+              <input
+                class="form-check-input"
+                type="checkbox"
+                id="validInput"
+                v-model="validNow"
+                @change="emit('validNowToggled', validNow)"
+              />
+              <label class="form-check-label" for="validInput">{{
+                $t("General.validNow")
+              }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const searchString = ref("");
+const validNow = ref(true);
+
+const emit = defineEmits([
+  "update:modelValue",
+  "validNowToggled",
+  "createClicked",
+]);
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  showValidToggle: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
diff --git a/src/views/capitalsource/ListCapitalsources.vue b/src/views/capitalsource/ListCapitalsources.vue
@@ -17,82 +17,39 @@
       </div>
     </div>
 
-    <div class="row justify-content-md-center">
-      <div class="col-md-auto mb-3">
-        <div class="row">
-          <div class="col-md-auto mb-3">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="showCreateCapitalsourceModal"
-            >
-              {{ $t("General.new") }}
-            </button>
-          </div>
-          <div class="col">
-            <div class="input-group">
-              <button
-                type="button"
-                class="btn btn-primary"
-                @click="searchAllContent"
-              >
-                {{ $t("General.all") }}
-              </button>
-              <input
-                class="form-control"
-                type="text"
-                :placeholder="$t('Capitalsource.searchBy')"
-                v-model="searchString"
-                @input="searchContent"
-              />
-              <div class="form-check form-switch align-self-center ms-2">
-                <input
-                  class="form-check-input"
-                  type="checkbox"
-                  id="capitalsourcesValid"
-                  v-model="validNow"
-                  @change="searchContent"
-                />
-                <label class="form-check-label" for="capitalsourcesValid">{{
-                  $t("General.validNow")
-                }}</label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row justify-content-md-center">
-      <div class="col-xxl-9 col-xs-12">
-        <table class="table table-striped table-bordered table-hover">
-          <thead>
-            <tr>
-              <th>{{ $t("General.name") }}</th>
-              <th>{{ $t("Capitalsource.type") }}</th>
-              <th>{{ $t("Capitalsource.state") }}</th>
-              <th>{{ $t("General.iban") }}</th>
-              <th>{{ $t("General.bic") }}</th>
-              <th>{{ $t("General.validFrom") }}</th>
-              <th>{{ $t("General.validTil") }}</th>
-              <th>{{ $t("Capitalsource.groupUse") }}</th>
-              <th>{{ $t("Capitalsource.importAllowed") }}</th>
-              <th colspan="2"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <ListCapitalsourceRowVue
-              v-for="mcs in capitalsources"
-              :key="mcs.id"
-              :mcs="mcs"
-              :owner="mcs.userId === userId"
-              @delete-capitalsource="deleteCapitalsource"
-              @edit-capitalsource="editCapitalsource"
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <DivFilter
+      v-model="searchString"
+      :placeholder="$t('Capitalsource.searchBy')"
+      @validNowToggled="validNowToggled"
+      @createClicked="showCreateCapitalsourceModal"
+    />
+
+    <DivContentTable>
+      <thead>
+        <tr>
+          <th>{{ $t("General.name") }}</th>
+          <th>{{ $t("Capitalsource.type") }}</th>
+          <th>{{ $t("Capitalsource.state") }}</th>
+          <th>{{ $t("General.iban") }}</th>
+          <th>{{ $t("General.bic") }}</th>
+          <th>{{ $t("General.validFrom") }}</th>
+          <th>{{ $t("General.validTil") }}</th>
+          <th>{{ $t("Capitalsource.groupUse") }}</th>
+          <th>{{ $t("Capitalsource.importAllowed") }}</th>
+          <th colspan="2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <ListCapitalsourceRowVue
+          v-for="mcs in capitalsources"
+          :key="mcs.id"
+          :mcs="mcs"
+          :owner="mcs.userId === userId"
+          @delete-capitalsource="deleteCapitalsource"
+          @edit-capitalsource="editCapitalsource"
+        />
+      </tbody>
+    </DivContentTable>
   </div>
 </template>
 
@@ -102,6 +59,8 @@ import { onMounted, ref, useTemplateRef, watch } from "vue";
 import { useCapitalsourceStore } from "@/stores/CapitalsourceStore";
 import { useUserSessionStore } from "@/stores/UserSessionStore";
 
+import DivContentTable from "@/components/DivContentTable.vue";
+import DivFilter from "@/components/DivFilter.vue";
 import CreateCapitalsourceModalVue from "@/components/capitalsource/CreateCapitalsourceModal.vue";
 import DeleteCapitalsourceModalVue from "@/components/capitalsource/DeleteCapitalsourceModal.vue";
 import ListCapitalsourceRowVue from "@/components/capitalsource/ListCapitalsourceRow.vue";
@@ -113,19 +72,18 @@ const validNow = ref(true);
 const capitalsources = ref(new Array<Capitalsource>());
 const searchString = ref("");
 
-const createCapitalsourceModalList = useTemplateRef<typeof CreateCapitalsourceModalVue>('createCapitalsourceModalList');
-const deleteModal = useTemplateRef<typeof DeleteCapitalsourceModalVue>('deleteModal');
+const createCapitalsourceModalList = useTemplateRef<
+  typeof CreateCapitalsourceModalVue
+>("createCapitalsourceModalList");
+const deleteModal =
+  useTemplateRef<typeof DeleteCapitalsourceModalVue>("deleteModal");
 
 const userId = useUserSessionStore().getUserId;
 
 const capitalsourceStore = useCapitalsourceStore();
 const searchCapitalsources = capitalsourceStore.searchCapitalsources;
 const { capitalsource } = storeToRefs(capitalsourceStore);
 
-watch(capitalsource, () => {
-  searchAllContent();
-});
-
 const showCreateCapitalsourceModal = () => {
   createCapitalsourceModalList.value?._show();
 };
@@ -138,6 +96,19 @@ const editCapitalsource = (mcs: Capitalsource) => {
   createCapitalsourceModalList.value?._show(mcs);
 };
 
+watch(capitalsource, () => {
+  searchAllContent();
+});
+
+watch(searchString, () => {
+  searchContent();
+});
+
+const validNowToggled = (myValidNow: boolean) => {
+  validNow.value = myValidNow;
+  searchContent();
+};
+
 const searchAllContent = () => {
   searchString.value = "";
   searchContent();