First draft of new material page

ecamp · Jun 26, 2023 · 5098217 · 5098217
1 parent e079cb7
commit 5098217
Show file tree

Hide file tree

Showing 12 changed files with 266 additions and 59 deletions.
diff --git a/frontend/src/components/campAdmin/CampMaterialLists.vue b/frontend/src/components/campAdmin/CampMaterialLists.vue
@@ -1,32 +1,36 @@
 <template>
-  <content-group>
-    <slot name="title">
-      <div class="ec-content-group__title py-1 subtitle-1">
-        {{ $tc('components.campAdmin.campMaterialLists.title') }}
-        <dialog-material-list-create v-if="!disabled" :camp="camp()">
-          <template #activator="{ on }">
-            <button-add
-              color="secondary"
-              text
-              :hide-label="$vuetify.breakpoint.xsOnly"
-              class="my-n1"
-              v-on="on"
-            >
-              {{ $tc('components.campAdmin.campMaterialLists.createMaterialList') }}
-            </button-add>
-          </template>
-        </dialog-material-list-create>
-      </div>
-    </slot>
+  <content-group :title="$tc('components.campAdmin.campMaterialLists.title')">
+    <template #title-actions>
+      <dialog-material-list-create v-if="!disabled" :camp="camp()">
+        <template #activator="{ on }">
+          <button-add
+            color="secondary"
+            text
+            :hide-label="$vuetify.breakpoint.xsOnly"
+            class="my-n1"
+            v-on="on"
+          >
+            {{ $tc('components.campAdmin.campMaterialLists.createMaterialList') }}
+          </button-add>
+        </template>
+      </dialog-material-list-create>
+    </template>
     <v-skeleton-loader v-if="camp().materialLists()._meta.loading" type="article" />
-    <v-list>
-      <camp-material-lists-item
+    <v-list class="mx-n2">
+      <dialog-material-list-edit
         v-for="materialList in materialLists.allItems"
         :key="materialList._meta.self"
-        class="px-0"
         :material-list="materialList"
-        :disabled="disabled"
-      />
+      >
+        <template #activator="{ on }">
+          <camp-material-lists-item
+            class="px-0"
+            :material-list="materialList"
+            :disabled="disabled"
+            v-on="on"
+          />
+        </template>
+      </dialog-material-list-edit>
     </v-list>
   </content-group>
 </template>
@@ -36,10 +40,14 @@ import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
 import CampMaterialListsItem from '@/components/campAdmin/CampMaterialListsItem.vue'
 import DialogMaterialListCreate from './DialogMaterialListCreate.vue'
 import ContentGroup from '@/components/layout/ContentGroup.vue'
+import DialogMaterialListEdit from '@/components/campAdmin/DialogMaterialListEdit.vue'
+import ButtonEdit from '@/components/buttons/ButtonEdit.vue'
 
 export default {
   name: 'CampMaterialLists',
   components: {
+    ButtonEdit,
+    DialogMaterialListEdit,
     ContentGroup,
     ButtonAdd,
     CampMaterialListsItem,

diff --git a/frontend/src/components/campAdmin/CampMaterialListsItem.vue b/frontend/src/components/campAdmin/CampMaterialListsItem.vue
@@ -1,17 +1,20 @@
 <template>
-  <v-list-item v-if="!materialList._meta.loading">
+  <v-list-item class="px-2 rounded" two-line v-on="$listeners">
     <v-list-item-content class="pt-0 pb-2">
       <v-list-item-title>{{ materialList.name }}</v-list-item-title>
+      <v-list-item-subtitle>{{
+        $tc(
+          'components.campAdmin.campMaterialListsItem.materialsCount',
+          materialList.materialItems().totalItems,
+          {
+            count: materialList.materialItems().totalItems,
+          }
+        )
+      }}</v-list-item-subtitle>
     </v-list-item-content>
 
     <v-list-item-action v-if="!disabled" style="display: inline">
-      <v-item-group>
-        <dialog-material-list-edit :material-list="materialList">
-          <template #activator="{ on }">
-            <button-edit class="mr-1" v-on="on" />
-          </template>
-        </dialog-material-list-edit>
-      </v-item-group>
+      <button-edit color="primary--text" text class="my-n1 v-btn--has-bg" />
     </v-list-item-action>
 
     <v-menu v-if="!disabled" offset-y>

diff --git a/frontend/src/components/campAdmin/DialogMaterialListEdit.vue b/frontend/src/components/campAdmin/DialogMaterialListEdit.vue
@@ -1,5 +1,5 @@
 <template>
-  <dialog-form
+  <DetailEdit
     v-model="showDialog"
     :loading="loading"
     :error="error"
@@ -12,18 +12,35 @@
     <template #activator="scope">
       <slot name="activator" v-bind="scope" />
     </template>
+
+    <template #moreActions>
+      <dialog-entity-delete :entity="materialList" :error-handler="deleteErrorHandler">
+        <template #activator="{ on }">
+          <button-delete v-on="on" />
+        </template>
+        {{ $tc('components.campAdmin.campMaterialListsItem.deleteWarning') }} <br />
+        <ul>
+          <li>
+            {{ materialList.name }}
+          </li>
+        </ul>
+      </dialog-entity-delete>
+    </template>
     <dialog-material-list-form :material-list="entityData" />
-  </dialog-form>
+  </DetailEdit>
 </template>
 
 <script>
 import DialogBase from '@/components/dialog/DialogBase.vue'
 import DialogForm from '@/components/dialog/DialogForm.vue'
 import DialogMaterialListForm from './DialogMaterialListForm.vue'
+import DetailEdit from '@/components/generic/DetailPane.vue'
+import DialogEntityDelete from '@/components/dialog/DialogEntityDelete.vue'
+import ButtonDelete from '@/components/buttons/ButtonDelete.vue'
 
 export default {
   name: 'DialogMaterialListEdit',
-  components: { DialogForm, DialogMaterialListForm },
+  components: { ButtonDelete, DialogEntityDelete, DetailEdit, DialogMaterialListForm },
   extends: DialogBase,
   props: {
     materialList: { type: Object, required: true },

diff --git a/frontend/src/components/material/MaterialCreateItem.vue b/frontend/src/components/material/MaterialCreateItem.vue
@@ -3,20 +3,22 @@
     v-if="materialLists.length > 0"
     ref="validation"
     tag="tr"
-    class="newItemRow"
+    class="newItemRow align-top"
     @keyup.enter="submitForm"
   >
-    <td>
+    <td style="vertical-align: top">
       <e-text-field
         ref="quantity"
         v-model="materialItem.quantity"
         dense
         type="number"
+        :hint="$tc('entity.materialItem.fields.quantity')"
+        persistent-hint
         :name="$tc('entity.materialItem.fields.quantity')"
         fieldname="quantity"
       />
     </td>
-    <td>
+    <td style="vertical-align: top">
       <e-text-field
         v-model="materialItem.unit"
         dense
@@ -25,7 +27,7 @@
         maxlength="32"
       />
     </td>
-    <td>
+    <td style="vertical-align: top">
       <e-text-field
         v-model="materialItem.article"
         dense
@@ -35,7 +37,7 @@
         maxlength="64"
       />
     </td>
-    <td :colspan="columns - 4">
+    <td :colspan="columns - 4" style="vertical-align: top">
       <e-select
         v-model="materialItem.materialList"
         dense
@@ -45,7 +47,7 @@
         :items="materialLists"
       />
     </td>
-    <td>
+    <td style="vertical-align: top">
       <button-add hide-label @click="submitForm" />
     </td>
   </ValidationObserver>

diff --git a/frontend/src/components/material/MaterialTable.vue b/frontend/src/components/material/MaterialTable.vue
@@ -40,6 +40,7 @@
         v-if="!item.readonly"
         :disabled="layoutMode || disabled"
         dense
+        :outlined="false"
         :uri="item.uri"
         fieldname="quantity"
         type="number"
@@ -52,6 +53,7 @@
         v-if="!item.readonly"
         :disabled="layoutMode || disabled"
         dense
+        :outlined="false"
         :uri="item.uri"
         fieldname="unit"
         maxlength="32"
@@ -64,6 +66,7 @@
         v-if="!item.readonly"
         :disabled="layoutMode || disabled"
         dense
+        :outlined="false"
         :uri="item.uri"
         fieldname="article"
         maxlength="64"
@@ -76,6 +79,7 @@
         v-if="!item.readonly"
         :disabled="layoutMode || disabled"
         dense
+        :outlined="false"
         :uri="item.uri"
         fieldname="materialList"
         :items="materialLists"
@@ -253,10 +257,9 @@ export default {
         {
           text: this.$tc('entity.materialItem.fields.quantity'),
           value: 'quantity',
-          align: 'start',
+          align: 'end',
           sortable: false,
           groupable: false,
-          width: '10%',
         },
         {
           text: this.$tc('entity.materialItem.fields.unit'),

diff --git a/frontend/src/components/material/PeriodMaterialLists.vue b/frontend/src/components/material/PeriodMaterialLists.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-expansion-panel>
+  <v-expansion-panel :value="true">
     <v-expansion-panel-header>
       <h3 class="grey--text text--darken-1">
         {{ period.description }}
@@ -30,7 +30,7 @@ export default {
   props: {
     period: { type: Object, required: true },
     showActivityMaterial: { type: Boolean, required: true },
-    groupByList: { type: Boolean, required: true },
+    groupByList: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
   },
   data() {

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -77,7 +77,8 @@
       },
       "campMaterialListsItem": {
         "deleteError": "Materialliste konnte nicht gelöscht werden. Überprüfe vor dem Löschen, dass die Liste leer ist.",
-        "deleteWarning": "Möchtest du diese Materialliste wirklich löschen?"
+        "deleteWarning": "Möchtest du diese Materialliste wirklich löschen?",
+        "materialsCount": "Keine Einträge | 1 Eintrag | {count} Einträge"
       },
       "campPeriods": {
         "createPeriod": "Lagerabschnitt erstellen",
@@ -397,6 +398,9 @@
       "printPreview": "Druckvorschau öffnen",
       "sideBarProgram": {
         "title": "Tagesübersicht"
+      },
+      "sideBarMateriallists": {
+        "title": "Materiallisten"
       }
     },
     "auth": {
@@ -570,6 +574,11 @@
       "prototypeCamps": "Vorlagen",
       "title": "Meine Lager"
     },
+    "material": {
+      "material": {
+        "title": "Material: {name}"
+      }
+    },
     "pageNotFound": {
       "backToHome": "Zurück zur Startseite",
       "detail": "Hoppla. Du bist vom Weg abgekommen…{br}Dieser Link funktioniert leider nicht."

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -77,7 +77,8 @@
       },
       "campMaterialListsItem": {
         "deleteError": "Could not delete the material list. Check if the list is empty before deleting it.",
-        "deleteWarning": "Do you really want to delete this material list?"
+        "deleteWarning": "Do you really want to delete this material list?",
+        "materialsCount": "No entries|1 entry|{count} entries"
       },
       "campPeriods": {
         "createPeriod": "Create period",

diff --git a/frontend/src/router.js b/frontend/src/router.js
@@ -245,11 +245,6 @@ export default new Router({
             redirectToPeriod(to, from, next, 'camp/period/story')
           },
         },
-        {
-          path: 'material',
-          name: 'camp/material',
-          component: () => import('./views/camp/Material.vue'),
-        },
         {
           path: 'dashboard',
           name: 'camp/dashboard',
@@ -262,6 +257,48 @@ export default new Router({
         },
       ],
     },
+    {
+      path: '/camps/:campId/:campTitle?/material',
+      components: {
+        navigation: NavigationCamp,
+        default: () => import('./views/camp/Camp.vue'),
+        aside: () => import('./views/material/SideBarMateriallists.vue'),
+      },
+      beforeEnter: all([requireAuth, requireCamp]),
+      props: {
+        navigation: (route) => ({ camp: campFromRoute(route) }),
+        aside: (route) => ({ camp: campFromRoute(route) }),
+        default: (route) => ({
+          camp: campFromRoute(route),
+          period: periodFromRoute(route),
+          layout: 'full',
+        }),
+      },
+      children: [
+        {
+          name: 'camp/material',
+          path: '',
+          component: () => import('./views/camp/Material.vue'),
+        },
+      ],
+    },
+    {
+      name: 'materialList',
+      path: '/camps/:campId/:campTitle?/material/:materialId/:materialName?',
+      components: {
+        navigation: NavigationCamp,
+        default: () => import('./views/material/Material.vue'),
+        aside: () => import('./views/material/SideBarMateriallists.vue'),
+      },
+      beforeEnter: all([requireAuth, requireCamp]),
+      props: {
+        navigation: (route) => ({ camp: campFromRoute(route) }),
+        aside: (route) => ({ camp: campFromRoute(route) }),
+        default: (route) => ({
+          camp: campFromRoute(route),
+        }),
+      },
+    },
     {
       path: '/camps/:campId/:campTitle/admin/category/:categoryId/:categoryName?',
       name: 'category',
@@ -427,6 +464,25 @@ export function campRoute(camp, subroute = 'dashboard', query = {}) {
   }
 }
 
+/**
+ * @param camp
+ * @param materialList
+ * @param query
+ */
+export function materialRoute(camp, materialList, query = {}) {
+  if (!camp?._meta || camp.meta?.loading) return {}
+  return {
+    name: 'materialList',
+    params: {
+      campId: camp.id,
+      campTitle: slugify(camp.title),
+      materialId: materialList.id,
+      materialName: slugify(materialList.name),
+    },
+    query,
+  }
+}
+
 export function loginRoute(redirectTo) {
   return { path: '/login', query: { redirect: redirectTo } }
 }