DevAndy | Denn ich habe kein Gefallen am Tod dessen, der sterben muss, spricht Gott, der Herr. So kehrt denn um, und ihr sollt leben!

Nuxt3 mit Vuetify 3 – Teil 3: Entwickeln in Vue / Typescript

Typescript muss in VS Code installiert werden. -g steht für globally (Alle Projekte)

npm i -g typescript

1	npm i -g typescript

Typescript Version prüfen

tsc --version

1	tsc --version

Enums

Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.

Objekte werden mit reactive<type>({…}) reactiviert und primitive Datentypen mit ref<string>(…)

const myVariable = ref<string>("test");
const opel = reactive<myCar>({wheels: 4, name'Astra'});

1 2	const myVariable = ref<string>("test"); const opel = reactive<myCar>({wheels: 4, name'Astra'});

Mixins werden in eine Vue Instanz hinzugefügt. So als würde man 2 Vue Instanzen verschmelzen. Composables sind dem ähnlich. In Mixins wird alles importiert, bei Composables muss jede Variable, Methode, etc. einzeln importiert werden.

Guter Artikel dazu:

What is a Vue.js Composable? – Vue.js Tutorials (vueschool.io)

Posted on 4. Mai 2022 by Andreas in Allgemein

Nuxt3 mit Vuetify 3 – Teil 2: Layout

Wenn man durch eine App navigiert, dann ist der Seitenaufbau überall identisch. Das Menü, die Kopfzeile und Fusszeile sind auf jeder Seite identisch. Lediglich der Inhalt ändert sich.

In Nuxt 3 werden Layouts im “layouts”-Ordner erstellt und anschließend in die app.vue hinzugefügt. Einzelne Seiten werden im “pages”-Ordner erstellt.

Nuxt 3 routet die pages anhand des Namens. Nur die page “index.vue” wird zum root Knoten geroutet.

Also erstellen wir ein Verzeichnis “layouts” und ein Verzeichnis “pages”.

In das “layouts” Verzeichnis, eine Datei erstellen “default.vue”.

und folgenden Inhalt kopieren:

<template>
  <v-app>
    <v-app-bar>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>Meine neue App</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn variant="text" icon="mdi-magnify"></v-btn>

      <v-btn variant="text" icon="mdi-filter"></v-btn>

      <v-btn variant="text" icon="mdi-dots-vertical"></v-btn>
    </v-app-bar>

    <!-- prepend-icon="mdi-folder"  -->
    <v-navigation-drawer v-model="drawer" bottom permanent>
      <v-list nav>
        <v-list-item
          v-for="item in items"
          :key="item.to"
          :title="item.title"
          :to="item.to"
        ></v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-main>
      <slot />
    </v-main>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    drawer: true,
    group: null,
    currentItem: null,
    items: [
      {
        title: "Start",
        to: "/",
      },
      {
        title: "Page 1",
        to: "pageOne",
      },
    ],
  }),

  watch: {
    group() {
      this.drawer = true;
    },
  },
};
</script>

<v-app>

<v-app-bar>

<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

<v-toolbar-title>Meine neue App</v-toolbar-title>

<v-spacer></v-spacer>

<v-btn variant="text" icon="mdi-magnify"></v-btn>

<v-btn variant="text" icon="mdi-filter"></v-btn>

<v-btn variant="text" icon="mdi-dots-vertical"></v-btn>

</v-app-bar>

<v-navigation-drawer v-model="drawer" bottom permanent>

<v-list nav>

<v-list-item

v-for="item in items"

:key="item.to"

:title="item.title"

:to="item.to"

></v-list-item>

</v-list>

</v-navigation-drawer>

<v-main>

</v-main>

</v-app>

</template>

export default {

data: () => ({

drawer: true,

group: null,

currentItem: null,

items: [

{

title: "Start",

to: "/",

{

title: "Page 1",

to: "pageOne",

}),

watch: {

group() {

this.drawer = true;

};

</script>

Dort, wo <slot /> steht, kommt der Inhalt der einzelnen Pages hinein.

Jetzt in das Verzeichnis “pages”

die Datei index.vue mit folgenden Inhalt

<template>
  <h1>Index page</h1>
</template>

<h1>Index page</h1>

</template>

und die Datei “pageOne.vue” mit folgenden Inhalt erstellen

<template>
  <h1>Page One</h1>
</template>

</template>

In der app.vue müssen wir nun sagen, dass wir nicht mehr die Nuxt Welcome page sehen wollen, sondern unser Layout:

<template>
  <NuxtLayout name="default">
    <NuxtPage />
  </NuxtLayout>
</template>

</NuxtLayout>

</template>

Posted on 4. Mai 2022 by Andreas in Allgemein

Nuxt3 mit Vuetify 3 – Teil 1: Installation

Wenn man aus der Microsoft Welt kommt und Webseiten mit JQuery bearbeitet hat, dann sind UI Framworks wie Vue eine wahre Veränderung. In meiner ASP WebApp habe ich Vue2 über CDN eingebunden und Vue anstatt JQuery genutzt. Vue funktioniert aber am besten mit NodeJs. Der Versuch NodeJs zu erlernen verlief aber immer in Frust. Weil es keinen roten Faden gibt, wie etwas umgesetzt werden kann. Es gibt keinen besten Weg. Es gibt sehr viele neue Begriffe und Definitionen, die Stück um Stück erlernt werden müssen. Es ist definitiv ein anderes lernen wie eine erprobte Sprache wie C# oder Java.

Deshalb ist hier mein roter Faden. Ziel soll am eine App sein, die folgende Punkte mit sich bringt:

Nuxt 3 als Wrapper über Vue3. Nuxt 3 schafft eine Ordnerstruktur und macht die imports z.B. überflüssig.
Vuetify 3 Beta. Zwar ist es noch in Beta Phase, aber es wird das beste UI Framework (Meiner Meinung nach)
Typescript: Die App soll in Typescript geschrieben sein
Pinia wird unser Statemanagement anstatt Vuex
Übersetzungen werden über i18n realisiert
Daten werden über externe .NET 6 Minimal Api mit Swagger abgerufen
Authorisierung erfolgt über eine ASP .NET 6 Proxy Anwendung

Posted on 4. Mai 2022 by Andreas in Allgemein

Template parsen in C#

Ok habe ich mir gedacht. Es wird ja wohl nicht so schwer sein folgenden Code zu parsen und die Templates entsprechend zu ersetzen:

Dies ist ein Test bla bla bla
{{for group in Groups}}
Die Bezeichnung der Gruppe ist: {{group.Title}}

{{for subGroup in a.SubGroups}}
Die Bezeichnung der Untergruppe ist: {{subGroup.Title}}
und auch hier kann ich auf die Gruppe zugreifen: {{group.Title}}
{{/for}}

{{/for}}
Und das Ende vom Lied ist das Ende vom Lied

Dies ist ein Test bla bla bla

Die Bezeichnung der Gruppe ist: {{group.Title}}

Die Bezeichnung der Untergruppe ist: {{subGroup.Title}}

und auch hier kann ich auf die Gruppe zugreifen: {{group.Title}}

Und das Ende vom Lied ist das Ende vom Lied

vue.js oder mustache verwendet eine ähnliche Syntax.

Ich könnte an dieser Stelle mustache für C# verwenden und er würde mir das Template ersetzen, allerdings benötige ich nicht nur das Ergebnis als String sondern ich möchte bei jedenm Iterationsaufruf eingreifen können.

Bisher habe ich mir folgende Tools angeschaut:

Mustache (Stubble): GitHub – StubbleOrg/Stubble: Trimmed down {{mustache}} templates in .NET
Antlr4: antlr4/index.md at master · antlr/antlr4 · GitHub
RegEx (Möchte ich aus performance Gründen nicht nutzen)
Sprache: GitHub – sprache/Sprache: A tiny, friendly, C# parser construction library
Superpower (Erweiterung von Sprache mit besserer Fehlerausgabe) GitHub – datalust/superpower: A C# parser construction toolkit with high-quality error reporting
Handlebars: GitHub – Handlebars-Net/Handlebars.Net: A real .NET Handlebars engine

Leider ist Sprache sehr schlecht dokumentiert und es fehlen Beispiele wie man das umsetzen könnte. Dennoch würde ich es gerne bevorzugen.

Posted on 23. August 2021 by Andreas in C#

Vue – Konstanten definieren

Konstanten kann man in Vue einfach im Created Hook definieren.

Generell sollte man sich das Arbeiten mit Konstanten angewöhnen.

if(UserTypeId == 7) {…} stellt den Entwickler vor die Frage, was an diesen UserType nun so besonders ist.

Besser: if(UserTypeId == USERTYPE_GUEST) . So weiß jeder, die folgende Logik betrifft den Gastbenutzer

                        created() {
                            this.USERTYPE_GUEST = 7;                            
                        },

created() {

this.USERTYPE_GUEST = 7;

Posted on 27. Mai 2021 by Andreas in Vue

Vue – Directive

Mal angenommen man möchte alle Felder auf einer Seite deaktivieren. Man könnte input für input durchgehen und mit :disabled=”isEditable” das Feld deaktivieren.
Oder man schreibt eine Custom Directive, die diese Logik abbildet: https://vuejs.org/v2/guide/custom-directive.html

Möchte man das global haben:

        Vue.directive("disableall", {            
            bind: function (el, binding) {
                if ((!binding.hasOwnProperty('value')) || binding.value) {
                    const tags = ["input", "button", "textarea", "select"];
                    tags.forEach(tagName => {
                        const nodes = el.getElementsByTagName(tagName);
                        for (let i = 0; i < nodes.length; i++) {
                            nodes[i].disabled = true;
                            nodes[i].tabIndex = -1;
                        }
                    });
                }
            }
        });

Vue.directive("disableall", {

bind: function (el, binding) {

if ((!binding.hasOwnProperty('value')) || binding.value) {

const tags = ["input", "button", "textarea", "select"];

tags.forEach(tagName => {

const nodes = el.getElementsByTagName(tagName);

for (let i = 0; i < nodes.length; i++) {

nodes[i].disabled = true;

nodes[i].tabIndex = -1;

}

});

}

});

Oder per Instanz:

                        directives: {
                            disableall: {
                                // directive definition
                                bind: function (el, binding) {
                                    if ((!binding.hasOwnProperty('value')) || binding.value) {
                                        const tags = ["input", "button", "textarea", "select"];
                                        tags.forEach(tagName => {
                                            const nodes = el.getElementsByTagName(tagName);
                                            for (let i = 0; i < nodes.length; i++) {
                                                nodes[i].disabled = true;
                                                nodes[i].tabIndex = -1;
                                            }
                                        });
                                    }
                                }
                            }
                        }

directives: {

disableall: {

// directive definition

bind: function (el, binding) {

if ((!binding.hasOwnProperty('value')) || binding.value) {

const tags = ["input", "button", "textarea", "select"];

tags.forEach(tagName => {

const nodes = el.getElementsByTagName(tagName);

for (let i = 0; i < nodes.length; i++) {

nodes[i].disabled = true;

nodes[i].tabIndex = -1;

}

});

}

Eingebunden wird das nun mit.

<div v-disableall="!isEditable">
...
</div>

...

</div>

oder

<div v-disableall="true">
...
</div>

...

</div>

oder ohne Bedingung

<div v-disableall>
...
</div>

...

</div>

Posted on 26. Mai 2021 by Andreas in Vue

Cmd Pfad autocomplete funktioniert nicht

Cmd öffnen

reg add "hkcu\software\microsoft\command processor" /v CompletionChar /d 9 /t REG_DWORD /f
reg add "hkcu\software\microsoft\command processor" /v PathCompletionChar /d 9 /t REG_DWORD /f

1 2	reg add "hkcu\software\microsoft\command processor" /v CompletionChar /d 9 /t REG_DWORD /f reg add "hkcu\software\microsoft\command processor" /v PathCompletionChar /d 9 /t REG_DWORD /f

Befehle eingeben
Cmd neustarten und mit cd Tab den Pfad autocompleten lassen 🙂

Posted on 10. April 2021 by Andreas in Allgemein

Applikationsdesign: Datensätze abarbeiten nach Punktesystem

Mir kam mal folgende Problemstellung in die Gedanken:

Mal angenommen ich muss unterschiedliche Aufgaben abarbeiten. Diese befinden sich in einer Warteschleife. So dass sie nacheinander oder auch asynchron parallel abgearbeitet werden sollen.

Jede Aufgabe besitzt eine Priorität. Sagen wie 1 (unwichtig) – 10 (sehr wichtig). In die Warteschleife kommen immer wieder Aufgaben nach. Das Problem ist, es werden die sehr wichtigen immer zuerst abgearbeitet. Die weniger wichtigen kommen daher nie dran und werden nie verarbeitet. Die Lösung ist ein Punktesystem mit Zeitangabe. Die Priorität ist dient dann als Faktor und wird mit der Anzahl Minuten multipliziert. Das ergibt die Summe der Punkte pro Datensatz

Beispiel: Es ist Momentan 12:00 Uhr Mittags.

Datensatz 1: Prio 4, Hinzugefügt um: 11 Uhr, Punkte: 4 * 60 = 240
Datensatz 2: Prio 9, Hinzugefügt um: 8 Uhr, Punkte: 9 * 240 = 2160
Datensatz 3: Prio 2, Hinzugefügt um: 4 Uhr, Punkte: 2 * 480 = 960

Sortiert man diese Liste nun nach Punkten ergibt sich eine neue Reihenfolge

Datensatz 2: Prio 9, Hinzugefügt um: 8 Uhr, Punkte: 9 * 240 = 2160
Datensatz 3: Prio 2, Hinzugefügt um: 4 Uhr, Punkte: 2 * 480 = 960
Datensatz 1: Prio 4, Hinzugefügt um: 11 Uhr, Punkte: 4 * 60 = 240

So hat jeder Datensatz eine Chance drangenommen zu werden. Je länger er in der Warteschleife verweilt, desto höher wird sein Punktesatz.

Posted on 9. April 2021 by Andreas in Allgemein

system-versioned temporal tables oder automatische Historie auf Tabellenbasis

funktioniert ab SQL Server 2016

/*
       System Versionisierung wieder deaktivieren
*/

--ALTER TABLE dbo.MyTable SET (SYSTEM_VERSIONING = OFF)
--ALTER TABLE dbo.MyTable DROP PERIOD FOR SYSTEM_TIME;
--GO
--ALTER TABLE [dbo].[MyTable] DROP CONSTRAINT [DF_MyTable_ValidFrom];
--GO
--ALTER TABLE [dbo].[MyTable] DROP COLUMN [ValidFrom];
--GO
--ALTER TABLE [dbo].[MyTable] DROP CONSTRAINT [DF_MyTable_ValidTo];
--GO
--ALTER TABLE [dbo].[MyTable] DROP COLUMN [ValidTo];

/*
       System Versionisierung aktivieren
*/

-- Neue Spalten hinzugügen: ValidFrom, ValidTo
ALTER TABLE dbo.MyTable ADD 
  [ValidFrom] datetime2(7) GENERATED ALWAYS AS ROW START HIDDEN CONSTRAINT DF_MyTable_ValidFrom DEFAULT DATEADD(SECOND,-1, SYSUTCDATETIME()),
  ValidTo datetime2(7) GENERATED ALWAYS AS ROW END HIDDEN CONSTRAINT DF_MyTable_ValidTo DEFAULT CONVERT(datetime2 (7), '9999-12-31 23:59:59.9999999'),
  PERIOD FOR SYSTEM_TIME ([ValidFrom], ValidTo);
GO

-- History Tabelle erzeugen
ALTER TABLE dbo.MyTable
SET(SYSTEM_VERSIONING = ON (HISTORY_TABLE = dbo.MyTable_History, DATA_CONSISTENCY_CHECK = ON))
GO

System Versionisierung wieder deaktivieren

--ALTER TABLE dbo.MyTable SET (SYSTEM_VERSIONING = OFF)

--ALTER TABLE dbo.MyTable DROP PERIOD FOR SYSTEM_TIME;

--GO

--ALTER TABLE [dbo].[MyTable] DROP CONSTRAINT [DF_MyTable_ValidFrom];

--GO

--ALTER TABLE [dbo].[MyTable] DROP COLUMN [ValidFrom];

--GO

--ALTER TABLE [dbo].[MyTable] DROP CONSTRAINT [DF_MyTable_ValidTo];

--GO

--ALTER TABLE [dbo].[MyTable] DROP COLUMN [ValidTo];

System Versionisierung aktivieren

-- Neue Spalten hinzugügen: ValidFrom, ValidTo

ALTER TABLE dbo.MyTable ADD

[ValidFrom] datetime2(7) GENERATED ALWAYS AS ROW START HIDDEN CONSTRAINT DF_MyTable_ValidFrom DEFAULT DATEADD(SECOND,-1, SYSUTCDATETIME()),

ValidTo datetime2(7) GENERATED ALWAYS AS ROW END HIDDEN CONSTRAINT DF_MyTable_ValidTo DEFAULT CONVERT(datetime2 (7), '9999-12-31 23:59:59.9999999'),

PERIOD FOR SYSTEM_TIME ([ValidFrom], ValidTo);

-- History Tabelle erzeugen

ALTER TABLE dbo.MyTable

SET(SYSTEM_VERSIONING = ON (HISTORY_TABLE = dbo.MyTable_History, DATA_CONSISTENCY_CHECK = ON))

Posted on 15. März 2021 by Andreas in SQL

SQL Column löschen inkl. aller Constraints

DECLARE @TableSchema NVARCHAR(255) = '';
DECLARE @TableName NVARCHAR(255) = '';
DECLARE @ColumnName NVARCHAR(255) = '';

DECLARE @sql NVARCHAR(MAX)
WHILE 1=1
BEGIN
    SELECT TOP 1 @sql = N'ALTER TABLE ' + @TableSchema + '.' + @TableName + ' DROP CONSTRAINT ['+dc.NAME+N']'
    FROM sys.default_constraints dc
    LEFT JOIN sys.columns c ON c.default_object_id = dc.object_id
    WHERE 		
        dc.parent_object_id = OBJECT_ID(@TableSchema + '.' + @TableName)
    AND c.name = @ColumnName
    IF @@ROWCOUNT = 0 BREAK
    EXEC (@sql)
END

IF EXISTS (SELECT 1
               FROM   INFORMATION_SCHEMA.COLUMNS
               WHERE  TABLE_SCHEMA=@TableSchema
            AND TABLE_NAME = @TableName
                      AND COLUMN_NAME = @ColumnName
                      )
  BEGIN
      EXEC ('ALTER TABLE ' + @TableSchema + '.' + @TableName + ' DROP COLUMN ' + @ColumnName)
  END
GO

DECLARE @TableSchema NVARCHAR(255) = '';

DECLARE @TableName NVARCHAR(255) = '';

DECLARE @ColumnName NVARCHAR(255) = '';

DECLARE @sql NVARCHAR(MAX)

WHILE 1=1

BEGIN

SELECT TOP 1 @sql = N'ALTER TABLE ' + @TableSchema + '.' + @TableName + ' DROP CONSTRAINT ['+dc.NAME+N']'

FROM sys.default_constraints dc

LEFT JOIN sys.columns c ON c.default_object_id = dc.object_id

WHERE

dc.parent_object_id = OBJECT_ID(@TableSchema + '.' + @TableName)

AND c.name = @ColumnName

IF @@ROWCOUNT = 0 BREAK

EXEC (@sql)

END

IF EXISTS (SELECT 1

FROM INFORMATION_SCHEMA.COLUMNS

WHERE TABLE_SCHEMA=@TableSchema

AND TABLE_NAME = @TableName

AND COLUMN_NAME = @ColumnName

)

BEGIN

EXEC ('ALTER TABLE ' + @TableSchema + '.' + @TableName + ' DROP COLUMN ' + @ColumnName)

END

Posted on 22. Januar 2021 by Andreas in SQL

Denn ich habe kein Gefallen am Tod dessen, der sterben muss, spricht Gott, der Herr. So kehrt denn um, und ihr sollt leben!

Nuxt3 mit Vuetify 3 – Teil 3: Entwickeln in Vue / Typescript

Nuxt3 mit Vuetify 3 – Teil 2: Layout

Nuxt3 mit Vuetify 3 – Teil 1: Installation

Template parsen in C#

Vue – Konstanten definieren

Vue – Directive

Cmd Pfad autocomplete funktioniert nicht

Applikationsdesign: Datensätze abarbeiten nach Punktesystem

system-versioned temporal tables oder automatische Historie auf Tabellenbasis

SQL Column löschen inkl. aller Constraints

Seiten

Neueste Beiträge

Neueste Kommentare

Archive

Denn ich habe kein Gefallen am Tod dessen, der sterben muss, spricht Gott, der Herr. So kehrt denn um, und ihr sollt leben!

Search this site

Seiten

Neueste Beiträge

Neueste Kommentare

Archive