[CI] Add woodpecker-ci

.eslintrc.js

@@ -44,7 +44,7 @@ module.exports = {
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier', //'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
 
   plugins: [
@@ -54,10 +54,6 @@ 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
@@ -65,7 +61,7 @@ module.exports = {
     'prefer-promise-reject-errors': 'off',
 
     // TypeScript
-    quotes: ['warn', 'single', { avoidEscape: true }],
+    quotes: ['error', 'single', { avoidEscape: true }],
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     'vue/multi-word-component-names': 'off',

.npmignore

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

.woodpecker/.deploy.yml

@@ -0,0 +1,14 @@
+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

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

README.md

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

src/components/CalculationTable.vue

@@ -38,7 +38,12 @@
     <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
         <q-card>
-          <q-img v-if="showPic" style="max-height: 256px" :src="image(props.row.id)">
+          <q-img
+            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"
@@ -83,6 +88,33 @@
               </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">
@@ -191,8 +223,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({
@@ -222,7 +254,7 @@ export default defineComponent({
 
     onBeforeMount(() => {
       //void store.getDrinks();
-      onRequest({
+      void onRequest({
         pagination: pagination.value,
         filter: undefined,
       });
@@ -237,8 +269,6 @@ export default defineComponent({
         name: 'name',
         label: 'Name',
         field: 'name',
-        sortable: true,
-        sort,
         filterable: true,
         public: true,
       },
@@ -248,8 +278,6 @@ 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,
       },
@@ -275,7 +303,6 @@ export default defineComponent({
         label: 'Artikelnummer',
         field: 'article_id',
         sortable: true,
-        sort,
         filterable: true,
         public: false,
       },
@@ -284,7 +311,6 @@ export default defineComponent({
         label: 'Inhalt in l des Gebinde',
         field: 'volume',
         sortable: true,
-        sort,
         public: false,
       },
       {
@@ -292,7 +318,6 @@ export default defineComponent({
         label: 'Gebindegröße',
         field: 'package_size',
         sortable: true,
-        sort,
         public: false,
       },
       {
@@ -301,7 +326,6 @@ export default defineComponent({
         field: 'cost_per_package',
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
         sortable: true,
-        sort,
         public: false,
       },
       {
@@ -310,7 +334,6 @@ 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',
@@ -439,12 +462,12 @@ export default defineComponent({
       void store.updateDrink(drink);
     }
 
-    async function deleteDrink() {
+    function deleteDrink() {
       if (editDrink.value) {
-        await store.deleteDrink(editDrink.value);
+        store.deleteDrink(editDrink.value);
       }
       editDrink.value = undefined;
-      onRequest({ pagination: pagination.value, filter: search.value });
+      void onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     const showNewDrink = ref(false);
@@ -532,12 +555,15 @@ export default defineComponent({
           editDrink.value.id = _drink.id;
         }
       }
-      if (drinkPic instanceof File) {
+      if (drinkPic instanceof File && drinkPic.name) {
         await savePicture(drinkPic);
+        if (drink.id > 0) {
+          setNewImage(drink.id);
+        }
       }
       editDrink.value = undefined;
       notLoading.value = true;
-      onRequest({ pagination: pagination.value, filter: search.value });
+      void onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     function get_volumes(drink_id: number) {
@@ -546,20 +572,15 @@ 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) {
-        return `${
-          api.defaults.baseURL || ''
-        }/pricelist/drinks/${id}/picture?thumbnail?t=${new Date()}`;
+        const _newImage = getNewImage(id);
+        if (_newImage) {
+          return `${
+            api.defaults.baseURL || ''
+          }/pricelist/drinks/${id}/picture?thumbnail?t=${_newImage.lastModified.toString()}`;
+        }
+        return `${api.defaults.baseURL || ''}/pricelist/drinks/${id}/picture?thumbnail`;
       }
       return 'no-image.svg';
     }
@@ -587,7 +608,6 @@ export default defineComponent({
       editing_drink,
       get_volumes,
       notLoading,
-      getImageLoading,
       newDrink,
       hasPermission,
       PERMISSIONS,

src/components/DrinkModify.vue

@@ -24,26 +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
+            :clearable="drinkPic.name != ''"
             dense
+            accept=".jpg, .jpeg, .png, image/*"
             @update:model-value="imagePreview"
-            @clear="imgsrc = undefined"
+            @clear="clear"
           >
-            <template #prepend>
-              <q-icon name="mdi-image" />
+            <template #file>
+              <q-img :src="image" style="max-height: 256px" fit="contain" />
             </template>
           </q-file>
         </div>
-        <div class="col-2 q-pa-sm text-right">
-          <q-btn round icon="mdi-delete" color="negative" size="sm" @click="delete_pic">
-            <q-tooltip> Bild entfernen </q-tooltip>
-          </q-btn>
+        <div class="column justify-center">
+          <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>
@@ -146,6 +148,7 @@
 </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';
@@ -240,7 +243,7 @@ export default defineComponent({
       edit_drink.value?.receipt?.splice(event, 1);
     }
 
-    const drinkPic = ref();
+    const drinkPic = ref<File>(new File([], '', {}));
     const imgsrc = ref();
 
     const deletePic = ref(false);
@@ -248,7 +251,7 @@ export default defineComponent({
     function delete_pic() {
       deletePic.value = true;
       imgsrc.value = undefined;
-      drinkPic.value = undefined;
+      drinkPic.value = new File([], '', {});
       if (edit_drink.value) {
         edit_drink.value.has_image = false;
       }
@@ -268,16 +271,22 @@ 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()}`;
+        }
         return `${api.defaults.baseURL || ''}/pricelist/drinks/${
           edit_drink.value.id
-        }/picture?thumbnail?t=${new Date()}`;
+        }/picture?thumbnail`;
       }
       return 'no-image.svg';
     });
@@ -326,6 +335,11 @@ 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,
@@ -352,6 +366,7 @@ export default defineComponent({
       hasIngredients,
       hasPermission,
       PERMISSIONS,
+      clear,
     };
   },
 });

src/utils/image.ts

@@ -0,0 +1,20 @@
+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() });
+  }
+}