Пры стварэнні не адлюстроўваецца кампанія ў спісе кампаній

[Gordonshik]

1. Заходим http://localhost/doika/doika/dashboard/campaigns/create заполняем формы нажимаем стварыць
2. Заходим http://localhost/doika/doika/dashboard/campaigns и видим, что в таблице стало на одну строку больше, но нет информации ни по одному из столбцов Ожидается добавление строки в таблице с информацией по каждому из столбцов, так:

   Тэставыя ўмовы

   • Платформа і версія: Windows10 LTSC Google Chrome версия 80.0.3987.122 (Официальная сборка), (64 бит) Firefox developer edition 74.0b9 (64-бит) Brave Version 1.4.95 Chromium: 80.0.3987.122 (Official Build) (64-bit)

[welcome[bot]]

Дзякуй за адкрыцце тваёй першага issue, сябра 😺!

[rizomaa]

@Gordonshik мы знайшлі карнявую багу перад тым, як зрабіць https://github.com/diglabby/doika/issues/488

Таму прыярытэт на гэту ішус. Папярэднюю пакуль выключаю

[Gordonshik]

Пока не понимаю с чего начать, пытался с vuetools разобраться, но пока никакого эффекта не дало.

[rizomaa]

@Gordonshik я таксама пароюся з гэтай задачай.

Фронт:

1. Адчыняю рэп і знаходжу кампанент https://github.com/diglabby/doika/blob/develop/resources/js/dashboard/views/Campaigns.vue

2. У ім метад: dataLoadProvider - на мой погляд гэта тое, што загружае дадзеныя. Гэта трэба чэкнуць, якія data вяртае, і тады можна рабіць прамежкавую выснову.

3. Наогул ці правяраў базу калі націскаеш дадаць кампанію? ці запісваецца яна у базе. Калі так, значыць тут: https://github.com/diglabby/doika/blob/develop/resources/js/dashboard/views/CampaignForm.vue усё харашо...

4. Калі не запісвае у базу. Трэба знаёсці метад які гэта робіць. Сходу ў мяне не знаёшлося ў вышэй абазначаным файле. Але можа ты больш уважлівы.

5. Ідзем далей. Я пакуль не дайшоў да дэтальнага вывучэння mixins (https://vuejs.org/v2/guide/mixins.html), але яны узгадваюцца ў апошнім з абазначаных кампанентаў і там зрабілі шмат правак неяк... https://github.com/diglabby/doika/commit/799bf2b01ace25afc642be91e9c2bbd0da64a439#diff-240692714e18f308469a295afd30ab56 таму тут трэба правяраць.

Бэк:

Магчыма праблема не ў франце, а бэку... Таму зраблю аналіх наколькі разумею архітэктуру laravel.

1. Запусціў у корне праекта php artisan route:list --path=doika/dashboard/api/campaigns/ Атрымаў: +--------+----------+------------------------------------------+----------------------------+---------------------------------------------------------------------+------------+ | | GET|HEAD | doika/dashboard/api/campaigns/{campaign} | dashboard.campaigns.show | Diglabby\Doika\Http\Controllers\Dashboard\CampaignController@show | api,auth | | | PUT | doika/dashboard/api/campaigns/{campaign} | dashboard.campaigns.update | Diglabby\Doika\Http\Controllers\Dashboard\CampaignController@update | api,auth | | | DELETE | doika/dashboard/api/campaigns/{campaign} | dashboard.campaigns.delete | Diglabby\Doika\Http\Controllers\Dashboard\CampaignController@delete | api,auth | +--------+----------+------------------------------------------+----------------------------+---------------------------------------------------------------------+------------+ Што гэта значыць?

2. Я не бачу метада якія дадае кампанію. Таму іду ў код... І гляджу на кантролеры уважліва: https://github.com/diglabby/doika/tree/develop/app/Http/Controllers/Dashboard

Мне найбольш спадабаўся гэты. Па назве ён павінен выконваць функцыю у тым ліку дадавання новай кампаніі... Вось гэты код падобны на праўду, але

public function store(Request $request): \JsonSerializable { $this->validate($request, [ 'name' => ['required', 'max:255'], 'description' => ['required', 'max:488'], 'target_amount' => ['required', 'integer', 'min:1'], 'currency' => ['required', 'string', 'size:3'], 'start_at' => ['required', 'date'], 'finish_at' => ['required', 'date', 'after:start_at'], ]); $campaign = new Campaign($request->all()); $campaign->save(); return $campaign; }

але ў яго няма эндпоінтаў. гэта дзіўна таму, што ў іншых праектах я бачыў такія энд поінты.

3. Але не будзем адступаць. Паглядзім знакамітую тэчку з роўтамі: https://github.com/diglabby/doika/tree/develop/routes тут хапае рознага смачнага. па назве мне імпануе dashboard_api.php заглядваю

4. Вось тут усё знаходжу Route::post('/campaigns', 'Dashboard\CampaignController@store')->name('dashboard.campaigns.store');

Ёсць і гэта добра... Яго трэба тэсціць. Як разумею гэта чатска працы бэкэнда, таму пакуль не сунуся. Чаму не выводзіла ў роўтах вышэй... эх таму што апошні слэш трэба было прыбраць. Але век жыві век вучыся.

Падсумую: Пакуль найбольш верагодна што нешта ў франце. Тут трэба заняцца адладкай, таму тут паўстае пытанне, якімі інструментамі адладкі я карыстася... Вось тут ёсць аж 20: https://www.developerdrive.com/best-tools-vue-js-development/

@Gordonshik Я спадзяюся табе было нешта карыснае з маіх разважанняў. Наступным крокам я буду ўсё ажладжваць і глядзець кансольку+) Можа калі нешта адкапаеш пішы. Цікава будзе цябе паслухаць

[rizomaa]

@Gordonshik ёсць дзве навіны, абедзве харошыя.

1. Харошая навіна 1. Пры даданні кампаніі, яна трапляе ў базу, але пакуль не выводзіцца. Што гэта значыць?

2. Хароша навіна 2. Гэта значыць, што мы звужаем скоўп пошука памылкі (які абазначыў тут https://github.com/diglabby/doika/issues/684#issuecomment-596721034) і цалкам пагружаемся ў вывад спісу кампаній. Гэта значыць, што нам трэба аналізаваць 139-142 радкі файла: https://github.com/diglabby/doika/blob/develop/resources/js/dashboard/views/Campaigns.vue

    dataLoadProvider(ctx) {
      let data = this.$refs.datasource.loadData(ctx.sortBy, ctx.sortDesc)
      return data
    },

3. Толькі пачаў авалодваць прыладай Vue для хрома..., якія вынікі ён паказвае? пакуль такія. я турбуюся, што датасорс пусты... ці нейкім рэферэнсам на кампанент....

4. Парыўся глыбей... тут такая масіўная ўкладзенасць кампанентаў адзін у адзін. Але ёсць званочак. Бачна, што і props і data - усё пустое... значыць штосці з вяртаннем дадзеных не адпрацавана.

Падсумую

1. Дапускаю тое, што фронт не карэктна забірае дадзеныя з бэка (у сувязі: мадэль дадзеных змянілася? ці напрыклад нейкая памылка выподкава закамміцілася?)
2. Таксама магчыма бэк змяніў роўты і фронт іх не ведае.

Наступныя дзеянні:

1. Праглядзець, як фронт забірае дзаеныя з бэка. Гэта рыць вышэй пазначаныя функцыі.
2. Паглядзець што аддае бэк.

Спадзяюся дапамог табе =) Наступны крок можа быць вырашэнне задачы, таму чакаю больш тваёй ініцыятывы тут. Ці можа маеш альтэрнатыўныя думкі?

[rizomaa]

Мяне панесла... працягваю лав сторы з гэтай карткай =)

1. Праверыў кансоль браузера.

`dashboard.js:122443 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "busy"

found in

---> at resources/js/dashboard/components/Plugins/DataTable.vue

at resources/js/dashboard/views/Campaigns.vue at resources/js/dashboard/containers/Full.vue at resources/js/dashboard/App.vue ` Бачна нейкая бага ў кампаненце **DataTable.vue** гэты кампанент трэба будзе парыць. асобна. Але цікава іншае... 2. Тая ж кансоль рэжым Network - XHR нейкія дадзеныя ўсё ж вяртаюць. Прычым тыя, што, мы чакаем, будуць у табліцы.  Таму скоўп задачы яшчэ больш звузіўся. Тут важны аналіз коду: https://github.com/diglabby/doika/blob/develop/resources/js/dashboard/components/Plugins/DataTable.vue @Gordonshik Рашыш самастойна?

[Gordonshik]

@rizomaa попробую, конечно придется неслабо мозгами пораскинуть, но я постараюсь. За проделанную работу - спасибо, интересный анализ. Самому было интересно почитать о том, как кто-то со стороны это делает.

[rizomaa]

Падзялюся наступнымі болямі і дасягненнямі.

1. Пасля учорашняй сустрэчы і парады ад @Tyuba4 капаць у бок я прачытаў пару арктыкулаў пра slot-scope (дарэчы зараз ужо іншы сінтаксіс https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax)

Самі артыкулы.

• https://vuejsdevelopers.com/2017/10/02/vue-js-scoped-slots/
• https://www.smashingmagazine.com/2019/07/using-slots-vue-js/
• https://medium.com/binarcode/understanding-scoped-slots-in-vue-js-db5315a42391 (вось тут як таблічка апрацоўваецца)
• https://alligator.io/vuejs/scoped-component-slots/

Шчыра кажучы нешта стала вядома, але нешта засталося загадкай...

2. пасля паглядзеў на апісанне b-table, але гэта, шчыра кажучы, эпік https://bootstrap-vue.js.org/docs/components/table/

Таму сфакусаваўся на асноўных пытаннях якія мяне цікавяць.

3.1. Пытанне адзін. Чаму колькасць радкоў, якая выводзіцца адпавядае колькасці запісаў кампаній у базе. Гэтак і павінна быць. Гэта значыць, што ў адрозненне ад іншых параметраў, колькасць запісаў запыта перадаецца. 3.2. Праз, які атрыбут або пераменную перадаецца гэта колькасць? 3.3. Праз, які атрыбут перадаюцца дадзеныя табліцы.

4. Разбяру па кавалачкам кожны атрыбут табліцы. У гэтым мне дапаможа спасылка на b-table (яна вышэй)

<b-table ref="datatable"
                 striped
                 bordered
                 show-empty
                 responsive
                 no-local-sorting
                 :empty-text="$t('alerts.admin.common.search.noResult')"
                 :empty-filtered-text="$t('alerts.admin.common.search.noMatchResult')"
                 :fields="fields"
                 :items="dataLoadProvider"
                 sort-by="campaign.created_at"
                 :sort-desc="true"
        >

Нарэшце, самі атрыбуты:

ref="datatable" - гэты элемент звязвае наўпрост табліцу кампаній (js/dashboard/views/Campaigns.vue) з кампанетай DataTable.vue, якая адмаўлёўвае гэту і шмат іншых табліц апы (Плацяжы, Карыстачы, Кампаніі). https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

striped - стыль Add zebra-striping to the table rows within the 

bordered - стыль. For borders on all sides of the table and cells.

show-empty - When enabled, and there are no item records to show, shows a message that there are no rows to show (па змощчані - ложна)

responsive - атрыбут Generate a responsive table to make it scroll horizontally.

no-local-sorting - адключана сарціровачка Disabled the internal sorting routine, and expects the user to provde the items sorted. Sorting controls will still be available

:empty-text="$t('alerts.admin.common.search.noResult')" - паказвае кастамны тэкст, калі таблічка пустая. Заўважым, што наш выпадак не такі. Але калі вы працуеце з пачатковым інстансам Doika будзе такі напачатку выводзіцца. Сам тэкст можна здабыць у тэчцыперакладаў.

:empty-filtered-text="$t('alerts.admin.common.search.noMatchResult')" - паказвае кастамны тэкст, калі бачна, што табліца пуста пасля фільтравання.

:fields="fields" - гэта масіў загалоўкаў табліцы(аў) Пра яго можна тут шмат прачытаць https://bootstrap-vue.js.org/docs/components/table/#fields-column-definitions

:items="dataLoadProvider" - гэта найбольш цікавае поле, бо менавіта яно у нас не выводзіцца. Дэтальна паглядзім на як завершым разглядаць іншыя атрыбуты табліцы.

sort-by="campaign.created_at" - гэта props, які указвае на поле па якому адбываецца сартыроўка. :sort-desc="true" - а гэта указвае на тып сартырозкі па ўбыванню даты, актыўнае значэнне.

Спынімся на метадзе dataLoadProvider.

Бо, на мой погляд, менавіта ў ім адбываюцца ўсе цуды.

dataLoadProvider(ctx) {
      let data = this.$refs.datasource.loadData(ctx.sortBy, ctx.sortDesc)
      return data
    },

Як бачым, ён з дапамогай $refs пракідвання, дазваляе нам задзейнічаць метад сваёй дачэрняй кампаненты, якую мы ўжо ўзгадвалі DataTable.vue Вось так выглядае сам метад:

 async loadData(sortBy, sortDesc) {
      try {
          this.isBusy = true
          let { data } = await axios.get(this.$app.route(this.searchRoute), {
              params: {
                  page: this.currentPage,
                  perPage: this.perPage
              }
          })
          this.busy = false
          this.totalRows = data.meta.total
          this.perPage = data.meta.per_page
        return data.data
      } catch (e) {
          console.log(e)
        this.$app.error(e)
        return []
      }
    },

калі адкаціць гэты метад да папярэдняга камміта, ён выглядаў больш сціпла:

async loadData(sortBy, sortDesc) {
      try {
        let { data } = await axios.get(this.$app.route(this.searchRoute))
        console.log(data.data)        
    return data.data
      } catch (e) {
        console.log(e)
        this.$app.error(e)
        return []
      }
    },

Калі паглядзець на ачышчаную версію функцыі, ўто мы маем:

1. вяртаецца аб'ект data, пра які ўзгадвалі
2. ёсць нейкія дзадзеныя (prop) this.$app.route(this.searchRoute) , якія ў секцыі prop прызначаюцца як null
3. секцыя catch выводзіць памылкі...

На сёння заканчваю гісторыю....

Вось тут камміт без апошняга busy бага https://github.com/diglabby/doika/blob/b9f9c4b0e9a05315aae7b0cf073dfcdb1cadfae3/resources/js/dashboard/components/Plugins/DataTable.vue

[rizomaa]

Весткі з палёў

1. Працягваю пошукі з мінулага разу. В'ю тулса паказвае дзіўны з'явы... Напрыклад, бачна як звязваюцца элементы items з функцыяй правайдэрам.

Гэта ляжыць у массіве props, калі перамесіцмся ніжэй у метада data(), убачым іншую цікавую з'яву...

2. Тут адлюстрозваецца менавіта той масіў у якім утрымліваюцца усе запісы кампаніі.

Што з гэтага вынікае. У нас усё ёсць! Але у нас не выводзіць усё, што мы хочам, каб выводзіла...

3. Трохі пачытаўшы дакументацыю. Афармленне slot-scope якое выкарыстоўваецца ў праекце састарэла (https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots). Яно даносілася да версіі 2.5 а зараз 2.6

Раблю дапушэчнні на праблему сумяшчальнасці версій slot-scope у В'ю

<template slot="checkbox" **slot-scope="row"**>
            <b-form-checkbox :value="row.item.id" v-model="selected"></b-form-checkbox>
          </template>

Якія наступныя крокі магчымы:

1. Перааформіць усе палі вывада slot-scope для сучаснай версіі. Тут шмат прыкладаў, трэба іх трохі раскурыць https://bootstrap-vue.js.org/docs/components/table/#scoped-field-slots
2. Я напачатку думаў, што праблема у павайдэры дадзеных. Але гэта не так, бо вывад дадзеных правайдэра наладжаны, але праблема засталася. Пра дата правайдэры распавяду наступны раз.

@Gordonshik @Tyuba4 якія ў вас вынікі?

[Tyuba4]

@rizomaa Пока результатов никаких, попробую сейчас тоже позаменять slotы

[Tyuba4]

@rizomaa Что за тулза для Vue?

[Gordonshik]

@rizomaa да по сути статью перелопатить, field-slots актуализировать

[Gordonshik]

@Tyuba4 расширение для браузера Vue Tools

[Gordonshik]

@Tyuba4

[Tyuba4]

@Gordonshik Спасибо

[Tyuba4]

@rizomaa @Gordonshik Если залезть в отладчике в <BTable> глубже то имеем массив с двумя пустыми членами

[rizomaa]

@Gordonshik @Tyuba4 важная фішка дата правайдэр. Я пакуль яго перапісаў. Таму мае скрыны менавіта з новага датаправайдэра. Сёння пазней выкачу ПР.

@Tyuba4 а што ў цябе ва ўкладцы data?

[Gordonshik]

@Tyuba4 там столько членов, сколько созданных компаний

[rizomaa]

@Gordonshik @Tyuba4 рашэнне прапанаваў, глядзіце

@Tyuba4 можаш глянуць код і прыняць гэты рэквэст.

[rizomaa]

зы Рабіў усё з мінімальнай колькасцю правак, але яе бы змяніў падыход і спрасціў шаблоны. Але хай пакуль будзе гэты. Можа калі абкатаемся на некалькіх задачах яшчэ, зробім спрашэчнне

[Tyuba4]

@rizomaa А ты проверял этот пул, у тебя все заработало?

[rizomaa]

@Tyuba4 каншне =) спецом зрабіў свежую ўсталёўку з develop. у цябе ёсць пытанні па працы фічы?

[Gordonshik]

@rizomaa закрываем?

[rizomaa]

@rizomaa закрываем?

@Gordonshik так зачыняем. але перад гэтым трэба склейваць рэквэсты. апісаў у самім ПР

[rizomaa]

стоп.. у Виктара пытанне... @Tyuba4 як у цябе там атрымалася прымяніць?

@Gordonshik дарэчы у цябе працуюць змены?

[Gordonshik]

@rizomaa да, вроде все окей