From ce90e59c004fd66890627dc4fff3511663c85f97 Mon Sep 17 00:00:00 2001 From: Mosab Ibrahim Date: Tue, 5 May 2020 22:38:01 +0200 Subject: [PATCH 1/2] Fixing code duplication --- package-lock.json | 110 ++++++++++++++++++-- package.json | 1 + src/Models/data.js | 36 +++---- src/components/Master.vue | 11 +- src/components/UI/Alert/NotificationPop.vue | 49 +++------ src/components/Utilities/ViewComponent.vue | 17 ++- src/main.js | 8 +- 7 files changed, 165 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5b1fb85..8d170c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1827,6 +1827,11 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", "dev": true }, + "abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" + }, "accepts": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", @@ -3129,8 +3134,7 @@ "commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" }, "commondir": { "version": "1.0.1", @@ -3208,6 +3212,15 @@ "typedarray": "^0.0.6" } }, + "config-chain": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz", + "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==", + "requires": { + "ini": "^1.3.4", + "proto-list": "~1.2.1" + } + }, "connect-history-api-fallback": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz", @@ -4207,6 +4220,33 @@ "safer-buffer": "^2.1.0" } }, + "editorconfig": { + "version": "0.15.3", + "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", + "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==", + "requires": { + "commander": "^2.19.0", + "lru-cache": "^4.1.5", + "semver": "^5.6.0", + "sigmund": "^1.0.1" + }, + "dependencies": { + "lru-cache": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", + "requires": { + "pseudomap": "^1.0.2", + "yallist": "^2.1.2" + } + }, + "yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=" + } + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -6382,6 +6422,11 @@ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, + "ini": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" + }, "inquirer": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz", @@ -6883,6 +6928,25 @@ } } }, + "js-beautify": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.11.0.tgz", + "integrity": "sha512-a26B+Cx7USQGSWnz9YxgJNMmML/QG2nqIaL7VVYPCXbqiKz8PN0waSNvroMtvAK6tY7g/wPdNWGEP+JTNIBr6A==", + "requires": { + "config-chain": "^1.1.12", + "editorconfig": "^0.15.3", + "glob": "^7.1.3", + "mkdirp": "~1.0.3", + "nopt": "^4.0.3" + }, + "dependencies": { + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==" + } + } + }, "js-message": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz", @@ -7755,6 +7819,15 @@ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz", "integrity": "sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==" }, + "nopt": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz", + "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==", + "requires": { + "abbrev": "1", + "osenv": "^0.1.4" + } + }, "normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", @@ -8056,6 +8129,11 @@ "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=", "dev": true }, + "os-homedir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=" + }, "os-locale": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz", @@ -8070,8 +8148,16 @@ "os-tmpdir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", - "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", - "dev": true + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=" + }, + "osenv": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", + "requires": { + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" + } }, "p-defer": { "version": "1.0.0", @@ -9121,6 +9207,11 @@ "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=", "dev": true }, + "proto-list": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", + "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=" + }, "proxy-addr": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", @@ -9140,8 +9231,7 @@ "pseudomap": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", - "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", - "dev": true + "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=" }, "psl": { "version": "1.8.0", @@ -9759,8 +9849,7 @@ "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "dev": true + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" }, "send": { "version": "0.17.1", @@ -9960,6 +10049,11 @@ "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==", "dev": true }, + "sigmund": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz", + "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=" + }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", diff --git a/package.json b/package.json index 2bdf3c9..9e7f93e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "autoprefixer": "^9.7.6", "core-js": "^3.6.4", "highlight.js": "^10.0.2", + "js-beautify": "^1.11.0", "tailwindcss": "^1.4.4", "vue": "^2.6.11", "vue-clipboard2": "^0.3.1" diff --git a/src/Models/data.js b/src/Models/data.js index e2b4ced..885908e 100644 --- a/src/Models/data.js +++ b/src/Models/data.js @@ -2,25 +2,25 @@ export default [ { name: 'alert', components: [ - { name: 'notification-Pop' } + { name: 'Notification Pop' } ], }, - { - name: 'cards', - components: [ - { name: 'article' }, - { name: 'product' }, - { name: 'product-evaluation' }, - { name: 'testimonial' }, - { name: 'user-details' }, - ], - }, - { - name: 'forms', - components: [ - { name: 'login' }, - { name: 'subscribe' }, - ], - }, + // { + // name: 'cards', + // components: [ + // { name: 'article' }, + // { name: 'product' }, + // { name: 'product-evaluation' }, + // { name: 'testimonial' }, + // { name: 'user-details' }, + // ], + // }, + // { + // name: 'forms', + // components: [ + // { name: 'login' }, + // { name: 'subscribe' }, + // ], + // }, ]; \ No newline at end of file diff --git a/src/components/Master.vue b/src/components/Master.vue index 18c2e82..9ddf5f5 100644 --- a/src/components/Master.vue +++ b/src/components/Master.vue @@ -29,8 +29,11 @@

- + +
+ +
+
@@ -46,6 +49,7 @@ import Login from "./UI/Forms/Login"; import Subscribe from "./UI/Forms/Subscribe"; import Component from "../Models/Component"; + import ViewComponent from "./Utilities/ViewComponent"; export default { components: { @@ -56,7 +60,8 @@ Product, ProductEvaluation, Login, - Subscribe + Subscribe, + ViewComponent }, data() { return { diff --git a/src/components/UI/Alert/NotificationPop.vue b/src/components/UI/Alert/NotificationPop.vue index 73cb097..3fdd21c 100644 --- a/src/components/UI/Alert/NotificationPop.vue +++ b/src/components/UI/Alert/NotificationPop.vue @@ -1,41 +1,26 @@ \ No newline at end of file diff --git a/src/components/Utilities/ViewComponent.vue b/src/components/Utilities/ViewComponent.vue index 2e42919..215ab22 100644 --- a/src/components/Utilities/ViewComponent.vue +++ b/src/components/Utilities/ViewComponent.vue @@ -33,10 +33,12 @@ \ No newline at end of file diff --git a/src/main.js b/src/main.js index 80bfd1b..ca5519a 100644 --- a/src/main.js +++ b/src/main.js @@ -2,10 +2,14 @@ import Vue from 'vue' import App from './App.vue' import VueClipboard from 'vue-clipboard2'; -Vue.config.productionTip = false +Vue.config.productionTip = false; Vue.use(VueClipboard); +Vue.filter('toId', (componentName) => { + return componentName.toLowerCase().replace(' ', '-') +}); + new Vue({ render: h => h(App), -}).$mount('#app') +}).$mount('#app'); \ No newline at end of file From ee2f36a0f65a6add2e31f3bc7790bb65100febb8 Mon Sep 17 00:00:00 2001 From: Mosab Ibrahim Date: Tue, 5 May 2020 23:35:26 +0200 Subject: [PATCH 2/2] Wrapping up code duplication --- src/Models/data.js | 36 ++--- src/components/Master.vue | 6 +- src/components/UI/Cards/Article.vue | 59 ------- src/components/UI/Cards/ArticleCard.vue | 39 +++++ src/components/UI/Cards/Product.vue | 58 +++---- .../UI/Cards/ProductWithEvaluation.vue | 59 ++----- src/components/UI/Cards/Testimonial.vue | 55 +++---- src/components/UI/Cards/UserDetails.vue | 41 +---- src/components/UI/Forms/Login.vue | 151 +++++++----------- src/components/UI/Forms/Subscribe.vue | 26 +-- 10 files changed, 174 insertions(+), 356 deletions(-) delete mode 100644 src/components/UI/Cards/Article.vue create mode 100644 src/components/UI/Cards/ArticleCard.vue diff --git a/src/Models/data.js b/src/Models/data.js index 885908e..492f58b 100644 --- a/src/Models/data.js +++ b/src/Models/data.js @@ -1,26 +1,26 @@ export default [ { - name: 'alert', + name: 'Alert', components: [ { name: 'Notification Pop' } ], }, - // { - // name: 'cards', - // components: [ - // { name: 'article' }, - // { name: 'product' }, - // { name: 'product-evaluation' }, - // { name: 'testimonial' }, - // { name: 'user-details' }, - // ], - // }, - // { - // name: 'forms', - // components: [ - // { name: 'login' }, - // { name: 'subscribe' }, - // ], - // }, + { + name: 'Cards', + components: [ + { name: 'Article Card' }, + { name: 'Product' }, + { name: 'Product Evaluation' }, + { name: 'Testimonial' }, + { name: 'User Details' }, + ], + }, + { + name: 'Forms', + components: [ + {name: 'Login'}, + {name: 'Subscribe'}, + ], + }, ]; \ No newline at end of file diff --git a/src/components/Master.vue b/src/components/Master.vue index 9ddf5f5..826a5ca 100644 --- a/src/components/Master.vue +++ b/src/components/Master.vue @@ -29,7 +29,7 @@

- +
@@ -43,7 +43,7 @@ import NotificationPop from "./UI/Alert/NotificationPop"; import UserDetails from "./UI/Cards/UserDetails"; import Testimonial from "./UI/Cards/Testimonial"; - import Article from "./UI/Cards/Article"; + import ArticleCard from "./UI/Cards/ArticleCard"; import Product from "./UI/Cards/Product"; import ProductEvaluation from "./UI/Cards/ProductWithEvaluation"; import Login from "./UI/Forms/Login"; @@ -56,7 +56,7 @@ NotificationPop, UserDetails, Testimonial, - Article, + ArticleCard, Product, ProductEvaluation, Login, diff --git a/src/components/UI/Cards/Article.vue b/src/components/UI/Cards/Article.vue deleted file mode 100644 index a0da6ba..0000000 --- a/src/components/UI/Cards/Article.vue +++ /dev/null @@ -1,59 +0,0 @@ - - - diff --git a/src/components/UI/Cards/ArticleCard.vue b/src/components/UI/Cards/ArticleCard.vue new file mode 100644 index 0000000..bb6ce0e --- /dev/null +++ b/src/components/UI/Cards/ArticleCard.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/components/UI/Cards/Product.vue b/src/components/UI/Cards/Product.vue index f4e24d1..3b54b18 100644 --- a/src/components/UI/Cards/Product.vue +++ b/src/components/UI/Cards/Product.vue @@ -1,47 +1,31 @@ diff --git a/src/components/UI/Cards/ProductWithEvaluation.vue b/src/components/UI/Cards/ProductWithEvaluation.vue index 6d2d4f8..ed64af4 100644 --- a/src/components/UI/Cards/ProductWithEvaluation.vue +++ b/src/components/UI/Cards/ProductWithEvaluation.vue @@ -1,12 +1,13 @@ diff --git a/src/components/UI/Cards/Testimonial.vue b/src/components/UI/Cards/Testimonial.vue index 13d33a2..15e757f 100644 --- a/src/components/UI/Cards/Testimonial.vue +++ b/src/components/UI/Cards/Testimonial.vue @@ -1,45 +1,30 @@ diff --git a/src/components/UI/Cards/UserDetails.vue b/src/components/UI/Cards/UserDetails.vue index 36ebb15..fa3ff5f 100644 --- a/src/components/UI/Cards/UserDetails.vue +++ b/src/components/UI/Cards/UserDetails.vue @@ -1,6 +1,5 @@ \ No newline at end of file diff --git a/src/components/UI/Forms/Subscribe.vue b/src/components/UI/Forms/Subscribe.vue index 02fbc71..9091c5f 100644 --- a/src/components/UI/Forms/Subscribe.vue +++ b/src/components/UI/Forms/Subscribe.vue @@ -1,6 +1,5 @@