.eslintrc.js

@@ -44,7 +44,7 @@ module.exports = {
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
-    'plugin:prettier/recommended',
+    'prettier', //'plugin:prettier/recommended'
   ],
 
   plugins: [
@@ -54,6 +54,10 @@ module.exports = {
     // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
     // required to lint *.vue files
     'vue',
+
+    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
+    // Prettier has not been included as plugin to avoid performance impact
+    // add it as an extension for your IDE
   ],
 
   // add your custom rules here
@@ -61,7 +65,7 @@ module.exports = {
     'prefer-promise-reject-errors': 'off',
 
     // TypeScript
-    quotes: ['error', 'single', { avoidEscape: true }],
+    quotes: ['warn', 'single', { avoidEscape: true }],
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     'vue/multi-word-component-names': 'off',

.npmignore

@@ -1 +0,0 @@
-.woodpecker/

.woodpecker/.deploy.yml

@@ -1,14 +0,0 @@
-pipeline:
-  deploy:
-    when:
-      event: tag
-      tag: v*
-    image: node:lts-alpine
-    commands:
-      - echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" > .npmrc
-      - yarn publish --non-interactive
-    secrets: [ node_auth_token ]
-
-depends_on:
-  - lint
-

.woodpecker/.lint.yml

@@ -1,9 +0,0 @@
-pipeline:
-  lint:
-    when:
-      branch: [main, develop]
-    image: node:lts-alpine
-    commands:
-      - yarn install
-      - yarn lint
-

README.md

@@ -1,5 +1,4 @@
 # Flaschengeist `pricelist` fontend-plugin
-![status-badge](https://ci.os-sc.org/api/badges/Flaschengeist/flaschengeist-pricelist/status.svg)
 
 This package provides the [Flaschengeist](https://flaschengeist.dev/Flaschengeist/flaschengeist) frontend for the pricelist plugin (build and manage drinks, show pricelist and calculate prices).
 

package.json

@@ -1,6 +1,6 @@
 {
   "license": "MIT",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.4",
   "name": "@flaschengeist/pricelist",
   "author": "Tim Gröger <flaschengeist@wu5.de>",
   "homepage": "https://flaschengeist.dev/Flaschengeist",
@@ -22,22 +22,21 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@flaschengeist/types": "^1.0.0-alpha.10",
+    "@flaschengeist/types": "^1.0.0-alpha.5",
-    "@quasar/app": "^3.2.4",
+    "@quasar/app": "^3.2.2",
-    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.5.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
-    "eslint-plugin-vue": "^8.1.1",
+    "pinia": "^2.0.3",
-    "pinia": "^2.0.6",
+    "prettier": "^2.4.1",
-    "prettier": "^2.5.1",
+    "quasar": "^2.3.2",
-    "quasar": "^2.3.3",
+    "typescript": "^4.4.4"
-    "typescript": "^4.5.2"
   },
   "peerDependencies": {
-    "@flaschengeist/api": "^1.0.0-alpha.7",
+    "@flaschengeist/api": "^1.0.0-alpha.2",
-    "@flaschengeist/users": "^1.0.0-alpha.3"
+    "@flaschengeist/users": "^1.0.0-alpha.1"
   },
   "prettier": {
     "singleQuote": true,

src/components/CalculationTable.vue

@@ -38,12 +38,7 @@
     <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
         <q-card>
-          <q-img
+          <q-img v-if="showPic" style="max-height: 256px" :src="image(props.row.id)">
-            v-if="showPic && props.row.has_image"
-            style="max-height: 256px"
-            :src="image(props.row.id)"
-            fit="contain"
-          >
             <div
               v-if="!public && !nodetails && editable"
               class="absolute-top-right justify-end"
@@ -88,33 +83,6 @@
               </div>
             </template>
           </q-img>
-          <q-img
-            v-if="showPic && !props.row.has_image"
-            class="bg-white"
-            style="max-height: 256px"
-            src="no-image.svg"
-          >
-            <div
-              v-if="!public && !nodetails && editable"
-              class="absolute-top-right justify-end"
-              style="background-color: transparent"
-            >
-              <q-btn
-                round
-                icon="mdi-pencil"
-                style="background-color: rgba(0, 0, 0, 0.5)"
-                @click="editDrink = props.row"
-              />
-            </div>
-            <div class="absolute-bottom-right justify-end">
-              <div class="text-subtitle1 text-right">
-                {{ props.row.name }}
-              </div>
-              <div class="text-caption text-right">
-                {{ props.row.type.name }}
-              </div>
-            </div>
-          </q-img>
           <q-card-section v-if="!showPic">
             <div class="row">
               <div class="col">
@@ -223,8 +191,8 @@ import { filter, Search } from '../utils/filter';
 import SearchInput from './SearchInput.vue';
 import DrinkModify from './DrinkModify.vue';
 import { DeleteObjects } from '../utils/utils';
-import { setNewImage, getNewImage } from '../utils/image';
 import { PERMISSIONS } from '../permissions';
+import { sort } from '../utils/sort';
 import { Notify } from 'quasar';
 
 export default defineComponent({
@@ -254,7 +222,7 @@ export default defineComponent({
 
     onBeforeMount(() => {
       //void store.getDrinks();
-      void onRequest({
+      onRequest({
         pagination: pagination.value,
         filter: undefined,
       });
@@ -269,6 +237,8 @@ export default defineComponent({
         name: 'name',
         label: 'Name',
         field: 'name',
+        sortable: true,
+        sort,
         filterable: true,
         public: true,
       },
@@ -278,6 +248,8 @@ export default defineComponent({
         label: 'Kategorie',
         field: 'type',
         format: (val: FG.DrinkType) => `${val.name}`,
+        sortable: true,
+        sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
         filterable: true,
         public: true,
       },
@@ -303,6 +275,7 @@ export default defineComponent({
         label: 'Artikelnummer',
         field: 'article_id',
         sortable: true,
+        sort,
         filterable: true,
         public: false,
       },
@@ -311,6 +284,7 @@ export default defineComponent({
         label: 'Inhalt in l des Gebinde',
         field: 'volume',
         sortable: true,
+        sort,
         public: false,
       },
       {
@@ -318,6 +292,7 @@ export default defineComponent({
         label: 'Gebindegröße',
         field: 'package_size',
         sortable: true,
+        sort,
         public: false,
       },
       {
@@ -326,6 +301,7 @@ export default defineComponent({
         field: 'cost_per_package',
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
         sortable: true,
+        sort,
         public: false,
       },
       {
@@ -334,6 +310,7 @@ export default defineComponent({
         field: 'cost_per_volume',
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
         sortable: true,
+        sort: (a: ComputedRef, b: ComputedRef) => sort(a.value, b.value),
       },
       {
         name: 'volumes',
@@ -462,12 +439,12 @@ export default defineComponent({
       void store.updateDrink(drink);
     }
 
-    function deleteDrink() {
+    async function deleteDrink() {
       if (editDrink.value) {
-        store.deleteDrink(editDrink.value);
+        await store.deleteDrink(editDrink.value);
       }
       editDrink.value = undefined;
-      void onRequest({ pagination: pagination.value, filter: search.value });
+      onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     const showNewDrink = ref(false);
@@ -555,15 +532,12 @@ export default defineComponent({
           editDrink.value.id = _drink.id;
         }
       }
-      if (drinkPic instanceof File && drinkPic.name) {
+      if (drinkPic instanceof File) {
         await savePicture(drinkPic);
-        if (drink.id > 0) {
-          setNewImage(drink.id);
-        }
       }
       editDrink.value = undefined;
       notLoading.value = true;
-      void onRequest({ pagination: pagination.value, filter: search.value });
+      onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     function get_volumes(drink_id: number) {
@@ -572,15 +546,20 @@ export default defineComponent({
 
     const notLoading = ref(true);
 
+    const imageloading = ref<Array<{ id: number; loading: boolean }>>([]);
+    function getImageLoading(id: number) {
+      const loading = imageloading.value.find((a) => a.id === id);
+      if (loading) {
+        return loading.loading;
+      }
+      return false;
+    }
+
     function image(id: number | undefined) {
       if (id) {
-        const _newImage = getNewImage(id);
-        if (_newImage) {
         return `${
           api.defaults.baseURL || ''
-          }/pricelist/drinks/${id}/picture?thumbnail?t=${_newImage.lastModified.toString()}`;
+        }/pricelist/drinks/${id}/picture?thumbnail?t=${new Date()}`;
-        }
-        return `${api.defaults.baseURL || ''}/pricelist/drinks/${id}/picture?thumbnail`;
       }
       return 'no-image.svg';
     }
@@ -608,6 +587,7 @@ export default defineComponent({
       editing_drink,
       get_volumes,
       notLoading,
+      getImageLoading,
       newDrink,
       hasPermission,
       PERMISSIONS,

src/components/DrinkModify.vue

@@ -24,30 +24,28 @@
       </div>
     </q-card-section>
     <q-card-section>
+      <q-img :src="image" style="max-height: 256px" fit="contain" />
       <div class="full-width row">
         <div class="col-10 q-pa-sm">
           <q-file
             v-model="drinkPic"
             filled
-            :clearable="drinkPic.name != ''"
+            clearable
             dense
-            accept=".jpg, .jpeg, .png, image/*"
             @update:model-value="imagePreview"
-            @clear="clear"
+            @clear="imgsrc = undefined"
           >
-            <template #file>
+            <template #prepend>
-              <q-img :src="image" style="max-height: 256px" fit="contain" />
+              <q-icon name="mdi-image" />
             </template>
           </q-file>
         </div>
-        <div class="column justify-center">
+        <div class="col-2 q-pa-sm text-right">
-          <div class="col-2 q-pa-sm">
           <q-btn round icon="mdi-delete" color="negative" size="sm" @click="delete_pic">
             <q-tooltip> Bild entfernen </q-tooltip>
           </q-btn>
         </div>
       </div>
-      </div>
     </q-card-section>
     <q-card-section>
       <q-select
@@ -148,7 +146,6 @@
 </template>
 <script lang="ts">
 import { clone, calc_min_prices, DeleteObjects, calc_cost_per_volume } from '../utils/utils';
-import { getNewImage } from '../utils/image';
 import { defineComponent, PropType, ref, onBeforeMount, computed } from 'vue';
 import DrinkPriceVolumes from './CalculationTable/DrinkPriceVolumes.vue';
 import BuildManual from '../components/CalculationTable/BuildManual.vue';
@@ -243,7 +240,7 @@ export default defineComponent({
       edit_drink.value?.receipt?.splice(event, 1);
     }
 
-    const drinkPic = ref<File>(new File([], '', {}));
+    const drinkPic = ref();
     const imgsrc = ref();
 
     const deletePic = ref(false);
@@ -251,7 +248,7 @@ export default defineComponent({
     function delete_pic() {
       deletePic.value = true;
       imgsrc.value = undefined;
-      drinkPic.value = new File([], '', {});
+      drinkPic.value = undefined;
       if (edit_drink.value) {
         edit_drink.value.has_image = false;
       }
@@ -271,22 +268,16 @@ export default defineComponent({
 
     const image = computed(() => {
       console.log(imgsrc.value, deletePic.value, edit_drink.value);
+      if (deletePic.value) {
+        return 'no-image.svg';
+      }
       if (imgsrc.value) {
         return <string>imgsrc.value;
       }
-      if (deletePic.value && !imgsrc.value) {
-        return 'no-image.svg';
-      }
       if (edit_drink.value?.has_image) {
-        const _image = getNewImage(edit_drink.value?.id);
-        if (_image) {
         return `${api.defaults.baseURL || ''}/pricelist/drinks/${
           edit_drink.value.id
-          }/picture?thumbnail?t=${_image.lastModified.toString()}`;
+        }/picture?thumbnail?t=${new Date()}`;
-        }
-        return `${api.defaults.baseURL || ''}/pricelist/drinks/${
-          edit_drink.value.id
-        }/picture?thumbnail`;
       }
       return 'no-image.svg';
     });
@@ -335,11 +326,6 @@ export default defineComponent({
       edit_volumes.value?.some((a) => a.ingredients.length > 0)
     );
 
-    function clear(val: File) {
-      drinkPic.value = new File([], '', {});
-      imgsrc.value = undefined;
-    }
-
     return {
       edit_drink,
       save,
@@ -366,7 +352,6 @@ export default defineComponent({
       hasIngredients,
       hasPermission,
       PERMISSIONS,
-      clear,
     };
   },
 });

src/utils/image.ts

@@ -1,20 +0,0 @@
-import { ref } from 'vue';
-
-const newImage = ref<Array<{ id: number; lastModified: Date }>>([]);
-
-export function getNewImage(id: number) {
-  const image = newImage.value.find((a) => a.id === id);
-  if (image) {
-    return image;
-  }
-  return null;
-}
-
-export function setNewImage(id: number) {
-  const image = newImage.value.find((a) => a.id === id);
-  if (image) {
-    image.lastModified = new Date();
-  } else {
-    newImage.value.push({ id, lastModified: new Date() });
-  }
-}